网页截图生成代码,我测试的效果一般
快速安装教程如下
1,首先你得有OpenAI的账号
国内用这个代理就可以: https://www.closeai-asia.com/
充值一块钱,在本项目中可以生成两次
2,下载程序
下载程序压缩包:https://github.com/abi/screenshot-to-code.git
解压后在程序根目录创建一个.env文件,内容如下:
OPENAI_API_KEY=你的key
OPENAI_BASE_URL=https://api.openai-proxy.org/v1(上面哪个网站的代理接口地址)
然后把整个目录上传到服务器
3,使用docker运行后端
这里只推荐docker,进入程序根目录,运行如下命令
docker-compose up -d --build
命令执行完成后,有两个端口:7001是后台,5173是前端
访问7001得到下面一段话就是成功了
Your backend is running correctly. Please open the front-end URL (default is http://localhost:5173) to use screenshot-to-code.
4,本地运行前端
上面docker起来后的前端是用不了的,需要本地启一个前端
在我们的电脑上用vscode打开frontend项目
修改后端接口地址: 在src/config.ts文件中修改127.0.0.1:7001地址为你的docker主机的地址
修改后的src/config.ts文件如下
// Default to false if set to anything other than "true" or unset
export const IS_RUNNING_ON_CLOUD =
import.meta.env.VITE_IS_DEPLOYED === "true" || false;
export const WS_BACKEND_URL =
import.meta.env.VITE_WS_BACKEND_URL || "ws://192.168.1.173:7001";
export const HTTP_BACKEND_URL =
import.meta.env.VITE_HTTP_BACKEND_URL || "http://192.168.1.173:7001";
export const PICO_BACKEND_FORM_SECRET =
import.meta.env.VITE_PICO_BACKEND_FORM_SECRET || null;
安装依赖:yarn
运行:yarn dev
4,打开网址http://localhost:5173/就可以使用了
点击网页中的虚线框上传一张图片生成代码