ScreenshotToCode安装教程

网页截图生成代码,我测试的效果一般

快速安装教程如下

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/就可以使用了

点击网页中的虚线框上传一张图片生成代码