从截图到代码: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/,就成功啦!

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

脑子不好真君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值