ScreenshotToCode能够将屏幕截图转换为代码

Ollama一个开源的大模型平台

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

只需一张图即可生成

目前支持：

• HTML + Tailwind
• HTML + CSS
• React + Tailwind
• Vue + Tailwind
• Bootstrap
• Ionic + Tailwind
• SVG

最新的版本已经支持本地Ollama部署的AI了，不强制使用chatgpt，但是亲测还是chatgpt效果好一些。

本文演示使用本地AI模型

①下载Ollama

下载链接：Ollama

②下载模型

目前只能支持llama3.2-vision，模型越大效果越好：llama3.2-vision

③拉取screenshot-to-code源码

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

④在项目根目录创建.env文件

内容如下：

OPENAI_API_KEY=fake-key
OPENAI_BASE_URL=http://host.docker.internal:11434/v1

host.docker.internal表示本机的地址，因为ollama在本机运行的，而sourceshot-to-code在docker容器中运行，容器需要和本机通信，就可以填这个地址。

⑤启动screenshot-to-code

项目根目录输入docker compose up -d --build

等待拉取镜像，并且启动项目。

docker拉取超时可以看看DockerHub镜像加速 | 运维开发绿皮书，配置镜像加速，方便实用。

⑥复制ollama拉取的AI模型

Linux系统

for model in \
   claude-3-5-sonnet-20240620 \
   gpt-4o-2024-05-13 \
   gpt-4-turbo-2024-04-09 \
   gpt_4_vision \
   claude_3_sonnet; do
   ollama cp llama3.2-vision $model
done

Windows系统

需要用powershell

$models = @(
"claude-3-5-sonnet-20240620",
"gpt-4o-2024-05-13",
"gpt-4-turbo-2024-04-09",
"gpt_4_vision",
"claude_3_sonnet"
)
foreach ($model in $models) {
ollama cp llama3.2-vision $model
}

输入ollama list看看是不是复制成功了

应该是这样子

NAME                                 ID              SIZE      MODIFIED
gpt-4-turbo-2024-04-09:latest        38107a0cd119    7.9 GB    3 seconds ago
gpt-4o-2024-05-13:latest             38107a0cd119    7.9 GB    3 seconds ago
gpt_4_vision:latest                  38107a0cd119    7.9 GB    3 seconds ago
claude-3-5-sonnet-20240620:latest    38107a0cd119    7.9 GB    3 seconds ago
claude_3_sonnet:latest               38107a0cd119    7.9 GB    3 seconds ago
llama3.2-vision:latest               38107a0cd119    7.9 GB    4 hours ago

⑦打开127.0.0.1:5173

测试！

等了几分钟出了结果

我用的是llama3.2-vision 11b效果有点拉跨

llama3.2-vision 90b或者GPT4o效果应该会好不少，感兴趣的自行可以测试