手残党福音！群晖部署Screenshot-to-Code：截图秒变代码，外网访问稳如狗！
GPT-4.5已经实现，AI编程年底完胜人类
前段时间，OpenAI的CEO奥特曼（Sam Altman）在全球各地巡回演讲；在东京大学和柏林工业大学，他与各界人士深入探讨了人工智能的未来。在这两场备受瞩目的讨论中，奥特曼分享了关于下一代大模型（如GPT-4.5、GPT-5，甚至GPT-6）的诸多信息，以及OpenAI在开源方面的最新想法。
其中，奥特曼提到GPT o3是我们最新的、最好的模型。我们的第一个推理模型好比是世界上排名第100万名的程序员，当时这是非常令人印象深刻的。然后我们又有了一个模型，排名进入了前10000。我们在12月公开讨论过，o3模型在世界上最好的、最有竞争力的程序员中排名第175。我认为，OpenAI内部目前正在开发的模型，世界排名在第50名左右，到今年年底可能有希望拿下世界第一。
虽然o3还没有发布，但是编程界的AI工具已经杀成了一片红海，而前端开发人员，成了第一批膝盖中间的人。
把截图编程前端代码
最近发现了一个开源的项目，可以把截图转化为前端代码。
也发现了一个现成的网站，可以直接把图片转化代码。
screenshot-to-code介绍
screenshot-to-code 是一个开源项目，旨在通过深度学习模型将用户提供的界面截图（如网页设计稿、移动端 UI 等）自动转换为前端代码（如 HTML/CSS、React、Vue 等）。它的核心目标是简化开发流程，帮助设计师和开发者快速将视觉设计转化为可运行的代码。
项目特点
技术核心
使用计算机视觉（CV）和深度学习模型（如 CNN、Transformer）分析截图中的布局、颜色、文字和组件。
结合 OCR（光学字符识别）技术提取文本内容。
支持生成多种前端框架代码（如 HTML/CSS、React、Tailwind CSS 等）。
应用场景
快速原型开发：将设计稿直接转为代码，减少手动编码时间。
教育与学习：帮助新手理解设计到代码的映射关系。
自动化工具集成：与设计工具（Figma、Sketch）结合，实现设计-开发流水线。
典型工作流程
用户上传界面截图。
模型识别元素（按钮、文本框、布局结构等）。
生成结构化代码（如 HTML 骨架 + CSS 样式）。
用户可进一步调整生成的代码。
screenshot-to-code群晖部署与外部访问
由于screenshot-to-code没有提供docker hub版本，只能使用docker compose部署。
首先我们通过群晖的控制面板，打开群晖的ssh功能。（用完记得关闭）
然后通过shell工具，连接到群晖上，并切换到root用户。
这里我使用的是finalshell
输入
sudo -i
再输入管理员密码切换到root。
然后回到群晖的套件中心，来安装一下必要的应用Git。
Git套件，官方是不提供的，需要在套件来源中配置一下其他来源
安装好了之后，在回到shell终端工具。
使用git clone把项目下载到本地。这里以gitee地址为例。
git clone https://gitee.com/mirrors/screenshot-to-code-llm.git
下载完成后，进入到screenshot-to-code-llm目录。
这里我们需要新建一个.env文件。
echo "OPENAI_API_KEY=sk-your-key" > .env
sk-your-key换成你的openAI的key。
接下来需要配置外部访问相关的东西。
由于screenshot-to-code实行了前后端分离，前端在向后端发起请求时，使用的是127.0.0.1本地地址，这个地址如果前端页面没有在本地打开，会导致无法访问到后端服务。
这时我们需要进入到/screenshot-to-code-llm/frontend/src目录中，通过vi修改其中的config.ts。
把其中的VITE_WS_BACKEND_URL与VITE_HTTP_BACKEND_URL后面改为你群晖的ip地址。然后保存。
然后再回到screenshot-to-code-llm根目录。
执行docker-compose up -d --build开始安装。
安装完成后，就能在群晖的Container Station中看到多了两个容器。
这个时候我们再访问
http://你的群晖ip:5173
就能打开screenshot-to-code前台页面了。
接下来在配置好端口映射或者内网穿透，就可以愉快的玩耍了。
API消费情况
这玩意调用了openAI的4o模型与Dall-e。整体花费还是挺高的。
我期间进行了3次截图转化。花费了0.17刀。
相比较我自己平时省吃俭用调用4o-mini来说，这个价格已经是天价了。😄
希望能够接入Deepseek把价格打下来。
现成的转换网站
现在也有一个现成的网站，名字叫做copyweb.ai，可以直接实现截图转化为前端代码。
不过此网站是收费的，新用户有体验用的信用点用来生成代码，个人建议体验一下可以，续费没啥必要。
网友留言（0 条）