type
status
date
slug
summary
tags
category
icon
password
"截图转代码"项目是一个开源工具，可以从屏幕截图中生成HTML/Tailwind CSS代码，从而更容易地复制竞争对手的网站。该项目利用gpt-4-vision API来识别图片并生成相应的HTML代码。该项目包括前端和后端组件，后端使用gpt-4-vision进行代码生成。文章提供了运行和部署该项目的说明，并提供了其他项目中类似功能的参考资料。
screenshot-to-code
这几天刷Github，发现了一个很不得了的开源项目，地址是https://github.com/abi/screenshot-to-code, 可以根据屏幕截图生成对应的
HTML/Tailwind CSS代码，真的是非常给力啊，这样的话，模仿一个竞品站点，那是相当容易的啦，界面样式很容易模仿的比较相似啦。技术原理
技术原理上主要是使用
gpt-4-vision-previewAPI识别图片并配合提示词，直接让GPT4生成相应的HTML代码。项目分为frontend和backend，frontend最核心的就是将你的截图转成base64字符串然后通过websocket发送给backend接口。
然后backend收到图片的base64后，会使用
gpt-4-vision来进行代码生成，vision相关的用法请自行看文档：https://platform.openai.com/docs/guides/vision那么具体到截图到代码的prompt我们还是来看看学习一下:
我们看看里面的
SYSTEM_PROMPT的内容这才是核心部分，让其充当一个专业的Tailwind 开发人员，使用使用
Tailwind、HTML和JS来完成单页面的构建任务，另外做了一些限定，避免GPT返回没有意义的内容。运行部署
在自己的电脑终端上运行
git clone <https://github.com/abi/screenshot-to-code.git命令，把整个项目clone下来。>然后切换到creenshot-to-code目录，接着分别切换到对应的backend，fontend目录下，运行对应的代码。
参考下面的代码块:
这里需要填入你的
OPENAI_API_KEY，请确保你的OPENAI_API_KEY具有gpt-4-vision的权限，不然也没办法运行本项目的。对于frontend部分:
Open
http://localhost:5173 to use the app.If you prefer to run the backend on a different port, update VITE_WS_BACKEND_URL in frontend/.env.local
如果你碰到了一些问题，那么可以去作者的Github issue上查看，有没有对应的issue可以参考借鉴的，如果有，那么直接参考别人的修改方案，如果没有可以在Twitter上联系他或者直接给他提新的issue.
更多参考
除了这个项目外，我在GPT Store上也发现了一个提供类似功能的screenshot-to-code项目啦，地址是https://chat.openai.com/g/g-hz8Pw1quF
我上传了一张网站截图，这个只需要有Plus会员就就可以了，不需要提供
OPENAI_API_KEY, 大家可以观察效果哦.
生成的单页html保存到本地，使用Chrome浏览器预览打开后的效果如下，模仿的很逼真呢。
欢迎使用尝鲜哦