介绍说明
将截图转化为HTML代码的工具。该项目可以将屏幕截图转化为HTML/JS/Tailwind CSS代码,它使用GPT-4 Vision生成代码、DALL-E 3生成相似的图片。
安装运行
为了方便演示及保持原有系统的简洁,将使用docker的方式来安装运行screenshot-to-code。由于项目本身已经提供了 Dockerfile,我们直接使用即可,需要注意的是,该项目有frontend和backend两个镜像。
-
克隆代码
git clone https://github.com/abi/screenshot-to-code.git
-
构建frontend
cd frontend/ docker build -t screenshot-to-code-frontend:latest -f ./Dockerfile . docker images | grep screenshot-to-code-frontend
-
构建backend
cd backend/ docker build -t screenshot-to-code-backend:latest -f ./Dockerfile . docker images | grep screenshot-to-code-backend
-
运行 frontend
docker rm -f screenshot-to-code-frontend docker run --name screenshot-to-code-frontend -d --network host -e VITE_WS_BACKEND_URL="ws://{your machine ip}:7001" scree服务器托管网nshot-to-code-frontend:latest docker ps | grep screenshot-to-code-frontend
-
运行 backend
docker rm -f screenshot-to-code-backend docker run --name screenshot-to-code-backend -d --network host -e OPENAI_API_KEY="{your_openai_api_key}" screenshot-to-code-backend:latest poetry run uvicorn main:app --host 0.0.0.0 --port 7001 docker ps | grep screenshot-to-code-backend
使用简介
经过上述步骤后,screenshot-to-code已成功运行,此时可通过服务器IP + 5173端口访问(需要设置相关安全组或防火墙规则,这里需要设置5173和7001两个端口)。
-
主页
-
手机助手截图
-
生成过程
-
查看源码
-
生成页面
-
源码
html lang="zh-CN">
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>网页示例title>
script src="https://cdn.tailwindcss.com">script>
style>
body {
font-family: 'PingFang SC', 'Helvetica Neue', 'Helvetica',服务器托管网 'Arial', sans-serif;
}
style>
head>
body class="bg-gray-100">
div class="flex h-screen">
div class="w-1/5 bg-gray-800 text-white p-5">
div class="text-xl mb-8">导航栏目div>
div class="text-lg mb-4">首页div>
div class="text-lg mb-4">视频div>
div class="text-lg mb-4">直播div>
div class="text-lg mb-4">QQ空间div>
div class="text-lg mb-4">微信公众div>
div class="text-lg mb-4">手机天猫div>
div class="text-lg mb-4">全球文化div>
div class="text-lg mb-4">手机助手div>
div>
div class="w-4/5 p-5">
div class="flex justify-between border-b-2 border-gray-300 pb-2 mb-5">
div class="text-gray-700 text-lg">全部应用div>
div class="space-x-2">
button class="bg-blue-500 text-white px-4 py-2 rounded">全部应用button>
button class="bg-transparent text-blue-500 border border-blue-500 px-4 py-2 rounded">全部团队button>
button class="bg-transparent text-blue-500 border border-blue-500 px-4 py-2 rounded">下载新应用button>
div>
div>
div class="h-full">div>
div>
div>
body>
html>
项目地址
更多项目详细信息请到项目主页获取
https://github.com/abi/screenshot-to-code
快捷镜像
ccr.ccs.tencentyun.com/erik_xu/screenshot-to-code-frontend:latest
ccr.ccs.tencentyun.com/erik_xu/screenshot-to-code-backend:latest
写在最后
[开源初探] 是一个介绍有趣开源项目的栏目,如果大家有什么问题或开源推荐,欢迎在文章或者公众号 – 跬步之巅留言交流。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net
兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。 https://github.com/521xueweihan/HelloGitHub 这里有实战项目、入门教程、黑科技…