截图复刻网站，Github霸榜第一，单日2500+ Star，免费，快速AI生成网页 | Screenshot to Code

AI煉金術

19 Nov 202304:34

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

00:00

🚀 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

GitHub is a web-based hosting service for version control using Git. It is where developers share and collaborate on code, and in the context of the video, it is the platform where the 'screenshot to code' project is hosted and has gained significant popularity.

💡screenshot to code

This refers to a project that allows users to convert a website screenshot into functional code. The software analyzes the visual elements of the screenshot and generates corresponding HTML, CSS, and JavaScript, significantly reducing the effort required to recreate a website's design.

💡AI

Artificial Intelligence (AI) refers to the simulation of human intelligence in machines that are programmed to think and learn like humans. In the video, AI is used to interpret the design elements from a screenshot and generate the corresponding website code.

💡YouTube

YouTube is a video-sharing platform where users can upload, share, and view videos. In the context of the video, YouTube's homepage is used as an example to demonstrate the capabilities of the 'screenshot to code' project.

💡Instagram

Instagram is a social media platform focused on sharing photos and videos. It is mentioned in the video to illustrate another example where the 'screenshot to code' project successfully recreates a celebrity's (Taylor Swift) profile page.

💡Hacker News

Hacker News is a social news website focusing on computer science and entrepreneurship. It is used in the video as an example to discuss the limitations of the 'screenshot to code' project, particularly with color reproduction.

💡Open AI

Open AI refers to an AI research lab composed of the for-profit corporation 'OpenAI LP' and its parent company, the non-profit 'OpenAI Inc'. In the video, it is implied that the 'screenshot to code' project may utilize Open AI's API for some of its functionalities.

💡Node.js

Node.js is a cross-platform, open-source JavaScript runtime environment that allows developers to run JavaScript code outside of a web browser. It is one of the technologies required for running the 'screenshot to code' project, as indicated by the script's instructions for checking its version.

💡Python

Python is a high-level, interpreted programming language known for its readability and ease of use. In the context of the video, Python is one of the programming languages that users need to have installed on their computers to use the 'screenshot to code' project.

💡Yarn

Yarn is a package manager for JavaScript that helps developers manage project dependencies. It is used in the video to install the front-end dependencies required for the 'screenshot to code' project.

💡Command Line

The command line, also known as the terminal or shell, is a text-based interface for interacting with an operating system. In the video, the command line is used to execute various commands for installing the 'screenshot to code' project and its dependencies.

💡Front-end and Back-end

Front-end and back-end refer to the two main parts of a web application. The front-end is the user interface and user experience (UI/UX) side, which the users interact with, while the back-end involves server-side operations, database management, and the application logic. The video explains the process of setting up both the front-end and back-end of the 'screenshot to code' project.

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的网站，包括截图和代码生成过程。

生成的代码可以直接复制粘贴，提供了极大的便利性。