Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ComfyUI Workflow</title> | |
| <style> | |
| body { | |
| font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; | |
| background-color: #1e1e1e; | |
| color: #d4d4d4; | |
| margin: 0; | |
| padding: 20px; | |
| line-height: 1.4; | |
| } | |
| .header { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| padding: 20px; | |
| border-radius: 10px; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| } | |
| .header h1 { | |
| margin: 0; | |
| font-size: 2em; | |
| } | |
| .header a { | |
| color: #ffffff; | |
| text-decoration: none; | |
| font-weight: bold; | |
| opacity: 0.9; | |
| } | |
| .header a:hover { | |
| opacity: 1; | |
| text-decoration: underline; | |
| } | |
| .json-container { | |
| background-color: #2d2d30; | |
| border-radius: 8px; | |
| padding: 20px; | |
| overflow-x: auto; | |
| border: 1px solid #3e3e42; | |
| } | |
| pre { | |
| margin: 0; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| } | |
| .json-key { | |
| color: #9cdcfe; | |
| } | |
| .json-string { | |
| color: #ce9178; | |
| } | |
| .json-number { | |
| color: #b5cea8; | |
| } | |
| .json-boolean { | |
| color: #569cd6; | |
| } | |
| .json-null { | |
| color: #569cd6; | |
| } | |
| .copy-btn { | |
| background: #007acc; | |
| color: white; | |
| border: none; | |
| padding: 10px 20px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| margin-bottom: 10px; | |
| font-family: inherit; | |
| } | |
| .copy-btn:hover { | |
| background: #005a9e; | |
| } | |
| .download-btn { | |
| background: #28a745; | |
| color: white; | |
| border: none; | |
| padding: 10px 20px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| margin-bottom: 10px; | |
| margin-left: 10px; | |
| font-family: inherit; | |
| } | |
| .download-btn:hover { | |
| background: #218838; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <h1>ComfyUI Workflow - Photo to Anime</h1> | |
| <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p> | |
| </div> | |
| <button class="copy-btn" onclick="copyToClipboard()">📋 Copy JSON</button> | |
| <button class="download-btn" onclick="downloadJSON()">💾 Download JSON</button> | |
| <div class="json-container"> | |
| <pre id="json-content">{ | |
| "last_node_id": 8, | |
| "last_link_id": 7, | |
| "nodes": [ | |
| { | |
| "id": 1, | |
| "type": "LoadImage", | |
| "pos": [50, 100], | |
| "size": [320, 314], | |
| "flags": {}, | |
| "order": 0, | |
| "mode": 0, | |
| "outputs": [ | |
| { | |
| "name": "IMAGE", | |
| "type": "IMAGE", | |
| "links": [1], | |
| "slot_index": 0 | |
| }, | |
| { | |
| "name": "MASK", | |
| "type": "MASK", | |
| "links": null | |
| } | |
| ], | |
| "properties": { | |
| "Node name for S&R": "LoadImage" | |
| }, | |
| "widgets_values": ["input_photo.png", "image"] | |
| }, | |
| { | |
| "id": 2, | |
| "type": "QwenImageEditPlusPipelineLoader", | |
| "pos": [50, 450], | |
| "size": [400, 100], | |
| "flags": {}, | |
| "order": 1, | |
| "mode": 0, | |
| "outputs": [ | |
| { | |
| "name": "PIPE", | |
| "type": "PIPE", | |
| "links": [2], | |
| "slot_index": 0 | |
| } | |
| ], | |
| "properties": { | |
| "Node name for S&R": "QwenImageEditPlusPipelineLoader" | |
| }, | |
| "widgets_values": ["Qwen/Qwen-Image-Edit-2509"], | |
| "title": "Load QwenImageEditPlus Pipeline" | |
| }, | |
| { | |
| "id": 3, | |
| "type": "QwenImageTransformer2DModelLoader", | |
| "pos": [50, 600], | |
| "size": [400, 120], | |
| "flags": {}, | |
| "order": 2, | |
| "mode": 0, | |
| "outputs": [ | |
| { | |
| "name": "TRANSFORMER", | |
| "type": "TRANSFORMER", | |
| "links": [3], | |
| "slot_index": 0 | |
| } | |
| ], | |
| "properties": { | |
| "Node name for S&R": "QwenImageTransformer2DModelLoader" | |
| }, | |
| "widgets_values": ["linoyts/Qwen-Image-Edit-Rapid-AIO", "transformer", "bfloat16"], | |
| "title": "Load Rapid-AIO Transformer" | |
| }, | |
| { | |
| "id": 4, | |
| "type": "LoadLoRAWeights", | |
| "pos": [500, 450], | |
| "size": [400, 150], | |
| "flags": {}, | |
| "order": 3, | |
| "mode": 0, | |
| "inputs": [ | |
| { | |
| "name": "pipe", | |
| "type": "PIPE", | |
| "link": 2 | |
| } | |
| ], | |
| "outputs": [ | |
| { | |
| "name": "PIPE", | |
| "type": "PIPE", | |
| "links": [4], | |
| "slot_index": 0 | |
| } | |
| ], | |
| "properties": { | |
| "Node name for S&R": "LoadLoRAWeights" | |
| }, | |
| "widgets_values": [ | |
| "autoweeb/Qwen-Image-Edit-2509-Photo-to-Anime", | |
| "Qwen-Image-Edit-2509-Photo-to-Anime_000001000.safetensors", | |
| "anime", | |
| 1.0, | |
| true | |
| ], | |
| "title": "Load Photo-to-Anime LoRA" | |
| }, | |
| { | |
| "id": 5, | |
| "type": "TextInput", | |
| "pos": [500, 100], | |
| "size": [400, 100], | |
| "flags": {}, | |
| "order": 4, | |
| "mode": 0, | |
| "outputs": [ | |
| { | |
| "name": "TEXT", | |
| "type": "STRING", | |
| "links": [6], | |
| "slot_index": 0 | |
| } | |
| ], | |
| "properties": { | |
| "Node name for S&R": "TextInput" | |
| }, | |
| "widgets_values": ["Convert this photo to anime style"] | |
| }, | |
| { | |
| "id": 6, | |
| "type": "QwenImageEditPlusSampler", | |
| "pos": [950, 100], | |
| "size": [400, 520], | |
| "flags": {}, | |
| "order": 5, | |
| "mode": 0, | |
| "inputs": [ | |
| { | |
| "name": "pipe", | |
| "type": "PIPE", | |
| "link": 4 | |
| }, | |
| { | |
| "name": "image", | |
| "type": "IMAGE", | |
| "link": 1 | |
| }, | |
| { | |
| "name": "prompt", | |
| "type": "STRING", | |
| "link": 6 | |
| }, | |
| { | |
| "name": "transformer", | |
| "type": "TRANSFORMER", | |
| "link": 3 | |
| } | |
| ], | |
| "outputs": [ | |
| { | |
| "name": "IMAGE", | |
| "type": "IMAGE", | |
| "links": [7], | |
| "slot_index": 0 | |
| } | |
| ], | |
| "properties": { | |
| "Node name for S&R": "QwenImageEditPlusSampler" | |
| }, | |
| "widgets_values": [0, true, 4, 1.0, 1024, 1024, 1], | |
| "title": "Qwen Image Edit Plus Sampler" | |
| }, | |
| { | |
| "id": 7, | |
| "type": "SaveImage", | |
| "pos": [1400, 100], | |
| "size": [320, 400], | |
| "flags": {}, | |
| "order": 6, | |
| "mode": 0, | |
| "inputs": [ | |
| { | |
| "name": "images", | |
| "type": "IMAGE", | |
| "link": 7 | |
| } | |
| ], | |
| "properties": { | |
| "Node name for S&R": "SaveImage" | |
| }, | |
| "widgets_values": ["anime_output"] | |
| }, | |
| { | |
| "id": 8, | |
| "type": "Note", | |
| "pos": [50, 770], | |
| "size": [850, 220], | |
| "flags": {}, | |
| "order": 7, | |
| "mode": 0, | |
| "properties": { | |
| "text": "" | |
| }, | |
| "widgets_values": [ | |
| "Photo to Anime Workflow\n\nExact model configuration:\n- Pipeline: QwenImageEditPlusPipeline from Qwen/Qwen-Image-Edit-2509\n- Transformer: QwenImageTransformer2DModel from linoyts/Qwen-Image-Edit-Rapid-AIO (subfolder: transformer, dtype: bfloat16)\n- LoRA: autoweeb/Qwen-Image-Edit-2509-Photo-to-Anime\n- LoRA Weight: Qwen-Image-Edit-2509-Photo-to-Anime_000001000.safetensors\n- Adapter: anime (weight: 1.0, fused and unloaded)\n\nSettings:\n- Steps: 4 | Guidance Scale (true_cfg_scale): 1.0 | Size: 1024x1024 (auto-adjusted)\n- Processor: QwenDoubleStreamAttnProcessorFA3\n- Optimized pipeline with bfloat16\n- num_images_per_prompt: 1\n\nBuilt with anycoder - https://huggingface.co/spaces/akhaliq/anycoder" | |
| ], | |
| "bgcolor": "#232323" | |
| } | |
| ], | |
| "links": [ | |
| [1, 1, 0, 6, 1, "IMAGE"], | |
| [2, 2, 0, 4, 0, "PIPE"], | |
| [3, 3, 0, 6, 3, "TRANSFORMER"], | |
| [4, 4, 0, 6, 0, "PIPE"], | |
| [6, 5, 0, 6, 2, "STRING"], | |
| [7, 6, 0, 7, 0, "IMAGE"] | |
| ], | |
| "groups": [ | |
| { | |
| "title": "Model Loading", | |
| "bounding": [25, 25, 900, 750], | |
| "color": "#3f789e", | |
| "font_size": 24 | |
| }, | |
| { | |
| "title": "Generation", | |
| "bounding": [925, 25, 450, 670], | |
| "color": "#8A8A8A", | |
| "font_size": 24 | |
| }, | |
| { | |
| "title": "Output", | |
| "bounding": [1375, 25, 375, 550], | |
| "color": "#a1309b", | |
| "font_size": 24 | |
| } | |
| ], | |
| "config": {}, | |
| "extra": { | |
| "workflow_metadata": { | |
| "name": "Photo to Anime - Qwen Image Edit", | |
| "description": "Transform photos to anime using exact weight names from Gradio app", | |
| "version": "1.0.0", | |
| "author": "anycoder", | |
| "created_with": "https://huggingface.co/spaces/akhaliq/anycoder", | |
| "models": { | |
| "pipeline": "Qwen/Qwen-Image-Edit-2509", | |
| "transformer": "linoyts/Qwen-Image-Edit-Rapid-AIO", | |
| "transformer_subfolder": "transformer", | |
| "lora_repo": "autoweeb/Qwen-Image-Edit-2509-Photo-to-Anime", | |
| "lora_weight_name": "Qwen-Image-Edit-2509-Photo-to-Anime_000001000.safetensors", | |
| "adapter_name": "anime", | |
| "adapter_weight": 1.0 | |
| } | |
| } | |
| }, | |
| "version": 0.4 | |
| }</pre> | |
| </div> | |
| <script> | |
| function copyToClipboard() { | |
| const jsonContent = document.getElementById('json-content').textContent; | |
| navigator.clipboard.writeText(jsonContent).then(() => { | |
| const btn = document.querySelector('.copy-btn'); | |
| const originalText = btn.textContent; | |
| btn.textContent = '✅ Copied!'; | |
| setTimeout(() => { | |
| btn.textContent = originalText; | |
| }, 2000); | |
| }); | |
| } | |
| function downloadJSON() { | |
| const jsonContent = document.getElementById('json-content').textContent; | |
| const blob = new Blob([jsonContent], { type: 'application/json' }); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = 'photo_to_anime_workflow.json'; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| URL.revokeObjectURL(url); | |
| } | |
| // Add syntax highlighting | |
| function highlightJSON() { | |
| const content = document.getElementById('json-content'); | |
| let html = content.innerHTML; | |
| // Highlight different JSON elements | |
| html = html.replace(/"([^"]+)":/g, '<span class="json-key">"$1":</span>'); | |
| html = html.replace(/: "([^"]*)"/g, ': <span class="json-string">"$1"</span>'); | |
| html = html.replace(/: (-?\d+\.?\d*)/g, ': <span class="json-number">$1</span>'); | |
| html = html.replace(/: (true|false)/g, ': <span class="json-boolean">$1</span>'); | |
| html = html.replace(/: null/g, ': <span class="json-null">null</span>'); | |
| content.innerHTML = html; | |
| } | |
| // Apply syntax highlighting after page load | |
| window.addEventListener('load', highlightJSON); | |
| </script> | |
| </body> | |
| </html> |