Would you be interested in a tool that allows you to upload a photo, and then directly convert the photo into a prototype and front-end code? Today, I’m introducing an open-source tool, screenshot to code, which can quickly turn your screenshots into code, helping you quickly generate demos for your website.
So let’s see how to use this tool next.
First, we open its git address,. The instructions on how to use it are very detailed and simple, you can check it out.
Just a reminder, we need the GPT4’s API. Please prepare it yourself if you don’t have one.
First, we clone the code from git. Execute the git clone command, wait a moment, and after the clone is completed, we open the project in the editor. The project is divided into front and back ends.
Second, navigate to the project folder and use the command poetry install to install project dependencies. The prerequisite is that you have already installed Poetry on your system. If you have not installed it, please run the pip install poetry command to install it.
Third, after the installation is complete, we navigate to the backend, enter the backend folder. Then follow the instructions to enter the command, create an env file and add the API key, make sure to replace the API in the command with your actual API. Of course, the premise is that you have a GPT4 API.
Fourth, enter the command poetry shell to activate the virtual environment. After activation, run the application to start your FastAPI application.
At this point, the backend service of the project is already running.
Next, we run the front-end service.
First, we navigate to the frontend and enter the front-end folder.
After entering, we install dependencies and run the development server. Follow the steps and wait for a while, and we have completed all the operations.
Now we can see that the project is up and running.
If you encounter any problems during the process, it is recommended to consult chatgpt, chatgpt can still give very accurate answers.
We open the address in the browser, upload the picture, and then we find two webpage screenshots to try separately, and we will see that AI has generated the prototype and front-end code of the corresponding picture for us. You can check out its effect. Isn’t it very easy? If you’re interested, you can give it a try.
git：https://github.com/abi/screenshot-to-code