[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-tonybeltramelli--pix2code":3,"tool-tonybeltramelli--pix2code":61},[4,18,26,36,44,53],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":17},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[13,14,15,16],"Agent","开发框架","图像","数据工具","ready",{"id":19,"name":20,"github_repo":21,"description_zh":22,"stars":23,"difficulty_score":10,"last_commit_at":24,"category_tags":25,"status":17},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[14,15,13],{"id":27,"name":28,"github_repo":29,"description_zh":30,"stars":31,"difficulty_score":32,"last_commit_at":33,"category_tags":34,"status":17},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",156804,2,"2026-04-15T11:34:33",[14,13,35],"语言模型",{"id":37,"name":38,"github_repo":39,"description_zh":40,"stars":41,"difficulty_score":32,"last_commit_at":42,"category_tags":43,"status":17},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",108322,"2026-04-10T11:39:34",[14,15,13],{"id":45,"name":46,"github_repo":47,"description_zh":48,"stars":49,"difficulty_score":32,"last_commit_at":50,"category_tags":51,"status":17},6121,"gemini-cli","google-gemini\u002Fgemini-cli","gemini-cli 是一款由谷歌推出的开源 AI 命令行工具，它将强大的 Gemini 大模型能力直接集成到用户的终端环境中。对于习惯在命令行工作的开发者而言，它提供了一条从输入提示词到获取模型响应的最短路径，无需切换窗口即可享受智能辅助。\n\n这款工具主要解决了开发过程中频繁上下文切换的痛点，让用户能在熟悉的终端界面内直接完成代码理解、生成、调试以及自动化运维任务。无论是查询大型代码库、根据草图生成应用，还是执行复杂的 Git 操作，gemini-cli 都能通过自然语言指令高效处理。\n\n它特别适合广大软件工程师、DevOps 人员及技术研究人员使用。其核心亮点包括支持高达 100 万 token 的超长上下文窗口，具备出色的逻辑推理能力；内置 Google 搜索、文件操作及 Shell 命令执行等实用工具；更独特的是，它支持 MCP（模型上下文协议），允许用户灵活扩展自定义集成，连接如图像生成等外部能力。此外，个人谷歌账号即可享受免费的额度支持，且项目基于 Apache 2.0 协议完全开源，是提升终端工作效率的理想助手。",100752,"2026-04-10T01:20:03",[52,13,15,14],"插件",{"id":54,"name":55,"github_repo":56,"description_zh":57,"stars":58,"difficulty_score":32,"last_commit_at":59,"category_tags":60,"status":17},4721,"markitdown","microsoft\u002Fmarkitdown","MarkItDown 是一款由微软 AutoGen 团队打造的轻量级 Python 工具，专为将各类文件高效转换为 Markdown 格式而设计。它支持 PDF、Word、Excel、PPT、图片（含 OCR）、音频（含语音转录）、HTML 乃至 YouTube 链接等多种格式的解析，能够精准提取文档中的标题、列表、表格和链接等关键结构信息。\n\n在人工智能应用日益普及的今天，大语言模型（LLM）虽擅长处理文本，却难以直接读取复杂的二进制办公文档。MarkItDown 恰好解决了这一痛点，它将非结构化或半结构化的文件转化为模型“原生理解”且 Token 效率极高的 Markdown 格式，成为连接本地文件与 AI 分析 pipeline 的理想桥梁。此外，它还提供了 MCP（模型上下文协议）服务器，可无缝集成到 Claude Desktop 等 LLM 应用中。\n\n这款工具特别适合开发者、数据科学家及 AI 研究人员使用，尤其是那些需要构建文档检索增强生成（RAG）系统、进行批量文本分析或希望让 AI 助手直接“阅读”本地文件的用户。虽然生成的内容也具备一定可读性，但其核心优势在于为机器",93400,"2026-04-06T19:52:38",[52,14],{"id":62,"github_repo":63,"name":64,"description_en":65,"description_zh":66,"ai_summary_zh":66,"readme_en":67,"readme_zh":68,"quickstart_zh":69,"use_case_zh":70,"hero_image_url":71,"owner_login":72,"owner_name":73,"owner_avatar_url":74,"owner_bio":75,"owner_company":76,"owner_location":75,"owner_email":75,"owner_twitter":77,"owner_website":78,"owner_url":79,"languages":80,"stars":89,"forks":90,"last_commit_at":91,"license":92,"difficulty_score":93,"env_os":94,"env_gpu":95,"env_ram":96,"env_deps":97,"category_tags":102,"github_topics":103,"view_count":32,"oss_zip_url":75,"oss_zip_packed_at":75,"status":17,"created_at":109,"updated_at":110,"faqs":111,"releases":112},7759,"tonybeltramelli\u002Fpix2code","pix2code","pix2code: Generating Code from a Graphical User Interface Screenshot","pix2code 是一款开创性的开源研究项目，旨在利用深度学习技术，将图形用户界面（GUI）的截图直接转换为可运行的代码。它主要解决了从设计稿到代码实现过程中耗时费力的手动编码问题，能够自动识别界面布局并生成适用于 iOS、Android 及 Web 端的技术代码，实验准确率超过 77%。\n\n该项目的核心亮点在于采用了端到端的深度神经网络模型，无需复杂的中间步骤，即可“看懂”单张界面图片并输出对应的领域特定语言（DSL）代码。这种从视觉输入到代码输出的直接映射，展示了人工智能在辅助软件开发领域的巨大潜力。\n\n需要注意的是，pix2code 目前定位为一个教育性和实验性的研究原型，而非成熟的商业产品。其生成的代码尚难以直接应用于复杂的生产环境。因此，它最适合对机器学习、计算机视觉感兴趣的研究人员、高校学生以及希望探索 AI 辅助开发可能性的开发者使用。设计师和普通用户可通过它了解技术原理，但暂无法将其作为日常设计转代码的自动化工具。通过开放源代码和数据集，pix2code 致力于推动机器智能领域的未来研究。","# pix2code\n*Generating Code from a Graphical User Interface Screenshot*\n\n[![License](http:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-APACHE2-blue.svg)](LICENSE.txt)\n\n* A video demo of the system can be seen [here](https:\u002F\u002Fyoutu.be\u002FpqKeXkhFA3I)\n* The paper is available at [https:\u002F\u002Farxiv.org\u002Fabs\u002F1705.07962](https:\u002F\u002Farxiv.org\u002Fabs\u002F1705.07962)\n* Official research page: [https:\u002F\u002Fuizard.io\u002Fresearch#pix2code](https:\u002F\u002Fuizard.io\u002Fresearch#pix2code)\n\n## Abstract\nTransforming a graphical user interface screenshot created by a designer into computer code is a typical task conducted by a developer in order to build customized software, websites, and mobile applications. In this paper, we show that deep learning methods can be leveraged to train a model end-to-end to automatically generate code from a single input image with over 77% of accuracy for three different platforms (i.e. iOS, Android and web-based technologies).\n\n## Citation\n\n```\n@article{beltramelli2017pix2code,\n  title={pix2code: Generating Code from a Graphical User Interface Screenshot},\n  author={Beltramelli, Tony},\n  journal={arXiv preprint arXiv:1705.07962},\n  year={2017}\n}\n```\n\n## Disclaimer\n\nThe following software is shared for educational purposes only. The author and its affiliated institution are not responsible in any manner whatsoever for any damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of the use or inability to use this software.\n\nThe project pix2code is a research project demonstrating an application of deep neural networks to generate code from visual inputs.\nThe current implementation is not, in any way, intended, nor able to generate code in a real-world context.\nWe could not emphasize enough that this project is experimental and shared for educational purposes only.\nBoth the source code and the datasets are provided to foster future research in machine intelligence and are not designed for end users.\n\n## Setup\n### Prerequisites\n\n- Python 2 or 3\n- pip\n\n### Install dependencies\n\n```sh\npip install -r  requirements.txt\n```\n\n## Usage\n\nPrepare the data:\n```sh\n# reassemble and unzip the data\ncd datasets\nzip -F pix2code_datasets.zip --out datasets.zip\nunzip datasets.zip\n\ncd ..\u002Fmodel\n\n# split training set and evaluation set while ensuring no training example in the evaluation set\n# usage: build_datasets.py \u003Cinput path> \u003Cdistribution (default: 6)>\n.\u002Fbuild_datasets.py ..\u002Fdatasets\u002Fios\u002Fall_data\n.\u002Fbuild_datasets.py ..\u002Fdatasets\u002Fandroid\u002Fall_data\n.\u002Fbuild_datasets.py ..\u002Fdatasets\u002Fweb\u002Fall_data\n\n# transform images (normalized pixel values and resized pictures) in training dataset to numpy arrays (smaller files if you need to upload the set to train your model in the cloud)\n# usage: convert_imgs_to_arrays.py \u003Cinput path> \u003Coutput path>\n.\u002Fconvert_imgs_to_arrays.py ..\u002Fdatasets\u002Fios\u002Ftraining_set ..\u002Fdatasets\u002Fios\u002Ftraining_features\n.\u002Fconvert_imgs_to_arrays.py ..\u002Fdatasets\u002Fandroid\u002Ftraining_set ..\u002Fdatasets\u002Fandroid\u002Ftraining_features\n.\u002Fconvert_imgs_to_arrays.py ..\u002Fdatasets\u002Fweb\u002Ftraining_set ..\u002Fdatasets\u002Fweb\u002Ftraining_features\n```\n\nTrain the model:\n```sh\nmkdir bin\ncd model\n\n# provide input path to training data and output path to save trained model and metadata\n# usage: train.py \u003Cinput path> \u003Coutput path> \u003Cis memory intensive (default: 0)> \u003Cpretrained weights (optional)>\n.\u002Ftrain.py ..\u002Fdatasets\u002Fweb\u002Ftraining_set ..\u002Fbin\n\n# train on images pre-processed as arrays\n.\u002Ftrain.py ..\u002Fdatasets\u002Fweb\u002Ftraining_features ..\u002Fbin\n\n# train with generator to avoid having to fit all the data in memory (RECOMMENDED)\n.\u002Ftrain.py ..\u002Fdatasets\u002Fweb\u002Ftraining_features ..\u002Fbin 1\n\n# train on top of pretrained weights\n.\u002Ftrain.py ..\u002Fdatasets\u002Fweb\u002Ftraining_features ..\u002Fbin 1 ..\u002Fbin\u002Fpix2code.h5\n```\n\nGenerate code for batch of GUIs:\n```sh\nmkdir code\ncd model\n\n# generate DSL code (.gui file), the default search method is greedy\n# usage: generate.py \u003Ctrained weights path> \u003Ctrained model name> \u003Cinput image> \u003Coutput path> \u003Csearch method (default: greedy)>\n.\u002Fgenerate.py ..\u002Fbin pix2code ..\u002Fgui_screenshots ..\u002Fcode\n\n# equivalent to command above\n.\u002Fgenerate.py ..\u002Fbin pix2code ..\u002Fgui_screenshots ..\u002Fcode greedy\n\n# generate DSL code with beam search and a beam width of size 3\n.\u002Fgenerate.py ..\u002Fbin pix2code ..\u002Fgui_screenshots ..\u002Fcode 3\n```\n\nGenerate code for a single GUI image:\n```sh\nmkdir code\ncd model\n\n# generate DSL code (.gui file), the default search method is greedy\n# usage: sample.py \u003Ctrained weights path> \u003Ctrained model name> \u003Cinput image> \u003Coutput path> \u003Csearch method (default: greedy)>\n.\u002Fsample.py ..\u002Fbin pix2code ..\u002Ftest_gui.png ..\u002Fcode\n\n# equivalent to command above\n.\u002Fsample.py ..\u002Fbin pix2code ..\u002Ftest_gui.png ..\u002Fcode greedy\n\n# generate DSL code with beam search and a beam width of size 3\n.\u002Fsample.py ..\u002Fbin pix2code ..\u002Ftest_gui.png ..\u002Fcode 3\n```\n\nCompile generated code to target language:\n```sh\ncd compiler\n\n# compile .gui file to Android XML UI\n.\u002Fandroid-compiler.py \u003Cinput file path>.gui\n\n# compile .gui file to iOS Storyboard\n.\u002Fios-compiler.py \u003Cinput file path>.gui\n\n# compile .gui file to HTML\u002FCSS (Bootstrap style)\n.\u002Fweb-compiler.py \u003Cinput file path>.gui\n```\n\n## FAQ\n\n### Will pix2code supports other target platforms\u002Flanguages?\nNo, pix2code is only a research project and will stay in the state described in the paper for consistency reasons.\nThis project is really just a toy example but you are of course more than welcome to fork the repo and experiment yourself with other target platforms\u002Flanguages.\n\n### Will I be able to use pix2code for my own frontend projects?\nNo, pix2code is experimental and won't work for your specific use cases.\n\n### How is the model performance measured?\nThe accuracy\u002Ferror reported in the paper is measured at the DSL level by comparing each generated token with each expected token.\nAny difference in length between the generated token sequence and the expected token sequence is also counted as error.\n\n### How long does it take to train the model?\nOn a Nvidia Tesla K80 GPU, it takes a little less than 5 hours to optimize the 109 * 10^6 parameters for one dataset; so expect around 15 hours if you want to train the model for the three target platforms.\n\n### I am a front-end developer, will I soon lose my job?\n*(I have genuinely been asked this question multiple times)*\n\n**TL;DR** Not anytime soon will AI replace front-end developers.\n\nEven assuming a mature version of pix2code able to generate GUI code with 100% accuracy for every platforms\u002Flanguages in the universe, front-enders will still be needed to implement the logic, the interactive parts, the advanced graphics and animations, and all the features users love. The product we are building at [Uizard Technologies](https:\u002F\u002Fuizard.io) is intended to bridge the gap between UI\u002FUX designers and front-end developers, not replace any of them. We want to rethink the traditional workflow that too often results in more frustration than innovation. We want designers to be as creative as possible to better serve end users, and developers to dedicate their time programming the core functionality and forget about repetitive tasks such as UI implementation. We believe in a future where AI collaborate with humans, not replace humans.\n\n## Media coverage\n\n* [Wired UK](http:\u002F\u002Fwww.wired.co.uk\u002Farticle\u002Fpix2code-ulzard-technologies)\n* [The Next Web](https:\u002F\u002Fthenextweb.com\u002Fapps\u002F2017\u002F05\u002F26\u002Fai-raw-design-turn-source-code)\n* [Fast Company](https:\u002F\u002Fwww.fastcodesign.com\u002F90127911\u002Fthis-startup-uses-machine-learning-to-turn-ui-designs-into-raw-code)\n* [NVIDIA Developer News](https:\u002F\u002Fnews.developer.nvidia.com\u002Fai-turns-ui-designs-into-code)\n* [Lifehacker Australia](https:\u002F\u002Fwww.lifehacker.com.au\u002F2017\u002F05\u002Fgenerating-user-interface-code-from-images-using-machine-learning\u002F)\n* [Two Minute Papers](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=Fevg4aowNyc) (web series)\n* [NLP Highlights](https:\u002F\u002Fsoundcloud.com\u002Fnlp-highlights\u002F17a) (podcast)\n* [Data Skeptic](https:\u002F\u002Fdataskeptic.com\u002Fblog\u002Fepisodes\u002F2017\u002Fpix2code) (podcast)\n* Read comments on [Hacker News](https:\u002F\u002Fnews.ycombinator.com\u002Fitem?id=14416530)\n","# pix2code\n*从图形用户界面截图生成代码*\n\n[![许可证](http:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-APACHE2-blue.svg)](LICENSE.txt)\n\n* 该系统的视频演示可以在这里观看：[https:\u002F\u002Fyoutu.be\u002FpqKeXkhFA3I](https:\u002F\u002Fyoutu.be\u002FpqKeXkhFA3I)\n* 论文可在 [https:\u002F\u002Farxiv.org\u002Fabs\u002F1705.07962](https:\u002F\u002Farxiv.org\u002Fabs\u002F1705.07962) 获取\n* 官方研究页面：[https:\u002F\u002Fuizard.io\u002Fresearch#pix2code](https:\u002F\u002Fuizard.io\u002Fresearch#pix2code)\n\n## 摘要\n将设计师创建的图形用户界面截图转换为计算机代码，是开发者构建定制化软件、网站和移动应用时的一项典型任务。在本文中，我们展示了利用深度学习方法，可以端到端地训练一个模型，从而根据单张输入图像自动生成代码，在三个不同平台上（即 iOS、Android 和 Web 技术）的准确率超过 77%。\n\n## 引用\n\n```\n@article{beltramelli2017pix2code,\n  title={pix2code: Generating Code from a Graphical User Interface Screenshot},\n  author={Beltramelli, Tony},\n  journal={arXiv preprint arXiv:1705.07962},\n  year={2017}\n}\n```\n\n## 免责声明\n\n以下软件仅用于教育目的分享。作者及其所属机构对因使用或无法使用本软件而产生的任何损害，包括直接、间接、特殊、附带或后果性损害，概不承担任何责任。\n\n项目 pix2code 是一项研究项目，旨在展示如何将深度神经网络应用于从视觉输入生成代码。当前的实现方式既无意也无能力在实际场景中生成代码。我们再三强调，该项目具有实验性质，仅用于教育目的。源代码和数据集均旨在促进机器智能领域的未来研究，而非面向最终用户。\n\n## 设置\n### 前置条件\n\n- Python 2 或 3\n- pip\n\n### 安装依赖\n\n```sh\npip install -r requirements.txt\n```\n\n## 使用方法\n\n准备数据：\n```sh\n# 重新组装并解压数据\ncd datasets\nzip -F pix2code_datasets.zip --out datasets.zip\nunzip datasets.zip\n\ncd ..\u002Fmodel\n\n# 划分训练集和验证集，确保验证集中不含任何训练样本\n# 使用方法：build_datasets.py \u003C输入路径> \u003C划分比例（默认为6）>\n.\u002Fbuild_datasets.py ..\u002Fdatasets\u002Fios\u002Fall_data\n.\u002Fbuild_datasets.py ..\u002Fdatasets\u002Fandroid\u002Fall_data\n.\u002Fbuild_datasets.py ..\u002Fdatasets\u002Fweb\u002Fall_data\n\n# 将训练集中的图像（归一化像素值并调整大小）转换为 numpy 数组（如果需要将数据集上传到云端进行训练，可减小文件大小）\n# 使用方法：convert_imgs_to_arrays.py \u003C输入路径> \u003C输出路径>\n.\u002Fconvert_imgs_to_arrays.py ..\u002Fdatasets\u002Fios\u002Ftraining_set ..\u002Fdatasets\u002Fios\u002Ftraining_features\n.\u002Fconvert_imgs_to_arrays.py ..\u002Fdatasets\u002Fandroid\u002Ftraining_set ..\u002Fdatasets\u002Fandroid\u002Ftraining_features\n.\u002Fconvert_imgs_to_arrays.py ..\u002Fdatasets\u002Fweb\u002Ftraining_set ..\u002Fdatasets\u002Fweb\u002Ftraining_features\n```\n\n训练模型：\n```sh\nmkdir bin\ncd model\n\n# 提供训练数据的输入路径以及保存训练好的模型和元数据的输出路径\n# 使用方法：train.py \u003C输入路径> \u003C输出路径> \u003C是否占用大量内存（默认为0）> \u003C预训练权重（可选）>\n.\u002Ftrain.py ..\u002Fdatasets\u002Fweb\u002Ftraining_set ..\u002Fbin\n\n# 使用已处理为数组格式的图像进行训练\n.\u002Ftrain.py ..\u002Fdatasets\u002Fweb\u002Ftraining_features ..\u002Fbin\n\n# 使用生成器进行训练，以避免将所有数据一次性加载到内存中（推荐）\n.\u002Ftrain.py ..\u002Fdatasets\u002Fweb\u002Ftraining_features ..\u002Fbin 1\n\n# 在预训练权重的基础上继续训练\n.\u002Ftrain.py ..\u002Fdatasets\u002Fweb\u002Ftraining_features ..\u002Fbin 1 ..\u002Fbin\u002Fpix2code.h5\n```\n\n为一批 GUI 生成代码：\n```sh\nmkdir code\ncd model\n\n# 生成 DSL 代码（.gui 文件），默认搜索方法为贪心算法\n# 使用方法：generate.py \u003C训练好的权重路径> \u003C训练好的模型名称> \u003C输入图像> \u003C输出路径> \u003C搜索方法（默认为贪心）>\n.\u002Fgenerate.py ..\u002Fbin pix2code ..\u002Fgui_screenshots ..\u002Fcode\n\n# 与上一条命令等效\n.\u002Fgenerate.py ..\u002Fbin pix2code ..\u002Fgui_screenshots ..\u002Fcode greedy\n\n# 使用束搜索算法，束宽设为 3，生成 DSL 代码\n.\u002Fgenerate.py ..\u002Fbin pix2code ..\u002Fgui_screenshots ..\u002Fcode 3\n```\n\n为单个 GUI 图像生成代码：\n```sh\nmkdir code\ncd model\n\n# 生成 DSL 代码（.gui 文件），默认搜索方法为贪心算法\n# 使用方法：sample.py \u003C训练好的权重路径> \u003C训练好的模型名称> \u003C输入图像> \u003C输出路径> \u003C搜索方法（默认为贪心）>\n.\u002Fsample.py ..\u002Fbin pix2code ..\u002Ftest_gui.png ..\u002Fcode\n\n# 与上一条命令等效\n.\u002Fsample.py ..\u002Fbin pix2code ..\u002Ftest_gui.png ..\u002Fcode greedy\n\n# 使用束搜索算法，束宽设为 3，生成 DSL 代码\n.\u002Fsample.py ..\u002Fbin pix2code ..\u002Ftest_gui.png ..\u002Fcode 3\n```\n\n将生成的代码编译为目标语言：\n```sh\ncd compiler\n\n# 将 .gui 文件编译为 Android XML UI\n.\u002Fandroid-compiler.py \u003C输入文件路径>.gui\n\n# 将 .gui 文件编译为 iOS Storyboard\n.\u002Fios-compiler.py \u003C输入文件路径>.gui\n\n# 将 .gui 文件编译为 HTML\u002FCSS（Bootstrap 风格）\n.\u002Fweb-compiler.py \u003C输入文件路径>.gui\n```\n\n## 常见问题解答\n\n### pix2code 是否会支持其他目标平台\u002F语言？\n不会，pix2code 仅是一个研究项目，出于一致性考虑，它将保持论文中描述的状态。该项目确实只是一个示例，但您当然可以自由地 fork 该仓库，并自行尝试其他目标平台\u002F语言。\n\n### 我能否将 pix2code 用于自己的前端项目？\n不能，pix2code 仍处于实验阶段，无法适用于您的具体用例。\n\n### 模型的性能是如何衡量的？\n论文中报告的准确率\u002F错误率是在 DSL 层面计算的，通过比较每个生成的标记与预期的标记来评估。生成的标记序列与预期标记序列之间的长度差异也会被计入错误。\n\n### 训练模型需要多长时间？\n在 Nvidia Tesla K80 GPU 上，优化一个数据集的 1.09 亿个参数大约需要不到 5 小时；因此，如果您希望为三个目标平台训练模型，预计总共需要约 15 小时。\n\n### 我是一名前端开发者，我很快就会失业吗？\n*（我真的被问过这个问题好几次）*\n\n**简而言之**：AI在短期内还不会取代前端开发者。\n\n即使假设Pix2Code已经发展到成熟版本，能够以100%的准确率在世界上所有平台和编程语言上生成GUI代码，前端工程师仍然不可或缺——他们需要实现业务逻辑、交互功能、高级图形与动画效果，以及用户喜爱的各种特性。我们在[Uizard Technologies](https:\u002F\u002Fuizard.io)打造的产品，旨在弥合UI\u002FUX设计师与前端开发人员之间的鸿沟，而非取代任何一方。我们希望重新思考那种往往带来更多挫败感而非创新的传统工作流程。我们希望设计师能够尽情发挥创意，更好地服务终端用户；而开发者则可以将更多时间投入到核心功能的开发中，不再为重复性的UI实现工作耗费精力。我们坚信，未来的协作模式应该是AI与人类共同合作，而不是AI取代人类。\n\n## 媒体报道\n\n* [Wired UK](http:\u002F\u002Fwww.wired.co.uk\u002Farticle\u002Fpix2code-ulzard-technologies)\n* [The Next Web](https:\u002F\u002Fthenextweb.com\u002Fapps\u002F2017\u002F05\u002F26\u002Fai-raw-design-turn-source-code)\n* [Fast Company](https:\u002F\u002Fwww.fastcodesign.com\u002F90127911\u002Fthis-startup-uses-machine-learning-to-turn-ui-designs-into-raw-code)\n* [NVIDIA开发者新闻](https:\u002F\u002Fnews.developer.nvidia.com\u002Fai-turns-ui-designs-into-code)\n* [Lifehacker澳大利亚版](https:\u002F\u002Fwww.lifehacker.com.au\u002F2017\u002F05\u002Fgenerating-user-interface-code-from-images-using-machine-learning\u002F)\n* [Two Minute Papers](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=Fevg4aowNyc)（网络系列节目）\n* [NLP Highlights](https:\u002F\u002Fsoundcloud.com\u002Fnlp-highlights\u002F17a)（播客）\n* [Data Skeptic](https:\u002F\u002Fdataskeptic.com\u002Fblog\u002Fepisodes\u002F2017\u002Fpix2code)（播客）\n* 阅读[Hacker News](https:\u002F\u002Fnews.ycombinator.com\u002Fitem?id=14416530)上的评论","# pix2code 快速上手指南\n\npix2code 是一个研究性项目，旨在利用深度学习模型将图形用户界面（GUI）截图自动转换为代码。本指南将帮助开发者快速搭建环境并运行基础示例。\n\n> **注意**：本项目仅供教育和研究用途，生成的代码为中间 DSL 格式，尚不具备在生产环境中直接使用的能力。\n\n## 环境准备\n\n在开始之前，请确保您的系统满足以下要求：\n\n*   **操作系统**：Linux \u002F macOS \u002F Windows (需配置相应 Python 环境)\n*   **Python 版本**：Python 2 或 Python 3\n*   **包管理工具**：pip\n*   **硬件建议**：如需重新训练模型，建议使用 NVIDIA GPU (如 Tesla K80)；仅进行代码生成推理可在 CPU 上运行。\n\n## 安装步骤\n\n1.  **克隆项目代码**\n    首先获取源代码（假设您已下载或克隆了该仓库）：\n    ```bash\n    git clone https:\u002F\u002Fgithub.com\u002Ftonybeltramelli\u002Fpix2code.git\n    cd pix2code\n    ```\n\n2.  **安装依赖库**\n    使用 pip 安装项目所需的 Python 依赖包。\n    *国内用户推荐使用清华或阿里镜像源以加速下载：*\n    ```sh\n    pip install -r requirements.txt -i https:\u002F\u002Fpypi.tuna.tsinghua.edu.cn\u002Fsimple\n    ```\n\n3.  **准备数据集（可选）**\n    如果您计划训练模型，需要解压并处理数据集。若仅需测试预训练模型生成代码，可跳过此步直接使用官方提供的权重文件。\n    ```sh\n    cd datasets\n    zip -F pix2code_datasets.zip --out datasets.zip\n    unzip datasets.zip\n    cd ..\u002Fmodel\n    ```\n\n## 基本使用\n\n以下演示如何使用预训练好的模型，将一张 GUI 截图转换为代码。\n\n### 1. 生成单个界面的代码\n\n假设您有一张名为 `test_gui.png` 的界面截图，放置在项目根目录下。运行以下命令生成对应的 DSL 代码文件（`.gui`）：\n\n```sh\nmkdir code\ncd model\n\n# 使用贪心搜索算法生成代码\n# 参数说明：\u003C权重路径> \u003C模型名称> \u003C输入图片路径> \u003C输出路径>\n.\u002Fsample.py ..\u002Fbin pix2code ..\u002Ftest_gui.png ..\u002Fcode\n```\n\n如果您希望提高生成质量，可以使用束搜索（Beam Search），例如设置束宽为 3：\n\n```sh\n.\u002Fsample.py ..\u002Fbin pix2code ..\u002Ftest_gui.png ..\u002Fcode 3\n```\n\n执行完成后，生成的 `.gui` 文件将保存在 `code` 目录中。\n\n### 2. 编译为目标平台代码\n\npix2code 生成的是中间 DSL 格式，需要通过编译器转换为目标平台的具体代码（Android XML, iOS Storyboard, 或 HTML\u002FCSS）。\n\n进入编译器目录并执行转换：\n\n```sh\ncd compiler\n\n# 编译为 Android XML UI\n.\u002Fandroid-compiler.py \u003Cinput file path>.gui\n\n# 编译为 iOS Storyboard\n.\u002Fios-compiler.py \u003Cinput file path>.gui\n\n# 编译为 HTML\u002FCSS (Bootstrap 风格)\n.\u002Fweb-compiler.py \u003Cinput file path>.gui\n```\n\n将 `\u003Cinput file path>.gui` 替换为上一步生成的实际文件路径，即可获得对应平台的源代码文件。","某初创公司的设计团队刚完成一套移动端活动页面的高保真原型图，急需在 24 小时内上线对应的 iOS 和 Android 版本以配合市场预热。\n\n### 没有 pix2code 时\n- 前端工程师需对着设计截图手动逐行编写布局代码，将视觉元素转化为 UIView 或 XML 结构，耗时极长且容易出错。\n- 设计师与开发人员之间存在“翻译”损耗，按钮间距、字体大小等细节在反复沟通中常被忽略，导致最终成品与设计稿偏差较大。\n- 面对多端适配需求（iOS、Android 及 Web），团队需要重复投入三倍人力进行相同逻辑的代码重写，严重拖慢迭代速度。\n- 紧急修改设计时，开发人员必须重新调整大量硬编码的布局参数，响应速度慢，难以应对临时的运营需求变更。\n\n### 使用 pix2code 后\n- 开发人员直接将设计截图输入 pix2code，模型能自动识别界面元素并生成准确率超过 77% 的基础代码框架，将数小时的手工编码缩短至分钟级。\n- 生成的代码高度还原了截图中的视觉特征，大幅减少了人工校对和调整 UI 细节的时间，确保上线效果与设计初衷一致。\n- 利用同一套训练好的模型，pix2code 可针对不同平台输出相应的代码格式，一次性解决多端适配问题，显著降低重复劳动成本。\n- 当设计稿发生微调时，只需重新运行截图生成流程即可快速获得更新后的代码，让团队能灵活应对频繁的运营活动变更。\n\npix2code 通过将视觉设计直接转化为可执行代码，打破了设计与开发之间的壁垒，实现了从“看图”到“上线”的自动化加速。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Ftonybeltramelli_pix2code_c1907c0a.png","tonybeltramelli","Tony Beltramelli","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Ftonybeltramelli_f7797064.jpg",null,"uizard.io","tbeltramelli","https:\u002F\u002Ftonybeltramelli.com","https:\u002F\u002Fgithub.com\u002Ftonybeltramelli",[81,85],{"name":82,"color":83,"percentage":84},"Python","#3572A5",96.7,{"name":86,"color":87,"percentage":88},"Shell","#89e051",3.3,12042,1436,"2026-04-14T02:59:37","Apache-2.0",4,"未说明","训练阶段需要 NVIDIA GPU（文中提及 Nvidia Tesla K80），推理阶段未明确强制要求但建议使用；显存大小和 CUDA 版本未说明","未说明（文中提到训练时可配置为内存密集型或使用生成器以避免将所有数据载入内存）",{"notes":98,"python":99,"dependencies":100},"该项目仅为教育和研究用途，不适用于生产环境。训练单个数据集在 Nvidia Tesla K80 上约需 5 小时。使用前需手动解压并重组数据集文件，并将图片转换为 numpy 数组。生成的代码为中间 DSL 格式 (.gui)，需通过提供的编译器脚本转换为目标平台代码 (Android XML, iOS Storyboard, 或 HTML\u002FCSS)。","2 或 3",[101],"未说明 (仅提及通过 requirements.txt 安装)",[15,16,14],[104,105,106,107,108],"deep-learning","datasets","deep-neural-networks","front-end-development","graphical-user-interface","2026-03-27T02:49:30.150509","2026-04-16T01:49:43.254490",[],[]]