{"id":362247,"date":"2024-05-21T01:31:08","date_gmt":"2024-05-21T01:31:08","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=362247"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2024-05-21T01:31:08","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=362247","title":{"rendered":"<span>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438 \u0434\u043b\u044f \u0441\u043e\u0440\u0435\u0432\u043d\u043e\u0432\u0430\u043d\u0438\u044f Digit Recognizer \u043d\u0430 Kaggle \u0438 \u0435\u0451 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435. \u0427\u0430\u0441\u0442\u044c \u21162<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0421\u0442\u0430\u0442\u044c\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u0435\u043c <a href=\"https:\/\/habr.com\/ru\/articles\/778546\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/a>, \u0432\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u0439\u00a0\u0431\u044b\u043b\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0430 \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u0430\u044f \u0441\u0435\u0442\u044c \u0434\u043b\u044f\u00a0\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438 \u0441\u043e\u0440\u0435\u0432\u043d\u043e\u0432\u0430\u043d\u0438\u044f Digit Recognizer \u043d\u0430\u00a0Kaggle. \u0412\u00a0\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435\u00a0\u0431\u044b\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0442\u0440\u044e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438 \u0432\u00a0\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0441\u043e\u0440\u0435\u0432\u043d\u043e\u0432\u0430\u043d\u0438\u044f (\u0434\u043e 0.99\u00a0896), \u0432\u00a0\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0447\u0435\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u044f \u0430\u0432\u0442\u043e\u0440\u0430 \u0432\u00a0\u043b\u0438\u0434\u0435\u0440\u0431\u043e\u0440\u0434\u0435 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u0440\u043e\u0441\u043b\u0430. \u0412\u00a0\u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u0443\u0447\u0435\u043d\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438 \u0432\u00a0\u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0434\u043b\u044f\u00a0\u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0440\u0443\u043a\u043e\u043f\u0438\u0441\u043d\u044b\u0445 \u0446\u0438\u0444\u0440.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bd8\/f3f\/773\/bd8f3f773d19846069a846c487f0c0eb.png\" width=\"629\" height=\"361\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/bd8\/f3f\/773\/bd8f3f773d19846069a846c487f0c0eb.png\"\/><\/figure>\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0435\u0448\u0430\u0435\u0442 \u0437\u0430\u0434\u0430\u0447\u0443 \u0438\u0437 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0439 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438, \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0432\u0441\u0442\u0430\u0451\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0435\u0451 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0432\u043e\u0451\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438? \u0412\u0435\u0434\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u0439\u0442\u0438 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b <a href=\"https:\/\/colab.research.google.com\" rel=\"noopener noreferrer nofollow\">Google Colab<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/github.com\/jupyter\/notebook\" rel=\"noopener noreferrer nofollow\">Jupyter Notebook<\/a>, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u0442\u044c \u043a\u0430\u043a\u0443\u044e-\u043b\u0438\u0431\u043e \u043f\u043e\u043b\u044c\u0437\u0443.<\/p>\n<p>\u0417\u0430\u0434\u0430\u0447\u0430 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u043e\u0431\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0432 \u0441\u0432\u043e\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e TensorFlow. \u0418\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u0447\u0442\u043e \u043f\u0440\u0438 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0438 \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0435\u0451 \u0432\u0435\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438. TensorFlow \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0432\u0435\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u044b \u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u044c \u0438\u0445 \u0432 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430 \u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438 (\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0435\u0451 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f). \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0438 \u0434\u0435\u043f\u043b\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u043d\u0430\u043c \u0436\u0438\u0437\u043d\u044c.<\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0434\u043b\u044f \u0434\u0435\u043f\u043b\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438:<\/p>\n<ol>\n<li>\n<p>\u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438 (\u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430)<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0432\u0435\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u041f\u0435\u0440\u0435\u043d\u043e\u0441 \u0432\u0435\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u043e\u0432 (\u043f\u043e\u0431\u043b\u0438\u0436\u0435 \u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u0430\u044f \u0441\u0435\u0442\u044c \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0430)<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u0435\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u043e\u0432 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u043f\u0440\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u0437\u0430\u0434\u0430\u0447 (\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0438)<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0435\u0431-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Flask, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0448\u0430\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0440\u0443\u043a\u043e\u043f\u0438\u0441\u043d\u044b\u0445 \u0446\u0438\u0444\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0432\u0435\u0441\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438.<\/p>\n<h2>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<h3>\u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0432\u0435\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u043e\u0432<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432\u0435\u0441\u0430 \u043c\u043e\u0434\u0435\u043b\u0438, \u043d\u043e \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c? \u0414\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e. \u0412 <a href=\"https:\/\/habr.com\/ru\/articles\/778546\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a> \u043f\u0440\u0438 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0438 \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438 \u0431\u044b\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u043a\u043e\u043b\u0431\u044d\u043a ModelCheckpoint, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u043d\u0430\u0438\u043b\u0443\u0447\u0448\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043c\u043e\u0434\u0435\u043b\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u0430\u043f\u043a\u0443 mnist-cnn.hd5 \u0438 \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u0440\u0443\u0447\u043d\u043e\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438. \u041a\u043e\u0434 \u043a\u043e\u043b\u0431\u044d\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"python\"># \u041a\u043e\u043b\u0431\u044d\u043a \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438 checkpoint = ModelCheckpoint('mnist-cnn.hd5',                              monitor='val_accuracy',     # \u0414\u043e\u043b\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0432\u0435\u0442\u043e\u0432 \u043d\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u0447\u043d\u043e\u043c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435                              save_best_only=True,        # \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043b\u0443\u0447\u0448\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442                                verbose=1)                  # \u0412\u044b\u0432\u043e\u0434 \u043b\u043e\u0433\u043e\u0432\u0439<\/code><\/pre>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043b\u0431\u044d\u043a\u0430 \u0432\u0435\u0441\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c, \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 (\u0432\u0437\u044f\u0442 \u0438\u0437 <a href=\"https:\/\/tensorflow.google.cn\/tutorials\/keras\/save_and_load\" rel=\"noopener noreferrer nofollow\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>):<\/p>\n<pre><code class=\"python\">model.save_weights('.\/checkpoints\/my_checkpoint')<\/code><\/pre>\n<p>\u041d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435 1 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0444\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0430\u043f\u043a\u0438 model-cnn.hd5 \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0432 \u043d\u0435\u0451 \u0432\u0435\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u043e\u0432.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/757\/fdc\/7a2\/757fdc7a2547ee0c3f703508ce4e4639.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 1 - \u0414\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 1 - \u0414\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438\" width=\"778\" height=\"190\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/757\/fdc\/7a2\/757fdc7a2547ee0c3f703508ce4e4639.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 1 &#8212; \u0414\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438<\/figcaption><\/div>\n<\/figure>\n<h3>\u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e. <\/p>\n<p>\u0427\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430? \u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0434\u043d\u043e\u0433\u043e \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0435\u0433\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438. \u0412 \u043e\u0431\u0449\u0435\u043c-\u0442\u043e, \u043d\u0430 \u044d\u0442\u043e\u043c \u0432\u0441\u0451. \u0412 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f.<\/p>\n<p>\u0412 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 (\u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u043e\u0442\u0435\u0440\u0435\u0439 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430), \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u0435\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u043e\u0432 \u0432 \u043c\u043e\u0434\u0435\u043b\u044c (\u0435\u0451 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445), \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438 (response).<\/p>\n<h3>\u0424\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430<\/h3>\n<p>\u041d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435 2 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0444\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/285\/738\/20d\/28573820d0cd4436e6845c638aae998e.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 2 - \u0424\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 2 - \u0424\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\" width=\"210\" height=\"183\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/285\/738\/20d\/28573820d0cd4436e6845c638aae998e.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 2 &#8212; \u0424\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/figcaption><\/div>\n<\/figure>\n<p>\u041c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043d\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0435 \u0432\u0435\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u044b \u043c\u043e\u0434\u0435\u043b\u0438 (model.h5), \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u0430\u043f\u043a\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u0434\u0430\u0447\u0438 \u0441\u0442\u0430\u0442\u0438\u043a\u0438 (public, \u043d\u043e \u043e\u043d\u0430 \u0441\u043a\u043e\u0440\u0435\u0435 \u043d\u0443\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430 \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 (app.py) \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u0444\u0430\u0439\u043b\u044b.<\/p>\n<p>\u041e\u0441\u043e\u0431\u043e\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u0434\u0435\u043b\u0438\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c \u0432 requirements.txt, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u0442\u0430\u0440\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 TensorFlow \u0438\u043b\u0438 \u0431\u043e\u043b\u0435\u0435 \u043d\u043e\u0432\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043a\u043e\u0434\u043e\u043c.<\/p>\n<details class=\"spoiler\">\n<summary>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438 \u0432 Python<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u043c \u0441\u043f\u0438\u0441\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0442\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u0446\u0435\u043b\u044c\u044e \u0438\u0445 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:<\/p>\n<pre><code class=\"bash\">pip freeze > requirements.txt<\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u0437 requirements.txt \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"bash\">python -m pip install -r requirements.txt  # \u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 pip install -r requirements.txt<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043f\u0430\u043f\u043a\u0435 requirements.txt (\u0442\u0430\u043a\u043e\u0435 \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e), \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:<\/p>\n<pre><code class=\"bash\">pip uninstall -y -r requirements.txt<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<h3>\u0422\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430 \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044e \u0432\u0435\u0441\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435:<\/p>\n<pre><code class=\"python\">import os import uuid import numpy as np from flask import Flask, request, jsonify import tensorflow as tf from PIL import Image from flask_cors import CORS  # \u041f\u0443\u0442\u044c \u043a \u043f\u0430\u043f\u043a\u0435 public base_path = '.\/public\/'  # \u042d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 flask-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f app = Flask(__name__, static_folder=\"public\")  # \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 CORS-\u043f\u043e\u043b\u0438\u0442\u0438\u043a\u0438 cors = CORS(app, origins=[\"http:\/\/localhost:3000\"])  # \u042d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0446\u0438\u0444\u0440 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 @app.route('\/digit-recognize', methods=['POST']) def upload_file():     # \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e \u0444\u0430\u0439\u043b\u0435     file = request.files['file']      # \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430     file_ext = file.filename.rsplit('.', 1)[1].lower()      # \u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f UUID \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430     c_uuid = str(uuid.uuid4())      # \u0424\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u043f\u0443\u0442\u0438 \u043a \u0444\u0430\u0439\u043b\u0443     filename = base_path + c_uuid + '.' + file_ext      # \u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440     file.save(filename)      # \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u0435\u0441\u043e\u0432 \u043c\u043e\u0434\u0435\u043b\u0438     model = tf.keras.models.load_model(\"model.h5\")      # \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0435\u0439 \u0432 grayscale     img = Image.open(filename).convert(\"L\")      # \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f     new_image = img.resize((28, 28))      # \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430     x = np.array(new_image).reshape((28, 28, 1))     x = np.expand_dims(x, axis=0)     images = np.vstack([x])      # \u041f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0430\u043d\u0438\u0435 \u0446\u0438\u0444\u0440\u044b \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438     classes = model.predict(images, batch_size=1)      # \u0412\u044b\u0431\u043e\u0440 \u0438\u0437 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e (\u0432\u044b\u0431\u043e\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 \u0446\u0438\u0444\u0440\u044b)     result = int(np.argmax(classes))      img.close()      # \u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f     os.remove(filename)      # \u0412\u043e\u0437\u0432\u0440\u0430\u0442 \u043e\u0442\u0432\u0435\u0442\u0430     return jsonify({'value': result})  # \u0417\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e 5000 \u043f\u043e\u0440\u0442\u0443 app.run(host='0.0.0.0', port=5000) <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u0435\u0433\u043e \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443.<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c Flask \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u0443\u0442\u044c \u043a \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 \u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c CORS-\u043f\u043e\u043b\u0438\u0442\u0438\u043a\u0443:<\/p>\n<pre><code class=\"python\"># \u041f\u0443\u0442\u044c \u043a \u043f\u0430\u043f\u043a\u0435 public base_path = '.\/public\/'  # \u042d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 flask-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f app = Flask(__name__, static_folder=\"public\")  # \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 CORS-\u043f\u043e\u043b\u0438\u0442\u0438\u043a\u0438 cors = CORS(app, origins=[\"http:\/\/localhost:3000\"])<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u043e \u043f\u043e\u0440\u0442\u0443 3000, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 origins \u043f\u0440\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 CORS-\u043f\u043e\u043b\u0438\u0442\u0438\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0430\u0434\u0440\u0435\u0441 http:\/\/localhost:3000.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430:<\/p>\n<pre><code class=\"python\"># \u042d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0446\u0438\u0444\u0440 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 @app.route('\/digit-recognize', methods=['POST']) def upload_file():   ...<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 POST-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0440\u0443\u043a\u043e\u043f\u0438\u0441\u043d\u044b\u0445 \u0446\u0438\u0444\u0440 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 \/digit-recognize. \u041f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 app.route (\u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f).<\/p>\n<p>\u0414\u0432\u0438\u0433\u0430\u0435\u043c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435, \u043d\u043e \u0443\u0436\u0435 \u043f\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 POST-\u0437\u0430\u043f\u0440\u043e\u0441\u0430:<\/p>\n<pre><code class=\"python\"># \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e \u0444\u0430\u0439\u043b\u0435 file = request.files['file']  # \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 file_ext = file.filename.rsplit('.', 1)[1].lower()  # \u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f UUID \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 c_uuid = str(uuid.uuid4())  # \u0424\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u043f\u0443\u0442\u0438 \u043a \u0444\u0430\u0439\u043b\u0443 filename = base_path + c_uuid + '.' + file_ext  # \u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 file.save(filename)<\/code><\/pre>\n<p>\u0412 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u0444\u0430\u0439\u043b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e request.files (\u043c\u0430\u0441\u0441\u0438\u0432 \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c), \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 UUID \u0434\u043b\u044f \u043d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 \u0438 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043f\u043e\u043b\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0435\u0433\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c (\u0432 \u043f\u0430\u043f\u043a\u0443 public).<\/p>\n<p>\u0414\u0432\u0438\u0433\u0430\u0435\u043c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435:<\/p>\n<pre><code class=\"python\"># \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u0435\u0441\u043e\u0432 \u043c\u043e\u0434\u0435\u043b\u0438 model = tf.keras.models.load_model(\"model.h5\")  # \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0435\u0439 \u0432 grayscale img = Image.open(filename).convert(\"L\")  # \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f new_image = img.resize((28, 28))  # \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 x = np.array(new_image).reshape((28, 28, 1)) x = np.expand_dims(x, axis=0) images = np.vstack([x])  # \u041f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0430\u043d\u0438\u0435 \u0446\u0438\u0444\u0440\u044b \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 classes = model.predict(images, batch_size=1)  # \u0412\u044b\u0431\u043e\u0440 \u0438\u0437 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e (\u0432\u044b\u0431\u043e\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 \u0446\u0438\u0444\u0440\u044b) result = int(np.argmax(classes))  img.close()  # \u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f os.remove(filename)  # \u0412\u043e\u0437\u0432\u0440\u0430\u0442 \u043e\u0442\u0432\u0435\u0442\u0430 return jsonify({'value': result})<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u00a0\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u043e\u0441\u044c \u0432\u00a0\u043f\u0430\u043f\u043a\u0435 public \u043c\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u044d\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u0435\u0433\u043e \u0432\u00a0\u0447\u0435\u0440\u043d\u043e\u2011\u0431\u0435\u043b\u043e\u0435 \u0432\u00a0\u0433\u0440\u0430\u0434\u0430\u0446\u0438\u044f\u0445 \u0441\u0435\u0440\u043e\u0433\u043e (convert(\u00abL\u00bb)).<\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043c\u0435\u043d\u044f\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 28\u00d728\u00a0(\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u0445\u0443\u0434\u0448\u0430\u0435\u0442\u0441\u044f, \u043e\u0434\u043d\u0430\u043a\u043e \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u0430\u044f, \u043a\u0430\u043a\u00a0\u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u0434\u0430\u043b\u0435\u0435, \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u00a0\u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0435\u043c \u0442\u0430\u043a\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439).<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0438\u0434\u0451\u0442 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u00a0\u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u00a0\u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 (\u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u00a0\u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u044f\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u044f \u043c\u043e\u0434\u0435\u043b\u0438).<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u00a0\u043c\u0430\u0441\u0441\u0438\u0432 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0435\u0433\u043e \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u043b\u044f\u00a0\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0438 \u0432\u044b\u044f\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043d\u0430\u0434\u043b\u0435\u0436\u043d\u043e\u0441\u0442\u0438 \u043a\u00a0\u0442\u043e\u043c\u0443 \u0438\u043b\u0438\u00a0\u0438\u043d\u043e\u043c\u0443 \u043a\u043b\u0430\u0441\u0441\u0443 \u0446\u0438\u0444\u0440 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0432\u0441\u0435\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>\u0417\u0430\u043f\u0443\u0441\u043a \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"python\"># \u0417\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e 5000 \u043f\u043e\u0440\u0442\u0443 app.run(host='0.0.0.0', port=5000)<\/code><\/pre>\n<h3>\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h3>\n<p>\u041f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u0431\u0443\u0447\u0435\u043d\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0438\u0437 10-\u0442\u0438 \u0446\u0438\u0444\u0440 (\u043e\u0442 0 \u0434\u043e 9). <\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f Postman.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9ae\/9bd\/9dc\/9ae9bd9dc85915d36f6a33c4ee56fc5a.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 3 - \u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u0430\u0439\u043b\u0430 \u0447\u0435\u0440\u0435\u0437 Postman\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 3 - \u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u0430\u0439\u043b\u0430 \u0447\u0435\u0440\u0435\u0437 Postman\" width=\"1392\" height=\"676\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9ae\/9bd\/9dc\/9ae9bd9dc85915d36f6a33c4ee56fc5a.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 3 &#8212; \u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u0430\u0439\u043b\u0430 \u0447\u0435\u0440\u0435\u0437 Postman<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435 3 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0432 Postman \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441 form-data \u0438 \u043f\u043e \u043a\u043b\u044e\u0447\u0443 file \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 one.png, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0430 \u0435\u0434\u0438\u043d\u0438\u0446\u0430 (\u0441\u043c. \u0440\u0438\u0441. 4).<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9a0\/1e5\/8da\/9a01e58dae3886ac56c9102857267b75.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 4 - \u0415\u0434\u0438\u043d\u0438\u0446\u0430\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 4 - \u0415\u0434\u0438\u043d\u0438\u0446\u0430\" width=\"520\" height=\"505\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9a0\/1e5\/8da\/9a01e58dae3886ac56c9102857267b75.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 4 &#8212; \u0415\u0434\u0438\u043d\u0438\u0446\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u041c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u0430\u044f \u0441\u0435\u0442\u044c \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u043b\u0430 \u0435\u0434\u0438\u043d\u0438\u0446\u0443 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e (\u0442.\u043a. \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 value \u0440\u0430\u0432\u043d\u043e 1). \u041d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435 5 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0446\u0438\u0444\u0440.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fd1\/1ee\/197\/fd11ee1976a788bf7741eb777d5ca66a.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 5 - \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0446\u0438\u0444\u0440 \u043e\u0442 0 \u0434\u043e 9\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 5 - \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0446\u0438\u0444\u0440 \u043e\u0442 0 \u0434\u043e 9\" width=\"1120\" height=\"590\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fd1\/1ee\/197\/fd11ee1976a788bf7741eb777d5ca66a.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 5 &#8212; \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0446\u0438\u0444\u0440 \u043e\u0442 0 \u0434\u043e 9<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u0440\u043e\u0434\u0435\u00a0\u0431\u044b \u0432\u0441\u0435 \u0446\u0438\u0444\u0440\u044b \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u043b\u0438\u0441\u044c, \u043d\u0435\u00a0\u043f\u043b\u043e\u0445\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u041e\u0434\u043d\u0430\u043a\u043e \u0441\u00a0\u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0435\u043c \u0446\u0438\u0444\u0440\u044b 6\u00a0\u043e\u0447\u0435\u043d\u044c \u0441\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u043d\u044b \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. \u042f, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043f\u043e\u0434\u043e\u0431\u0440\u0430\u043b \u0442\u0430\u043a\u0443\u044e \u0446\u0438\u0444\u0440\u0443 6\u00a0\u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u043b\u0430\u0441\u044c \u0445\u043e\u0440\u043e\u0448\u043e (\u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u0438\u0434\u0435\u0442\u044c \u043f\u043e\u00a0\u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u043e\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f), \u043d\u043e\u00a0\u0432\u0441\u0451\u00a0\u0436\u0435 \u044d\u0442\u043e \u043e\u0448\u0438\u0431\u043a\u0430 \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438. \u0414\u0443\u043c\u0430\u044e, \u0447\u0442\u043e\u00a0\u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0432\u00a0\u043e\u0431\u0443\u0447\u0430\u044e\u0449\u0435\u0439 \u0432\u044b\u0431\u043e\u0440\u043a\u0435 (\u0435\u0451 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u0430\u043b\u043e) \u0438, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u00a0\u0442\u0440\u044e\u043a\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0439\u00a0\u0431\u044b\u043b \u043f\u0440\u0438\u043c\u0435\u043d\u0451\u043d \u043f\u0440\u0438\u00a0\u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0438 (\u043d\u043e \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430\u00a0\u0431\u044b\u043b\u0430 \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u043a\u0430\u043a\u00a0\u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f score). \u041d\u0435\u0439\u0440\u043e\u043d\u043d\u0430\u044f \u0441\u0435\u0442\u044c \u0432\u00a0\u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u043f\u0440\u0438\u00a0\u0442\u0435\u0441\u0442\u0430\u0445 \u0446\u0438\u0444\u0440\u044b 6\u00a0\u0432\u0438\u0434\u0438\u0442 \u0446\u0438\u0444\u0440\u0443 5\u00a0\u0438 \u0434\u043b\u044f\u00a0\u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u0435 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0446\u0438\u0444\u0440\u044b \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f (\u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u00a0resize \u0434\u043e 28\u00d728\u00a0\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0435\u00a0\u0443\u0445\u0443\u0434\u0448\u0430\u043b\u043e\u0441\u044c).<\/p>\n<p>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0434\u043b\u044f\u00a0\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043f\u043e\u00a0\u0441\u0441\u044b\u043b\u043a\u0435 \u0432\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430\u0445, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c \u0441\u043c\u043e\u0436\u0435\u0442 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043c\u043e\u0434\u0435\u043b\u0438. \u041f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a\u00a0\u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u044e \u0432\u0435\u0431\u2011\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<h2>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<h2>\u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f<\/h2>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u0432\u0435\u0431\u2011\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432\u00a0\u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0434\u043b\u044f\u00a0\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0446\u0438\u0444\u0440 \u0441\u00a0\u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0438\u0445 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u043d\u0430\u00a0\u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f\u00a0\u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u0430\u0439\u0442\u0438 \u043d\u0430\u00a0\u0441\u0430\u0439\u0442, \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0446\u0438\u0444\u0440\u0443, \u0430\u00a0\u0437\u0430\u0442\u0435\u043c \u043d\u0430\u0436\u0430\u0432 \u043d\u0430\u00a0\u043e\u0434\u0438\u043d \u0438\u0437\u00a0\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430\u00a0\u0441\u0435\u0440\u0432\u0435\u0440. \u041f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043e\u043d \u0435\u0433\u043e \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0451\u0442 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0435\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442.<\/p>\n<h3>\u0424\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430<\/h3>\n<p>\u0424\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435 6.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9d5\/f1d\/9f9\/9d5f1d9f906978bdeaf6eb0203f1b3bc.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 6 - \u0424\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 6 - \u0424\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\" width=\"328\" height=\"692\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9d5\/f1d\/9f9\/9d5f1d9f906978bdeaf6eb0203f1b3bc.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 6 &#8212; \u0424\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0430\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043e\u043f\u0438\u0448\u0443\u00a0\u043b\u0438\u0448\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0435\u0441:<\/p>\n<ol>\n<li>\n<p>components\/UI\u00a0\u2014 \u0432\u00a0\u0434\u0430\u043d\u043d\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432\u0441\u0435 UI\u2011\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u0435\u0431\u2011\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>containers\u00a0\u2014 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0434\u043b\u044f\u00a0\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 (\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0442 \u0432\u00a0\u0441\u0435\u0431\u044f \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b)<\/p>\n<\/li>\n<li>\n<p>context\/CanvasContext\u00a0\u2014 \u0432\u00a0\u0434\u0430\u043d\u043d\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0434\u043b\u044f\u00a0\u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0canvas \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u00a0\u043d\u0451\u043c \u0438\u0437\u00a0\u043b\u044e\u0431\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u00a0\u0443\u0440\u043e\u0432\u043d\u0435 \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0430)<\/p>\n<\/li>\n<li>\n<p>store\u00a0\u2014 \u0432\u00a0\u0434\u0430\u043d\u043d\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0434\u043b\u044f\u00a0\u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0Redux<\/p>\n<\/li>\n<li>\n<p>utils\u00a0\u2014 \u0432\u00a0\u0434\u0430\u043d\u043d\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0443\u0442\u0438\u043b\u0438\u0442\u044b (\u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440)<\/p>\n<\/li>\n<li>\n<p>index.js\u00a0\u2014 \u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430 \u0432\u00a0\u0432\u0435\u0431\u2011\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/p>\n<\/li>\n<\/ol>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0432\u00a0\u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0432\u0435\u0431\u2011\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<h3>\u0422\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430<\/h3>\n<p>\u0422\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">import React from \"react\"; import ReactDOM from \"react-dom\"; import \".\/index.css\"; import App from \".\/containers\/App\/App\"; import * as serviceWorker from \".\/serviceWorker\"; import { CanvasProvider } from \".\/context\/CanvasContext\/CanvasContext\"; import { Provider } from \"react-redux\"; import store from \".\/store\/store\";  ReactDOM.render(   &lt;React.StrictMode>     &lt;Provider store={store}>       &lt;CanvasProvider>         &lt;App \/>       &lt;\/CanvasProvider>     &lt;\/Provider>   &lt;\/React.StrictMode>,   document.getElementById(\"root\") );  serviceWorker.unregister();<\/code><\/pre>\n<p>\u0412\u00a0\u0446\u0435\u043b\u043e\u043c, \u0437\u0434\u0435\u0441\u044c \u0432\u0441\u0451 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e. \u041f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 Redux \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0447\u0435\u0440\u0435\u0437 \u043e\u0431\u0451\u0440\u0442\u043a\u0443 Prodiver, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u00a0\u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 CanvasProvider, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u00a0\u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c (\u043d\u0430\u043a\u043e\u043d\u0435\u0446\u2011\u0442\u043e) \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 App\u00a0\u2014 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u0435\u0431\u2011\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<h3>CanvasProvider<\/h3>\n<p>\u041e\u0431\u0451\u0440\u0442\u043a\u0430 CanvasProvider \u043f\u043e\u00a0\u0441\u0443\u0442\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u043c, \u0432\u00a0\u0440\u0430\u043c\u043a\u0430\u0445 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441\u00a0\u043a\u0430\u043a\u043e\u0439\u2011\u0442\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c\u044e \u0445\u043e\u043b\u0441\u0442\u0430 (canvas) \u043d\u0430\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043c\u043e\u0436\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0440\u0443\u043a\u043e\u043f\u0438\u0441\u043d\u044b\u0435 \u0446\u0438\u0444\u0440\u044b.<\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a\u00a0\u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 CanvasProvider \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0439, \u0442\u043e \u044f \u0437\u0430\u043a\u0440\u0435\u043f\u043b\u044e \u0435\u0433\u043e \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435 \u0432 \u00ab\u0441\u043f\u043e\u0439\u043b\u0435\u0440\u0435\u00bb, \u0430\u00a0\u0441\u0430\u043c, \u0432\u00a0\u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0443 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0432\u0430\u0436\u043d\u044b\u0445 \u0443\u0447\u0430\u0441\u0442\u043a\u043e\u0432 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u0447\u0438\u0442\u0430\u044f \u0447\u0442\u043e\u00a0\u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043b\u0441\u044f \u0441\u00a0\u043a\u043e\u0434\u043e\u043c, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u043c\u0441\u044f \u0432 \u00ab\u0441\u043f\u043e\u0439\u043b\u0435\u0440\u0435\u00bb.<\/p>\n<details class=\"spoiler\">\n<summary>\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 CanvasProdiver<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import React, { useContext, useRef, useState } from \"react\";  \/\/ \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 React-\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 const CanvasContext = React.createContext();  \/\/ \u0428\u0438\u0440\u0438\u043d\u0430 \/ \u0432\u044b\u0441\u043e\u0442\u0430 \u0445\u043e\u043b\u0441\u0442\u0430 const width = 512; const height = 512;  \/**  * \u041f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440 \u0445\u043e\u043b\u0441\u0442\u0430  * @param {*} param0 \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430  * @returns   *\/ export const CanvasProvider = ({ children }) => {   \/\/ \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f   const [isDrawing, setIsDrawing] = useState(false);    \/\/ \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0445\u043e\u043b\u0441\u0442   const canvasRef = useRef(null);    \/\/ \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442   const contextRef = useRef(null);    \/**    * \u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0445\u043e\u043b\u0441\u0442\u0430 (\u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f)    *\/   const prepareCanvas = () => {     const canvas = canvasRef.current;     canvas.width = width * 2;     canvas.height = height * 2;     canvas.style.width = `${width}px`;     canvas.style.height = `${height}px`;     canvas.style.border = \"1px solid black\";     canvas.style.background = \"black\";      const context = canvas.getContext(\"2d\");     context.scale(2, 2);     context.lineCap = \"round\";     context.strokeStyle = \"white\";     context.lineWidth = 8;     context.fillStyle = \"black\";     contextRef.current = context;   };    \/**    * \u041d\u0430\u0447\u0430\u043b\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f    * @param {*} param0 \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b    *\/   const startDrawing = ({ nativeEvent }) => {     const { offsetX, offsetY } = nativeEvent;     contextRef.current.beginPath();     contextRef.current.moveTo(offsetX, offsetY);     setIsDrawing(true);   };    \/**    * \u0417\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f    *\/   const finishDrawing = () => {     contextRef.current.closePath();     setIsDrawing(false);   };    \/**    * \u0420\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435    * @param {*} param0 \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b    * @returns     *\/   const draw = ({ nativeEvent }) => {     if (!isDrawing) {       return;     }     const { offsetX, offsetY } = nativeEvent;     contextRef.current.lineTo(offsetX, offsetY);     contextRef.current.stroke();   };    \/**    * \u041e\u0447\u0438\u0441\u0442\u043a\u0430 \u0445\u043e\u043b\u0441\u0442\u0430    *\/   const clearCanvas = () => {     const canvas = canvasRef.current;     const context = canvas.getContext(\"2d\")     context.fillStyle = \"black\"     context.fillRect(0, 0, canvas.width, canvas.height)   };    \/**    * \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044f \u0441\u043d\u0438\u043c\u043a\u0430 \u0445\u043e\u043b\u0441\u0442\u0430 \u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435    *\/   const getImage = () => {     return canvasRef.current.toDataURL(\"image\/jpeg\");   };    return (     &lt;CanvasContext.Provider       value={{         canvasRef,         contextRef,         prepareCanvas,         startDrawing,         finishDrawing,         clearCanvas,         draw,         getImage       }}     >       {children}     &lt;\/CanvasContext.Provider>   ); };  export const useCanvas = () => useContext(CanvasContext); <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 CanvasProvider \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f (\u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0441\u0435\u0439\u0447\u0430\u0441 \u0447\u0442\u043e-\u043b\u0438\u0431\u043e \u0438\u043b\u0438 \u043d\u0435\u0442), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b (\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f):<\/p>\n<pre><code class=\"javascript\"> \/\/ \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f   const [isDrawing, setIsDrawing] = useState(false);    \/\/ \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0445\u043e\u043b\u0441\u0442   const canvasRef = useRef(null);    \/\/ \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442   const contextRef = useRef(null);<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0447\u0435\u0433\u043e \u043b\u0438\u0431\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0445\u043e\u043b\u0441\u0442. \u0417\u0430 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0443 \u0445\u043e\u043b\u0441\u0442\u0430 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044f prepareCanvas:<\/p>\n<pre><code class=\"javascript\">  \/**    * \u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0445\u043e\u043b\u0441\u0442\u0430 (\u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f)    *\/   const prepareCanvas = () => {     \/\/ \u041e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0445\u043e\u043b\u0441\u0442\u043a\u0430     const canvas = canvasRef.current;     \/\/ \u0412\u043d\u0435\u0441\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u0432\u0438\u0437\u0443\u0430\u043b (\u0441\u0442\u0438\u043b\u0438 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430)     canvas.width = width * 2;     canvas.height = height * 2;     canvas.style.width = `${width}px`;     canvas.style.height = `${height}px`;     canvas.style.border = \"1px solid black\";     canvas.style.background = \"black\";      \/\/ \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0445\u043e\u043b\u0441\u0442\u0430     const context = canvas.getContext(\"2d\");     \/\/ \u0412\u043d\u0435\u0441\u0435\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u0432\u0438\u0437\u0443\u0430\u043b (\u0441\u0442\u0438\u043b\u0438 \u0441\u0430\u043c\u043e\u0433\u043e \u0445\u043e\u043b\u0441\u0442\u0430)     context.scale(2, 2);     context.lineCap = \"round\";     context.strokeStyle = \"white\";     context.lineWidth = 8;     context.fillStyle = \"black\";     contextRef.current = context;   };<\/code><\/pre>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0434\u0451\u0442 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u0445\u043e\u043b\u0441\u0442\u0430 \u0438 html-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 canvas&#8217;a.<\/p>\n<p>\u0412 \u043e\u0431\u0449\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 canvas \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/628\/756\/258\/6287562587cbc48812d5d444e4045e59.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 7 - \u0427\u0451\u0440\u043d\u044b\u0439 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 7 - \u0427\u0451\u0440\u043d\u044b\u0439 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\" width=\"459\" height=\"418\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/628\/756\/258\/6287562587cbc48812d5d444e4045e59.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 7 &#8212; \u0427\u0451\u0440\u043d\u044b\u0439 \u043a\u0432\u0430\u0434\u0440\u0430\u0442<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u0430, \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u00a0\u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0445\u043e\u043b\u0441\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043f\u043e\u043b\u043d\u0435\u043d \u0447\u0451\u0440\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c. \u041f\u0440\u0438\u00a0\u044d\u0442\u043e\u043c \u043a\u0438\u0441\u0442\u044c \u0431\u0443\u0434\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0431\u0435\u043b\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c, \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0442\u0435\u043c \u0440\u0438\u0441\u0443\u043d\u043a\u0430\u043c, \u043d\u0430\u00a0\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u0430\u044f \u0441\u0435\u0442\u044c\u00a0\u0431\u044b\u043b\u0430 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0430.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0443\u00a0\u043d\u0430\u0441 \u0438\u0434\u0443\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f\u00a0\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f (\u0437\u0430\u0436\u0430\u0442\u0438\u0435 \u043c\u044b\u0448\u0438), \u0437\u0430\u0442\u0435\u043c \u0441\u0430\u043c\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 (\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043c\u044b\u0448\u0438), \u0438, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f (\u043e\u0442\u043f\u0443\u0441\u043a\u0430\u043d\u0438\u0435 \u043c\u044b\u0448\u0438).<\/p>\n<pre><code class=\"javascript\">  \/**    * \u041d\u0430\u0447\u0430\u043b\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f    * @param {*} param0 \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b    *\/   const startDrawing = ({ nativeEvent }) => {     const { offsetX, offsetY } = nativeEvent;     contextRef.current.beginPath();     contextRef.current.moveTo(offsetX, offsetY);     setIsDrawing(true);   };    \/**    * \u0417\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f    *\/   const finishDrawing = () => {     contextRef.current.closePath();     setIsDrawing(false);   };    \/**    * \u0420\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435    * @param {*} param0 \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b    * @returns     *\/   const draw = ({ nativeEvent }) => {     if (!isDrawing) {       return;     }     const { offsetX, offsetY } = nativeEvent;     contextRef.current.lineTo(offsetX, offsetY);     contextRef.current.stroke();   };<\/code><\/pre>\n<p>\u0412\u0441\u0435 \u044d\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 Canvas \u0438\u0437 \u043f\u0430\u043f\u043a\u0438 containers \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">\/**  * \u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0445\u043e\u043b\u0441\u0442\u0430  * @returns   *\/ const Canvas = () => {   const {     canvasRef,     prepareCanvas,     startDrawing,     finishDrawing,     draw,   } = useCanvas();    useEffect(() => {     prepareCanvas();   }, []);    return (     &lt;canvas       onMouseDown={startDrawing}       onMouseUp={finishDrawing}       onMouseMove={draw}       ref={canvasRef}     \/>   ); }<\/code><\/pre>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f \u043a\u00a0\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443 CanvasContext \u0447\u0435\u0440\u0435\u0437 \u0445\u0443\u043a useCanvas \u0438 \u043d\u0430\u0432\u0435\u0448\u0438\u0432\u0430\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043d\u0430\u00a0\u0441\u0430\u043c HTML\u2011\u044d\u043b\u0435\u043c\u0435\u043d\u0442 canvas. \u041d\u0430\u00a0\u0437\u0430\u0436\u0430\u0442\u0438\u0435 \u043c\u044b\u0448\u0438\u00a0\u2014 startDrawing, \u043d\u0430\u00a0\u043e\u0442\u043f\u0443\u0441\u043a\u0430\u043d\u0438\u0435\u00a0\u2014 finishDrawing, \u0430\u00a0\u043d\u0430\u00a0\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435\u00a0\u2014 draw.<\/p>\n<p>\u0412\u00a0CanvasProvider \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0436\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f getImage, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0440\u0438\u0441\u0443\u043d\u043e\u043a \u043d\u0430\u00a0\u0445\u043e\u043b\u0441\u0442\u0435 \u0432\u00a0\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 image\/png, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430\u00a0\u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f\u00a0\u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f:<\/p>\n<pre><code class=\"javascript\">  \/**    * \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044f \u0441\u043d\u0438\u043c\u043a\u0430 \u0445\u043e\u043b\u0441\u0442\u0430 \u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435    *\/   const getImage = () => {     return canvasRef.current.toDataURL(\"image\/jpeg\");   };<\/code><\/pre>\n<p>\u041d\u0443 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 CanvasProvider \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0441 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u0451\u043d\u043d\u044b\u043c\u0438 \u043a \u043d\u0435\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438:<\/p>\n<pre><code class=\"javascript\">return (     &lt;CanvasContext.Provider       value={{         canvasRef,      \/\/ \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0445\u043e\u043b\u0441\u0442\u0430         contextRef,     \/\/ \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0445\u043e\u043b\u0441\u0442\u0430         prepareCanvas,  \/\/ \u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0445\u043e\u043b\u0441\u0442\u0432\u0430         startDrawing,   \/\/ \u041d\u0430\u0447\u0430\u043b\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f         finishDrawing,  \/\/ \u0417\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f         clearCanvas,    \/\/ \u041e\u0447\u0438\u0441\u0442\u043a\u0430 \u0445\u043e\u043b\u0441\u0442\u0430         draw,           \/\/ \u0420\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435         getImage        \/\/ \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f       }}     >       {children}     &lt;\/CanvasContext.Provider>   );<\/code><\/pre>\n<h3>\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 App.<\/p>\n<p>\u0415\u0433\u043e \u043a\u043e\u0434 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">function App() {   \/\/ \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430   const recognizeSelector = useAppSelector((s) => s.recognizeReducer);    return (     &lt;>       &lt;div className={styles.container}>         &lt;div className={styles.paint}>           &lt;Canvas \/>           &lt;div className={styles.buttons}>             &lt;ClearCanvasButton \/>             &lt;RecognizeButton \/>           &lt;\/div>           &lt;input className={styles.input} value={recognizeSelector.value} readOnly \/>         &lt;\/div>       &lt;\/div>     &lt;\/>   ); }  export default App;<\/code><\/pre>\n<p>\u0412\u00a0\u0434\u0430\u043d\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0431\u043e\u0440\u043a\u0430 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u0445\u043e\u043b\u0441\u0442, \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u043e\u0434\u0438\u043d input \u0434\u043b\u044f\u00a0\u0432\u044b\u0432\u043e\u0434\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f). <\/p>\n<p>\u0412\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0442\u0430\u043a\u0436\u0435 \u0438\u0434\u0451\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441\u00a0Redux \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c \u0447\u0435\u0440\u0435\u0437 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440, \u043a\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043d\u0438\u0436\u0435.<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434 \u0441\u043b\u0430\u0439\u0441\u0430 recognizeSlize<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">\/* \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 *\/ import { createSlice, PayloadAction } from \"@reduxjs\/toolkit\"; import { IValueModel } from \"src\/models\/IValueModel\";  \/* \u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b *\/ interface IRecognizeSlice {   value: string;   isLoading: boolean; }  \/* \u0411\u0430\u0437\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043b\u0430\u0439\u0441\u0430 *\/ const initialState: IRecognizeSlice = {   value: \"\",   isLoading: false, };  export const recognizeSlice = createSlice({   name: \"recognize_slice\",   initialState,   reducers: {     loadingStart(state: IRecognizeSlice) {       state.value = \"\";       state.isLoading = true;     },      loadingEnd(state: IRecognizeSlice) {       state.isLoading = false;     },      clear(state: IRecognizeSlice) {       state.value = \"\";       state.isLoading = false;     },      setValue(state: IRecognizeSlice, action: PayloadAction&lt;IValueModel>) {       if (action.payload) {         state.value = action.payload.value.toString();       }     },   }, });  export default recognizeSlice.reducer; <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u043e\u00a0\u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f\u00a0\u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0432\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 RecognizeButton.<\/p>\n<h3>RecognizeButton<\/h3>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u043d\u043e\u043f\u043a\u0438, \u043f\u0440\u0438\u00a0\u043a\u043b\u0438\u043a\u0435 \u043d\u0430\u00a0\u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043a\u043e\u043f\u0438\u044f \u0445\u043e\u043b\u0441\u0442\u0430 \u0432\u00a0\u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044f \u044d\u0442\u043e\u0439 \u043a\u043e\u043f\u0438\u0438 (\u0440\u0438\u0441\u0443\u043d\u043a\u0430 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 image\/png) \u0432\u00a0\u0444\u0430\u0439\u043b:<\/p>\n<pre><code class=\"javascript\">const RecognizeButton = () => {     \/\/ \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440     const dispatch = useAppDispatch();      \/\/ \u0411\u0435\u0440\u0451\u043c \u0438\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0445\u043e\u043b\u0441\u0442\u0430     const { getImage } = useCanvas();      const clickHandler = () => {         \/\/ \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 image\/png \u0432 File         const file = dataURLToFile(getImage(), \"file.png\");                \/\/ \u041f\u0440\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c action recognizeImage         file &amp;&amp; dispatch(RecognizeAction.recognizeImage(file));     }      return (         &lt;>             &lt;button className={styles.button} onClick={clickHandler}>\u0420\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0442\u044c&lt;\/button>         &lt;\/>     ); }<\/code><\/pre>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 image\/png \u0432 File<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">\/**  * \u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 DataURL \u0432 \u0444\u0430\u0439\u043b  * @param dataURL DataURL \u0444\u0430\u0439\u043b\u0430  * @param filename \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430  * @returns {File} \u0424\u0430\u0439\u043b  *\/ export const dataURLToFile = (dataURL: string, filename: string) => {   if (dataURL.length === 0) {     return null;   }    let arr = dataURL.split(\",\"),     \/\/ @ts-ignore     mime = arr[0].match(\/:(.*?);\/)[1],     bstr = atob(arr[1]),     n = bstr.length,     u8arr = new Uint8Array(n);   while (n--) {     u8arr[n] = bstr.charCodeAt(n);   }      return new File([u8arr], filename, { type: mime }); };<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 &#171;\u0420\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0442\u044c&#187;, \u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u0443\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 recognizeImage \u0438\u0437 actions:<\/p>\n<pre><code class=\"typescript\">\/**  * \u041e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f  * @param image \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435  * @returns   *\/ const recognizeImage = (image: File) => async (dispatch: any) => {   \/\/ \u041d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430   dispatch(recognizeSlice.actions.loadingStart());    try {     \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f     const formData = new FormData();     \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 \u0432 FormData     formData.append(\"file\", image);      \/\/ \u041e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0435     const response = await axios.post(       `${Api.server}${Api.digit_recognize}`,       formData     );      \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a     if (response.status != 200 &amp;&amp; response.status != 201) {       console.log(response.data.message);       return;     }      \/\/ \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043e\u0442\u0432\u0435\u0442\u0430 \u0441\u043b\u0430\u0439\u0441\u0443     dispatch(recognizeSlice.actions.setValue(response.data));   } catch (e: any) {     console.log(e);   }    \/\/ \u041e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438   dispatch(recognizeSlice.actions.loadingEnd()); };<\/code><\/pre>\n<p>\u0412\u00a0\u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0440\u0430\u0431\u043e\u0442\u0430 \u0441\u00a0\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0434\u043b\u044f\u00a0\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 (\u0435\u0441\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u043b\u0438\u00a0\u043d\u0435\u0442), \u043d\u0443 \u0438 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u00a0\u0444\u043e\u0440\u043c\u0430\u0442\u0435 FormData \u0441\u00a0\u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u043d\u0430\u00a0\u0441\u0435\u0440\u0432\u0435\u0440.<\/p>\n<p>\u0412\u00a0\u043e\u0431\u0449\u0435\u043c\u2011\u0442\u043e, \u0432\u0441\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u0435\u0431\u2011\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u00a0\u0431\u044b\u043b\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u044b.<\/p>\n<h3>\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h3>\n<p>\u041e\u0442\u0440\u0438\u0441\u0443\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0446\u0438\u0444\u0440, \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0447\u0442\u043e\u00a0\u0432\u0441\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0f0\/f57\/f2c\/0f0f57f2cbdd35b700fa8a42015015f9.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 8 - \u0420\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0435 \u0446\u0438\u0444\u0440\u044b 5\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 8 - \u0420\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0435 \u0446\u0438\u0444\u0440\u044b 5\" width=\"670\" height=\"836\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0f0\/f57\/f2c\/0f0f57f2cbdd35b700fa8a42015015f9.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 8 &#8212; \u0420\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0435 \u0446\u0438\u0444\u0440\u044b 5<\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3fc\/a51\/990\/3fca51990da3b08d60a393cfd7c8a9b8.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 9 - \u0420\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0435 \u0446\u0438\u0444\u0440\u044b 7\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 9 - \u0420\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0435 \u0446\u0438\u0444\u0440\u044b 7\" width=\"676\" height=\"825\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3fc\/a51\/990\/3fca51990da3b08d60a393cfd7c8a9b8.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 9 &#8212; \u0420\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0435 \u0446\u0438\u0444\u0440\u044b 7<\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f4e\/06d\/7fa\/f4e06d7fae28b133e62d61591fe6446a.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 10 - \u0420\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0435 \u0446\u0438\u0444\u0440\u044b 4\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 10 - \u0420\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0435 \u0446\u0438\u0444\u0440\u044b 4\" width=\"663\" height=\"829\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f4e\/06d\/7fa\/f4e06d7fae28b133e62d61591fe6446a.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 10 &#8212; \u0420\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0435 \u0446\u0438\u0444\u0440\u044b 4<\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ae9\/4ec\/ed4\/ae94eced4a0957f10a68f889bad66c11.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 11 - \u0420\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0435 \u0446\u0438\u0444\u0440\u044b 6\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 11 - \u0420\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0435 \u0446\u0438\u0444\u0440\u044b 6\" width=\"678\" height=\"829\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ae9\/4ec\/ed4\/ae94eced4a0957f10a68f889bad66c11.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 11 &#8212; \u0420\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0435 \u0446\u0438\u0444\u0440\u044b 6<\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f90\/caa\/3c3\/f90caa3c3d95fc1293fd864dbb4b2997.png\" alt=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 12 - \u041d\u0435\u0443\u0434\u0430\u0447\u043d\u043e\u0435 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0435 \u0446\u0438\u0444\u0440\u044b 6\" title=\"\u0420\u0438\u0441\u0443\u043d\u043e\u043a 12 - \u041d\u0435\u0443\u0434\u0430\u0447\u043d\u043e\u0435 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0435 \u0446\u0438\u0444\u0440\u044b 6\" width=\"675\" height=\"828\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f90\/caa\/3c3\/f90caa3c3d95fc1293fd864dbb4b2997.png\"\/><\/p>\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 12 &#8212; \u041d\u0435\u0443\u0434\u0430\u0447\u043d\u043e\u0435 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0435 \u0446\u0438\u0444\u0440\u044b 6<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0430\u043a\u00a0\u0432\u0438\u0434\u0438\u043c, \u043d\u0430\u00a0\u0440\u0438\u0441\u0443\u043d\u043a\u0435 11\u00a0\u0446\u0438\u0444\u0440\u044b 6\u00a0\u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u043b\u0430\u0441\u044c \u0445\u043e\u0440\u043e\u0448\u043e, \u0430\u00a0\u043d\u0430\u00a0\u0440\u0438\u0441\u0443\u043d\u043a\u0435 12\u00a0\u043d\u0435\u00a0\u043e\u0447\u0435\u043d\u044c.<\/p>\n<p>\u042d\u043c\u043f\u0438\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0434\u043b\u044f\u00a0\u044d\u0442\u043e\u0439 \u0446\u0438\u0444\u0440\u044b (\u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043c\u043e\u0434\u0435\u043b\u0438 \u0441\u00a0\u0442\u0435\u043a\u0443\u0449\u0438\u043c \u0443\u0440\u043e\u0432\u043d\u0435\u043c \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f)\u00a0\u2014 \u0440\u0438\u0441\u0443\u0435\u043c \u0435\u0451 \u0441\u043b\u0435\u0432\u0430,\u00a0\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u043e. \u041f\u043e\u00a0\u0432\u0441\u0435\u0439 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u0430\u044f \u0441\u0435\u0442\u044c \u0432\u044b\u044f\u0432\u0438\u043b\u0430 \u043f\u0440\u0438\u0437\u043d\u0430\u043a\u0438 \u0434\u043b\u044f\u00a0\u044d\u0442\u043e\u0439 \u0446\u0438\u0444\u0440\u044b \u0432\u00a0\u0442\u043e\u043c, \u0447\u0442\u043e\u00a0\u043e\u043d\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043b\u0435\u0432\u0430 (\u00ab\u0441\u043f\u0430\u0441\u0438\u0431\u043e\u00bb ImageDataGenerator).<\/p>\n<h2>\u0412\u044b\u0432\u043e\u0434\u044b<\/h2>\n<p>\u0412\u00a0\u0440\u0430\u043c\u043a\u0430\u0445 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438 \u043a\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0432\u0435\u0441\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0438\u0445 \u0432\u00a0\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f\u00a0\u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f.\u00a0\u0411\u044b\u043b\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0434\u0438\u043d POST\u2011\u0437\u0430\u043f\u0440\u043e\u0441 \u0441\u00a0\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f\u00a0\u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0432. \u0422\u0430\u043a\u0436\u0435\u00a0\u0431\u044b\u043b\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u0432\u0435\u0431\u2011\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u00a0\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u00a0\u0445\u043e\u043b\u0441\u0442\u0435 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u00a0\u0445\u043e\u043b\u0441\u0442\u0430 \u043d\u0430\u00a0\u0441\u0435\u0440\u0432\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0451\u0442 \u0440\u0443\u043a\u043e\u043f\u0438\u0441\u043d\u044b\u0435 \u0446\u0438\u0444\u0440\u044b.<\/p>\n<h2>\u0421\u043f\u0438\u0441\u043e\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432<\/h2>\n<ol>\n<li>\n<p>\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u0430: <a href=\"https:\/\/github.com\/DanSoW\/digit-recognize-app\" rel=\"noopener noreferrer nofollow\">\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u043e\u0434<\/a><\/p>\n<\/li>\n<li>\n<p>\u0420\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 Canvas \u0432 React.js: <a href=\"https:\/\/youtu.be\/FLESHMJ-bI0?si=P00RwD9IPbbksjA8\" rel=\"noopener noreferrer nofollow\">\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0432\u0438\u0434\u0435\u043e<\/a><\/p>\n<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \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\/articles\/778968\/\"> https:\/\/habr.com\/ru\/articles\/778968\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0421\u0442\u0430\u0442\u044c\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u0435\u043c <a href=\"https:\/\/habr.com\/ru\/articles\/778546\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/a>, \u0432\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u0439\u00a0\u0431\u044b\u043b\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0430 \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u0430\u044f \u0441\u0435\u0442\u044c \u0434\u043b\u044f\u00a0\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438 \u0441\u043e\u0440\u0435\u0432\u043d\u043e\u0432\u0430\u043d\u0438\u044f Digit Recognizer \u043d\u0430\u00a0Kaggle. \u0412\u00a0\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435\u00a0\u0431\u044b\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0442\u0440\u044e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438 \u0432\u00a0\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0441\u043e\u0440\u0435\u0432\u043d\u043e\u0432\u0430\u043d\u0438\u044f (\u0434\u043e 0.99\u00a0896), \u0432\u00a0\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0447\u0435\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u044f \u0430\u0432\u0442\u043e\u0440\u0430 \u0432\u00a0\u043b\u0438\u0434\u0435\u0440\u0431\u043e\u0440\u0434\u0435 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u0440\u043e\u0441\u043b\u0430. \u0412\u00a0\u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u0443\u0447\u0435\u043d\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438 \u0432\u00a0\u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0434\u043b\u044f\u00a0\u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0440\u0443\u043a\u043e\u043f\u0438\u0441\u043d\u044b\u0445 \u0446\u0438\u0444\u0440.<\/p>\n<figure class=\"full-width\"><\/figure>\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0435\u0448\u0430\u0435\u0442 \u0437\u0430\u0434\u0430\u0447\u0443 \u0438\u0437 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0439 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438, \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0432\u0441\u0442\u0430\u0451\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0435\u0451 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0432\u043e\u0451\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438? \u0412\u0435\u0434\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u0439\u0442\u0438 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b <a href=\"https:\/\/colab.research.google.com\" rel=\"noopener noreferrer nofollow\">Google Colab<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/github.com\/jupyter\/notebook\" rel=\"noopener noreferrer nofollow\">Jupyter Notebook<\/a>, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u0442\u044c \u043a\u0430\u043a\u0443\u044e-\u043b\u0438\u0431\u043e \u043f\u043e\u043b\u044c\u0437\u0443.<\/p>\n<p>\u0417\u0430\u0434\u0430\u0447\u0430 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u043e\u0431\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0432 \u0441\u0432\u043e\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e TensorFlow. \u0418\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u0447\u0442\u043e \u043f\u0440\u0438 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0438 \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0435\u0451 \u0432\u0435\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438. TensorFlow \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0432\u0435\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u044b \u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u044c \u0438\u0445 \u0432 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430 \u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438 (\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0435\u0451 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f). \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0438 \u0434\u0435\u043f\u043b\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u043d\u0430\u043c \u0436\u0438\u0437\u043d\u044c.<\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0434\u043b\u044f \u0434\u0435\u043f\u043b\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438:<\/p>\n<ol>\n<li>\n<p>\u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438 (\u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430)<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0432\u0435\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u041f\u0435\u0440\u0435\u043d\u043e\u0441 \u0432\u0435\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u043e\u0432 (\u043f\u043e\u0431\u043b\u0438\u0436\u0435 \u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u0430\u044f \u0441\u0435\u0442\u044c \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0430)<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u0435\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u043e\u0432 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u043f\u0440\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u0437\u0430\u0434\u0430\u0447 (\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0438)<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0435\u0431-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Flask, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0448\u0430\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0440\u0443\u043a\u043e\u043f\u0438\u0441\u043d\u044b\u0445 \u0446\u0438\u0444\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0432\u0435\u0441\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438.<\/p>\n<h2>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<h3>\u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0432\u0435\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u043e\u0432<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432\u0435\u0441\u0430 \u043c\u043e\u0434\u0435\u043b\u0438, \u043d\u043e \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c? \u0414\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e. \u0412 <a href=\"https:\/\/habr.com\/ru\/articles\/778546\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a> \u043f\u0440\u0438 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0438 \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438 \u0431\u044b\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u043a\u043e\u043b\u0431\u044d\u043a ModelCheckpoint, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u043d\u0430\u0438\u043b\u0443\u0447\u0448\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043c\u043e\u0434\u0435\u043b\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u0430\u043f\u043a\u0443 mnist-cnn.hd5 \u0438 \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u0440\u0443\u0447\u043d\u043e\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438. \u041a\u043e\u0434 \u043a\u043e\u043b\u0431\u044d\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"python\"># \u041a\u043e\u043b\u0431\u044d\u043a \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438 checkpoint = ModelCheckpoint('mnist-cnn.hd5',                              monitor='val_accuracy',     # \u0414\u043e\u043b\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0432\u0435\u0442\u043e\u0432 \u043d\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u0447\u043d\u043e\u043c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435                              save_best_only=True,        # \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043b\u0443\u0447\u0448\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442                                verbose=1)                  # \u0412\u044b\u0432\u043e\u0434 \u043b\u043e\u0433\u043e\u0432\u0439<\/code><\/pre>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043b\u0431\u044d\u043a\u0430 \u0432\u0435\u0441\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c, \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 (\u0432\u0437\u044f\u0442 \u0438\u0437 <a href=\"https:\/\/tensorflow.google.cn\/tutorials\/keras\/save_and_load\" rel=\"noopener noreferrer nofollow\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>):<\/p>\n<pre><code class=\"python\">model.save_weights('.\/checkpoints\/my_checkpoint')<\/code><\/pre>\n<p>\u041d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435 1 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0444\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0430\u043f\u043a\u0438 model-cnn.hd5 \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0432 \u043d\u0435\u0451 \u0432\u0435\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u043e\u0432.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 1 &#8212; \u0414\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438<\/figcaption><\/div>\n<\/figure>\n<h3>\u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e. <\/p>\n<p>\u0427\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430? \u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0434\u043d\u043e\u0433\u043e \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0435\u0433\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438. \u0412 \u043e\u0431\u0449\u0435\u043c-\u0442\u043e, \u043d\u0430 \u044d\u0442\u043e\u043c \u0432\u0441\u0451. \u0412 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f.<\/p>\n<p>\u0412 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 (\u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u043e\u0442\u0435\u0440\u0435\u0439 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430), \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u0435\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u043e\u0432 \u0432 \u043c\u043e\u0434\u0435\u043b\u044c (\u0435\u0451 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445), \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u0438 (response).<\/p>\n<h3>\u0424\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430<\/h3>\n<p>\u041d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435 2 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0444\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<figure class=\"\">\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 2 &#8212; \u0424\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/figcaption><\/div>\n<\/figure>\n<p>\u041c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043d\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0435 \u0432\u0435\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u044b \u043c\u043e\u0434\u0435\u043b\u0438 (model.h5), \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u0430\u043f\u043a\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u0434\u0430\u0447\u0438 \u0441\u0442\u0430\u0442\u0438\u043a\u0438 (public, \u043d\u043e \u043e\u043d\u0430 \u0441\u043a\u043e\u0440\u0435\u0435 \u043d\u0443\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430 \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 (app.py) \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u0444\u0430\u0439\u043b\u044b.<\/p>\n<p>\u041e\u0441\u043e\u0431\u043e\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u0434\u0435\u043b\u0438\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c \u0432 requirements.txt, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u0442\u0430\u0440\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 TensorFlow \u0438\u043b\u0438 \u0431\u043e\u043b\u0435\u0435 \u043d\u043e\u0432\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043a\u043e\u0434\u043e\u043c.<\/p>\n<details class=\"spoiler\">\n<summary>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438 \u0432 Python<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u043c \u0441\u043f\u0438\u0441\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0442\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u0446\u0435\u043b\u044c\u044e \u0438\u0445 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:<\/p>\n<pre><code class=\"bash\">pip freeze > requirements.txt<\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u0437 requirements.txt \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"bash\">python -m pip install -r requirements.txt  # \u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 pip install -r requirements.txt<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043f\u0430\u043f\u043a\u0435 requirements.txt (\u0442\u0430\u043a\u043e\u0435 \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e), \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:<\/p>\n<pre><code class=\"bash\">pip uninstall -y -r requirements.txt<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<h3>\u0422\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430 \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044e \u0432\u0435\u0441\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435:<\/p>\n<pre><code class=\"python\">import os import uuid import numpy as np from flask import Flask, request, jsonify import tensorflow as tf from PIL import Image from flask_cors import CORS  # \u041f\u0443\u0442\u044c \u043a \u043f\u0430\u043f\u043a\u0435 public base_path = '.\/public\/'  # \u042d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 flask-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f app = Flask(__name__, static_folder=\"public\")  # \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 CORS-\u043f\u043e\u043b\u0438\u0442\u0438\u043a\u0438 cors = CORS(app, origins=[\"http:\/\/localhost:3000\"])  # \u042d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0446\u0438\u0444\u0440 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 @app.route('\/digit-recognize', methods=['POST']) def upload_file():     # \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e \u0444\u0430\u0439\u043b\u0435     file = request.files['file']      # \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430     file_ext = file.filename.rsplit('.', 1)[1].lower()      # \u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f UUID \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430     c_uuid = str(uuid.uuid4())      # \u0424\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u043f\u0443\u0442\u0438 \u043a \u0444\u0430\u0439\u043b\u0443     filename = base_path + c_uuid + '.' + file_ext      # \u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440     file.save(filename)      # \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u0435\u0441\u043e\u0432 \u043c\u043e\u0434\u0435\u043b\u0438     model = tf.keras.models.load_model(\"model.h5\")      # \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0435\u0439 \u0432 grayscale     img = Image.open(filename).convert(\"L\")      # \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f     new_image = img.resize((28, 28))      # \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430     x = np.array(new_image).reshape((28, 28, 1))     x = np.expand_dims(x, axis=0)     images = np.vstack([x])      # \u041f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0430\u043d\u0438\u0435 \u0446\u0438\u0444\u0440\u044b \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438     classes = model.predict(images, batch_size=1)      # \u0412\u044b\u0431\u043e\u0440 \u0438\u0437 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e (\u0432\u044b\u0431\u043e\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 \u0446\u0438\u0444\u0440\u044b)     result = int(np.argmax(classes))      img.close()      # \u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f     os.remove(filename)      # \u0412\u043e\u0437\u0432\u0440\u0430\u0442 \u043e\u0442\u0432\u0435\u0442\u0430     return jsonify({'value': result})  # \u0417\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e 5000 \u043f\u043e\u0440\u0442\u0443 app.run(host='0.0.0.0', port=5000) <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u0435\u0433\u043e \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443.<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c Flask \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u0443\u0442\u044c \u043a \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 \u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c CORS-\u043f\u043e\u043b\u0438\u0442\u0438\u043a\u0443:<\/p>\n<pre><code class=\"python\"># \u041f\u0443\u0442\u044c \u043a \u043f\u0430\u043f\u043a\u0435 public base_path = '.\/public\/'  # \u042d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 flask-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f app = Flask(__name__, static_folder=\"public\")  # \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 CORS-\u043f\u043e\u043b\u0438\u0442\u0438\u043a\u0438 cors = CORS(app, origins=[\"http:\/\/localhost:3000\"])<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u043e \u043f\u043e\u0440\u0442\u0443 3000, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 origins \u043f\u0440\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 CORS-\u043f\u043e\u043b\u0438\u0442\u0438\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0430\u0434\u0440\u0435\u0441 http:\/\/localhost:3000.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430:<\/p>\n<pre><code class=\"python\"># \u042d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0446\u0438\u0444\u0440 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 @app.route('\/digit-recognize', methods=['POST']) def upload_file():   ...<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 POST-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0440\u0443\u043a\u043e\u043f\u0438\u0441\u043d\u044b\u0445 \u0446\u0438\u0444\u0440 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 \/digit-recognize. \u041f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 app.route (\u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f).<\/p>\n<p>\u0414\u0432\u0438\u0433\u0430\u0435\u043c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435, \u043d\u043e \u0443\u0436\u0435 \u043f\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 POST-\u0437\u0430\u043f\u0440\u043e\u0441\u0430:<\/p>\n<pre><code class=\"python\"># \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e \u0444\u0430\u0439\u043b\u0435 file = request.files['file']  # \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 file_ext = file.filename.rsplit('.', 1)[1].lower()  # \u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f UUID \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 c_uuid = str(uuid.uuid4())  # \u0424\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u043f\u0443\u0442\u0438 \u043a \u0444\u0430\u0439\u043b\u0443 filename = base_path + c_uuid + '.' + file_ext  # \u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 file.save(filename)<\/code><\/pre>\n<p>\u0412 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u0444\u0430\u0439\u043b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e request.files (\u043c\u0430\u0441\u0441\u0438\u0432 \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c), \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 UUID \u0434\u043b\u044f \u043d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 \u0438 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043f\u043e\u043b\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0435\u0433\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c (\u0432 \u043f\u0430\u043f\u043a\u0443 public).<\/p>\n<p>\u0414\u0432\u0438\u0433\u0430\u0435\u043c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435:<\/p>\n<pre><code class=\"python\"># \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u0435\u0441\u043e\u0432 \u043c\u043e\u0434\u0435\u043b\u0438 model = tf.keras.models.load_model(\"model.h5\")  # \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0435\u0439 \u0432 grayscale img = Image.open(filename).convert(\"L\")  # \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f new_image = img.resize((28, 28))  # \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 x = np.array(new_image).reshape((28, 28, 1)) x = np.expand_dims(x, axis=0) images = np.vstack([x])  # \u041f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0430\u043d\u0438\u0435 \u0446\u0438\u0444\u0440\u044b \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 classes = model.predict(images, batch_size=1)  # \u0412\u044b\u0431\u043e\u0440 \u0438\u0437 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e (\u0432\u044b\u0431\u043e\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 \u0446\u0438\u0444\u0440\u044b) result = int(np.argmax(classes))  img.close()  # \u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f os.remove(filename)  # \u0412\u043e\u0437\u0432\u0440\u0430\u0442 \u043e\u0442\u0432\u0435\u0442\u0430 return jsonify({'value': result})<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u00a0\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u043e\u0441\u044c \u0432\u00a0\u043f\u0430\u043f\u043a\u0435 public \u043c\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u044d\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u0435\u0433\u043e \u0432\u00a0\u0447\u0435\u0440\u043d\u043e\u2011\u0431\u0435\u043b\u043e\u0435 \u0432\u00a0\u0433\u0440\u0430\u0434\u0430\u0446\u0438\u044f\u0445 \u0441\u0435\u0440\u043e\u0433\u043e (convert(\u00abL\u00bb)).<\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043c\u0435\u043d\u044f\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 28\u00d728\u00a0(\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u0445\u0443\u0434\u0448\u0430\u0435\u0442\u0441\u044f, \u043e\u0434\u043d\u0430\u043a\u043e \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u0430\u044f, \u043a\u0430\u043a\u00a0\u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u0434\u0430\u043b\u0435\u0435, \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u00a0\u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u0435\u043c \u0442\u0430\u043a\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439).<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0438\u0434\u0451\u0442 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u00a0\u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u00a0\u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 (\u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u00a0\u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u044f\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u044f \u043c\u043e\u0434\u0435\u043b\u0438).<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u00a0\u043c\u0430\u0441\u0441\u0438\u0432 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0435\u0433\u043e \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u043b\u044f\u00a0\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0438 \u0432\u044b\u044f\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043d\u0430\u0434\u043b\u0435\u0436\u043d\u043e\u0441\u0442\u0438 \u043a\u00a0\u0442\u043e\u043c\u0443 \u0438\u043b\u0438\u00a0\u0438\u043d\u043e\u043c\u0443 \u043a\u043b\u0430\u0441\u0441\u0443 \u0446\u0438\u0444\u0440 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0432\u0441\u0435\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>\u0417\u0430\u043f\u0443\u0441\u043a \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"python\"># \u0417\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e 5000 \u043f\u043e\u0440\u0442\u0443 app.run(host='0.0.0.0', port=5000)<\/code><\/pre>\n<h3>\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h3>\n<p>\u041f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u0431\u0443\u0447\u0435\u043d\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0438\u0437 10-\u0442\u0438 \u0446\u0438\u0444\u0440 (\u043e\u0442 0 \u0434\u043e 9). <\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f Postman.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0420\u0438\u0441\u0443\u043d\u043e\u043a 3 &#8212; \u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u0430\u0439\u043b\u0430 \u0447\u0435\u0440\u0435\u0437 Postman<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435 3 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0432 Postman \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f<\/p>\n<\/div>\n<\/div>\n<\/div>\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-362247","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/362247","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=362247"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/362247\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=362247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=362247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=362247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}