[开源初探]screenshot-to-code:将截图转化为代码

介绍说明

将截图转化为 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" \
screenshot-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">
        <!-- Sidebar -->
        <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>

        <!-- Main content -->
        <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>
            <!-- Placeholder for content -->
            <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

写在最后

[开源初探] 是一个介绍有趣开源项目的栏目,如果大家有什么问题或开源推荐,欢迎在文章或者公众号 - 跬步之巅留言交流。

相关推荐
硬汉嵌入式9 小时前
《安富莱嵌入式周报》第349期:VSCode正式支持Matlab调试,DIY录音室级麦克风,开源流体吊坠,物联网在军工领域的应用,Unicode字符压缩解压
vscode·matlab·开源
佛州小李哥9 小时前
Agent群舞,在亚马逊云科技搭建数字营销多代理(Multi-Agent)(下篇)
人工智能·科技·ai·语言模型·云计算·aws·亚马逊云科技
说私域10 小时前
社群裂变+2+1链动新纪元:S2B2C小程序如何重塑企业客户管理版图?
大数据·人工智能·小程序·开源
编程乐趣15 小时前
FluentCMS:基于 ASP.NET Core 和 Blazor 技术构建的开源CMS内容管理系统
后端·开源·asp.net
lilu888888815 小时前
小米Vela操作系统开源:AIoT时代的全新引擎
前端·开源
GitCode官方16 小时前
GitCode 助力 AutoTable:共创 MyBatis 生态的自动表格管理新篇章
开源·开源项目·运营·gitcode·g-star
oioihoii17 小时前
【2024 博客之星评选】请继续保持Passion
ai
Damon小智1 天前
合合信息DocFlow产品解析与体验:人人可搭建的AI自动化单据处理工作流
图像处理·人工智能·深度学习·机器学习·ai·自动化·docflow
健忘的派大星1 天前
【AI大模型】根据官方案例使用milvus向量数据库打造问答RAG系统
人工智能·ai·语言模型·llm·milvus·agi·rag