您现在的位置是:首页 > 正文

Screenshot to Code自动生成网站代码

2024-01-11 01:12:19阅读 180

现在,一个名为Screenshot to Code的GitHub开源项目将这一工作自动化,它可以仅通过一张网页设计图就生成可用的前端代码,让你的开发效率获得数倍提升。

https://github.com/abi/screenshot-to-code

Screenshot to Code 的工作原理是什么?它利用了 AI 技术,特别是 OpenAI 的 GPT-4 VisionDALL-E 3,只需要上传一张网页设计图,它就可以分析页面的布局、样式,并生成出可用的HTML/Tailwind CSS前端代码。

这个项目短短一个月就在 GitHub 上获得了近 21.6k 个 Star,成为开源界的新宠。它的优点主要有:

  1. 生成的代码可直接用于网站前端开发,非常精准还原设计图样式;

  2. 支持交互式修改,如果对代码结果不满意,还可以通过对话框重新生成。

下面我们来看一下 Screenshot to Code 的具体使用流程:

第一步,准备一张网页设计图,这里以 YouTube 首页为例。

第二步,打开 Screenshot to Code,将设计图拖入其中。

第三步,等待几秒后,它就会生成出 YouTube 首页的 HTML 和 CSS 代码。我们可以看到,页面布局和设计都非常精准。

如果你没有安装过Python或者Yarn,那就用下面两条命令来安装Python,Node或者Yarn

brew install python
brew install node
brew install yarn
brew install git

并且通过一下两个命令来确认,安装是否成功

node --version
npm --version
python --version
yarn --version

Node: v18.12.1
npm: 8.19.2
Python: 3.11.5
Yarn: 1.22.19

这个软件对版本要求并不高,所以最新版的就行,我用的版本如下,你可以对照一下

然后Clone这个软件包

git clone <https://github.com/abi/screenshot-to-code>
# 进入软件目录
cd screenshot-to-code
# 进入后台目录
cd backend
# GPT4 的API key
echo "OPENAI_API_KEY=sk-your-key" > .env
# 安装Poetry 依赖包管理器
pip install poetry
# 安装依赖包
poetry install
# 激活命令行
poetry shell
# 运行程序
poetry run uvicorn main:app --reload --port 7000

后台运行好之后,再打开另外一个命令行

来运行前段程序

# 同样的进入软件目录
cd screenshot-to-code
# 进入前台目录
cd frontend
# 安装前台依赖包
yarn
yarn dev

打开浏览器地址,就可以使用了

http://localhost:5173/

网站文章

  • ElevenLabs—语音合成语音克隆的一个好东西 AI音频

    ElevenLabs—语音合成语音克隆的一个好东西

    ElevenLabs 是国外一个火爆的AI文字转语音平台,目前已完成测试阶段并推出了正式版。借助先进的多语言人工智能技术,ElevenLabs 可以自动识别包括中文在内的28种语言,并将其转换为逼真的...

    2024-01-11 00:43:58
  • Opus Clip一键生成多个短视频,让你能更高效的短视频制作! AI视频

    Opus Clip一键生成多个短视频,让你能更高效的短视频制作!

    Opus Clip 的优点在于,它可以自动识别视频中的精彩片段,提取出亮点,并将它们无缝地重新排列,制作成可以单独存在的吸引人的短视频。此外,它还能自动添加字幕、调整视频布局、平滑过渡效果和添加强有力...

    2024-01-11 00:20:54
  • 强大的文本转视频工具-Invideo AI AI视频

    强大的文本转视频工具-Invideo AI

    in video是一款非常强大的在线视频编辑工具,它提供海量的素材和模板特效帮助没有专业的视频剪辑技巧的普通人也能够快速制作出来高质量的视频内容。

    2024-01-10 22:41:09
  • Pika Art 一个文生视频AI工具来啦! AI视频

    Pika Art 一个文生视频AI工具来啦!

    Pika是近期热门的人工智能初创公司Pika Labs推出的AI视频生成和编辑工具,该工具可以将任何创意转化为视频,用户只需输入文字或图像,即可快速生成3D动画、动漫、卡通、电影等风格的视频。该AI视...

    2024-01-09 23:41:25
  • DiffusionBee:Mac上的神奇AI画画大师! AI图片

    DiffusionBee:Mac上的神奇AI画画大师!

    探索DiffusionBee,Mac上的免费、离线运行的AI画画工具,为您的创意之旅注入无限可能! 亮点: Mac专属:DiffusionBee专为Mac电脑打造,让AI画画触手可及!(抱歉Windo...

    2024-01-09 10:01:56
  • Notion AI:开启智能助手,重新定义工作流程 AI文本

    Notion AI:开启智能助手,重新定义工作流程

    Notion AI是一个AI写作工具,它可以为您提供优秀的写作服务。它可以集成到您的概念工作区中,帮助您更轻松地完成工作。Notion AI还有其他强大的功能,可以帮助您更好地管理您的工作。 在线办公...

    2024-01-09 01:26:56
  • Monica:GPT-4 驱动的全能 AI 助手 — 跨界搜索、写作、翻译与智能交互的未来 AI文本

    Monica:GPT-4 驱动的全能 AI 助手 — 跨界搜索、写作、翻译与智能交互的未来

    Monica是一款集合了Chatgpt 3.5和4.0 cloud、谷歌Bard等多个主流大圆模型的AI工具,所以它的文案生成质量可想而知。 这个工具需要谷歌浏览器添加插件使用,所有对使用者又特定要求...

    2024-01-09 00:45:32
  • tensor.art替代midjourney使用免费生成AI图片 AI图片

    tensor.art替代midjourney使用免费生成AI图片

    用midjourney来生成AI图片相信大家多少都听过也试过,但当试用期过了之后就必须要付费才可以继续使用一个月最低要10美金。 这对于刚接触AI生成图片的朋友们可能会有些负担,毕竟还在练习跟学习的阶...

    2024-01-08 23:21:41
  • Canva AI如何帮助我们提高工作? AI图片

    Canva AI如何帮助我们提高工作?

    1 內容創作 Instagram貼文/小紅書貼文批量生產 TikTok/YouTube/Instagram影片 Quora/知乎/公眾號/部落格文章 2 Logo和产品图片 丰富的Logo模板 产品图...

    2024-01-07 23:15:01
  • DALL-E 3 通过提示词生成图片 AI图片

    DALL-E 3 通过提示词生成图片

    环境要求:电脑需要安装edge,并且最好有一个微软邮箱的账号 edge最好保持最新的版本,如果是老版本可能不支持,我的浏览器最开始系统自带的edge就出现过不支持情况 1 打开copilot 在edg...

    2024-01-07 21:23:52