一. 前言
作为一个前端切图仔，最深恶痛绝的就是写样式结构，这才是每次开发时候的体力活，一直以来，都在想办法怎么减少这块的工作量。直到这两年无所不能的AI的崛起，让我看到了一丝曙光。下面分享这两天一系列的AI试用踩坑经历。
二. 技术选型
在github上有一个叫screenshot-to-code的项目，目前已经收获了52.4K的Star，并且在首页放出来的演示效果是这样的：
在第一次看见这个项目的时候，我觉得我要起飞了，终于可以从繁琐的样式结构的开发工作中直接释放，因此开始了接下来的使用尝试。
三. 踩坑经历
1. 富哥们捷径
screenshot-to-code 项目提供了一个线上直接使用的版本，只要充值你就可以直接变强：screenshottocode.com/
目前收费标准如下：
当然在实际使用前，还是先本地部署试试效果，如果效果好我们再充值。
2. 环境信息
由于个人电脑用的是MacBook的M1芯片款，所以接下来所有的操作都基于mac环境，使用windows的同学我理解操作步骤也是类似的，可以问问gpt老师。
nvm: 0.39.7
node: 18.20.3
yarn: 1.22.22
python: 3.12.3
Poetry: 1.8.3
2.1. 账号信息准备
由于这个项目底层是需要以来调用Chat-GPT4o，所以如果本身就有Chat-GPT的同学，可以根据教程，获取OpenAI API key，并记录下来。
当然，如果只是想要免费的试试看，万能的github中有一个叫chatanywhere的项目，它可以申请一个免费的key，并且允许你通过他们的代理域名（免梯子）每天有限的调用ChatGPT的模型。当然如果你希望稳定的使用，也可以充值变强。
点击这个链接：申请领取内测免费API Key，完成授权后就会发你一个免费的API Key：
记录这个API-key，后续会用到。
3. 部署步骤
3.1. 项目下载
首先需要把整个项目拉到本地，可以使用下面的git地址拉取。
https://github.com/abi/screenshot-to-code.git
3.2. 启动后端
进入根目录，按顺序执行以下命令，记得安装正确版本的python：
pip install poetry
cd backend
echo "OPENAI_API_KEY=替换为上方的key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001
启动后正常访问http://127.0.0.1:7001/，会展示：
3.3. 启动前端
独立再打开一个命令行，进入根目录，执行以下命令，记得安装正确版本的node：
cd frontend
yarn
yarn dev
启动后正常访问http://127.0.0.1:7001/，会展示：
3.4. 设置chatanywhere代理
如果你拥有OpenAI的KEY，那么此时你可以直接使用了，但是如果需要使用上面的申请的免费key的话，你还需要进行代理。
- 点击操作栏的设置按钮
- 输入代理信息并保存
在第一个输入框输入你申请到的key
在第二个输入框输入：
https://api.chatanywhere.tech/v1
最后记得点击保存按钮。
- 完成
点击保存之后，代理配置就完成啦，你可以上传截图并且生成代码了。
四. 使用
这里我使用了zhihu的一个截图用作后面的素材。
点击页面的上传按钮，并上传截图，此时就会自动分析截图并且生成代码啦：
生成出来的代码效果：
五. 结语
出来的效果其实确实不如人意，看来我们的偷懒计划是失败了，当然也有可能是我用的免费版本的模型，后续我会继续试试付费版的模型看看效果。最后，我坚信随着AI的不停发展，这个功能一定能比较完美的实现，节省我们一大部分的工作量。
