UI推理工具 - UI界面分割和HTML代码生成

基于深度学习的UI界面分割工具，可以将UI设计图片自动分割成不同的组件，并生成对应的HTML和CSS代码。

✨ 特性

• 🚀 开箱即用 - 提供单文件可执行文件，无需安装Python环境
• 🎯 高精度分割 - 基于SFNet深度学习模型，准确识别UI组件
• 📱 多组件支持 - 支持按钮、文本框、列表、图标等多种UI组件
• 🌐 HTML生成 - 自动生成完整的HTML和CSS代码
• 💻 CPU/GPU支持 - 支持CPU和GPU推理，适配不同硬件环境
• 🔤 中文路径支持 - 完美支持中文路径和文件名
• 📖 详细文档 - 提供完整的使用说明和故障排除指南

🚀 快速开始

方式一：使用可执行文件（推荐）

1. 下载可执行文件

   • 从 Releases 下载最新版本
   • 解压到任意目录

2. 运行测试

   .\scripts\test_exe.bat

3. 查看结果

   • 打开 dist/ui_inference_dist/test_output/output.html 查看生成的HTML代码

方式二：从源代码运行

1. 克隆仓库

   git clone https://github.com/your-username/torchcv-ui-inference.git
   cd torchcv-ui-inference

2. 安装依赖

   pip install -r requirements.txt

3. 运行推理

   python ui_inference_main.py --image "testimage/ui.png" --config "configs/seg/sfnet_res101_ui.conf" --checkpoint "checkpoints/seg/ui/sfnet_res101_ui_latest.pth" --output "output" --gpu -1

📖 使用说明

详细的使用说明请参考 使用说明.md

快速开始请参考 快速开始.md

🔧 系统要求

使用可执行文件

• Windows 10/11 (64位)
• 至少 4GB 可用内存
• 至少 2GB 可用磁盘空间

从源代码运行

• Python 3.7+
• PyTorch 1.0+
• 其他依赖见 requirements.txt

📝 使用示例

基本用法

ui_inference.exe --image "ui.png" --config "configs\seg\sfnet_res101_ui.conf" --checkpoint "checkpoint.pth" --output "output" --gpu -1

参数说明

参数	说明	必需
--image	输入的UI图片路径	✅
--config	模型配置文件路径	✅
--checkpoint	模型权重文件路径	✅
--output	输出目录路径	✅
--gpu	GPU ID（-1表示使用CPU）	❌

📁 项目结构

torchcv-master/
├── dist/                          # 可执行文件目录
│   └── ui_inference_dist/
│       └── ui_inference.exe       # 可执行文件
├── scripts/                       # 脚本目录
│   ├── build_exe_clean.ps1       # 打包脚本
│   ├── test_exe.bat              # 测试脚本
│   └── upload_to_github.ps1      # GitHub上传脚本
├── configs/                       # 配置文件目录
│   └── seg/
│       └── sfnet_res101_ui.conf  # 模型配置
├── checkpoints/                   # 模型权重目录
│   └── seg/
│       └── ui/
│           └── sfnet_res101_ui_latest.pth
├── ui_inference_main.py          # 主程序
├── 使用说明.md                   # 详细使用说明
├── 快速开始.md                   # 快速开始指南
└── README_CN.md                  # 本文件

🎯 功能特性

支持的UI组件

• 按钮 (Button)
• 文本框 (Text Input)
• 图片 (Image)
• 列表 (List)
• 图标 (Icon)
• 头部 (Header)
• 底部 (Footer)
• 等等...

输出文件

运行成功后，在输出目录中会生成：

• output.html - 完整的HTML和CSS代码
• prediction_mask.png - 分割结果可视化
• 原始图片副本

🤝 贡献

欢迎提交Issue和Pull Request！

📄 许可证

请参考 LICENSE 文件。

🙏 致谢

• 基于 TorchCV 框架
• 使用 SFNet 模型

📮 联系方式

如有问题或建议，请提交 Issue 最后更新： 2025-11-11