大家好,我是小圈yeah,本文为大家分享一款本周爆火的 GPT开源项目。
你敢信,只凭借着一张屏幕截图即可转换生成 HTML/Tailwind CSS
代码。可以算得上是前端工程师的福音。它就是 screenshot-to-code。
而这个项目刚上线也就一周左右,在GitHub上就已经有 17.3k
的Star。它可以纳入本周爆火项目之一了!
screenshot-to-code
的功能实现是借助 gpt-4-vision-preview
模型,直接给你的屏幕截图转换为 HTML/Tailwind CSS
,并利用 DALL-E 3 的图像生成能力,生成外观相似的图像。
说的通俗易懂一点就是,该项目利用 GPT4 Vision
的能力来完成图像识别和代码生成的功能。
该项目是采用前后端分离模式,后端是采用 Python FastAPI 框架
开发而成。前端则是借助 React
框架构建。
利用这个开源工具,我们可以直接将设计稿转换为实际代码,快速为网站生成 Demo。也可以在学习过程中,用该工具来模仿学习其它网站代码。
与其说是前端的福音,不如说是后端的福音,是不太擅长前端代码编程人的福音。
前提:需要一个能够访问 GPT-4 Vision API 的 OpenAI API 密钥。
后端Python需要安装一个poetry模块来进行包管理。
pip install poetry
然后以此命令来运行:
cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001
运行前端:
cd frontend
yarn
yarn dev
前端和后端都运行后,访问指定服务http://localhost:5173
即可使用。
有大佬们看到该项目爆火后,就去研究了下它的实现原理,其核心竟然是依靠 Prompt,然后通过 Prompt提示词 去交给gpt4-vision模型去处理。
以下内容为英译中后的Prompt:
你是一名熟练的Tailwind开发者 你从用户那里获取参考网页的截图,然后使用Tailwind、HTML和JS构建单页面应用程序。 你可能也会收到你已经构建的网页的截图,并要求更新它的外观,使其更像参考图片。
在库方面:
仅返回在<html></html>标签中的完整代码。不要包括markdown "```" 或在开头或结尾的 "```html".
生成图片的原理,是直接从生成好的 HTML 中提取出 img 标签,再次调用 DALL-E 3 接口生成图片,替换进去。
screenshot-to-code
它是一个开源项目,旨在利用深度学习技术将屏幕截图转换为可编辑的代码。快速一键克隆目标风格页面,该项目的目标是帮助开发人员快速生成代码,节省时间和精力。
总的来说,screenshot-to-code 是一个有潜力的开源项目,可以为开发人员提供便利和帮助,同时也对深度学习技术在软件开发领域的应用进行了探索和实践。
感谢您的一路陪伴,用代码构建世界,一起探索充满未知且奇妙的魔幻旅程。如果您对Python编程技巧、好玩实用的开源项目、行业新知趣事和各类技术干货等充满兴趣,那么不要错过未来我为大家奉上的精彩内容!点击关注,让您的探索学习之旅更加丰富多彩,我们一同成长,一同前行!🚀💻📚
求一键三连:点赞、转发、在看
● 四款国内外远程桌面软件横测:ToDesk、向日葵、TeamViewer、AnyDesk
● 新一代开源语音库CoQui TTS冲到了GitHub 20.5k Star
● 「多线程大杀器」Python并发编程利器:ThreadPoolExecutor,让你一次性轻松开启多个线程,秒杀大量任务!
如果本文对您有帮助,也请帮忙点个 赞👍 + 在看 哈!❤️
在看你就赞赞我!