{"id":324399,"date":"2021-06-05T15:00:16","date_gmt":"2021-06-05T15:00:16","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=324399"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=324399","title":{"rendered":"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438 \u0425\u043e\u043f\u0444\u0438\u043b\u0434\u0430 \u043d\u0430 JavaScript"},"content":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/435\/a73\/2f3\/435a732f30d61487034dc0efce8914ce.png\" alt=\"\" title=\"\" width=\"472\" height=\"331\"><figcaption><\/figcaption><\/figure>\n<p>\u0421\u0442\u043e\u043b\u043a\u043d\u0443\u0432\u0448\u0438\u0441\u044c \u0432&nbsp;\u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0438\u0442\u0435\u0442\u0435 \u0441&nbsp;\u043d\u0435\u0439\u0440\u043e\u043d\u043d\u044b\u043c\u0438 \u0441\u0435\u0442\u044f\u043c\u0438, \u043e\u0434\u043d\u043e\u0439 \u0438\u0437&nbsp;\u043b\u044e\u0431\u0438\u043c\u044b\u0445 \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0441\u0442\u0430\u043b\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0441\u0435\u0442\u044c \u0425\u043e\u043f\u0444\u0438\u043b\u0434\u0430. \u042f&nbsp;\u0431\u044b\u043b \u0443\u0434\u0438\u0432\u043b\u0435\u043d, \u0447\u0442\u043e \u043e\u043d\u0430 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0432&nbsp;\u0441\u043f\u0438\u0441\u043a\u0435 \u043b\u0430\u0431\u043e\u0440\u0430\u0442\u043e\u0440\u043d\u044b\u0445 \u0440\u0430\u0431\u043e\u0442, \u0432\u0435\u0434\u044c \u0435\u0435&nbsp;\u0440\u0430\u0431\u043e\u0442\u0443 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438&nbsp;\u043e\u043d\u0430 \u043d\u0435&nbsp;\u0442\u0430\u043a \u0441\u043b\u043e\u0436\u043d\u0430 \u0432&nbsp;\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. <\/p>\n<p>\u0412&nbsp;\u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u0438 \u0425\u043e\u043f\u0444\u0438\u043b\u0434\u0430, \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u0443\u0447\u0435\u043d\u043d\u043e\u0439 \u043d\u0430&nbsp;\u044d\u0442\u0430\u043b\u043e\u043d\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445.<\/p>\n<p>\u042f&nbsp;\u043f\u043e\u0441\u0442\u0430\u0440\u0430\u043b\u0441\u044f \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e \u0438&nbsp;\u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0449\u0435 \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0439 \u043f\u0440\u044f\u043c\u043e \u0432&nbsp;\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0441&nbsp;\u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u044c\u044e, \u043e\u0431\u0443\u0447\u0438\u0442\u044c \u0441\u0435\u0442\u044c \u043d\u0430&nbsp;\u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0440\u0443\u0447\u043d\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043e\u0431\u0440\u0430\u0437\u0430\u0445 \u0438&nbsp;\u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0435\u0451&nbsp;\u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430&nbsp;\u0438\u0441\u043a\u0430\u0436\u0435\u043d\u043d\u044b\u0445 \u043e\u0431\u0440\u0430\u0437\u0430\u0445.<\/p>\n<p>\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438&nbsp;\u043d\u0430 <a href=\"https:\/\/github.com\/v0xat\/js-neural-networks\/tree\/master\/hopfield_network\" rel=\"noopener noreferrer nofollow\">Github<\/a> \u0438 <a href=\"https:\/\/soanyway.vercel.app\/nn\/hopfield\/demo.html\" rel=\"noopener noreferrer nofollow\">\u0434\u0435\u043c\u043e<\/a>.<\/p>\n<p>\u0414\u043b\u044f&nbsp;\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438&nbsp;\u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f:<\/p>\n<ul>\n<li>\n<p>\u0411\u0440\u0430\u0443\u0437\u0435\u0440<\/p>\n<\/li>\n<li>\n<p>\u0411\u0430\u0437\u043e\u0432\u043e\u0435&nbsp;\u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435&nbsp;\u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u0435\u0439<\/p>\n<\/li>\n<li>\n<p>\u0411\u0430\u0437\u043e\u0432\u044b\u0435&nbsp;\u0437\u043d\u0430\u043d\u0438\u044f&nbsp;JavaScript&nbsp;\/&nbsp;HTML<\/p>\n<\/li>\n<\/ul>\n<h2>\u041d\u0435\u043c\u043d\u043e\u0433\u043e&nbsp;\u0442\u0435\u043e\u0440\u0438\u0438<\/h2>\n<p>\u041d\u0435\u0439\u0440\u043e\u043d\u043d\u0430\u044f \u0441\u0435\u0442\u044c \u0425\u043e\u043f\u0444\u0438\u043b\u0434\u0430 (\u0430\u043d\u0433\u043b. Hopfield network)&nbsp;\u2014 \u043f\u043e\u043b\u043d\u043e\u0441\u0432\u044f\u0437\u043d\u0430\u044f \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u0430\u044f \u0441\u0435\u0442\u044c \u0441&nbsp;\u0441\u0438\u043c\u043c\u0435\u0442\u0440\u0438\u0447\u043d\u043e\u0439 \u043c\u0430\u0442\u0440\u0438\u0446\u0435\u0439 \u0441\u0432\u044f\u0437\u0435\u0439. \u0422\u0430\u043a\u0430\u044f \u0441\u0435\u0442\u044c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0430 \u0434\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u0441\u0441\u043e\u0446\u0438\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u043f\u0430\u043c\u044f\u0442\u0438, \u043a\u0430\u043a \u0444\u0438\u043b\u044c\u0442\u0440, \u0430&nbsp;\u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438. <\/p>\n<p>\u0421\u0435\u0442\u044c \u0425\u043e\u043f\u0444\u0438\u043b\u0434\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043e\u0434\u043d\u043e\u0440\u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u0431\u0435\u0437 \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0435\u0435&nbsp;\u043d\u0435\u0439\u0440\u043e\u043d\u043e\u0432. \u0415\u0451&nbsp;\u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437&nbsp;\u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u044f \u043d\u0435\u0439\u0440\u043e\u043d\u043e\u0432, \u0447\u0438\u0441\u043b\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0447\u0438\u0441\u043b\u043e\u043c \u0432\u0445\u043e\u0434\u043e\u0432 \u0438&nbsp;\u0432\u044b\u0445\u043e\u0434\u043e\u0432 \u0441\u0435\u0442\u0438. \u041a\u0430\u0436\u0434\u044b\u0439 \u043d\u0435\u0439\u0440\u043e\u043d \u0441\u0435\u0442\u0438 \u0441\u0432\u044f\u0437\u0430\u043d \u0441\u043e&nbsp;\u0432\u0441\u0435\u043c\u0438 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043d\u0435\u0439\u0440\u043e\u043d\u0430\u043c\u0438, \u0430&nbsp;\u0442\u0430\u043a\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u043e\u0434\u0438\u043d \u0432\u0445\u043e\u0434, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0432\u043e\u0434 \u0441\u0438\u0433\u043d\u0430\u043b\u0430.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8c9\/54a\/1e2\/8c954a1e2855727d7e51402c9328c916.png\" alt=\"\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u0430\u044f \u0441\u0445\u0435\u043c\u0430 \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u0438 \u0425\u043e\u043f\u0444\u0438\u043b\u0434\u0430\" title=\"\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u0430\u044f \u0441\u0445\u0435\u043c\u0430 \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u0438 \u0425\u043e\u043f\u0444\u0438\u043b\u0434\u0430\" width=\"480\" height=\"384\"><figcaption>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u0430\u044f \u0441\u0445\u0435\u043c\u0430 \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u0438 \u0425\u043e\u043f\u0444\u0438\u043b\u0434\u0430<\/figcaption><\/figure>\n<p><strong>\u0412 \u043e\u0431\u0449\u0435\u043c \u0432\u0438\u0434\u0435 \u0437\u0430\u0434\u0430\u0447\u0430, \u0440\u0435\u0448\u0430\u0435\u043c\u0430\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u044c\u044e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0441\u0441\u043e\u0446\u0438\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u043f\u0430\u043c\u044f\u0442\u0438, \u0444\u043e\u0440\u043c\u0443\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c. <\/strong>\u0418\u0437\u0432\u0435\u0441\u0442\u0435\u043d \u043d\u0430\u0431\u043e\u0440 \u0434\u0432\u043e\u0438\u0447\u043d\u044b\u0445 \u0441\u0438\u0433\u043d\u0430\u043b\u043e\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u044d\u0442\u0430\u043b\u043e\u043d\u043d\u044b\u043c\u0438. \u0421\u0435\u0442\u044c \u0434\u043e\u043b\u0436\u043d\u0430 \u0443\u043c\u0435\u0442\u044c \u0438\u0437&nbsp;\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430, \u043f\u043e\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430&nbsp;\u0432\u0445\u043e\u0434, \u00ab\u0432\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u044c\u00bb \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u044d\u0442\u0430\u043b\u043e\u043d\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0437\u0435\u0446 (\u0435\u0441\u043b\u0438 \u0442\u0430\u043a\u043e\u0439 \u0435\u0441\u0442\u044c).<\/p>\n<p>\u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0435\u0442\u0438:<\/p>\n<ol>\n<li>\n<p>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<br \/>\u0412\u0435\u0441\u0430 \u043d\u0435\u0439\u0440\u043e\u043d\u043e\u0432 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0444\u043e\u0440\u043c\u0443\u043b\u0435:<\/p>\n<p><img decoding=\"async\" class=\"formula inline\" source=\"w_{ij}=\\left\\{\\begin{matrix} \\sum_{k=1}^{m} x_{i}^{k} * x_{j}^{k}   &amp; i \\neq j \\\\0,  &amp; i=j \\end{matrix}\\right.\" alt=\"w_{ij}=\\left\\{\\begin{matrix} \\sum_{k=1}^{m} x_{i}^{k} * x_{j}^{k}   &amp; i \\neq j \\\\0,  &amp; i=j \\end{matrix}\\right.\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/941\/73d\/b8e\/94173db8e55463ea492af50f7f1eaa9a.svg\"><\/p>\n<p>\u0433\u0434\u0435 <img decoding=\"async\" class=\"formula inline\" source=\"m\" alt=\"m\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/17b\/d35\/a95\/17bd35a95c901677363e61a50509812f.svg\">\u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0431\u0440\u0430\u0437\u043e\u0432&nbsp;<br \/><img decoding=\"async\" class=\"formula inline\" source=\"x_{i}^{k}, x_{j}^{k}\" alt=\"x_{i}^{k}, x_{j}^{k}\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/dd4\/d9e\/875\/dd4d9e875ae440b880c37411796fe4e5.svg\"> \u2014 <img decoding=\"async\" class=\"formula inline\" source=\"i\" alt=\"i\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/72c\/bec\/afb\/72cbecafb05a271246f59632b2c1baf6.svg\">&#8212; \u044b\u0439 \u0438 <img decoding=\"async\" class=\"formula inline\" source=\"j\" alt=\"j\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/374\/689\/409\/3746894092bc7784f62dd32fbe77b17d.svg\">&#8212; \u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u0435\u043a\u0442\u043e\u0440\u0430 <em><img decoding=\"async\" class=\"formula inline\" source=\"k\" alt=\"k\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/708\/5a3\/f13\/7085a3f13a7102bb55df3e75554d7fb0.svg\"><\/em>&#8212; \u043e\u0433\u043e \u043e\u0431\u0440\u0430\u0437\u0446\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430&nbsp;\u0432\u0445\u043e\u0434\u044b \u0441\u0435\u0442\u0438 \u043f\u043e\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0439 \u0441\u0438\u0433\u043d\u0430\u043b. \u0424\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0435\u0433\u043e \u0432\u0432\u043e\u0434 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432\u044b\u0445\u043e\u0434\u043e\u0432:<br \/><img decoding=\"async\" class=\"formula inline\" source=\"y_{j}(0) = x_{j}\" alt=\"y_{j}(0) = x_{j}\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3dc\/aed\/da1\/3dcaedda10a4801542bdad9ab7d6d405.svg\"><\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u0445\u043e\u0434 \u0441\u0435\u0442\u0438 (\u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0435\u0439\u0440\u043e\u043d\u043e\u0432 \u0438&nbsp;\u043d\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u044b\u0445\u043e\u0434\u043e\u0432):<\/p>\n<p><img decoding=\"async\" class=\"formula inline\" source=\"y_{j}(t+1)=f\\left ( \\sum_{i=1}^{n} w_{ij}*y_{i}(t)\\right ) \" alt=\"y_{j}(t+1)=f\\left ( \\sum_{i=1}^{n} w_{ij}*y_{i}(t)\\right ) \" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/209\/1fe\/9b6\/2091fe9b6ff04a08d0660035c15e8229.svg\"><\/p>\n<p>\u0433\u0434\u0435 <img decoding=\"async\" class=\"formula inline\" source=\"f\" alt=\"f\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c3a\/eda\/d83\/c3aedad83906136f726f72795153945a.svg\"> \u2014 \u043f\u043e\u0440\u043e\u0433\u043e\u0432\u0430\u044f \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0441&nbsp;\u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 [-1; 1];<br \/><img decoding=\"async\" class=\"formula inline\" source=\"t\" alt=\"t\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/563\/772\/5e5\/5637725e5d4ce313806e698721f9ee0a.svg\"> \u2014 \u043d\u043e\u043c\u0435\u0440 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438;<br \/><img decoding=\"async\" class=\"formula inline\" source=\"j = 1...n; n\" alt=\"j = 1...n; n\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b5a\/b3c\/688\/b5ab3c6880970293f6eeed8bb2f895d1.svg\"> \u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0445\u043e\u0434\u043e\u0432 \u0438&nbsp;\u043d\u0435\u0439\u0440\u043e\u043d\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0437\u0430&nbsp;\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u044e. \u0415\u0441\u043b\u0438 \u0432\u044b\u0445\u043e\u0434\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c&nbsp;\u2014 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043a&nbsp;\u043f\u0443\u043d\u043a\u0442\u0443&nbsp;3, \u0438\u043d\u0430\u0447\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b\u0445\u043e\u0434\u044b \u0441\u0442\u0430\u0431\u0438\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c, \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u044b\u0445\u043e\u0434\u043d\u043e\u0439 \u0432\u0435\u043a\u0442\u043e\u0440 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043e\u0431\u0440\u0430\u0437\u0435\u0446, \u043d\u0430\u0438\u043b\u0443\u0447\u0448\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0441\u043e\u0447\u0435\u0442\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0441&nbsp;\u0432\u0445\u043e\u0434\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438.<\/p>\n<\/li>\n<\/ol>\n<h2>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430<\/h2>\n<h3>\u0412\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/028\/9b6\/878\/0289b687893529a45dcf0f283b737a87.PNG\" alt=\"\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b\" title=\"\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b\" width=\"1025\" height=\"575\"><figcaption>\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b<\/figcaption><\/figure>\n<p>\u041e\u043d&nbsp;\u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437&nbsp;\u0434\u0432\u0443\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 Canvas \u0438&nbsp;\u0442\u0440\u0435\u0445 \u043a\u043d\u043e\u043f\u043e\u043a. \u042d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 HTML \u0438&nbsp;CSS \u043a\u043e\u0434, \u043d\u0435&nbsp;\u043d\u0443\u0436\u0434\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0432&nbsp;\u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0438 (\u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441&nbsp;<a href=\"https:\/\/github.com\/v0xat\/js-neural-networks\/tree\/master\/hopfield_network\" rel=\"noopener noreferrer nofollow\">\u0433\u0438\u0442\u0445\u0430\u0431\u0430<\/a>).<\/p>\n<p>\u041b\u0435\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 Canvas \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0442\u0435\u043c \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0434\u043b\u044f \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f (\u043a\u043d\u043e\u043f\u043a\u0430 \u0417\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c) \u0438\u043b\u0438 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u0438. \u041d\u0430&nbsp;\u043f\u0440\u0430\u0432\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0441\u0438\u0433\u043d\u0430\u043b\u0430, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e\u0441\u044f \u043d\u0430&nbsp;\u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430&nbsp;\u043b\u0435\u0432\u043e\u043c Canvas (\u0432&nbsp;\u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u0435\u0442\u044c \u00ab\u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043b\u0430\u00bb \u0431\u0443\u043a\u0432\u0443&nbsp;\u0422 \u043d\u0430&nbsp;\u043e\u0441\u043d\u043e\u0432\u0435 \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430).<\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430&nbsp;\u0442\u043e, \u0447\u0442\u043e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0441\u0435\u0442\u043a\u043e\u0439 10\u00d710 \u0438&nbsp;\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u043a\u043b\u0435\u0442\u043a\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c. \u0422\u0430\u043a \u043a\u0430\u043a \u0432&nbsp;\u0441\u0435\u0442\u0438 \u0425\u043e\u043f\u0444\u0438\u043b\u0434\u0430 \u0447\u0438\u0441\u043b\u043e \u043d\u0435\u0439\u0440\u043e\u043d\u043e\u0432 \u0440\u0430\u0432\u043d\u043e \u0447\u0438\u0441\u043b\u0443 \u0432\u0445\u043e\u0434\u043e\u0432, \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043d\u0435\u0439\u0440\u043e\u043d\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0432\u043d\u043e \u0434\u043b\u0438\u043d\u0435 \u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430, \u0442\u043e&nbsp;\u0435\u0441\u0442\u044c 100 (\u0443&nbsp;\u043d\u0430\u0441 \u0432\u0441\u0435\u0433\u043e 100 \u043a\u043b\u0435\u0442\u043e\u043a \u043d\u0430&nbsp;\u044d\u043a\u0440\u0430\u043d\u0435). \u0412\u0445\u043e\u0434\u043d\u043e\u0439 \u0441\u0438\u0433\u043d\u0430\u043b \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0434\u0432\u043e\u0438\u0447\u043d\u044b\u043c&nbsp;\u2014 \u043c\u0430\u0441\u0441\u0438\u0432, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0438\u0437&nbsp;\u22121&nbsp;\u0438&nbsp;1, \u0433\u0434\u0435 \u22121&nbsp;\u2014 \u044d\u0442\u043e \u0431\u0435\u043b\u044b\u0439, \u0430&nbsp;1&nbsp;\u2014 \u0447\u0435\u0440\u043d\u044b\u0439 \u0446\u0432\u0435\u0442.<\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a&nbsp;\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043a\u043e\u0434\u0430, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435.<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ \u0420\u0430\u0437\u043c\u0435\u0440 \u0441\u0435\u0442\u043a\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0440\u0430\u0432\u043d\u044b\u043c 10 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f const gridSize = 10; \/\/ \u0420\u0430\u0437\u043c\u0435\u0440 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0430 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 const squareSize = 45; \/\/ \u0420\u0430\u0437\u043c\u0435\u0440 \u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430 (100) const inputNodes = gridSize * gridSize;  \/\/ \u041c\u0430\u0441\u0441\u0438\u0432 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432 \u043b\u0435\u0432\u043e\u043c \u043a\u0430\u043d\u0432\u0430\u0441\u0435, \/\/ \u043e\u043d \u0436\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0445\u043e\u0434\u043d\u044b\u043c \u0441\u0438\u0433\u043d\u0430\u043b\u043e\u043c \u0441\u0435\u0442\u0438 let userImageState = []; \/\/ \u0414\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0439 \u043c\u044b\u0448\u0438 \u043f\u043e \u043a\u0430\u043d\u0432\u0430\u0441\u0443 let isDrawing = false; \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f for (let i = 0; i &lt; inputNodes; i += 1) {     userImageState[i] = -1;   }  \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043a\u0430\u043d\u0432\u0430\u0441\u043e\u0432: const userCanvas = document.getElementById('userCanvas'); const userContext = userCanvas.getContext('2d'); const netCanvas = document.getElementById('netCanvas'); const netContext = netCanvas.getContext('2d');<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u0442\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u043d\u0435\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435.<\/p>\n<details class=\"spoiler\">\n<summary>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0441\u0435\u0442\u043a\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043a\u0430\u043d\u0432\u0430\u0441\u0430 \u0438 \u0440\u0438\u0441\u0443\u0435\u0442 \/\/ \u0441\u0435\u0442\u043a\u0443 \u0432 100 \u043a\u043b\u0435\u0442\u043e\u043a (gridSize * gridSize) const drawGrid = (ctx) =&gt; {   ctx.beginPath();   ctx.fillStyle = 'white';   ctx.lineWidth = 3;   ctx.strokeStyle = 'black';   for (let row = 0; row &lt; gridSize; row += 1) {     for (let column = 0; column &lt; gridSize; column += 1) {       const x = column * squareSize;       const y = row * squareSize;       ctx.rect(x, y, squareSize, squareSize);       ctx.fill();       ctx.stroke();     }   }   ctx.closePath(); };<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0427\u0442\u043e\u0431\u044b \u00ab\u043e\u0436\u0438\u0432\u0438\u0442\u044c\u00bb \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u0443\u044e \u0441\u0435\u0442\u043a\u0443, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043a\u043b\u0438\u043a\u0430 \u0438&nbsp;\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043c\u044b\u0448\u0438 \u043f\u043e&nbsp;\u043a\u0430\u043d\u0432\u0430\u0441\u0443.<\/p>\n<details class=\"spoiler\">\n<summary>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0439 \u043c\u044b\u0448\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043a\u043b\u0438\u043a\u0430 \u043c\u044b\u0448\u0438 const handleMouseDown = (e) =&gt; {   userContext.fillStyle = 'black';   \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0437\u0430\u043b\u0438\u0442\u044b\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0432 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 x, y   \/\/ \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c squareSize \u0445 squareSize (45\u044545 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439)   userContext.fillRect(     Math.floor(e.offsetX \/ squareSize) * squareSize,     Math.floor(e.offsetY \/ squareSize) * squareSize,     squareSize, squareSize,   );    \/\/ \u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0438\u043d\u0434\u0435\u043a\u0441,   \/\/ \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430   const { clientX, clientY } = e;   const coords = getNewSquareCoords(userCanvas, clientX, clientY, squareSize);   const index = calcIndex(coords.x, coords.y, gridSize);    \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0438\u0433\u043d\u0430\u043b\u0430   if (isValidIndex(index, inputNodes) &amp;&amp; userImageState[index] !== 1) {     userImageState[index] = 1;   }    \/\/ \u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (\u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043c\u044b\u0448\u0438)   isDrawing = true; };  \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043c\u044b\u0448\u0438 \u043f\u043e \u043a\u0430\u043d\u0432\u0430\u0441\u0443 const handleMouseMove = (e) =&gt; {   \/\/ \u0415\u0441\u043b\u0438 \u043d\u0435 \u0440\u0438\u0441\u0443\u0435\u043c, \u0442.\u0435. \u043d\u0435 \u0431\u044b\u043b\u043e \u043a\u043b\u0438\u043a\u0430 \u043c\u044b\u0448\u0438 \u043f\u043e \u043a\u0430\u043d\u0432\u0430\u0441\u0443, \u0442\u043e \u0432\u044b\u0445\u043e\u0434\u0438\u043c \u0438\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0438   if (!isDrawing) return;    \/\/ \u0414\u0430\u043b\u0435\u0435 \u043a\u043e\u0434, \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 handleMouseDown   \/\/ \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 isDrawing = true;   userContext.fillStyle = 'black';    userContext.fillRect(     Math.floor(e.offsetX \/ squareSize) * squareSize,     Math.floor(e.offsetY \/ squareSize) * squareSize,     squareSize, squareSize,   );    const { clientX, clientY } = e;   const coords = getNewSquareCoords(userCanvas, clientX, clientY, squareSize);   const index = calcIndex(coords.x, coords.y, gridSize);    if (isValidIndex(index, inputNodes) &amp;&amp; userImageState[index] !== 1) {     userImageState[index] = 1;   } };<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u041a\u0430\u043a \u0432\u044b&nbsp;\u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <em><u>getNewSquareCoords<\/u><\/em>, <em><u>calcIndex<\/u><\/em> \u0438&nbsp;<u>isValidIndex<\/u>. \u041d\u0438\u0436\u0435 \u043a\u043e\u0434 \u044d\u0442\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0441&nbsp;\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>\u0412\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u0438\u043d\u0434\u0435\u043a\u0441 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \/\/ \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441\u0435\u0442\u043a\u0438 const calcIndex = (x, y, size) =&gt; x + y * size;  \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043b\u0438 \u0438\u043d\u0434\u0435\u043a\u0441 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 const isValidIndex = (index, len) =&gt; index &lt; len &amp;&amp; index &gt;= 0;  \/\/ \u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0434\u043b\u044f \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u043a\u043b\u0435\u0442\u043a\u0438 \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445  \/\/ \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441\u0435\u0442\u043a\u0438, \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0442 0 \u0434\u043e 9 const getNewSquareCoords = (canvas, clientX, clientY, size) =&gt; {   const rect = canvas.getBoundingClientRect();   const x = Math.ceil((clientX - rect.left) \/ size) - 1;   const y = Math.ceil((clientY - rect.top) \/ size) - 1;   return { x, y }; };<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 <em>\u041e\u0447\u0438\u0441\u0442\u0438\u0442\u044c<\/em>. \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430&nbsp;\u044d\u0442\u0443 \u043a\u043d\u043e\u043f\u043a\u0443 \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0447\u0438\u0449\u0430\u0442\u044c\u0441\u044f \u0437\u0430\u043a\u0440\u0430\u0448\u0435\u043d\u043d\u044b\u0435 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u044b \u0434\u0432\u0443\u0445 \u043a\u0430\u0432\u0430\u0441\u043e\u0432 \u0438 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430.<\/p>\n<details class=\"spoiler\">\n<summary>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u0441\u0435\u0442\u043a\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">const clearCurrentImage = () =&gt; {   \/\/ \u0427\u0442\u043e\u0431\u044b \u0443\u0431\u0440\u0430\u0442\u044c \u0437\u0430\u043a\u0440\u0430\u0448\u0435\u043d\u043d\u044b\u0435 \u043a\u043b\u0435\u0442\u043a\u0438, \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043d\u043e\u0432\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c    \/\/ \u0432\u0441\u044e \u0441\u0435\u0442\u043a\u0443 \u0438 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430   drawGrid(userContext);   drawGrid(netContext);   userImageState = new Array(gridSize * gridSize).fill(-1); };<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a&nbsp;\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u00ab\u043c\u043e\u0437\u0433\u0430\u00bb \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b.<\/p>\n<h3>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430 \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u0438<\/h3>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u0442\u0430\u043f&nbsp;\u2014 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0435\u0442\u0438. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432\u0435\u0441\u043e\u0432 \u043d\u0435\u0439\u0440\u043e\u043d\u043e\u0432 \u0438&nbsp;\u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0446\u0438\u043a\u043b \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f (\u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430).<\/p>\n<details class=\"spoiler\">\n<summary>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u0435\u0441\u043e\u0432 \u0441\u0435\u0442\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">... const weights = [];  \/\/ \u041c\u0430\u0441\u0441\u0438\u0432 \u0432\u0435\u0441\u043e\u0432 \u0441\u0435\u0442\u0438 for (let i = 0; i &lt; inputNodes; i += 1) {   weights[i] = new Array(inputNodes).fill(0); \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0435\u0433\u043e 0   userImageState[i] = -1; } ...<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043a\u0430\u0436\u0434\u044b\u0439 \u043d\u0435\u0439\u0440\u043e\u043d \u0432&nbsp;\u0441\u0435\u0442\u0438 \u0425\u043e\u043f\u0444\u0438\u043b\u0434\u0430 \u0441\u0432\u044f\u0437\u0430\u043d \u0441\u043e&nbsp;\u0432\u0441\u0435\u043c\u0438 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043d\u0435\u0439\u0440\u043e\u043d\u0430\u043c\u0438, \u0432\u0435\u0441\u0430 \u0441\u0435\u0442\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u044b\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c, \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u043c\u0435\u0440\u043d\u044b\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c <u>inputNodes<\/u> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0412&nbsp;\u0438\u0442\u043e\u0433\u0435 \u043c\u044b&nbsp;\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c 100&nbsp;\u043d\u0435\u0439\u0440\u043e\u043d\u043e\u0432, \u0443&nbsp;\u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437&nbsp;\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e&nbsp;100&nbsp;\u0441\u0432\u044f\u0437\u0435\u0439.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430 (\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432\u0435\u0441\u043e\u0432) \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u044c\u044e \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0444\u043e\u0440\u043c\u0443\u043b\u0435 \u0438\u0437&nbsp;\u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0448\u0430\u0433\u0430 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430. \u0414\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e&nbsp;\u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043d\u0430&nbsp;\u043a\u043d\u043e\u043f\u043a\u0443 <em>\u0417\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c<\/em>. \u0417\u0430\u043f\u043e\u043c\u043d\u0435\u043d\u043d\u044b\u0435 \u043e\u0431\u0440\u0430\u0437\u044b \u0431\u0443\u0434\u0443\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u044d\u0442\u0430\u043b\u043e\u043d\u0430\u043c\u0438 \u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">const memorizeImage = () =&gt; {   for (let i = 0; i &lt; inputNodes; i += 1) {     for (let j = 0; j &lt; inputNodes; j += 1) {       if (i === j) weights[i][j] = 0;       else {         \/\/ \u041d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e, \u0447\u0442\u043e \u0432\u0445\u043e\u0434\u043d\u043e\u0439 \u0441\u0438\u0433\u043d\u0430\u043b \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 userImageState \u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f         \/\/ \u043d\u0430\u0431\u043e\u0440\u043e\u043c -1 \u0438 1, \u0433\u0434\u0435 -1 - \u044d\u0442\u043e \u0431\u0435\u043b\u044b\u0439, \u0430 1 - \u0447\u0435\u0440\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u043a\u043b\u0435\u0442\u043e\u043a \u043d\u0430 \u043a\u0430\u043d\u0432\u0430\u0441\u0435         weights[i][j] += userImageState[i] * userImageState[j];       }     }   } };<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0417\u0430\u043f\u043e\u043c\u043d\u0438\u0432 \u043e\u0434\u0438\u043d \u0438\u043b\u0438 \u0431\u043e\u043b\u0435\u0435 \u043e\u0431\u0440\u0430\u0437\u043e\u0432, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u0430\u0442\u044c \u043d\u0430&nbsp;\u0432\u0445\u043e\u0434 \u0441\u0435\u0442\u0438 \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0437, \u043b\u0438\u0431\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430&nbsp;\u043e\u0434\u0438\u043d \u0438\u0437&nbsp;\u043d\u0438\u0445, \u0438&nbsp;\u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0442\u044c \u0435\u0433\u043e. \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0435\u0449\u0435 \u043e\u0434\u043d\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e:<\/p>\n<details class=\"spoiler\">\n<summary>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ \u0413\u0434\u0435-\u0442\u043e \u0432 html \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 lodash: &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/lodash.js\/4.17.21\/lodash.min.js\"&gt;&lt;\/script&gt; ... const recognizeSignal = () =&gt; {   let prevNetState;   \/\/ \u041d\u0430 \u0432\u0445\u043e\u0434 \u0441\u0435\u0442\u0438 \u043f\u043e\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0439 \u0441\u0438\u0433\u043d\u0430\u043b. \u0424\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438    \/\/ \u0435\u0433\u043e \u0432\u0432\u043e\u0434 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432\u044b\u0445\u043e\u0434\u043e\u0432   \/\/ (2 \u0448\u0430\u0433 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430), \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430   const currNetState = [...userImageState];   do {     \/\/ \u041a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u044b\u0445\u043e\u0434\u043e\u0432,  \t\t\/\/ \u0442.\u0435. \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043d\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c     prevNetState = [...currNetState];     \/\/ \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u0432\u044b\u0445\u043e\u0434 \u0441\u0435\u0442\u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0444\u043e\u0440\u043c\u0443\u043b\u0435 3 \u0448\u0430\u0433\u0430 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430     for (let i = 0; i &lt; inputNodes; i += 1) {       let sum = 0;       for (let j = 0; j &lt; inputNodes; j += 1) {         sum += weights[i][j] * prevNetState[j];       }       \/\/ \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u0432\u044b\u0445\u043e\u0434 \u043d\u0435\u0439\u0440\u043e\u043d\u0430 (\u043f\u043e\u0440\u043e\u0433\u043e\u0432\u0430\u044f \u0444-\u044f \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438)       currNetState[i] = sum &gt;= 0 ? 1 : -1;     }     \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u044b\u0445\u043e\u0434\u043e\u0432 \u0437\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u044e     \/\/ \u0421\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0444-\u0438\u0438 isEqual   } while (!_.isEqual(currNetState, prevNetState));    \/\/ \u0415\u0441\u043b\u0438 \u0432\u044b\u0445\u043e\u0434\u044b \u0441\u0442\u0430\u0431\u0438\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c (\u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c), \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0437   drawImageFromArray(currNetState, netContext); };<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0417\u0434\u0435\u0441\u044c \u0434\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0432\u044b\u0445\u043e\u0434\u043e\u0432 \u0441\u0435\u0442\u0438 \u043d\u0430&nbsp;\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0438&nbsp;\u0442\u0435\u043a\u0443\u0449\u0435\u043c \u0448\u0430\u0433\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <u>isEqual<\/u> \u0438\u0437&nbsp;\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <a href=\"https:\/\/lodash.com\/docs\/4.17.15#isEqual\" rel=\"noopener noreferrer nofollow\">lodash<\/a>.<\/p>\n<p>\u0414\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <u>drawImageFromArray<\/u>. \u041e\u043d\u0430 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u0432\u044b\u0445\u043e\u0434\u043d\u043e\u0439 \u0441\u0438\u0433\u043d\u0430\u043b \u0441\u0435\u0442\u0438 \u0432&nbsp;\u0434\u0443\u043c\u0435\u0440\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438&nbsp;\u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u043d\u0430&nbsp;\u043f\u0440\u0430\u0432\u043e\u043c \u043a\u0430\u043d\u0432\u0430\u0441\u0435.<\/p>\n<details class=\"spoiler\">\n<summary>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0442\u043e\u0447\u0435\u043a<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">const drawImageFromArray = (data, ctx) =&gt; {   const twoDimData = [];   \/\/ \u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u043e\u0434\u043d\u043e\u043c\u0435\u0440\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0432 \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u044b\u0439   while (data.length) twoDimData.push(data.splice(0, gridSize));    \/\/ \u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0447\u0438\u0449\u0430\u0435\u043c \u0441\u0435\u0442\u043a\u0443   drawGrid(ctx);   \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c (\u0438\u043d\u0434\u0435\u043a\u0441\u0430\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0430)   for (let i = 0; i &lt; gridSize; i += 1) {     for (let j = 0; j &lt; gridSize; j += 1) {       if (twoDimData[i][j] === 1) {         ctx.fillStyle = 'black';         ctx.fillRect((j * squareSize), (i * squareSize), squareSize, squareSize);       }     }   } };<\/code><\/pre>\n<\/div>\n<\/details>\n<h3>\u0424\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f<\/h3>\n<p>\u0414\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0430\u0448\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432&nbsp;\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 HTML \u0438&nbsp;\u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0441\u0435\u0442\u043a\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043a HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">const resetButton = document.getElementById('resetButton'); const memoryButton = document.getElementById('memoryButton'); const recognizeButton = document.getElementById('recognizeButton');  \/\/ \u0412\u0435\u0448\u0430\u0435\u043c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 resetButton.addEventListener('click', () =&gt; clearCurrentImage()); memoryButton.addEventListener('click', () =&gt; memorizeImage()); recognizeButton.addEventListener('click', () =&gt; recognizeSignal());  \/\/ \u0412\u0435\u0448\u0430\u0435\u043c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438 \u043d\u0430 \u043a\u0430\u043d\u0432\u0430\u0441\u044b userCanvas.addEventListener('mousedown', (e) =&gt; handleMouseDown(e)); userCanvas.addEventListener('mousemove', (e) =&gt; handleMouseMove(e)); \/\/ \u041f\u0435\u0440\u0435\u0441\u0442\u0430\u0435\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u0430 \u043c\u044b\u0448\u0438 \u043e\u0442\u043f\u0443\u0449\u0435\u043d\u0430 \u0438\u043b\u0438 \u0432\u044b\u0448\u043b\u0430 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u043a\u0430\u043d\u0432\u0430\u0441\u0430 userCanvas.addEventListener('mouseup', () =&gt; isDrawing = false); userCanvas.addEventListener('mouseleave', () =&gt; isDrawing = false);  \/\/ \u041e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u0441\u0435\u0442\u043a\u0443 drawGrid(userContext); drawGrid(netContext);<\/code><\/pre>\n<\/div>\n<\/details>\n<h2>\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u0438<\/h2>\n<p>\u041e\u0431\u0443\u0447\u0438\u043c \u0441\u0435\u0442\u044c \u0434\u0432\u0443\u043c \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u0430\u043c, \u0431\u0443\u043a\u0432\u0430\u043c \u0422 \u0438 \u041d:  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ad7\/eb5\/0dd\/ad7eb50dd8624fa237478100d323cd68.png\" alt=\"\u042d\u0442\u0430\u043b\u043e\u043d\u043d\u044b\u0435 \u043e\u0431\u0440\u0430\u0437\u044b \u0434\u043b\u044f \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u0435\u0442\u0438\" title=\"\u042d\u0442\u0430\u043b\u043e\u043d\u043d\u044b\u0435 \u043e\u0431\u0440\u0430\u0437\u044b \u0434\u043b\u044f \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u0435\u0442\u0438\" width=\"957\" height=\"471\"><figcaption>\u042d\u0442\u0430\u043b\u043e\u043d\u043d\u044b\u0435 \u043e\u0431\u0440\u0430\u0437\u044b \u0434\u043b\u044f \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u0435\u0442\u0438<\/figcaption><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441\u0435\u0442\u0438 \u043d\u0430 \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u043d\u044b\u0445 \u043e\u0431\u0440\u0430\u0437\u0430\u0445:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f5a\/5e1\/36c\/f5a5e136c682a86a15bedf65f53a1fb4.png\" alt=\"\u041f\u043e\u043f\u044b\u0442\u043a\u0430 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0442\u044c \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0437 \u0431\u0443\u043a\u0432\u044b \u041d\" title=\"\u041f\u043e\u043f\u044b\u0442\u043a\u0430 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0442\u044c \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0437 \u0431\u0443\u043a\u0432\u044b \u041d\" width=\"1037\" height=\"499\"><figcaption>\u041f\u043e\u043f\u044b\u0442\u043a\u0430 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0442\u044c \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0437 \u0431\u0443\u043a\u0432\u044b \u041d<\/figcaption><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/222\/8a0\/20b\/2228a020b93ed2088d8fc62b7bf7e00e.png\" alt=\"\u041f\u043e\u043f\u044b\u0442\u043a\u0430 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0442\u044c \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0437 \u0431\u0443\u043a\u0432\u044b \u0422\" title=\"\u041f\u043e\u043f\u044b\u0442\u043a\u0430 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0442\u044c \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0437 \u0431\u0443\u043a\u0432\u044b \u0422\" width=\"1041\" height=\"501\"><figcaption>\u041f\u043e\u043f\u044b\u0442\u043a\u0430 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0442\u044c \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0437 \u0431\u0443\u043a\u0432\u044b \u0422<\/figcaption><\/figure>\n<p>\u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442! \u0421\u0435\u0442\u044c \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u043e\u0431\u0440\u0430\u0437\u044b. <\/p>\n<p>\u0412 \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0434\u043b\u044f \u0441\u0435\u0442\u0438 \u0425\u043e\u043f\u0444\u0438\u043b\u0434\u0430 \u0447\u0438\u0441\u043b\u043e \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u043c\u044b\u0445 \u043e\u0431\u0440\u0430\u0437\u043e\u0432 <em>m<\/em>&nbsp;\u043d\u0435&nbsp;\u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0440\u0435\u0432\u044b\u0448\u0430\u0442\u044c \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u044b, \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0440\u0430\u0432\u043d\u043e\u0439 <em>0.15 * n<\/em>&nbsp;(\u0433\u0434\u0435 <em>n<\/em>&nbsp;\u2014 \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u044c \u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430 \u0438&nbsp;\u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043d\u0435\u0439\u0440\u043e\u043d\u043e\u0432). \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0435\u0441\u043b\u0438 \u043e\u0431\u0440\u0430\u0437\u044b \u0438\u043c\u0435\u044e\u0442 \u0441\u0438\u043b\u044c\u043d\u043e\u0435 \u0441\u0445\u043e\u0434\u0441\u0442\u0432\u043e, \u0442\u043e \u043e\u043d\u0438, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0443&nbsp;\u0441\u0435\u0442\u0438 \u043f\u0435\u0440\u0435\u043a\u0440\u0435\u0441\u0442\u043d\u044b\u0435 \u0430\u0441\u0441\u043e\u0446\u0438\u0430\u0446\u0438\u0438, \u0442\u043e&nbsp;\u0435\u0441\u0442\u044c \u043f\u0440\u0435\u0434\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430&nbsp;\u0432\u0445\u043e\u0434\u044b \u0441\u0435\u0442\u0438 \u0432\u0435\u043a\u0442\u043e\u0440\u0430&nbsp;\u0410 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a&nbsp;\u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044e \u043d\u0430&nbsp;\u0435\u0435&nbsp;\u0432\u044b\u0445\u043e\u0434\u0430\u0445 \u0432\u0435\u043a\u0442\u043e\u0440\u0430&nbsp;\u0411 \u0438&nbsp;\u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442.<\/p>\n<p>\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438&nbsp;\u043d\u0430 <a href=\"https:\/\/github.com\/v0xat\/js-neural-networks\/tree\/master\/hopfield_network\" rel=\"noopener noreferrer nofollow\">Github<\/a> \u0438 <a href=\"https:\/\/soanyway.vercel.app\/nn\/hopfield\/demo.html\" rel=\"noopener noreferrer nofollow\">\u0434\u0435\u043c\u043e<\/a>.<\/p>\n<p>\u0412\u043c\u0435\u0441\u0442\u043e \u043b\u0438\u0442\u0435\u0440\u0430\u0442\u0443\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043b\u0435\u043a\u0446\u0438\u0438 \u043e\u0442\u043b\u0438\u0447\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u043f\u043e\u0434\u0430\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e&nbsp;\u043d\u0435\u0439\u0440\u043e\u043d\u043d\u044b\u043c \u0441\u0435\u0442\u044f\u043c \u2014 <a href=\"https:\/\/roschinsm.ru\/\" rel=\"noopener noreferrer nofollow\">\u0420\u043e\u0449\u0438\u043d\u0430 \u0421\u0435\u0440\u0433\u0435\u044f \u041c\u0438\u0445\u0430\u0439\u043b\u043e\u0432\u0438\u0447\u0430<\/a>, \u0437\u0430&nbsp;\u0447\u0442\u043e \u0435\u043c\u0443 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0441\u043f\u0430\u0441\u0438\u0431\u043e.<\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/561198\/\"> https:\/\/habr.com\/ru\/post\/561198\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p>\u0421\u0442\u043e\u043b\u043a\u043d\u0443\u0432\u0448\u0438\u0441\u044c \u0432&nbsp;\u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0438\u0442\u0435\u0442\u0435 \u0441&nbsp;\u043d\u0435\u0439\u0440\u043e\u043d\u043d\u044b\u043c\u0438 \u0441\u0435\u0442\u044f\u043c\u0438, \u043e\u0434\u043d\u043e\u0439 \u0438\u0437&nbsp;\u043b\u044e\u0431\u0438\u043c\u044b\u0445 \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0441\u0442\u0430\u043b\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0441\u0435\u0442\u044c \u0425\u043e\u043f\u0444\u0438\u043b\u0434\u0430. \u042f&nbsp;\u0431\u044b\u043b \u0443\u0434\u0438\u0432\u043b\u0435\u043d, \u0447\u0442\u043e \u043e\u043d\u0430 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0432&nbsp;\u0441\u043f\u0438\u0441\u043a\u0435 \u043b\u0430\u0431\u043e\u0440\u0430\u0442\u043e\u0440\u043d\u044b\u0445 \u0440\u0430\u0431\u043e\u0442, \u0432\u0435\u0434\u044c \u0435\u0435&nbsp;\u0440\u0430\u0431\u043e\u0442\u0443 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438&nbsp;\u043e\u043d\u0430 \u043d\u0435&nbsp;\u0442\u0430\u043a \u0441\u043b\u043e\u0436\u043d\u0430 \u0432&nbsp;\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. <\/p>\n<p>\u0412&nbsp;\u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u0438 \u0425\u043e\u043f\u0444\u0438\u043b\u0434\u0430, \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u0443\u0447\u0435\u043d\u043d\u043e\u0439 \u043d\u0430&nbsp;\u044d\u0442\u0430\u043b\u043e\u043d\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445.<\/p>\n<p>\u042f&nbsp;\u043f\u043e\u0441\u0442\u0430\u0440\u0430\u043b\u0441\u044f \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e \u0438&nbsp;\u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0449\u0435 \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0439 \u043f\u0440\u044f\u043c\u043e \u0432&nbsp;\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0441&nbsp;\u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u044c\u044e, \u043e\u0431\u0443\u0447\u0438\u0442\u044c \u0441\u0435\u0442\u044c \u043d\u0430&nbsp;\u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0440\u0443\u0447\u043d\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043e\u0431\u0440\u0430\u0437\u0430\u0445 \u0438&nbsp;\u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0435\u0451&nbsp;\u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430&nbsp;\u0438\u0441\u043a\u0430\u0436\u0435\u043d\u043d\u044b\u0445 \u043e\u0431\u0440\u0430\u0437\u0430\u0445.<\/p>\n<p>\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438&nbsp;\u043d\u0430 <a href=\"https:\/\/github.com\/v0xat\/js-neural-networks\/tree\/master\/hopfield_network\" rel=\"noopener noreferrer nofollow\">Github<\/a> \u0438 <a href=\"https:\/\/soanyway.vercel.app\/nn\/hopfield\/demo.html\" rel=\"noopener noreferrer nofollow\">\u0434\u0435\u043c\u043e<\/a>.<\/p>\n<p>\u0414\u043b\u044f&nbsp;\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438&nbsp;\u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f:<\/p>\n<ul>\n<li>\n<p>\u0411\u0440\u0430\u0443\u0437\u0435\u0440<\/p>\n<\/li>\n<li>\n<p>\u0411\u0430\u0437\u043e\u0432\u043e\u0435&nbsp;\u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435&nbsp;\u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u0435\u0439<\/p>\n<\/li>\n<li>\n<p>\u0411\u0430\u0437\u043e\u0432\u044b\u0435&nbsp;\u0437\u043d\u0430\u043d\u0438\u044f&nbsp;JavaScript&nbsp;\/&nbsp;HTML<\/p>\n<\/li>\n<\/ul>\n<h2>\u041d\u0435\u043c\u043d\u043e\u0433\u043e&nbsp;\u0442\u0435\u043e\u0440\u0438\u0438<\/h2>\n<p>\u041d\u0435\u0439\u0440\u043e\u043d\u043d\u0430\u044f \u0441\u0435\u0442\u044c \u0425\u043e\u043f\u0444\u0438\u043b\u0434\u0430 (\u0430\u043d\u0433\u043b. Hopfield network)&nbsp;\u2014 \u043f\u043e\u043b\u043d\u043e\u0441\u0432\u044f\u0437\u043d\u0430\u044f \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u0430\u044f \u0441\u0435\u0442\u044c \u0441&nbsp;\u0441\u0438\u043c\u043c\u0435\u0442\u0440\u0438\u0447\u043d\u043e\u0439 \u043c\u0430\u0442\u0440\u0438\u0446\u0435\u0439 \u0441\u0432\u044f\u0437\u0435\u0439. \u0422\u0430\u043a\u0430\u044f \u0441\u0435\u0442\u044c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0430 \u0434\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u0441\u0441\u043e\u0446\u0438\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u043f\u0430\u043c\u044f\u0442\u0438, \u043a\u0430\u043a \u0444\u0438\u043b\u044c\u0442\u0440, \u0430&nbsp;\u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438. <\/p>\n<p>\u0421\u0435\u0442\u044c \u0425\u043e\u043f\u0444\u0438\u043b\u0434\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043e\u0434\u043d\u043e\u0440\u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u0431\u0435\u0437 \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0435\u0435&nbsp;\u043d\u0435\u0439\u0440\u043e\u043d\u043e\u0432. \u0415\u0451&nbsp;\u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437&nbsp;\u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u044f \u043d\u0435\u0439\u0440\u043e\u043d\u043e\u0432, \u0447\u0438\u0441\u043b\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0447\u0438\u0441\u043b\u043e\u043c \u0432\u0445\u043e\u0434\u043e\u0432 \u0438&nbsp;\u0432\u044b\u0445\u043e\u0434\u043e\u0432 \u0441\u0435\u0442\u0438. \u041a\u0430\u0436\u0434\u044b\u0439 \u043d\u0435\u0439\u0440\u043e\u043d \u0441\u0435\u0442\u0438 \u0441\u0432\u044f\u0437\u0430\u043d \u0441\u043e&nbsp;\u0432\u0441\u0435\u043c\u0438 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043d\u0435\u0439\u0440\u043e\u043d\u0430\u043c\u0438, \u0430&nbsp;\u0442\u0430\u043a\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u043e\u0434\u0438\u043d \u0432\u0445\u043e\u0434, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0432\u043e\u0434 \u0441\u0438\u0433\u043d\u0430\u043b\u0430.<\/p>\n<figure class=\"\"><figcaption>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u0430\u044f \u0441\u0445\u0435\u043c\u0430 \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u0438 \u0425\u043e\u043f\u0444\u0438\u043b\u0434\u0430<\/figcaption><\/figure>\n<p><strong>\u0412 \u043e\u0431\u0449\u0435\u043c \u0432\u0438\u0434\u0435 \u0437\u0430\u0434\u0430\u0447\u0430, \u0440\u0435\u0448\u0430\u0435\u043c\u0430\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u044c\u044e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0441\u0441\u043e\u0446\u0438\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u043f\u0430\u043c\u044f\u0442\u0438, \u0444\u043e\u0440\u043c\u0443\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c. <\/strong>\u0418\u0437\u0432\u0435\u0441\u0442\u0435\u043d \u043d\u0430\u0431\u043e\u0440 \u0434\u0432\u043e\u0438\u0447\u043d\u044b\u0445 \u0441\u0438\u0433\u043d\u0430\u043b\u043e\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u044d\u0442\u0430\u043b\u043e\u043d\u043d\u044b\u043c\u0438. \u0421\u0435\u0442\u044c \u0434\u043e\u043b\u0436\u043d\u0430 \u0443\u043c\u0435\u0442\u044c \u0438\u0437&nbsp;\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430, \u043f\u043e\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430&nbsp;\u0432\u0445\u043e\u0434, \u00ab\u0432\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u044c\u00bb \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u044d\u0442\u0430\u043b\u043e\u043d\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0437\u0435\u0446 (\u0435\u0441\u043b\u0438 \u0442\u0430\u043a\u043e\u0439 \u0435\u0441\u0442\u044c).<\/p>\n<p>\u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0435\u0442\u0438:<\/p>\n<ol>\n<li>\n<p>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<br \/>\u0412\u0435\u0441\u0430 \u043d\u0435\u0439\u0440\u043e\u043d\u043e\u0432 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0444\u043e\u0440\u043c\u0443\u043b\u0435:<\/p>\n<p>\u0433\u0434\u0435 \u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0431\u0440\u0430\u0437\u043e\u0432&nbsp;<br \/> \u2014 &#8212; \u044b\u0439 \u0438 &#8212; \u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u0435\u043a\u0442\u043e\u0440\u0430 <em><\/em>&#8212; \u043e\u0433\u043e \u043e\u0431\u0440\u0430\u0437\u0446\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430&nbsp;\u0432\u0445\u043e\u0434\u044b \u0441\u0435\u0442\u0438 \u043f\u043e\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0439 \u0441\u0438\u0433\u043d\u0430\u043b. \u0424\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0435\u0433\u043e \u0432\u0432\u043e\u0434 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432\u044b\u0445\u043e\u0434\u043e\u0432:<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u0445\u043e\u0434 \u0441\u0435\u0442\u0438 (\u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0435\u0439\u0440\u043e\u043d\u043e\u0432 \u0438&nbsp;\u043d\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u044b\u0445\u043e\u0434\u043e\u0432):<\/p>\n<p>\u0433\u0434\u0435  \u2014 \u043f\u043e\u0440\u043e\u0433\u043e\u0432\u0430\u044f \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0441&nbsp;\u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 [-1; 1];<br \/> \u2014 \u043d\u043e\u043c\u0435\u0440 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438;<br \/> \u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0445\u043e\u0434\u043e\u0432 \u0438&nbsp;\u043d\u0435\u0439\u0440\u043e\u043d\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0437\u0430&nbsp;\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u044e. \u0415\u0441\u043b\u0438 \u0432\u044b\u0445\u043e\u0434\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c&nbsp;\u2014 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043a&nbsp;\u043f\u0443\u043d\u043a\u0442\u0443&nbsp;3, \u0438\u043d\u0430\u0447\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b\u0445\u043e\u0434\u044b \u0441\u0442\u0430\u0431\u0438\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c, \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u044b\u0445\u043e\u0434\u043d\u043e\u0439 \u0432\u0435\u043a\u0442\u043e\u0440 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043e\u0431\u0440\u0430\u0437\u0435\u0446, \u043d\u0430\u0438\u043b\u0443\u0447\u0448\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0441\u043e\u0447\u0435\u0442\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0441&nbsp;\u0432\u0445\u043e\u0434\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438.<\/p>\n<\/li>\n<\/ol>\n<h2>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430<\/h2>\n<h3>\u0412\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<figure class=\"full-width\"><figcaption>\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b<\/figcaption><\/figure>\n<p>\u041e\u043d&nbsp;\u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437&nbsp;\u0434\u0432\u0443\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 Canvas \u0438&nbsp;\u0442\u0440\u0435\u0445 \u043a\u043d\u043e\u043f\u043e\u043a. \u042d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 HTML \u0438&nbsp;CSS \u043a\u043e\u0434, \u043d\u0435&nbsp;\u043d\u0443\u0436\u0434\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0432&nbsp;\u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0438 (\u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441&nbsp;<a href=\"https:\/\/github.com\/v0xat\/js-neural-networks\/tree\/master\/hopfield_network\" rel=\"noopener noreferrer nofollow\">\u0433\u0438\u0442\u0445\u0430\u0431\u0430<\/a>).<\/p>\n<p>\u041b\u0435\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 Canvas \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0442\u0435\u043c \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0434\u043b\u044f \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f (\u043a\u043d\u043e\u043f\u043a\u0430 \u0417\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c) \u0438\u043b\u0438 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u0438. \u041d\u0430&nbsp;\u043f\u0440\u0430\u0432\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0441\u0438\u0433\u043d\u0430\u043b\u0430, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e\u0441\u044f \u043d\u0430&nbsp;\u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430&nbsp;\u043b\u0435\u0432\u043e\u043c Canvas (\u0432&nbsp;\u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u0435\u0442\u044c \u00ab\u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043b\u0430\u00bb \u0431\u0443\u043a\u0432\u0443&nbsp;\u0422 \u043d\u0430&nbsp;\u043e\u0441\u043d\u043e\u0432\u0435 \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430).<\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430&nbsp;\u0442\u043e, \u0447\u0442\u043e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0441\u0435\u0442\u043a\u043e\u0439 10\u00d710 \u0438&nbsp;\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u043a\u043b\u0435\u0442\u043a\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c. \u0422\u0430\u043a \u043a\u0430\u043a \u0432&nbsp;\u0441\u0435\u0442\u0438 \u0425\u043e\u043f\u0444\u0438\u043b\u0434\u0430 \u0447\u0438\u0441\u043b\u043e \u043d\u0435\u0439\u0440\u043e\u043d\u043e\u0432 \u0440\u0430\u0432\u043d\u043e \u0447\u0438\u0441\u043b\u0443 \u0432\u0445\u043e\u0434\u043e\u0432, \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043d\u0435\u0439\u0440\u043e\u043d\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0432\u043d\u043e \u0434\u043b\u0438\u043d\u0435 \u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430, \u0442\u043e&nbsp;\u0435\u0441\u0442\u044c 100 (\u0443&nbsp;\u043d\u0430\u0441 \u0432\u0441\u0435\u0433\u043e 100 \u043a\u043b\u0435\u0442\u043e\u043a \u043d\u0430&nbsp;\u044d\u043a\u0440\u0430\u043d\u0435). \u0412\u0445\u043e\u0434\u043d\u043e\u0439 \u0441\u0438\u0433\u043d\u0430\u043b \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0434\u0432\u043e\u0438\u0447\u043d\u044b\u043c&nbsp;\u2014 \u043c\u0430\u0441\u0441\u0438\u0432, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0438\u0437&nbsp;\u22121&nbsp;\u0438&nbsp;1, \u0433\u0434\u0435 \u22121&nbsp;\u2014 \u044d\u0442\u043e \u0431\u0435\u043b\u044b\u0439, \u0430&nbsp;1&nbsp;\u2014 \u0447\u0435\u0440\u043d\u044b\u0439 \u0446\u0432\u0435\u0442.<\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a&nbsp;\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043a\u043e\u0434\u0430, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435.<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ \u0420\u0430\u0437\u043c\u0435\u0440 \u0441\u0435\u0442\u043a\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0440\u0430\u0432\u043d\u044b\u043c 10 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f const gridSize = 10; \/\/ \u0420\u0430\u0437\u043c\u0435\u0440 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0430 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 const squareSize = 45; \/\/ \u0420\u0430\u0437\u043c\u0435\u0440 \u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430 (100) const inputNodes = gridSize * gridSize;  \/\/ \u041c\u0430\u0441\u0441\u0438\u0432 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432 \u043b\u0435\u0432\u043e\u043c \u043a\u0430\u043d\u0432\u0430\u0441\u0435, \/\/ \u043e\u043d \u0436\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0445\u043e\u0434\u043d\u044b\u043c \u0441\u0438\u0433\u043d\u0430\u043b\u043e\u043c \u0441\u0435\u0442\u0438 let userImageState = []; \/\/ \u0414\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0439 \u043c\u044b\u0448\u0438 \u043f\u043e \u043a\u0430\u043d\u0432\u0430\u0441\u0443 let isDrawing = false; \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f for (let i = 0; i &lt; inputNodes; i += 1) {     userImageState[i] = -1;   }  \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043a\u0430\u043d\u0432\u0430\u0441\u043e\u0432: const userCanvas = document.getElementById('userCanvas'); const userContext = userCanvas.getContext('2d'); const netCanvas = document.getElementById('netCanvas'); const netContext = netCanvas.getContext('2d');<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u0442\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u043d\u0435\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435.<\/p>\n<details class=\"spoiler\">\n<summary>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0441\u0435\u0442\u043a\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043a\u0430\u043d\u0432\u0430\u0441\u0430 \u0438 \u0440\u0438\u0441\u0443\u0435\u0442 \/\/ \u0441\u0435\u0442\u043a\u0443 \u0432 100 \u043a\u043b\u0435\u0442\u043e\u043a (gridSize * gridSize) const drawGrid = (ctx) =&gt; {   ctx.beginPath();   ctx.fillStyle = 'white';   ctx.lineWidth = 3;   ctx.strokeStyle = 'black';   for (let row = 0; row &lt; gridSize; row += 1) {     for (let column = 0; column &lt; gridSize; column += 1) {       const x = column * squareSize;       const y = row * squareSize;       ctx.rect(x, y, squareSize, squareSize);       ctx.fill();       ctx.stroke();     }   }   ctx.closePath(); };<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0427\u0442\u043e\u0431\u044b \u00ab\u043e\u0436\u0438\u0432\u0438\u0442\u044c\u00bb \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u0443\u044e \u0441\u0435\u0442\u043a\u0443, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043a\u043b\u0438\u043a\u0430 \u0438&nbsp;\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043c\u044b\u0448\u0438 \u043f\u043e&nbsp;\u043a\u0430\u043d\u0432\u0430\u0441\u0443.<\/p>\n<details class=\"spoiler\">\n<summary>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0439 \u043c\u044b\u0448\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043a\u043b\u0438\u043a\u0430 \u043c\u044b\u0448\u0438 const handleMouseDown = (e) =&gt; {   userContext.fillStyle = 'black';   \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0437\u0430\u043b\u0438\u0442\u044b\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0432 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 x, y   \/\/ \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c squareSize \u0445 squareSize (45\u044545 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439)   userContext.fillRect(     Math.floor(e.offsetX \/ squareSize) * squareSize,     Math.floor(e.offsetY \/ squareSize) * squareSize,     squareSize, squareSize,   );    \/\/ \u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0438\u043d\u0434\u0435\u043a\u0441,   \/\/ \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430   const { clientX, clientY } = e;   const coords = getNewSquareCoords(userCanvas, clientX, clientY, squareSize);   const index = calcIndex(coords.x, coords.y, gridSize);    \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0438\u0433\u043d\u0430\u043b\u0430   if (isValidIndex(index, inputNodes) &amp;&amp; userImageState[index] !== 1) {     userImageState[index] = 1;   }    \/\/ \u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (\u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043c\u044b\u0448\u0438)   isDrawing = true; };  \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043c\u044b\u0448\u0438 \u043f\u043e \u043a\u0430\u043d\u0432\u0430\u0441\u0443 const handleMouseMove = (e) =&gt; {   \/\/ \u0415\u0441\u043b\u0438 \u043d\u0435 \u0440\u0438\u0441\u0443\u0435\u043c, \u0442.\u0435. \u043d\u0435 \u0431\u044b\u043b\u043e \u043a\u043b\u0438\u043a\u0430 \u043c\u044b\u0448\u0438 \u043f\u043e \u043a\u0430\u043d\u0432\u0430\u0441\u0443, \u0442\u043e \u0432\u044b\u0445\u043e\u0434\u0438\u043c \u0438\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0438   if (!isDrawing) return;    \/\/ \u0414\u0430\u043b\u0435\u0435 \u043a\u043e\u0434, \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 handleMouseDown   \/\/ \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 isDrawing = true;   userContext.fillStyle = 'black';    userContext.fillRect(     Math.floor(e.offsetX \/ squareSize) * squareSize,     Math.floor(e.offsetY \/ squareSize) * squareSize,     squareSize, squareSize,   );    const { clientX, clientY } = e;   const coords = getNewSquareCoords(userCanvas, clientX, clientY, squareSize);   const index = calcIndex(coords.x, coords.y, gridSize);    if (isValidIndex(index, inputNodes) &amp;&amp; userImageState[index] !== 1) {     userImageState[index] = 1;   } };<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u041a\u0430\u043a \u0432\u044b&nbsp;\u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <em><u>getNewSquareCoords<\/u><\/em>, <em><u>calcIndex<\/u><\/em> \u0438&nbsp;<u>isValidIndex<\/u>. \u041d\u0438\u0436\u0435 \u043a\u043e\u0434 \u044d\u0442\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0441&nbsp;\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>\u0412\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u0438\u043d\u0434\u0435\u043a\u0441 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \/\/ \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441\u0435\u0442\u043a\u0438 const calcIndex = (x, y, size) =&gt; x + y * size;  \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043b\u0438 \u0438\u043d\u0434\u0435\u043a\u0441 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 const isValidIndex = (index, len) =&gt; index &lt; len &amp;&amp; index &gt;= 0;  \/\/ \u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0434\u043b\u044f \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u043a\u043b\u0435\u0442\u043a\u0438 \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445  \/\/ \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441\u0435\u0442\u043a\u0438, \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0442 0 \u0434\u043e 9 const getNewSquareCoords = (canvas, clientX, clientY, size) =&gt; {   const rect = canvas.getBoundingClientRect();   const x = Math.ceil((clientX - rect.left) \/ size) - 1;   const y = Math.ceil((clientY - rect.top) \/ size) - 1;   return { x, y }; };<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 <em>\u041e\u0447\u0438\u0441\u0442\u0438\u0442\u044c<\/em>. \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430&nbsp;\u044d\u0442\u0443 \u043a\u043d\u043e\u043f\u043a\u0443 \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0447\u0438\u0449\u0430\u0442\u044c\u0441\u044f \u0437\u0430\u043a\u0440\u0430\u0448\u0435\u043d\u043d\u044b\u0435 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u044b \u0434\u0432\u0443\u0445 \u043a\u0430\u0432\u0430\u0441\u043e\u0432 \u0438 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430.<\/p>\n<details class=\"spoiler\">\n<summary>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u0441\u0435\u0442\u043a\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">const clearCurrentImage = () =&gt; {   \/\/ \u0427\u0442\u043e\u0431\u044b \u0443\u0431\u0440\u0430\u0442\u044c \u0437\u0430\u043a\u0440\u0430\u0448\u0435\u043d\u043d\u044b\u0435 \u043a\u043b\u0435\u0442\u043a\u0438, \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043d\u043e\u0432\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c    \/\/ \u0432\u0441\u044e \u0441\u0435\u0442\u043a\u0443 \u0438 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430   drawGrid(userContext);   drawGrid(netContext);   userImageState = new Array(gridSize * gridSize).fill(-1); };<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a&nbsp;\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u00ab\u043c\u043e\u0437\u0433\u0430\u00bb \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b.<\/p>\n<h3>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430 \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u0438<\/h3>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u0442\u0430\u043f&nbsp;\u2014 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0435\u0442\u0438. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432\u0435\u0441\u043e\u0432 \u043d\u0435\u0439\u0440\u043e\u043d\u043e\u0432 \u0438&nbsp;\u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0446\u0438\u043a\u043b \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f (\u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430).<\/p>\n<details class=\"spoiler\">\n<summary>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u0435\u0441\u043e\u0432 \u0441\u0435\u0442\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">... const weights = [];  \/\/ \u041c\u0430\u0441\u0441\u0438\u0432 \u0432\u0435\u0441\u043e\u0432 \u0441\u0435\u0442\u0438 for (let i = 0; i &lt; inputNodes; i += 1) {   weights[i] = new Array(inputNodes).fill(0); \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0435\u0433\u043e 0   userImageState[i] = -1; } ...<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043a\u0430\u0436\u0434\u044b\u0439 \u043d\u0435\u0439\u0440\u043e\u043d \u0432&nbsp;\u0441\u0435\u0442\u0438 \u0425\u043e\u043f\u0444\u0438\u043b\u0434\u0430 \u0441\u0432\u044f\u0437\u0430\u043d \u0441\u043e&nbsp;\u0432\u0441\u0435\u043c\u0438 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043d\u0435\u0439\u0440\u043e\u043d\u0430\u043c\u0438, \u0432\u0435\u0441\u0430 \u0441\u0435\u0442\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u044b\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c, \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u043c\u0435\u0440\u043d\u044b\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c <u>inputNodes<\/u> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0412&nbsp;\u0438\u0442\u043e\u0433\u0435 \u043c\u044b&nbsp;\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c 100&nbsp;\u043d\u0435\u0439\u0440\u043e\u043d\u043e\u0432, \u0443&nbsp;\u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437&nbsp;\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e&nbsp;100&nbsp;\u0441\u0432\u044f\u0437\u0435\u0439.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430 (\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432\u0435\u0441\u043e\u0432) \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u044c\u044e \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0444\u043e\u0440\u043c\u0443\u043b\u0435 \u0438\u0437&nbsp;\u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0448\u0430\u0433\u0430 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430. \u0414\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e&nbsp;\u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043d\u0430&nbsp;\u043a\u043d\u043e\u043f\u043a\u0443 <em>\u0417\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c<\/em>. \u0417\u0430\u043f\u043e\u043c\u043d\u0435\u043d\u043d\u044b\u0435 \u043e\u0431\u0440\u0430\u0437\u044b \u0431\u0443\u0434\u0443\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u044d\u0442\u0430\u043b\u043e\u043d\u0430\u043c\u0438 \u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">const memorizeImage = () =&gt; {   for (let i = 0; i &lt; inputNodes; i += 1) {     for (let j = 0; j &lt; inputNodes; j += 1) {       if (i === j) weights[i][j] = 0;       else {         \/\/ \u041d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e, \u0447\u0442\u043e \u0432\u0445\u043e\u0434\u043d\u043e\u0439 \u0441\u0438\u0433\u043d\u0430\u043b \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 userImageState \u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f         \/\/ \u043d\u0430\u0431\u043e\u0440\u043e\u043c -1 \u0438 1, \u0433\u0434\u0435 -1 - \u044d\u0442\u043e \u0431\u0435\u043b\u044b\u0439, \u0430 1 - \u0447\u0435\u0440\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u043a\u043b\u0435\u0442\u043e\u043a \u043d\u0430 \u043a\u0430\u043d\u0432\u0430\u0441\u0435         weights[i][j] += userImageState[i] * userImageState[j];       }     }   } };<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0417\u0430\u043f\u043e\u043c\u043d\u0438\u0432 \u043e\u0434\u0438\u043d \u0438\u043b\u0438 \u0431\u043e\u043b\u0435\u0435 \u043e\u0431\u0440\u0430\u0437\u043e\u0432, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u0430\u0442\u044c \u043d\u0430&nbsp;\u0432\u0445\u043e\u0434 \u0441\u0435\u0442\u0438 \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0437, \u043b\u0438\u0431\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430&nbsp;\u043e\u0434\u0438\u043d \u0438\u0437&nbsp;\u043d\u0438\u0445, \u0438&nbsp;\u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0442\u044c \u0435\u0433\u043e. \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0435\u0449\u0435 \u043e\u0434\u043d\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e:<\/p>\n<details class=\"spoiler\">\n<summary>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ \u0413\u0434\u0435-\u0442\u043e \u0432 html \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 lodash: &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/lodash.js\/4.17.21\/lodash.min.js\"&gt;&lt;\/script&gt; ... const recognizeSignal = () =&gt; {   let prevNetState;   \/\/ \u041d\u0430 \u0432\u0445\u043e\u0434 \u0441\u0435\u0442\u0438 \u043f\u043e\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0439 \u0441\u0438\u0433\u043d\u0430\u043b. \u0424\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438    \/\/ <\/code><\/pre>\n<\/div>\n<\/details>\n<p><\/br><\/br><\/br><\/p>\n<\/li>\n<\/li>\n<p><\/br><\/br><\/br><\/br><\/p>\n<\/li>\n<\/ol>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-324399","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/324399","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=324399"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/324399\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=324399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=324399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=324399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}