ScreenCoder 是一个智能的 UI 到代码生成系统，可将任何屏幕截图或设计模型转换为干净的、生产就绪的 HTML/CSS 代码。它采用模块化多代理架构构建，结合了视觉理解、布局规划和自适应代码合成，以生成准确且可编辑的前端代码。

它还支持自定义修改，允许开发人员和设计人员轻松调整布局和样式。无论您是快速制作原型还是构建像素完美的界面，ScreenCoder 都能弥合设计和开发之间的差距 – 只需复制、自定义和部署即可。

• 我们发布了用于对齐 ScreenCoder 的训练后代码 （SFT + RL）。
• 我们还发布了 ScreenBench （https://huggingface.co/datasets/Leigest/ScreenCoder），这是一个用于可视化到代码/Web UI 生成的新颖基准测试，包括 1000 个最新的真实世界采样 Web 屏幕截图和相应的具有不同主题的 HTML 源代码。

• 在演示中尝试我们的 huggingface 演示

• 在本地运行演示（从 huggingface space 下载）：

  python app.py

展示 ScreenCoder 如何使用模块化多代理框架将 UI 屏幕截图转换为结构化、可编辑的 HTML/CSS 代码。

我们提供了定性的例子来说明我们的方法相对于现有方法所取得的改进。下面的示例将基线方法的输出与我们在同一输入上的输出进行比较。

如上所示，我们的方法产生的结果更准确、视觉上一致且语义上忠实于原始设计。

• main.py：为单个屏幕截图生成最终 HTML 代码的主脚本。
• UIED/：包含用于分析屏幕截图和检测组件的 UIED（UI 元素检测）引擎。
  • run_single.py：用于在单个图像上运行 UI 组件检测的 Python 脚本。
• html_generator.py：获取检测到的组件数据并生成完整的 HTML 布局，其中包含为每个模块生成的代码。
• image_replacer.py：将最终 HTML 中的占位符 div 替换为实际裁剪图像的脚本。
• mapping.py：将检测到的 UIED 组件映射到逻辑页面区域。
• requirements.txt：列出项目的所有必要 Python 依赖项。
• doubao_api.txt：豆包模型的 API 密钥文件（应保密并包含在 中）。.gitignore

1. 克隆存储库：

   git clone https://github.com/leigest519/ScreenCoder.git
   cd screencoder

2. 创建虚拟环境：

   python3 -m venv .venv
   source .venv/bin/activate

3. 安装依赖项：

   pip install -r requirements.txt

4. 配置模型和 API 密钥

   • 选择生成模型：在 和 中设置所需的模型。支持选项：豆包（默认）、Qwen、GPT、Gemini。block_parsor.pyhtml_generator.py
   • 添加 API 密钥：在项目根目录中创建一个与所选模型相对应的纯文本文件 （， ， ， ），并将您的 API 密钥粘贴到其中。doubao_api.txtqwen_api.txtgpt_api.txtgemini_api.txt

典型的工作流程是一个多步骤过程，如下所示：

1. 使用占位符的初始生成：运行 Python 脚本为给定屏幕截图生成初始 HTML 代码。

   • 块检测：

     python block_parsor.py

   • 使用占位符生成（灰色图像块）：

     python html_generator.py

2. 最终 HTML 代码：运行 python 脚本以生成最终的 HTML 代码，其中包含原始屏幕截图中的复制图像。

   • 占位符检测：

     python image_box_detection.py

   • UI 元素检测：

     python UIED/run_single.py

   • 占位符和 UI 元素之间的映射对齐方式：

     python mapping.py

   • 占位符替换：

     python image_replacer.py

3. 简单运行：运行 python 脚本以生成最终的 HTML 代码：

   python main.py
   
   
   

     此处内容已隐藏，请评论后刷新页面查看.