ComfyUI-AppGen 是一个 ComfyUI 节点包，旨在使用自然语言生成和编辑单页应用程序 (SPA)。受 GroqLabs 的 groq-appgen 启发，此工具利用大型语言模型 (LLM) 的强大功能来简化 Web 开发工作流程。
ComfyUI-AppGen的主要功能：
- 自然语言到代码：使用简单的自然语言查询生成和编辑 SPA。
- 灵活的 LLM 集成：与支持 OpenAI API 的任何 LLM 兼容。
- 沙盒环境：在安全沙盒中测试生成的 SPA。
- 无缝编辑：使用自然语言反馈修改现有 SPA
1、ComfyUI-AppGen快速入门
安装ComfyUI-AppGen：
- 克隆此存储库或下载节点。
- 将节点添加到你的 ComfyUI 工作流程。
配置 LLM：
- 设置具有 OpenAI API 兼容性的首选 LLM（例如，Groq、DeepSeek）。
生成和编辑 SPA：
- 使用 AppGen 节点从自然语言查询创建 SPA。
- 使用 AppEdit 节点修改带有反馈的现有 SPA。
- 在 AppSandbox 环境中测试你的 SPA。
2、ComfyUI-AppGen自定义节点
2.1 CoderLLM
充当编程机器人的可自定义 LLM 客户端。它可以根据自然语言提示生成代码。它适用于任何支持 OpenAI API 的 LLM。
已测试模型：
- Groq：llama-3.3-70b-specdec
- DeepSeek：DeepSeek-V3 MoE
它在测试模型上产生高度准确和高效的结果。
2.2 AppGen
从自然语言查询生成单页应用程序 (SPA)，并将源代码输出为单个 HTML 文件。
示例：
- 查询：“生成计算器应用程序。”
- 输出：单个 HTML 文件中功能齐全的计算器应用程序。
2.3 AppEdit
根据自然语言反馈修改现有 SPA。
示例：
- 反馈：“将应用程序标题更改为‘我的计算器’。”
- 输出：使用新标题更新 SPA。
2.4 AppSandbox
提供安全的沙盒环境来运行和测试生成的 SPA。
3、示例工作流程
3.1 应用生成
- 查询：“生成计算器应用。”
- 节点：AppGen
- 输出：单个 HTML 文件中功能齐全的计算器应用。
3.2 应用编辑
- 反馈：“将应用标题更改为‘我的计算器’。”
- 节点：AppEdit
- 输出：使用新标题更新计算器应用。
4、查询示例
- 计算器
Create a calculator app with a clean modern design. Include basic arithmetic operations (add, subtract, multiply, divide) and a clear button. The calculator should support decimal numbers and display the current calculation.翻译：创建具有简洁现代设计的计算器应用。包括基本算术运算（加、减、乘、除）和清除按钮。计算器应支持十进制数并显示当前计算。
- 记事本
Build a note-taking app with a clean, minimal interface. Include a title field and content area for each note. Add the ability to create new notes and preview existing ones in a side panel. Make sure the input fields have specified text colors consistent with the selected theme. Storing notes should be done correctly. Each note should be a separate entry in the object storage.翻译：构建具有简洁、极简界面的笔记记录应用。为每个笔记添加标题字段和内容区域。添加在侧面板中创建新笔记和预览现有笔记的功能。确保输入字段具有与所选主题一致的指定文本颜色。应正确存储笔记。每个笔记应是对象存储中的单独条目。
- 天气应用
Design a weather dashboard that shows the current temperature, weather condition, and other metrics like humidity and wind speed. Use weather-appropriate icons and a clean, modern layout with good visual hierarchy.翻译：设计一个天气仪表板，显示当前温度、天气状况和其他指标，如湿度和风速。使用适合天气的图标和干净、现代的布局，并具有良好的视觉层次。
- 贪吃蛇游戏
Develop a classic snake game with arrow key controls. Include a score counter, game over screen, and restart button. The snake should grow when eating food, and the game should end if the snake hits the walls or itself. Make sure it is correct and make the JS implementation simple. The spawning algorithm should spawn within the bounds.翻译：开发一款带有箭头键控制的经典贪吃蛇游戏。包括计分器、游戏结束屏幕和重启按钮。蛇在吃食物时应该会长大，如果蛇撞到墙壁或自己，游戏应该结束。确保它是正确的，并使 JS 实现简单。生成算法应该在边界内生成。
- 图片库
Design a responsive image gallery with a grid layout. Include image thumbnails that expand to full size when clicked. Add smooth transitions and a lightbox effect for viewing images.翻译：设计一个具有网格布局的响应式图片库。包括单击时展开为全尺寸的图片缩略图。添加平滑过渡和灯箱效果以查看图片。
- 测验应用
Create an interactive quiz application with multiple-choice questions. Include a progress indicator, score tracking, and immediate feedback on answers. Make it visually engaging with appropriate spacing and transitions between questions.翻译：创建一个带有多项选择题的交互式测验应用程序。包括进度指示器、分数跟踪和对答案的即时反馈。通过问题之间的适当间距和过渡使其具有视觉吸引力。
- 看板
Create a Kanban board with 'To Do', 'In Progress', and 'Done' columns. Include an 'Add Task' button (select which board), task cards with titles and descriptions, and drag-and-drop functionality. Use a clean, responsive design with pastel colors and subtle animations. Make it feature complete. Allow dragging between columns. Use in-browser React rendering using Babel. Make sure the input fields have explicit colors set that are compatible with the theme. Use HTML5 native features for drag-and-drop, verify it works correctly. Populate with some SWE examples.创建一个带有“待办”、“进行中”和“已完成”列的看板。包括“添加任务”按钮（选择哪个板）、带有标题和描述的任务卡以及拖放功能。使用干净、响应迅速的设计，配以柔和的色彩和微妙的动画。使其功能齐全。允许在列之间拖动。使用 Babel 在浏览器中进行 React 渲染。确保输入字段具有与主题兼容的明确颜色设置。使用 HTML5 原生功能进行拖放，验证其是否正常工作。使用一些 SWE 示例进行填充。
- 视频播放器
Build a video player with standard controls (play/pause, volume, fullscreen). Include a progress bar with preview thumbnails and playback speed controls. Add a clean, minimal interface that fades when not in use.构建具有标准控件（播放/暂停、音量、全屏）的视频播放器。包括带有预览缩略图和播放速度控件的进度条。添加一个干净、极简的界面，在不使用时会淡出。
- 费用跟踪器
Build an expense tracking app with the ability to add transactions with amounts and categories. Show total balance and category-wise breakdown. Include a simple chart to visualize spending patterns.Make sure the input fields have explicit colors set that are compatible with the theme.构建一个费用跟踪应用程序，能够添加带有金额和类别的交易。显示总余额和按类别细分。包括一个简单的图表来直观地展示消费模式。确保输入字段具有与主题兼容的明确颜色设置。
- 日历
Design a monthly calendar view with the ability to navigate between months. Show current date highlight and different styling for weekend days. Include a simple event display system.设计一个月历视图，能够在月份之间导航。显示当前日期突出显示和不同日期周末的不同风格。包括一个简单的事件显示系统。