利用AI工具Screenshot to Code将UI操持图翻译成代码

一、获取openAI apikey。
  一样平常有两种方式，一种是到openAI官网注册账号，付费申请GPT4的apikey。另一种是某宝买署理。我这里采取第二种。
二、安装Screenshot to Code
 1.到github下载源码。
 2.启动，两种方式：源码启动和docker启动。
    须要一个可以大概访问 GPT-4 Vision 的 OpenAI API key。
（1）源码启动
假如直接利用openAI没用署理的话忽略OPENAI_BASE_URL。
启动后端：

1. cd backend
2. echo "OPENAI_API_KEY=这里换成你的apikey" > .env
3. echo "OPENAI_BASE_URL=这里换成你的代理请求地址" > .env
4. poetry install
5. poetry shell
6. poetry run uvicorn main:app --reload --port 7001

复制代码

启动前端：

1. cd frontend
2. yarn
3. yarn dev

复制代码

（2）docker 启动
在源代码根目次下实验：

1. echo "OPENAI_API_KEY=这里换成你的apikey" > .env
2. echo "OPENAI_BASE_URL=这里换成你的代理请求地址" > .env

复制代码

构建镜像并启动容器：

1. docker-compose up -d --build

复制代码

启动乐成如下图所示：

 3.启动完成后，在 http://localhost:5173 访问应用。

三、操持图翻译成代码
将操持图拖到页面上的灰色地区，即主动天生代码。如下图所示：
左边的是操持图，右边是天生的代码渲染的页面。

下载源码：