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/就可以使用了
点击网页中的虚线框上传一张图片生成代码