[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-emilwallner--Screenshot-to-code":3,"tool-emilwallner--Screenshot-to-code":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 真正成长为懂上",145895,2,"2026-04-08T11:32:59",[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 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",108111,"2026-04-08T11:23:26",[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},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":54,"name":55,"github_repo":56,"description_zh":57,"stars":58,"difficulty_score":10,"last_commit_at":59,"category_tags":60,"status":17},4487,"LLMs-from-scratch","rasbt\u002FLLMs-from-scratch","LLMs-from-scratch 是一个基于 PyTorch 的开源教育项目，旨在引导用户从零开始一步步构建一个类似 ChatGPT 的大型语言模型（LLM）。它不仅是同名技术著作的官方代码库，更提供了一套完整的实践方案，涵盖模型开发、预训练及微调的全过程。\n\n该项目主要解决了大模型领域“黑盒化”的学习痛点。许多开发者虽能调用现成模型，却难以深入理解其内部架构与训练机制。通过亲手编写每一行核心代码，用户能够透彻掌握 Transformer 架构、注意力机制等关键原理，从而真正理解大模型是如何“思考”的。此外，项目还包含了加载大型预训练权重进行微调的代码，帮助用户将理论知识延伸至实际应用。\n\nLLMs-from-scratch 特别适合希望深入底层原理的 AI 开发者、研究人员以及计算机专业的学生。对于不满足于仅使用 API，而是渴望探究模型构建细节的技术人员而言，这是极佳的学习资源。其独特的技术亮点在于“循序渐进”的教学设计：将复杂的系统工程拆解为清晰的步骤，配合详细的图表与示例，让构建一个虽小但功能完备的大模型变得触手可及。无论你是想夯实理论基础，还是为未来研发更大规模的模型做准备",90106,"2026-04-06T11:19:32",[35,15,13,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":77,"owner_email":78,"owner_twitter":79,"owner_website":80,"owner_url":81,"languages":82,"stars":99,"forks":100,"last_commit_at":101,"license":102,"difficulty_score":10,"env_os":103,"env_gpu":104,"env_ram":103,"env_deps":105,"category_tags":113,"github_topics":114,"view_count":32,"oss_zip_url":124,"oss_zip_packed_at":124,"status":17,"created_at":125,"updated_at":126,"faqs":127,"releases":168},5608,"emilwallner\u002FScreenshot-to-code","Screenshot-to-code","A neural network that transforms a design mock-up into a static website.","Screenshot-to-code 是一款基于深度学习的开源项目，旨在将设计稿截图自动转化为可运行的静态网站代码。它主要解决了前端开发中从视觉设计到代码实现耗时费力的问题，让设计师的创意能快速落地为 HTML 和 CSS 原型，大幅缩短开发周期。\n\n该项目特别适合前端开发者、机器学习研究人员以及希望探索自动化工作流的设计师使用。对于开发者而言，它可以作为快速构建原型的辅助工具；对于研究人员，其开放的代码结构和分阶段训练策略（从基础版到泛化版）提供了极佳的学习案例。\n\n技术层面，Screenshot-to-code 借鉴了 pix2code、Airbnb 界面草图识别等前沿研究，核心采用神经网络架构。其中表现最佳的 Bootstrap 版本通过 16 个领域专用令牌将图像映射为代码，在测试中达到了 97% 的准确率，并支持在少量 GPU 资源上进行训练。虽然目前模型主要在相对简单的数据集上验证，但其展示出的“看图写代码”能力，为未来处理更复杂布局奠定了坚实基础。用户只需提供一张设计图，即可看到神经网络逐步生成标记语言并渲染出最终网页效果的全过程。","\u003Cimg src=\"\u002FREADME_images\u002Fscreenshot-to-code.svg?raw=true\" width=\"800px\">\n\n---\n\n**A detailed tutorial covering the code in this repository:** [Turning design mockups into code with deep learning](https:\u002F\u002Femilwallner.medium.com\u002Fhow-you-can-train-an-ai-to-convert-your-design-mockups-into-html-and-css-cc7afd82fed4).\n\n**Plug:** 👉 Check out my 60-page guide, [No ML Degree](https:\u002F\u002Fwww.emilwallner.com\u002Fp\u002Fno-ml-degree), on how to land a machine learning job without a degree.\n\nThe neural network is built in three iterations. Starting with a Hello World version, followed by the main neural network layers, and ending by training it to generalize. \n\nThe models are based on Tony Beltramelli's [pix2code](https:\u002F\u002Fgithub.com\u002Ftonybeltramelli\u002Fpix2code), and inspired by Airbnb's [sketching interfaces](https:\u002F\u002Fairbnb.design\u002Fsketching-interfaces\u002F), and Harvard's [im2markup](https:\u002F\u002Fgithub.com\u002Fharvardnlp\u002Fim2markup).\n\n**Note:** only the Bootstrap version can generalize on new design mock-ups. It uses 16 domain-specific tokens which are translated into HTML\u002FCSS. It has a 97% accuracy. The best model uses a GRU instead of an LSTM. This version can be trained on a few GPUs. The raw HTML version has potential to generalize, but is still unproven and requires a significant amount of GPUs to train. The current model is also trained on a homogeneous and small dataset, thus it's hard to tell how well it behaves on more complex layouts.\n\nDataset: https:\u002F\u002Fgithub.com\u002Ftonybeltramelli\u002Fpix2code\u002Ftree\u002Fmaster\u002Fdatasets\n\nA quick overview of the process: \n\n### 1) Give a design image to the trained neural network\n\n![Insert image](https:\u002F\u002Fi.imgur.com\u002FLDmoLLV.png)\n\n### 2) The neural network converts the image into HTML markup \n\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Femilwallner_Screenshot-to-code_readme_4d71b8cb2e4b.gif\" width=\"800px\">\n\n### 3) Rendered output\n\n![Screenshot](https:\u002F\u002Fi.imgur.com\u002FtEAfyZ8.png)\n\n\n## Installation\n\n### FloydHub\n\n[![Run on FloydHub](https:\u002F\u002Fstatic.floydhub.com\u002Fbutton\u002Fbutton.svg)](https:\u002F\u002Ffloydhub.com\u002Frun?template=https:\u002F\u002Fgithub.com\u002Ffloydhub\u002Fpix2code-template)\n\nClick this button to open a [Workspace](https:\u002F\u002Fblog.floydhub.com\u002Fworkspaces\u002F) on [FloydHub](https:\u002F\u002Fwww.floydhub.com\u002F?utm_medium=readme&utm_source=pix2code&utm_campaign=aug_2018) where you will find the same environment and dataset used for the *Bootstrap version*. You can also find the trained models for testing.\n\n### Local\n``` bash\npip install keras tensorflow pillow h5py jupyter\n```\n```\ngit clone https:\u002F\u002Fgithub.com\u002Femilwallner\u002FScreenshot-to-code.git\ncd Screenshot-to-code\u002F\njupyter notebook\n```\nGo do the desired notebook, files that end with '.ipynb'. To run the model, go to the menu then click on Cell > Run all\n\nThe final version, the Bootstrap version, is prepared with a small set to test run the model. If you want to try it with all the data, you need to download the data here: https:\u002F\u002Fwww.floydhub.com\u002Femilwallner\u002Fdatasets\u002Fimagetocode, and specify the correct ```dir_name```.\n\n## Folder structure\n\n``` bash\n  |  |-Bootstrap                           #The Bootstrap version\n  |  |  |-compiler                         #A compiler to turn the tokens to HTML\u002FCSS (by pix2code)\n  |  |  |-resources\t\t\t\t\t\t\t\t\t\t\t\n  |  |  |  |-eval_light                    #10 test images and markup\n  |  |-Hello_world                         #The Hello World version\n  |  |-HTML                                #The HTML version\n  |  |  |-Resources_for_index_file         #CSS,images and scripts to test index.html file\n  |  |  |-html                             #HTML files to train it on\n  |  |  |-images                           #Screenshots for training\n  |-readme_images                          #Images for the readme page\n```\n\n\n## Hello World\n\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Femilwallner_Screenshot-to-code_readme_f105f6bd6889.png\" width=\"400px\">\u003C\u002Fp>\n\n\n## HTML\n\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Femilwallner_Screenshot-to-code_readme_9b4c9ffe54a9.png\" width=\"400px\">\u003C\u002Fp>\n\n\n## Bootstrap\n\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Femilwallner_Screenshot-to-code_readme_21182a1c228a.png\" width=\"400px\">\u003C\u002Fp>\n\n## Model weights\n- [Bootstrap](https:\u002F\u002Fwww.floydhub.com\u002Femilwallner\u002Fdatasets\u002Fimagetocode) (The pre-trained model uses GRUs instead of LSTMs)\n- [HTML](https:\u002F\u002Fwww.floydhub.com\u002Femilwallner\u002Fdatasets\u002Fhtml_models)\n\n## Acknowledgments\n- Thanks to IBM for donating computing power through their PowerAI platform\n- The code is largely influenced by Tony Beltramelli's pix2code paper. [Code](https:\u002F\u002Fgithub.com\u002Ftonybeltramelli\u002Fpix2code) [Paper](https:\u002F\u002Farxiv.org\u002Fabs\u002F1705.07962)\n- The structure and some of the functions are from Jason Brownlee's [excellent tutorial](https:\u002F\u002Fmachinelearningmastery.com\u002Fdevelop-a-caption-generation-model-in-keras\u002F)\n","\u003Cimg src=\"\u002FREADME_images\u002Fscreenshot-to-code.svg?raw=true\" width=\"800px\">\n\n---\n\n**一份详尽的教程，涵盖本仓库中的代码：** [使用深度学习将设计原型转化为代码](https:\u002F\u002Femilwallner.medium.com\u002Fhow-you-can-train-an-ai-to-convert-your-design-mockups-into-html-and-css-cc7afd82fed4)。\n\n**插播广告：** 👉 欢迎查看我的60页指南《无需机器学习学位》（[No ML Degree](https:\u002F\u002Fwww.emilwallner.com\u002Fp\u002Fno-ml-degree)），教你如何在没有学位的情况下找到机器学习相关工作。\n\n该神经网络分三个迭代阶段构建。首先实现一个“Hello World”版本，随后搭建主神经网络层，最后通过训练使其具备泛化能力。\n\n这些模型基于Tony Beltramelli的[pix2code](https:\u002F\u002Fgithub.com\u002Ftonybeltramelli\u002Fpix2code)，并受到Airbnb的[界面草图设计](https:\u002F\u002Fairbnb.design\u002Fsketching-interfaces\u002F)以及哈佛大学的[im2markup](https:\u002F\u002Fgithub.com\u002Fharvardnlp\u002Fim2markup)的启发。\n\n**注意：** 只有Bootstrap版本能够在新的设计原型上实现泛化。它使用16个领域特定的标记，这些标记会被转换为HTML\u002FCSS代码，准确率达到97%。其中表现最佳的模型采用了GRU而非LSTM。这一版本可以在几块GPU上进行训练。而原始的HTML版本虽然也有潜力实现泛化，但目前尚未得到验证，并且需要大量的GPU资源来完成训练。此外，当前模型所使用的数据集较为单一且规模较小，因此很难判断其在更复杂布局上的表现。\n\n数据集：https:\u002F\u002Fgithub.com\u002Ftonybeltramelli\u002Fpix2code\u002Ftree\u002Fmaster\u002Fdatasets\n\n流程简要概述如下：\n\n### 1) 将设计图像输入已训练好的神经网络\n\n![插入图片](https:\u002F\u002Fi.imgur.com\u002FLDmoLLV.png)\n\n### 2) 神经网络将图像转换为HTML标记\n\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Femilwallner_Screenshot-to-code_readme_4d71b8cb2e4b.gif\" width=\"800px\">\n\n### 3) 渲染后的输出\n\n![截图](https:\u002F\u002Fi.imgur.com\u002FtEAfyZ8.png)\n\n\n## 安装\n\n### FloydHub\n\n[![在FloydHub上运行](https:\u002F\u002Fstatic.floydhub.com\u002Fbutton\u002Fbutton.svg)](https:\u002F\u002Ffloydhub.com\u002Frun?template=https:\u002F\u002Fgithub.com\u002Ffloydhub\u002Fpix2code-template)\n\n点击此按钮即可在[FloydHub](https:\u002F\u002Fwww.floydhub.com\u002F?utm_medium=readme&utm_source=pix2code&utm_campaign=aug_2018)上打开一个[Workspace](https:\u002F\u002Fblog.floydhub.com\u002Fworkspaces\u002F)，其中包含与“Bootstrap版本”相同的环境和数据集。你还可以找到用于测试的已训练模型。\n\n### 本地\n``` bash\npip install keras tensorflow pillow h5py jupyter\n```\n```\ngit clone https:\u002F\u002Fgithub.com\u002Femilwallner\u002FScreenshot-to-code.git\ncd Screenshot-to-code\u002F\njupyter notebook\n```\n打开你想要执行的笔记本文件，即以`.ipynb`结尾的文件。要运行模型，请进入菜单，然后点击“Cell”>“Run all”。\n\n最终的Bootstrap版本配备了一小部分数据集，以便测试运行模型。如果你想使用全部数据进行尝试，则需要从这里下载数据：https:\u002F\u002Fwww.floydhub.com\u002Femilwallner\u002Fdatasets\u002Fimagetocode，并正确指定```dir_name```参数。\n\n## 文件夹结构\n\n``` bash\n  |  |-Bootstrap                           #Bootstrap版本\n  |  |  |-compiler                         #将标记转换为HTML\u002FCSS的编译器（由pix2code提供）\n  |  |  |-resources\t\t\t\t\t\t\t\t\t\t\t\n  |  |  |  |-eval_light                    #10张测试图像及对应的标记\n  |  |-Hello_world                         #Hello World版本\n  |  |-HTML                                #HTML版本\n  |  |  |-Resources_for_index_file         #用于测试index.html文件的CSS、图片和脚本\n  |  |  |-html                             #用于训练的HTML文件\n  |  |  |-images                           #用于训练的截图\n  |-readme_images                          #README页面使用的图片\n```\n\n\n## Hello World\n\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Femilwallner_Screenshot-to-code_readme_f105f6bd6889.png\" width=\"400px\">\u003C\u002Fp>\n\n\n## HTML\n\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Femilwallner_Screenshot-to-code_readme_9b4c9ffe54a9.png\" width=\"400px\">\u003C\u002Fp>\n\n\n## Bootstrap\n\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Femilwallner_Screenshot-to-code_readme_21182a1c228a.png\" width=\"400px\">\u003C\u002Fp>\n\n## 模型权重\n- [Bootstrap](https:\u002F\u002Fwww.floydhub.com\u002Femilwallner\u002Fdatasets\u002Fimagetocode)（预训练模型使用GRU而非LSTM）\n- [HTML](https:\u002F\u002Fwww.floydhub.com\u002Femilwallner\u002Fdatasets\u002Fhtml_models)\n\n## 致谢\n- 感谢IBM通过其PowerAI平台捐赠计算资源。\n- 本代码主要受Tony Beltramelli的pix2code论文影响。[代码](https:\u002F\u002Fgithub.com\u002Ftonybeltramelli\u002Fpix2code) [论文](https:\u002F\u002Farxiv.org\u002Fabs\u002F1705.07962)\n- 结构及部分函数参考了Jason Brownlee的[优秀教程](https:\u002F\u002Fmachinelearningmastery.com\u002Fdevelop-a-caption-generation-model-in-keras\u002F)。","# Screenshot-to-code 快速上手指南\n\nScreenshot-to-code 是一个基于深度学习的开源项目，能够将设计稿截图自动转换为 HTML\u002FCSS 代码。本项目基于 Tony Beltramelli 的 pix2code 架构，其中 **Bootstrap 版本**表现最佳，能够泛化到新的设计稿，准确率高达 97%。\n\n## 环境准备\n\n在开始之前，请确保您的系统满足以下要求：\n\n*   **操作系统**: Linux, macOS 或 Windows (需配置好 Python 环境)\n*   **Python**: 建议 Python 3.6+\n*   **硬件要求**:\n    *   **推理\u002F测试**: 普通 CPU 即可运行预训练模型。\n    *   **重新训练**: 需要 GPU 支持（特别是 Bootstrap 版本，建议使用多张 GPU 进行大规模训练）。\n*   **前置依赖库**:\n    项目主要依赖 Keras 和 TensorFlow。\n\n## 安装步骤\n\n您可以选择本地安装或使用云端环境。\n\n### 方式一：本地安装\n\n1.  **安装 Python 依赖包**\n    在终端执行以下命令安装核心库：\n    ```bash\n    pip install keras tensorflow pillow h5py jupyter\n    ```\n    > **国内加速提示**: 如果下载速度较慢，推荐使用清华或阿里镜像源：\n    > `pip install -i https:\u002F\u002Fpypi.tuna.tsinghua.edu.cn\u002Fsimple keras tensorflow pillow h5py jupyter`\n\n2.  **克隆项目代码**\n    ```bash\n    git clone https:\u002F\u002Fgithub.com\u002Femilwallner\u002FScreenshot-to-code.git\n    cd Screenshot-to-code\u002F\n    ```\n\n3.  **启动 Jupyter Notebook**\n    ```bash\n    jupyter notebook\n    ```\n\n### 方式二：使用 FloydHub (云端环境)\n\n如果您不想配置本地环境，可以直接点击下方的按钮在 FloydHub 上启动工作空间。该环境已预装了所有依赖、数据集以及训练好的模型（针对 Bootstrap 版本）。\n\n[![Run on FloydHub](https:\u002F\u002Fstatic.floydhub.com\u002Fbutton\u002Fbutton.svg)](https:\u002F\u002Ffloydhub.com\u002Frun?template=https:\u002F\u002Fgithub.com\u002Ffloydhub\u002Fpix2code-template)\n\n## 基本使用\n\n本项目通过 Jupyter Notebook 提供交互界面，最快速的上手方式是运行预置的示例。\n\n### 1. 选择并运行 Notebook\n在浏览器打开的 Jupyter 文件列表中，找到以 `.ipynb` 结尾的文件。\n*   推荐优先尝试 **Bootstrap** 文件夹下的 Notebook，因为该版本具备最好的泛化能力。\n*   进入 Notebook 后，点击菜单栏的 **Cell** -> **Run All** 以顺序执行所有单元格。\n\n### 2. 工作流程演示\n执行过程分为三个主要阶段：\n\n1.  **输入设计图**: 将一张 UI 设计截图提供给神经网络。\n    *(示例输入：包含按钮、文本框的网页截图)*\n2.  **生成代码**: 神经网络识别图像内容，将其转化为对应的 HTML 标记序列（Tokens）。\n3.  **渲染输出**: 编译器将 Tokens 翻译为标准的 HTML\u002FCSS 代码，并渲染出可视化的网页结果。\n\n### 3. 使用完整数据集（可选）\n默认情况下，Bootstrap 版本附带了一个小型测试集供快速验证。如果您希望使用完整数据进行训练或测试：\n\n1.  从以下地址下载完整数据集：\n    `https:\u002F\u002Fwww.floydhub.com\u002Femilwallner\u002Fdatasets\u002Fimagetocode`\n2.  在 Notebook 代码中，修改 `dir_name` 变量指向您下载的数据集路径。\n\n### 4. 模型权重说明\n项目提供了预训练模型权重，可直接用于推理：\n*   **Bootstrap 模型**: 使用 GRU 结构（优于 LSTM），泛化能力强。\n*   **HTML 模型**: 原始 HTML 版本，泛化能力尚未经过充分验证，且训练资源消耗巨大。","某初创公司的 UI 设计师刚完成了一套全新的后台管理面板高保真设计图，急需前端工程师将其转化为可交互的网页原型以进行下周的投资人演示。\n\n### 没有 Screenshot-to-code 时\n- 前端工程师需要对着设计图手动编写数百行 HTML 结构和 CSS 样式，耗时至少半天才能完成静态页面搭建。\n- 在还原过程中，极易出现像素级偏差（如间距、字体大小不一致），导致设计与代码反复沟通修改，效率低下。\n- 若需快速尝试多种布局方案，每次调整都意味着大量重复的编码工作，严重拖慢了产品原型的迭代速度。\n- 团队中缺乏资深前端人员时，简单的设计稿转化任务也会成为项目进度的瓶颈，甚至需要外包处理。\n\n### 使用 Screenshot-to-code 后\n- 工程师只需将设计截图输入 Screenshot-to-code，神经网络能在数秒内自动生成准确的 Bootstrap 代码框架，将起步时间从半天缩短至几分钟。\n- 生成的代码基于训练有素的模型，能高度还原设计稿中的布局细节，大幅减少了人工校对和微调的工作量。\n- 面对多套设计方案，团队可以批量生成对应的代码原型，快速在不同设备上进行渲染测试，极大加速了决策流程。\n- 即使是没有深厚前端背景的团队成员，也能利用该工具直接将创意转化为可运行的网页，降低了技术门槛。\n\nScreenshot-to-code 通过将视觉设计直接映射为高质量代码，彻底消除了从“看图”到“写码”之间的繁琐翻译过程，让原型开发实现了即时化。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Femilwallner_Screenshot-to-code_cd55b56e.png","emilwallner","Emil Wallner","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Femilwallner_6db9c1d3.jpg","internet-educated. into machine learning and colorization. maker of palette.fm. former resident at  the google arts & culture lab.","Palette","Paris | Nyköping","w@llner.co","EmilWallner","https:\u002F\u002Flinktr.ee\u002Femilwallner","https:\u002F\u002Fgithub.com\u002Femilwallner",[83,87,91,95],{"name":84,"color":85,"percentage":86},"HTML","#e34c26",40.7,{"name":88,"color":89,"percentage":90},"Jupyter Notebook","#DA5B0B",38.7,{"name":92,"color":93,"percentage":94},"Python","#3572A5",12.3,{"name":96,"color":97,"percentage":98},"CSS","#663399",8.2,16501,1547,"2026-04-07T12:56:21","NOASSERTION","未说明","训练 Bootstrap 版本需要少量 GPU（具体型号未说明）；训练原始 HTML 版本需要大量 GPU。推理环境未强制要求 GPU，但建议使用以加速。",{"notes":106,"python":103,"dependencies":107},"该项目基于 Tony Beltramelli 的 pix2code，主要包含三个迭代版本：Hello World、HTML 和 Bootstrap。其中只有 Bootstrap 版本能在新设计稿上泛化（准确率 97%），且使用 GRU 替代了 LSTM。本地安装需通过 pip 安装依赖并运行 Jupyter Notebook。若需使用完整数据集训练，需从 FloydHub 单独下载数据。原始 HTML 版本泛化能力未经证实且训练资源消耗巨大。",[108,109,110,111,112],"keras","tensorflow","pillow","h5py","jupyter",[14],[108,115,116,117,118,119,120,121,122,123,112],"deep-learning","seq2seq","encoder-decoder","lstm","floydhub","machine-learning","cnn","cnn-keras","jupyter-notebook",null,"2026-03-27T02:49:30.150509","2026-04-09T01:23:56.492912",[128,133,138,143,148,153,158,163],{"id":129,"question_zh":130,"answer_zh":131,"source_url":132},25461,"在 Mac 上安装 floyd-cli 失败怎么办？","如果在 Mac 上使用 pip 安装失败，可以尝试以下几种方法：\n1. 使用 conda 进行安装。\n2. 如果使用的是 Homebrew 安装的 Python，尝试运行命令：`pip2 -U install floyd-cli`。\n3. 最推荐的方法是使用虚拟环境（virtualenv），具体步骤可参考相关教程。","https:\u002F\u002Fgithub.com\u002Femilwallner\u002FScreenshot-to-code\u002Fissues\u002F9",{"id":134,"question_zh":135,"answer_zh":136,"source_url":137},25462,"运行 HTML.ipynb 时出现 'ModuleNotFoundError: No module named keras.applications.inception_resnet_v2' 错误如何解决？","该错误通常是因为数据集版本不匹配或未正确初始化项目。请检查以下两点：\n1. 确保在 floydhub 文件夹内运行了 `floyd init...` 命令。\n2. 确认使用了正确的数据集版本，运行命令时应包含参数：`--data emilwallner\u002Fdatasets\u002Fimagetocode\u002F2:data`。\n例如完整命令：`floyd run --gpu --env tensorflow-1.4 --data emilwallner\u002Fdatasets\u002Fimagetocode\u002F2:data --mode jupyter`。","https:\u002F\u002Fgithub.com\u002Femilwallner\u002FScreenshot-to-code\u002Fissues\u002F17",{"id":139,"question_zh":140,"answer_zh":141,"source_url":142},25463,"模型训练时 loss 下降但 val_loss 不下降是什么原因？","这通常是因为样本数量太少导致过拟合。该项目是逐个 token 预测的，如果一个截图包含约 65 个 token，那么一个截图就对应 65 次预测。建议增加训练样本数量，原作者使用的数据量约为 65 * 1500 个样本。如果样本太少，即使调整学习率或 batch size，验证损失也可能无法下降。","https:\u002F\u002Fgithub.com\u002Femilwallner\u002FScreenshot-to-code\u002Fissues\u002F33",{"id":144,"question_zh":145,"answer_zh":146,"source_url":147},25464,"在 Windows 上运行项目输出重复的 '\u003Cli>\u003Ca...' 标签或报错层级不匹配怎么办？","请尝试使用预加载权重的笔记本文件 `HTML_preloaded_weights.ipynb`，并下载对应的权重文件（org-weights-epoch-0900---loss-0.0000.hdf5）。\n注意：下载后务必在代码中修改权重文件的路径以匹配你的本地路径。如果仍然报错“层级数量不匹配”，请确保你使用的权重文件与当前模型架构完全一致，或者重新训练模型直到 Loss 值达到 0.0001。","https:\u002F\u002Fgithub.com\u002Femilwallner\u002FScreenshot-to-code\u002Fissues\u002F21",{"id":149,"question_zh":150,"answer_zh":151,"source_url":152},25465,"如何在 Google Colab 上运行该项目并查看输出代码？","目前维护者暂无带宽专门解决 Colab 上的输出目录问题，但用户可以参考官方提供的 Colab 笔记本链接直接运行：https:\u002F\u002Fcolab.research.google.com\u002Fgithub\u002Femilwallner\u002FScreenshot-to-code\u002Fblob\u002Fmaster\u002FHTML\u002FHTML.ipynb。如果解决了输出显示问题，欢迎反馈以便更新文档。","https:\u002F\u002Fgithub.com\u002Femilwallner\u002FScreenshot-to-code\u002Fissues\u002F54",{"id":154,"question_zh":155,"answer_zh":156,"source_url":157},25466,"对于初学者，有什么建议的学习路径或数据集？","建议从小处着手，逐渐增加复杂度。最好先使用包含少量示例的玩具数据集（toy dataset）来理解问题的动态。原作者推荐使用 Geocities 数据集作为入门参考，以掌握图像到代码生成的基本原理。","https:\u002F\u002Fgithub.com\u002Femilwallner\u002FScreenshot-to-code\u002Fissues\u002F53",{"id":159,"question_zh":160,"answer_zh":161,"source_url":162},25467,"如果想扩展项目以支持 OCR 和字体检测，应该采用什么架构策略？","推荐采用模块化策略（选项 2）：训练独立的专用模型（例如一个负责布局，一个负责字体和文本，一个负责动画等），然后通过集成管道将它们组合在一起。这样更易于协作和维护。\n具体起步建议：\n1. 寻找现有模型提取页面文本并按区域分离。\n2. 输入数据包括：含正确文本的截图、带占位符的 HTML、文本片段及潜在字体标签。\n3. 输出为对应文本片段的唯一 div 标签。\n初期可先跳过字体识别以缩小问题范围，后续再添加有限的字体支持。","https:\u002F\u002Fgithub.com\u002Femilwallner\u002FScreenshot-to-code\u002Fissues\u002F40",{"id":164,"question_zh":165,"answer_zh":166,"source_url":167},25468,"在 FloydHub GPU 上运行 bootstrap.ipynb 时遇到 MemoryError 怎么办？bootstrap.ipynb 和 bootstrap_generator.ipynb 有什么区别？","MemoryError 通常是因为一次性将所有数据加载到内存中导致的。`bootstrap.ipynb` 可能会尝试预处理所有数据，而 `bootstrap_generator.ipynb` 通常设计为使用生成器（generator）分批加载数据，从而节省内存。建议在资源受限的环境（如免费层级的 GPU）中使用基于生成器的版本进行训练，以避免内存溢出。","https:\u002F\u002Fgithub.com\u002Femilwallner\u002FScreenshot-to-code\u002Fissues\u002F31",[]]