截图复刻网站,Github霸榜第一,单日2500+ Star,免费,快速AI生成网页 | Screenshot to Code
Summary
TLDRThe GitHub repository 'screenshot to code' has topped the charts with nearly 2,500 stars in a day, revolutionizing website creation. By simply uploading a screenshot, the software replicates the website with stunning accuracy, including layout, font sizes, and colors. The AI even suggests improvements upon user feedback. The project, developed by a user named ABI, is available for both Mac and Windows and requires Python, Node, and Yarn. Detailed installation instructions and version requirements are provided, making it accessible for users to set up and start generating code from screenshots.
Takeaways
- 🚀 A GitHub open-source project 'screenshot to code' has gained immense popularity, receiving nearly 2,500 stars in a day.
- 🎨 The project enables users to replicate websites with a simple screenshot, significantly reducing the barrier to website creation.
- 📸 Demonstrations include replicating YouTube's homepage and Taylor Swift's Instagram page from screenshots, achieving near-identical results.
- 🖼️ The software not only replicates layout and typography but also includes images, with the exception of logos like YouTube's.
- 🔧 Users have the option to refine the generated code if there are any imperfections noticed after the initial creation.
- 💻 The script provides a tutorial for installing the software on Mac, with a note that the process is similar for Windows.
- 🔗 The project can be found on GitHub under the username ABI, and interested users are encouraged to explore it.
- 💾 Instructions for installing necessary software like Python, Node, and Yarn are provided, along with version checks.
- 🔑 The process involves creating a '.env' file using an API key from the OpenAI website.
- 📦 The script outlines the installation of 'poetry' and its use in managing project dependencies.
- 🌐 Once installed, the software can be run, and users can start generating code from screenshots by dragging and dropping images into the application.
Q & A
What is the main feature of the 'screenshot to code' project mentioned in the script?
-The main feature is the ability to convert a website screenshot into functional code, significantly reducing the barrier to creating a website by replicating the layout, font sizes, colors, and even images from the screenshot.
How does the 'screenshot to code' software work?
-The user drags and drops a screenshot into the software, which then generates the corresponding website code, mimicking the original design closely.
What are the examples provided in the script to demonstrate the software's capabilities?
-The examples include replicating the YouTube homepage, Taylor Swift's Instagram page, and the Hacker News website.
What can users do if the generated code is not perfect?
-Users can modify the generated code to fix any imperfections or make adjustments as needed.
What is the AI's role in the 'screenshot to code' process?
-The AI assists in the generation process by interpreting the screenshot and creating the corresponding website code. It can also make adjustments based on user feedback, such as fixing color issues.
How can one install the 'screenshot to code' software on a Mac or Windows computer?
-The installation process involves cloning the project from GitHub, installing necessary dependencies like Python, Node, and Yarn, and running the backend and frontend programs using specific commands.
What are the system requirements for the 'screenshot to code' software?
-The software requires Python, Node, and Yarn to be installed on the user's computer. The versions should be relatively recent, but the software is not overly strict about the exact version numbers.
How does one obtain an API key for the OpenAI services used by the software?
-An API key is obtained by logging into the OpenAI website, navigating to the 'api keys' section, and creating a new key. The key is then copied and pasted into a .env file for the software.
What is the significance of the API key in the 'screenshot to code' project?
-The API key is crucial as it grants access to OpenAI's services, which are used in the 'screenshot to code' process to generate the website code from the screenshot.
What is the role of the 'poetry' package in the software setup?
-The 'poetry' package is used for dependency management and packaging in Python. It simplifies the process of installing and managing the required Python packages for the project.
How does the user know if the 'screenshot to code' software is running correctly?
-Once the backend and frontend programs are successfully run, the user will see messages in the command line indicating that the programs have started up. The frontend will also be accessible via a web browser at the displayed address.
What is the final output of using the 'screenshot to code' software?
-The final output is functional website code that can be copied and pasted, which closely replicates the design of the original screenshot provided by the user.
Outlines
🚀 Introducing the Revolutionary Screenshot to Code Tool
The video script introduces a groundbreaking GitHub open-source project that has quickly risen to the top with nearly 2,500 stars in a single day. This tool, known as 'screenshot to code,' dramatically lowers the barrier to website creation by allowing users to replicate a website from a simple screenshot. The author demonstrates the software's capabilities by showcasing the recreation of YouTube's homepage and Instagram's popular profile of Taylor Swift. The software meticulously replicates the layout, font size, and color, even including images, except for the YouTube logo. The video also highlights the user's ability to refine the generated output for perfection. The third example involves creating a website based on Hacker News, where the AI adjusts color imperfections upon user request. The video concludes with instructions for downloading and installing the software on a Mac, with a note that the process is similar for Windows users. The project is hosted on GitHub by a user named ABI, and the video provides detailed steps for installation, including commands for checking the versions of necessary software like Node, Npm, Python, and Yarn. The video emphasizes the flexibility of the software regarding version requirements and provides a link to the project in the comments section for further exploration.
Mindmap
Keywords
💡GitHub
💡screenshot to code
💡AI
💡YouTube
💡Hacker News
💡Open AI
💡Node.js
💡Python
💡Yarn
💡Command Line
💡Front-end and Back-end
Highlights
GitHub开源库霸榜第一的项目是screenshot to code,一天近2,500个star。
screenshot to code项目通过一张截图直接复刻一模一样的网站,极大降低了制作网站的门槛。
作者演示了YouTube首页的复刻过程,从截图到网站生成,效果几乎一模一样。
在复刻Instagram大明星Taylor Swift主页的例子中,连图片都自动适配,只有logo未被复制。
hackers news的复刻中,AI通过与用户的对话修正了颜色不匹配的问题。
生成的网站代码允许用户进行后续的修改和优化。
项目地址在GitHub上,由一个叫ABI的人创建。
Mac和Windows电脑都支持安装和运行这个项目。
安装前需要确认电脑上已安装Python, Node和Yarn。
提供了详细的安装步骤和命令,包括版本确认和环境配置。
通过GPT4的API key来制作Dot env文件,注入API key以连接open AI服务。
安装poetry包,以及如何根据Python版本调整安装命令。
依赖包的安装通过poetry install命令完成。
激活命令行为,通过portrait shell命令激活后端程序。
运行后端程序的命令和成功运行的提示信息。
前端程序的启动通过进入front end目录和yarn dev命令。
浏览器地址显示,表明前端已经全部安装并运行。
演示环节展示了如何复刻open AI的网站,包括截图和代码生成过程。
生成的代码可以直接复制粘贴,提供了极大的便利性。
Transcripts
GitHub开源库霸榜第一
一天近2,500个star
就是这个screenshot to code的项目
只需要一张简单的截图
直接复刻一模一样的网站
把制作网站的门槛降到了最低
先来看一下作者的演示
第一个演示是YouTube的首页
他截了一张YouTube首页的图
然后拖拽到软件里
这个软件就开始慢慢的制作网站了
做出来的效果简直一模一样
从网站的布局
字体大小
字体的颜色
能做到以假乱真
而且连图都给你配好了
唯一没有做的就是YouTube这个logo
第二个例子是Instagram的大明星Taylor Swift
主页
同样也是截图
然后拖拽到软件里
继续开始等待
怎么样前后对比一下
是不是很惊艳
在生成完之后
如果你觉得有什么不完美的地方
还可以进行修改
第三个例子
作者用hackers news作为样板
拖拽进去
然后进行网站生成
在这里文字生成没有什么问题
但是最后的结果发现颜色不是很合适
他就在这里对话框和AI说
需要把颜色修复一下
但第二次生成的结果
这里可以看见
颜色还是不对
于是他在对话框里再次强调
在这个网页的最上面应该是橘黄色的
于是AI就生成了最后的结果
很惊艳吧
赶紧下载来试一试
这里演示的是Mac电脑的安装方法
Windows电脑也是一样的
这个项目的地址呢
是GitHub上一个叫ABI的人
做了screenshot to code
有兴趣可以去看一下
如果你的电脑没有安装Python
Node和Yarn的话
可以通过以下的命令来安装
我这台电脑呢
已经装过了
安装完之后
我们通过这几个命令来确认一下版本
首先是NODE NODE版本
这里是18
然后是NPM
Npm的版本是8:19
接下去是Python
由于我这台电脑PYTHON 2和3都装了
所以我这里要把命令改成Python 3
这里是Python 3.11
最后是yarn 1.22.19
这个软件对版本的要求不高
所以最新版的就可以稍微低一点
没关系但你不要太低
我的版本放在评论区
你们可以对照一下
接下去我们克隆这个项目
克隆完之后
CD进入这个项目
进入后台目录
CD back end我们要通过GPT4的API key
制作一个Dot env的文件
进入open AI的网站
然后登录
选择apikeys
创建一个新的key
创建完成好以后
复制然后回到我们的命令行
把这一段文字删掉
然后复制进新的key
注意冒号两边不要缺失
回车API key已经注入进去
回到我们的教程
安装poetry
用pip install poetry这个命令还是一样
因为我这台电脑装了PYTHON2和PYTHON3
所以我们得用PIP3 install portrait
好portrait
这里安装完成
然后安装依赖包
poetry install
这里依赖包都已经安装成功
继续激活命令行
portrait shell
当看见这行文字的时候
说明你的命令行已经激活成功
最后就可以开始运行这个后端程序
通过这个命令
这行字application STARTUP complete就说
明程序已经成功运行了
后台运行好之后
再打开另外一个命令行
这是一个新的命令行
同样先CD进入screenshot to code目录
然后CD进入front end
然后通过刚刚装好的yarn运行
这个时候
yarn会把所有前台所需的依赖包
全部都下载好
最后通过yarn dev来启动前端程序
当我们看清这些程序的时候
就说明前端已经全部安装好了
浏览器的地址显示在这里
把这个地址复制好
程序就已经跑起来了
演示环节复刻一模一样open AI的网站
首先截图
打开软件
把截好的图拖入软件中
就会看见它已经在开始生成
这个生成的过程
是通过GPT慢慢的一点一点进行
制作图片的制作
可以开可以关
不过没有关系
对比一下原版和做出来的网站
几乎一模一样
并且代码都在这里
可以直接复制粘贴
是不是很牛逼
Ver Más Videos Relacionados
I made a SaaS in 3 days with 3 cheat codes
How to Use the WHOIS Command to Lookup Ip and Domain Name Information
FaceFusion v2 6 0 update - Hoán đổi khuôn mặt cực mạnh & Các bước thiết lập cục bộ chi tiết
New ChatGPT Desktop App - 10 Incredible Use Cases
苹果 macOS、iOS 爆高危漏洞,只需一个短信,电脑和手机都会被黑!请立即自查!! 2024 | 零度解说
7 AI Tools that Will Make you RICH (in 2024)
5.0 / 5 (0 votes)