网站首页 > 技术文章 正文
本文为大家分享一款本周爆火的 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-4Vision智能生成代码: 通过集成GPT-4Vision,该应用程序能够智能地分析截图并生成相应的HTML、Tailwind CSS和JavaScript代码,使用户无需手动编写代码。
- DALL-E3生成相似图像: 应用程序不仅生成代码,还利用DALL-E3生成与原始截图相似的图像,增强用户体验。
- 实时代码更新: 用户可以直接在应用程序中查看生成的代码,并在需要时通过与AI的互动指令,调整样式或更新缺失的部分,以满足其需求。
- 灵活的配置选项: 应用程序提供了设置,允许用户选择是否启用DALL-E图像生成功能,使其更加灵活适应不同需求。
- 本地部署与用户反馈: 用户可以通过本地部署应用程序进行使用,同时FAQ部分提供了解决常见问题的指南。用户还可以通过GitHub上的issue或Twitter提供反馈、功能请求和报告bug。
使用
前提:需要一个能够访问 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构建单页面应用程序。
你可能也会收到你已经构建的网页的截图,并要求更新它的外观,使其更像参考图片。
? 确保应用程序看起来与截图完全一样。
? 注意背景颜色、文字颜色、字体大小、字体系列、填充、边距、边框等。准确匹配颜色和尺寸。
? 使用截图中的确切文本。
? 代码中不要添加注释,比如 "<!-- 根据需要添加其他导航链接 -->" 和 "<!-- ...其他新闻条目... -->",而是写入完整的代码。
? 根据需要重复元素以匹配截图。例如,如果有15个项目,则代码应该有15个项目。不要留下 "" 这样的注释,否则会出现问题。
? 对于图像,请使用来自 https://placehold.co 的占位图像,并在alt文本中包含图像的详细描述,以便图像生成AI可以生成图像。
在库方面:
? 使用这个脚本来包含Tailwind:
? 你可以使用Google Fonts
? Font Awesome用于图标:<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
仅返回在<html></html>标签中的完整代码。不要包括markdown "```" 或在开头或结尾的 "```html".
生成图片的原理,是直接从生成好的 HTML 中提取出 img 标签,再次调用 DALL-E 3 接口生成图片,替换进去。
小结
screenshot-to-code 它是一个开源项目,旨在利用深度学习技术将屏幕截图转换为可编辑的代码。快速一键克隆目标风格页面,该项目的目标是帮助开发人员快速生成代码,节省时间和精力。
总的来说,screenshot-to-code 是一个有潜力的开源项目,可以为开发人员提供便利和帮助,同时也对深度学习技术在软件开发领域的应用进行了探索和实践。
猜你喜欢
- 2024-11-23 VC.NET全屏截屏或鼠标拖动出区域,截图效果「附源码」
- 2024-11-23 一个好的前端年薪会有多少钱?
- 2024-11-23 57挑战之53,python实现客户端+服务端
- 2024-11-23 6个月转行成功WEB前端工程师的秘诀在这里
- 2024-11-23 分享 12 个超级实用的前端工具,可能就是你一直在寻找的!
- 2024-11-23 超级实用的截图工具分享—Snipaste
- 2024-11-23 前端革命时刻:前端代码是怎样智能生成的-图像分离篇
- 2024-11-23 推荐给前端开发的 5 款 Chrome 扩展
- 2024-11-23 这4个神器,帮你自动美化生成好看的网页截图
- 2024-11-23 科研利器——好用的截工具
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 601℃几个Oracle空值处理函数 oracle处理null值的函数
- 593℃Oracle分析函数之Lag和Lead()使用
- 581℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 578℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 573℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 566℃【数据统计分析】详解Oracle分组函数之CUBE
- 553℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 547℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)