{"id":3335,"date":"2023-12-04T16:57:58","date_gmt":"2023-12-04T08:57:58","guid":{"rendered":"http:\/\/xinyixx.com\/?p=3335"},"modified":"2024-01-06T15:08:19","modified_gmt":"2024-01-06T07:08:19","slug":"screenshot2code","status":"publish","type":"post","link":"https:\/\/www.xinyixx.com\/index.php\/2023\/12\/04\/screenshot2code\/","title":{"rendered":"\u4e00\u5f20\u622a\u56fe\u5c31\u80fd\u8ba9AI\u751f\u6210\u4e00\u4e2a\u7f51\u7ad9\uff1f"},"content":{"rendered":"<p>\u4eca\u5929\u4ecb\u7ecd\u4e00\u6b3e\u6700\u8fd1\u5728GitHub\u4e0a\u7206\u706b\u7684\u9879\u76ee\uff1a<a href=\"https:\/\/github.com\/abi\/screenshot-to-code\" target=\"_blank\" rel=\"noopener\" title>GitHub &#8211; abi\/screenshot-to-code\uff1a\u653e\u5165\u5c4f\u5e55\u622a\u56fe\u5e76\u5c06\u5176\u8f6c\u6362\u4e3a\u5e72\u51c0\u7684\u4ee3\u7801 \uff08HTML\/Tailwind\/React\/Vue\uff09<\/a>\uff0c\u6b63\u5982\u6807\u9898\u6240\u8bf4\uff0c\u968f\u610f\u622a\u53d6\u4e00\u4e2a\u81ea\u5df1\u559c\u6b22\u7f51\u7ad9\u7684\u56fe\u7247\uff0c\u5bfc\u5165\u5230\u6b64\u9879\u76ee\u5c31\u53ef\u4ee5\u751f\u6210\u5e72\u51c0\u7684HTML\u4ee3\u7801\u3002\u8fd9\u6837\u6211\u4eec\u81ea\u5df1\u53ef\u4ee5\u5728\u51e0\u5206\u949f\u5185\u89e3\u51b3\u53ef\u80fd\u9700\u8981\u82b1\u8d39\u4e00\u5929\u5199\u7f51\u9875\u4ee3\u7801\u7684\u5f00\u53d1\u96be\u9898\uff0c\u5373\u4f7f\u662f\u5c0f\u767d\u4e5f\u53ef\u4ee5\u5f53\u72ec\u7acb\u7f51\u7ad9\u5f00\u53d1\u8005\u3002<\/p>\n\n\n\n<p>\u9999\u7684\u4e0d\u8c08\uff0c\u76f4\u63a5\u770b\u89c6\u9891\u4e86\u89e3\u4e00\u4e0b\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1760 \/ 1080;\" width=\"1760\" controls src=\"http:\/\/xinyixx.com\/wp-content\/uploads\/2023\/12\/283006443-6cebadae-2fe3-4986-ac6a-8fb9db030045.mp4\"><\/video><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1920 \/ 1080;\" width=\"1920\" controls src=\"http:\/\/xinyixx.com\/wp-content\/uploads\/2023\/12\/283664580-503eb86a-356e-4dfc-926a-dabdb1ac7ba1.mp4\"><\/video><\/figure>\n\n\n\n<p>\u8fd9\u4e2a\u662f\u76f4\u63a5\u5c06\u6cf0\u52d2\u7684ins\u4e3b\u9875\u505a\u4e86\u4e00\u4e2a\u622a\u56fe\uff0c\u7136\u540e\u5c06\u622a\u56fe\u62d6\u5165\u6307\u5b9a\u533a\u57df\u540e\u81ea\u52a8\u751f\u6210\u5bf9\u5e94css\u7684html\u6587\u672c\u3002<\/p>\n\n\n\n<p>\u4ee5\u4e0b\u662f\u672c\u5730\u90e8\u7f72\u6559\u7a0b\uff1a<\/p>\n\n\n\n<p>\u5982\u679c\u4f60\u6ca1\u6709\u5b89\u88c5\u8fc7Python\u6216\u8005Yarn\uff0c\u90a3\u5c31\u7528\u4e0b\u9762\u4e24\u6761\u547d\u4ee4\u6765\u5b89\u88c5Python\uff0cNode\u6216\u8005Yarn<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>brew install python\nbrew install node\nbrew install yarn\nbrew install git<\/code>\n<\/code><\/pre>\n\n\n\n<p>\u5e76\u4e14\u901a\u8fc7\u4e00\u4e0b\u4e24\u4e2a\u547d\u4ee4\u6765\u786e\u8ba4\uff0c\u5b89\u88c5\u662f\u5426\u6210\u529f<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>node --version\nnpm --version\npython --version\nyarn --version\n\nNode: v18.12.1\nnpm: 8.19.2\nPython: 3.11.5\nYarn: 1.22.19<\/code>\n<\/code><\/pre>\n\n\n\n<p>\u8fd9\u4e2a\u8f6f\u4ef6\u5bf9\u7248\u672c\u8981\u6c42\u5e76\u4e0d\u9ad8\uff0c\u6240\u4ee5\u6700\u65b0\u7248\u7684\u5c31\u884c\uff0c\u6211\u7528\u7684\u7248\u672c\u5982\u4e0b\uff0c\u4f60\u53ef\u4ee5\u5bf9\u7167\u4e00\u4e0b<\/p>\n\n\n\n<p>\u7136\u540eClone\u8fd9\u4e2a\u8f6f\u4ef6\u5305\uff0c\u5982\u4e0b\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>git clone &lt;https:\/\/github.com\/abi\/screenshot-to-code&gt;\n# \u8fdb\u5165\u8f6f\u4ef6\u76ee\u5f55\ncd screenshot-to-code\n# \u8fdb\u5165\u540e\u53f0\u76ee\u5f55\ncd backend\n# GPT4 \u7684API key\necho \"OPENAI_API_KEY=sk-your-key\" &gt; .env\n# \u5b89\u88c5Poetry \u4f9d\u8d56\u5305\u7ba1\u7406\u5668\npip install poetry\n# \u5b89\u88c5\u4f9d\u8d56\u5305\npoetry install\n# \u6fc0\u6d3b\u547d\u4ee4\u884c\npoetry shell\n# \u8fd0\u884c\u7a0b\u5e8f\npoetry run uvicorn main:app --reload --port 7000<\/code>\n<\/code><\/pre>\n\n\n\n<p>\u5982\u4f55\u83b7\u53d6openai\u5bc6\u94a5 \uff1f\u53c2\u8003\u8fd9\u4e2a\u94fe\u63a5\uff1a<a href=\"https:\/\/github.com\/abi\/screenshot-to-code\/blob\/main\/Troubleshooting.md\" target=\"_blank\" rel=\"noopener\" title>screenshot-to-code\/Troubleshooting.md at main \u00b7 abi\/screenshot-to-code \u00b7 GitHub<\/a>\uff0c\u6ce8\u610f\u4e00\u70b9\u662f\uff0c<strong>\u4f60\u7684\u5bc6\u94a5\u5fc5\u987b\u80fd\u591f\u8bbf\u95ee GPT-4 Vision<\/strong>\u3002\u540e\u53f0\u8fd0\u884c\u597d\u4e4b\u540e\uff0c\u518d\u6253\u5f00\u53e6\u5916\u4e00\u4e2a\u547d\u4ee4\u884c\u6765\u8fd0\u884c\u524d\u6bb5\u7a0b\u5e8f\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code># \u540c\u6837\u7684\u8fdb\u5165\u8f6f\u4ef6\u76ee\u5f55\ncd screenshot-to-code\n# \u8fdb\u5165\u524d\u53f0\u76ee\u5f55\ncd frontend\n# \u5b89\u88c5\u524d\u53f0\u4f9d\u8d56\u5305\nyarn\nyarn dev<\/code>\n<\/code><\/pre>\n\n\n\n<p>\u6253\u5f00\u6d4f\u89c8\u5668\u5730\u5740\uff0c\u5c31\u53ef\u4ee5\u4f7f\u7528\u4e86\u3002<\/p>\n\n\n\n<p><a href=\"http:\/\/localhost:5173\/\">http:\/\/localhost:5173\/<\/a><\/p>\n\n\n\n<p>\u6b64\uff1a<a href=\"https:\/\/screenshottocode.com\/\">Screenshot to Code<\/a>\u4e3a\u6258\u7ba1\u7f51\u7ad9\uff0c\u81ea\u5df1\u53ef\u4ee5\u5728\u7ebf\u5c1d\u8bd5\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><noscript><img decoding=\"async\" width=\"1024\" height=\"519\" src=\"http:\/\/xinyixx.com\/wp-content\/uploads\/2023\/12\/image-11-1024x519.png\" alt class=\"wp-image-3338\" srcset=\"https:\/\/www.xinyixx.com\/wp-content\/uploads\/2023\/12\/image-11-1024x519.png 1024w, https:\/\/www.xinyixx.com\/wp-content\/uploads\/2023\/12\/image-11-300x152.png 300w, https:\/\/www.xinyixx.com\/wp-content\/uploads\/2023\/12\/image-11-768x389.png 768w, https:\/\/www.xinyixx.com\/wp-content\/uploads\/2023\/12\/image-11-1536x778.png 1536w, https:\/\/www.xinyixx.com\/wp-content\/uploads\/2023\/12\/image-11.png 1552w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/noscript><img decoding=\"async\" width=\"1024\" height=\"519\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201024%20519%22%3E%3C%2Fsvg%3E\" alt class=\"wp-image-3338 lazyload\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201024%20519%22%3E%3C%2Fsvg%3E 1024w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" data-srcset=\"https:\/\/www.xinyixx.com\/wp-content\/uploads\/2023\/12\/image-11-1024x519.png 1024w, https:\/\/www.xinyixx.com\/wp-content\/uploads\/2023\/12\/image-11-300x152.png 300w, https:\/\/www.xinyixx.com\/wp-content\/uploads\/2023\/12\/image-11-768x389.png 768w, https:\/\/www.xinyixx.com\/wp-content\/uploads\/2023\/12\/image-11-1536x778.png 1536w, https:\/\/www.xinyixx.com\/wp-content\/uploads\/2023\/12\/image-11.png 1552w\" data-src=\"http:\/\/xinyixx.com\/wp-content\/uploads\/2023\/12\/image-11-1024x519.png\"><\/figure>\n\n\n\n<p>\u4e0d\u8fc7\u4ecd\u7136\u9700\u8981GPT-4\u5bc6\u94a5\uff0c\u6709\u6761\u4ef6\u7684\u540c\u5b66\u53ef\u4ee5\u751f\u6210\u81ea\u5df1\u611f\u5174\u8da3\u7684\u7f51\u7ad9\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4eca\u5929\u4ecb\u7ecd\u4e00\u6b3e\u6700\u8fd1\u5728GitHub\u4e0a\u7206\u706b\u7684\u9879\u76ee\uff1aGitHub &#8211; abi\/screenshot-to- [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[145,5,6,10],"tags":[188],"class_list":["post-3335","post","type-post","status-publish","format-standard","hentry","category-ai","category-ai-learn","category-build","category-coding","tag-screenshot2code","entry"],"_links":{"self":[{"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/posts\/3335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/comments?post=3335"}],"version-history":[{"count":0,"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/posts\/3335\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/media?parent=3335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/categories?post=3335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/tags?post=3335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}