从截图到代码：screenshot-to-code开源项目实践指南

一、运行效果 

项目地址：GitHub - abi/screenshot-to-code: Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)

二、实践步骤

1. 将项目下载到本地

2. 获取Anthropic(Claude) 密钥或者 OpenAI API(chatGPT) 密钥

(1) OpenAI API(chatGPT) 密钥获取方式

https://blog.csdn.net/naozibuok/article/details/140079882

然后先点击“个人资料”，再点击“Billing”，最后点击“Add payment details”后应该可以进行充值，由于我使用的是Claude API，就无法展示后面的内容了。

(2)Anthropic(Claude) 密钥获取方式

访问官网：Build with Claude \ Anthropic

点击“Start building”。

点击“Get API keys”(如果需要填写信息，随意填写即可，我是随便填写的)。

点击“Create Key”。

点击“Billing”(之后应该先需要完整信息，随意填写)。

3. 运行项目

(0) 配置代理服务

如果你不知道你的代理地址，可以进入代理软件查看。也可用下面的命令查找。

netstat -ano | findstr "108"(或者107, 具体还得看代理软件)

(1) 下载项目到本地

(2) 启动后端服务(处理API请求)

使用 pip install poetry 安装poetry。

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
echo "ANTHROPIC_API_KEY=your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001

如下图则启动成功。

(3) 启动前端服务(提供用户交互页面)

如果系统中还没有安装 yarn，访问 Node.js — Run JavaScript Everywhere ，下载并安装 LTS (长期支持)版本。注意配置环境变量。

然后用 npm 安装 Yarn: 

npm install --global yarn

验证安装: 

yarn --version

启动前端服务 

cd frontend
yarn
yarn dev

如下图则启动成功。

4. 访问 http://localhost:5173/

最后，在浏览器访问 http://localhost:5173/，就成功啦！