前端开发利器—图片生成代码

一、背景

最近在开发前端应用的时候，发现了一个很有趣的工具——screenshot-to-code，可以将图片转化为代码，支持多种大型AI模型，可以生成HTML、CSS，可以用来快速搭建页面。

二、安装环境及条件

系统环境:可以选择安装在Windows、Mac、Linux等系统上。
网络条件:
1.必须是除了中国大陆和香港以外地区的网络。对于中国大陆和香港的用户来说，只能使用这两个地区以外的服务器
2.有公网ip，能通过公网ip和服务端口可以访问都你部署的服务。针对国外的用户，如果想要在本机上运行，需要做端口映射才能正常使用。对于服务器不用考虑这个问题。
3.API KEY:支持GPT-4或Claude3,所以需要GPT-4 API KEY或者Claude3 API KEY。

三、部署运行步骤

1.下载screenshot-to-code 下载地址:screenshot-to-code

git clone git@github.com:abi/screenshot-to-code.git

2.配置环境

我只说官方没有提及或者很多人都不知道的地方。
其他可参考screenshot-to-code的README.md文档。
配置环境变量:
在frontend目录下,新建.env文件,添加VITE_WS_BACKEND_URL

VITE_WS_BACKEND_URL=ws://服务器ip:后端服务端口号

注意:
1.我这里写的服务器IP目的是让大家避免这个坑，我一开始在自己的电脑上运行的时候，后端服务部署在默认端口7001，能正常运行，也能打开前端网页，但是在运行程序的时候就有会出websocket连接失败，Connection closed 1000。所以这个ip一定是外网ip，因为通过AI生成代码的时候需要访问你的对外IP和端口号。
2.服务运行的环境必须是支持能访问GPT的网络，也就是中国大陆和香港是无法使用的，这个时候时候就会报Connection closed 1006。所以要么用国外的服务器，国内本机翻墙也是不可用的。

3. 部署运行screenshot-to-code 最简单的方式还是docker，可以直接拉取镜像运行。 以docker为例来运行，在你的项目根目录下，运行如下命令:

docker-compose up -d --build

然后打开浏览器，输入http://服务器ip:5173，就可以看到screenshot-to-code的页面了。  

4. 输入API KEY 设置你的API KEY，需要GPT-4 API KEY或者Claude3 API KEY。

 

 

5.选择输出语言

他支持多种前端框架，可以根据自己的喜好选择。
 

6. 选择AI模型 支持最新的GTP-4o或Claude3模型，我目前用的GPT-4o模型,网上介绍说Claude3模型效果可能更好。

 

7.选择图片,生成代码

 

四、效果展示

我的站点https://stc.zymn.cc/，可以看到效果。需要设置自己的GPT-4 API KEY或者Claude3 API KEY。
 

 

五、高级用法

国内用户一般只能部署在海外服务器上，如果想要绑定域名，需要做如下更改。
到frontend目录下,修改.env文件的VITE_WS_BACKEND_URL的内容，没有就添加一条。
默认后端运行的端口是7001,前端服务运行在5173端口。如果你有域名绑定到7001端口,那么将下面的地址直接更改成你的域名

VITE_WS_BACKEND_URL=ws://后端服务的域名

如果你的前端使用了https,那么你还需要为后端服务也配置https。
注意：ws要更改成wss,否则会出现连接失败的情况。

 

VITE_WS_BACKEND_URL=wss://后端服务的域名

注意:
这个地方也是我踩过的坑，我前端用的https。忘记了上面填写的地址是后端服务的，只解析了前端一个域名，所以把前端域名填写进去，一直访问不了或者更换成服务器ip+端口号也是不行，会提示https不能访问ws。后来才想起这是个后端服务，需要绑定一个域名才行。而且要加https。

六、遇到的问题

今天在更改配置之后，运行docker-compose up -d –build后，后端服务器起不来，查看了docker容器的日志，发现是python运行报错，网上也没有找到解决办法，尝试了从github下载最新的，但是还是不行，最后凭着自己的经验应该是python的版本问题，我尝试将python版本升高，发现还是同样的错误，后面再尝试把版本降低，才能正常启动后端服务。

 

七、相关视频