Tenho uma api em Json: {

"3": {
"inputs": {
"seed": 573851757936055,
"steps": 8,
"cfg": 1,
"sampler_name": "euler",
"scheduler": "simple",
"denoise": 1,
"model": [
"75",
0
],
"positive": [
"111",
0
],
"negative": [
"110",
0
],
"latent_image": [
"112",
0
]
},
"class_type": "KSampler",
"_meta": {
"title": "KSampler"
}
},
"8": {
"inputs": {
"samples": [
"3",
0
],
"vae": [
"39",
0
]
},
"class_type": "VAEDecode",
"_meta": {
"title": "VAE Decode"
}
},
"37": {
"inputs": {
"unet_name": "qwen_image_edit_2509_fp8_e4m3fn.safetensors",
"weight_dtype": "default"
},
"class_type": "UNETLoader",
"_meta": {
"title": "Load Diffusion Model"
}
},
"38": {
"inputs": {
"clip_name": "qwen_2.5_vl_7b_fp8_scaled.safetensors",
"type": "qwen_image",
"device": "default"
},
"class_type": "CLIPLoader",
"_meta": {
"title": "Load CLIP"
}
},
"39": {
"inputs": {
"vae_name": "qwen_image_vae.safetensors"
},
"class_type": "VAELoader",
"_meta": {
"title": "Load VAE"
}
},
"60": {
"inputs": {
"filename_prefix": "ComfyUI",
"images": [
"8",
0
]
},
"class_type": "SaveImage",
"_meta": {
"title": "SALVAR IMAGEM"
}
},
"66": {
"inputs": {
"shift": 3,
"model": [
"89",
0
]
},
"class_type": "ModelSamplingAuraFlow",
"_meta": {
"title": "ModelSamplingAuraFlow"
}
},
"75": {
"inputs": {
"strength": 1,
"model": [
"66",
0
]
},
"class_type": "CFGNorm",
"_meta": {
"title": "CFGNorm"
}
},
"78": {
"inputs": {
"image": "pngtree-man-standing-with-his-arms-crossed-and-legs-spread-out-photo-picture-image_5069675.png"
},
"class_type": "LoadImage",
"_meta": {
"title": "Pose"
}
},
"88": {
"inputs": {
"pixels": [
"93",
0
],
"vae": [
"39",
0
]
},
"class_type": "VAEEncode",
"_meta": {
"title": "VAE Encode"
}
},
"89": {
"inputs": {
"lora_name": "qwen\\Qwen-Image-Lightning-8steps-V1.1.safetensors",
"strength_model": 1,
"model": [
"37",
0
]
},
"class_type": "LoraLoaderModelOnly",
"_meta": {
"title": "LoraLoaderModelOnly"
}
},
"93": {
"inputs": {
"upscale_method": "lanczos",
"megapixels": 1,
"image": [
"106",
0
]
},
"class_type": "ImageScaleToTotalPixels",
"_meta": {
"title": "ImageScaleToTotalPixels"
}
},
"106": {
"inputs": {
"image": "Alessandro.jpg"
},
"class_type": "LoadImage",
"_meta": {
"title": "Imagem 2"
}
},
"108": {
"inputs": {
"image": "macacao sena.jpg"
},
"class_type": "LoadImage",
"_meta": {
"title": "Imagem 3"
}
},
"110": {
"inputs": {
"prompt": "blurry, low resolution, poorly lit, grainy, out of focus, deformed, ugly, disfigured, bad anatomy, extra limbs, missing limbs, poorly drawn face, poorly drawn hands, mutated, tiling, watermark, signature, text, error, cropped, worst quality, low quality, normal quality, jpeg artifacts, bad composition, inaccurate, malformed, unnatural, cartoon, anime, 3D render, illustration, painting, drawing, sketch, abstract, doll, plastic, multiple heads, multiple bodies, extra fingers, fewer fingers, fused fingers, too many teeth, too few teeth, cross-eyed, lazy eye, poor lighting, dark, overexposed, underexposed, bad shadow, flat lighting, amateur photography, pixelated, noise, collage, bad art, distorted, fuzzy, unrealistic, unpolished, dull, boring, flat background, empty background, plain background, grayscale, sepia, bad color, monochrome, oversaturated, undersaturated, cloned face, duplicate, blurry background.",
"clip": [
"38",
0
],
"vae": [
"39",
0
],
"image1": [
"116",
0
],
"image2": [
"106",
0
],
"image3": [
"108",
0
]
},
"class_type": "TextEncodeQwenImageEditPlus",
"_meta": {
"title": "Prompt Negativo"
}
},
"111": {
"inputs": {
"prompt": "This is a professionally staged, high-contrast promotional photograph of Formula 1 driver and his Red Bull Racing car.\n\n**Central Figure:**\nA man, all facial features of image2, stands confidently at the center of the frame, seated on the front wheel arch of the racecar with one leg extended forward and the other bent. He wears a full racing suit referenced in image3. In his right hand, he holds aloft an oversized checkered flag—its blue and white stripes prominent against the dark background—and its pole rests over his shoulder. The lighting highlights him dramatically from above and slightly to the side, casting deep shadows that accentuate his form and the textures of his suit.\n\n**The Car:**\nTo his left (viewer’s perspective) lies the sleek, aerodynamic chassis of the Red Bull RB20 F1 car. It's painted predominantly black with vibrant orange accents along the nose cone, rear wing endplates, and engine cover. Key sponsors are clearly visible:\n* **Oracle:** Large silver letters across the sidepod.\n* **Red Bull:** The iconic red bull logo prominently displayed near the cockpit and on the rear wing.\n* **Mobil 1:** On the front wing and sidepod.\n* **ROKT**: Sponsorship branding on the side of the car.\n* **Hard Rock Hotel & Casino Logo:** Clearly printed on the lower part of the front wing.\n* Other smaller decals include \"RAUCH\" and “SIEMENS HD” just below the main sponsorship lettering.\n\n**Setting and Lighting:**\nThe scene takes place indoors under controlled studio lighting conditions. A dramatic backdrop features bold horizontal bands of deep purple-blue light, creating strong visual contrast. Behind the car and partially behind Verstappen, large abstract shapes resembling stylized wings or flames add dynamic energy to the composition without distracting from the subjects. Subtle LED strips run beneath the vehicle, glowing with cool blue light which adds depth and modernity to the presentation.\n\nOverall, the image conveys power, precision, cutting-edge technology, and brand identity associated with both the driver and team for their respective campaigns leading into the season. The atmosphere feels like a cinematic unveiling rather than mere documentation—a moment frozen between reality and performance art.",
"clip": [
"38",
0
],
"vae": [
"39",
0
],
"image1": [
"116",
0
],
"image2": [
"106",
0
],
"image3": [
"108",
0
]
},
"class_type": "TextEncodeQwenImageEditPlus",
"_meta": {
"title": "Prompt Positivo"
}
},
"112": {
"inputs": {
"width": 1920,
"height": 1088,
"batch_size": 1
},
"class_type": "EmptySD3LatentImage",
"_meta": {
"title": "Tamanho"
}
},
"115": {
"inputs": {
"upscale_method": "nearest-exact",
"megapixels": 1,
"image": [
"78",
0
]
},
"class_type": "ImageScaleToTotalPixels",
"_meta": {
"title": "ImageScaleToTotalPixels"
}
},
"116": {
"inputs": {
"detect_hand": "enable",
"detect_body": "enable",
"detect_face": "enable",
"resolution": 512,
"scale_stick_for_xinsr_cn": "disable",
"image": [
"115",
0
]
},
"class_type": "OpenposePreprocessor",
"_meta": {
"title": "OpenPose Pose"
}
},
"117": {
"inputs": {
"images": [
"116",
0
]
},
"class_type": "PreviewImage",
"_meta": {
"title": "Preview Image"
}
}
}

README.md

@@ -1,10 +1,13 @@
 ---
-title: Ai Image Flow Wizard
-emoji: 🏆
-colorFrom: purple
-colorTo: purple
+title: AI Image Flow Wizard 🧙✨
+colorFrom: yellow
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html

@@ -1,19 +1,523 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Image Flow Wizard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <style>
+        .json-key {
+            color: #f6ad55;
+        }
+        .json-value {
+            color: #68d391;
+        }
+        .json-string {
+            color: #f687b3;
+        }
+        .json-type {
+            color: #63b3ed;
+        }
+        .json-node {
+            margin-left: 20px;
+            border-left: 1px dashed rgba(255,255,255,0.1);
+            padding-left: 10px;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-12">
+        <header class="mb-12 text-center">
+            <div class="flex justify-center items-center mb-6">
+                <i data-feather="wand" class="w-12 h-12 text-purple-500 mr-4"></i>
+                <h1 class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600">
+                    AI Image Flow Wizard
+                </h1>
+            </div>
+            <p class="text-xl text-gray-300 max-w-3xl mx-auto">
+                Visualize and understand your AI image generation workflow with this interactive explorer
+            </p>
+        </header>
+
+        <div class="bg-gray-800 rounded-xl shadow-2xl overflow-hidden mb-12">
+            <div class="p-6 border-b border-gray-700 flex justify-between items-center">
+                <h2 class="text-2xl font-semibold text-purple-300">
+                    Workflow Overview
+                </h2>
+                <div class="flex space-x-2">
+                    <button class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg flex items-center">
+                        <i data-feather="play" class="w-4 h-4 mr-2"></i>
+                        Run Flow
+                    </button>
+                    <button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center">
+                        <i data-feather="download" class="w-4 h-4 mr-2"></i>
+                        Export
+                    </button>
+                </div>
+            </div>
+            <div class="p-6">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="bg-gray-700 p-4 rounded-lg">
+                        <div class="flex items-center mb-3">
+                            <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
+                            <h3 class="font-medium">Input Nodes</h3>
+                        </div>
+                        <div class="text-gray-300 text-sm">
+                            <p>Images: 3</p>
+                            <p>Models: 4</p>
+                            <p>Prompts: 2</p>
+                        </div>
+                    </div>
+                    <div class="bg-gray-700 p-4 rounded-lg">
+                        <div class="flex items-center mb-3">
+                            <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
+                            <h3 class="font-medium">Processing</h3>
+                        </div>
+                        <div class="text-gray-300 text-sm">
+                            <p>Sampler: KSampler</p>
+                            <p>VAE: Encode/Decode</p>
+                            <p>Scaling: 2 steps</p>
+                        </div>
+                    </div>
+                    <div class="bg-gray-700 p-4 rounded-lg">
+                        <div class="flex items-center mb-3">
+                            <div class="w-3 h-3 rounded-full bg-pink-500 mr-2"></div>
+                            <h3 class="font-medium">Output</h3>
+                        </div>
+                        <div class="text-gray-300 text-sm">
+                            <p>Resolution: 1920x1088</p>
+                            <p>Format: Image</p>
+                            <p>Save Node: 1</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-gray-800 rounded-xl shadow-2xl overflow-hidden mb-12">
+            <div class="p-6 border-b border-gray-700">
+                <h2 class="text-2xl font-semibold text-blue-300">
+                    Workflow Nodes
+                </h2>
+            </div>
+            <div class="p-6">
+                <div class="space-y-6">
+                    <!-- KSampler Node -->
+                    <div class="bg-gray-750 p-5 rounded-lg border-l-4 border-purple-500">
+                        <div class="flex justify-between items-start mb-3">
+                            <div>
+                                <h3 class="text-lg font-medium text-purple-300">KSampler</h3>
+                                <p class="text-sm text-gray-400">Generates latent samples from the model</p>
+                            </div>
+                            <span class="px-2 py-1 bg-gray-700 text-xs rounded">Node 3</span>
+                        </div>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+                            <div>
+                                <h4 class="text-sm font-medium text-gray-400 mb-1">Inputs</h4>
+                                <ul class="text-xs space-y-1">
+                                    <li>Steps: <span class="text-green-400">8</span></li>
+                                    <li>CFG Scale: <span class="text-green-400">1</span></li>
+                                    <li>Sampler: <span class="text-green-400">euler</span></li>
+                                </ul>
+                            </div>
+                            <div>
+                                <h4 class="text-sm font-medium text-gray-400 mb-1">Connections</h4>
+                                <ul class="text-xs space-y-1">
+                                    <li>Model: <span class="text-blue-400">CFGNorm</span></li>
+                                    <li>Positive: <span class="text-blue-400">Prompt Positivo</span></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- VAEDecode Node -->
+                    <div class="bg-gray-750 p-5 rounded-lg border-l-4 border-blue-500">
+                        <div class="flex justify-between items-start mb-3">
+                            <div>
+                                <h3 class="text-lg font-medium text-blue-300">VAE Decode</h3>
+                                <p class="text-sm text-gray-400">Decodes latent images into pixel space</p>
+                            </div>
+                            <span class="px-2 py-1 bg-gray-700 text-xs rounded">Node 8</span>
+                        </div>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+                            <div>
+                                <h4 class="text-sm font-medium text-gray-400 mb-1">Inputs</h4>
+                                <ul class="text-xs space-y-1">
+                                    <li>Samples: <span class="text-green-400">KSampler</span></li>
+                                </ul>
+                            </div>
+                            <div>
+                                <h4 class="text-sm font-medium text-gray-400 mb-1">Output</h4>
+                                <ul class="text-xs space-y-1">
+                                    <li>To: <span class="text-blue-400">Save Image</span></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- SaveImage Node -->
+                    <div class="bg-gray-750 p-5 rounded-lg border-l-4 border-pink-500">
+                        <div class="flex justify-between items-start mb-3">
+                            <div>
+                                <h3 class="text-lg font-medium text-pink-300">SALVAR IMAGEM</h3>
+                                <p class="text-sm text-gray-400">Saves the generated image</p>
+                            </div>
+                            <span class="px-2 py-1 bg-gray-700 text-xs rounded">Node 60</span>
+                        </div>
+                        <div class="mt-4">
+                            <h4 class="text-sm font-medium text-gray-400 mb-1">Parameters</h4>
+                            <ul class="text-xs space-y-1">
+                                <li>Filename prefix: <span class="text-green-400">ComfyUI</span></li>
+                                <li>Input: <span class="text-blue-400">VAE Decode</span></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
+            <div class="p-6 border-b border-gray-700">
+                <h2 class="text-2xl font-semibold text-green-300">
+                    Raw JSON Data
+                </h2>
+            </div>
+            <div class="p-6 overflow-x-auto">
+                <pre id="jsonViewer" class="text-sm"></pre>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        feather.replace();
+        
+        // Beautify JSON
+        const jsonData = {
+  "3": {
+    "inputs": {
+      "seed": 573851757936055,
+      "steps": 8,
+      "cfg": 1,
+      "sampler_name": "euler",
+      "scheduler": "simple",
+      "denoise": 1,
+      "model": [
+        "75",
+        0
+      ],
+      "positive": [
+        "111",
+        0
+      ],
+      "negative": [
+        "110",
+        0
+      ],
+      "latent_image": [
+        "112",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "3",
+        0
+      ],
+      "vae": [
+        "39",
+        0
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "37": {
+    "inputs": {
+      "unet_name": "qwen_image_edit_2509_fp8_e4m3fn.safetensors",
+      "weight_dtype": "default"
+    },
+    "class_type": "UNETLoader",
+    "_meta": {
+      "title": "Load Diffusion Model"
+    }
+  },
+  "38": {
+    "inputs": {
+      "clip_name": "qwen_2.5_vl_7b_fp8_scaled.safetensors",
+      "type": "qwen_image",
+      "device": "default"
+    },
+    "class_type": "CLIPLoader",
+    "_meta": {
+      "title": "Load CLIP"
+    }
+  },
+  "39": {
+    "inputs": {
+      "vae_name": "qwen_image_vae.safetensors"
+    },
+    "class_type": "VAELoader",
+    "_meta": {
+      "title": "Load VAE"
+    }
+  },
+  "60": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "SaveImage",
+    "_meta": {
+      "title": "SALVAR IMAGEM"
+    }
+  },
+  "66": {
+    "inputs": {
+      "shift": 3,
+      "model": [
+        "89",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingAuraFlow",
+    "_meta": {
+      "title": "ModelSamplingAuraFlow"
+    }
+  },
+  "75": {
+    "inputs": {
+      "strength": 1,
+      "model": [
+        "66",
+        0
+      ]
+    },
+    "class_type": "CFGNorm",
+    "_meta": {
+      "title": "CFGNorm"
+    }
+  },
+  "78": {
+    "inputs": {
+      "image": "pngtree-man-standing-with-his-arms-crossed-and-legs-spread-out-photo-picture-image_5069675.png"
+    },
+    "class_type": "LoadImage",
+    "_meta": {
+      "title": "Pose"
+    }
+  },
+  "88": {
+    "inputs": {
+      "pixels": [
+        "93",
+        0
+      ],
+      "vae": [
+        "39",
+        0
+      ]
+    },
+    "class_type": "VAEEncode",
+    "_meta": {
+      "title": "VAE Encode"
+    }
+  },
+  "89": {
+    "inputs": {
+      "lora_name": "qwen\\Qwen-Image-Lightning-8steps-V1.1.safetensors",
+      "strength_model": 1,
+      "model": [
+        "37",
+        0
+      ]
+    },
+    "class_type": "LoraLoaderModelOnly",
+    "_meta": {
+      "title": "LoraLoaderModelOnly"
+    }
+  },
+  "93": {
+    "inputs": {
+      "upscale_method": "lanczos",
+      "megapixels": 1,
+      "image": [
+        "106",
+        0
+      ]
+    },
+    "class_type": "ImageScaleToTotalPixels",
+    "_meta": {
+      "title": "ImageScaleToTotalPixels"
+    }
+  },
+  "106": {
+    "inputs": {
+      "image": "Alessandro.jpg"
+    },
+    "class_type": "LoadImage",
+    "_meta": {
+      "title": "Imagem 2"
+    }
+  },
+  "108": {
+    "inputs": {
+      "image": "macacao sena.jpg"
+    },
+    "class_type": "LoadImage",
+    "_meta": {
+      "title": "Imagem 3"
+    }
+  },
+  "110": {
+    "inputs": {
+      "prompt": "blurry, low resolution, poorly lit, grainy, out of focus, deformed, ugly, disfigured, bad anatomy, extra limbs, missing limbs, poorly drawn face, poorly drawn hands, mutated, tiling, watermark, signature, text, error, cropped, worst quality, low quality, normal quality, jpeg artifacts, bad composition, inaccurate, malformed, unnatural, cartoon, anime, 3D render, illustration, painting, drawing, sketch, abstract, doll, plastic, multiple heads, multiple bodies, extra fingers, fewer fingers, fused fingers, too many teeth, too few teeth, cross-eyed, lazy eye, poor lighting, dark, overexposed, underexposed, bad shadow, flat lighting, amateur photography, pixelated, noise, collage, bad art, distorted, fuzzy, unrealistic, unpolished, dull, boring, flat background, empty background, plain background, grayscale, sepia, bad color, monochrome, oversaturated, undersaturated, cloned face, duplicate, blurry background.",
+      "clip": [
+        "38",
+        0
+      ],
+      "vae": [
+        "39",
+        0
+      ],
+      "image1": [
+        "116",
+        0
+      ],
+      "image2": [
+        "106",
+        0
+      ],
+      "image3": [
+        "108",
+        0
+      ]
+    },
+    "class_type": "TextEncodeQwenImageEditPlus",
+    "_meta": {
+      "title": "Prompt Negativo"
+    }
+  },
+  "111": {
+    "inputs": {
+      "prompt": "This is a professionally staged, high-contrast promotional photograph of Formula 1 driver  and his Red Bull Racing car.\n\n**Central Figure:**\nA man, all facial features of image2, stands confidently at the center of the frame, seated on the front wheel arch of the racecar with one leg extended forward and the other bent. He wears a full racing suit referenced in image3. In his right hand, he holds aloft an oversized checkered flag—its blue and white stripes prominent against the dark background—and its pole rests over his shoulder. The lighting highlights him dramatically from above and slightly to the side, casting deep shadows that accentuate his form and the textures of his suit.\n\n**The Car:**\nTo his left (viewer's perspective) lies the sleek, aerodynamic chassis of the Red Bull RB20 F1 car. It's painted predominantly black with vibrant orange accents along the nose cone, rear wing endplates, and engine cover. Key sponsors are clearly visible:\n*   **Oracle:** Large silver letters across the sidepod.\n*   **Red Bull:** The iconic red bull logo prominently displayed near the cockpit and on the rear wing.\n*   **Mobil 1:** On the front wing and sidepod.\n*   **ROKT**: Sponsorship branding on the side of the car.\n*   **Hard Rock Hotel & Casino Logo:** Clearly printed on the lower part of the front wing.\n*   Other smaller decals include \"RAUCH\" and “SIEMENS HD” just below the main sponsorship lettering.\n\n**Setting and Lighting:**\nThe scene takes place indoors under controlled studio lighting conditions. A dramatic backdrop features bold horizontal bands of deep purple-blue light, creating strong visual contrast. Behind the car and partially behind Verstappen, large abstract shapes resembling stylized wings or flames add dynamic energy to the composition without distracting from the subjects. Subtle LED strips run beneath the vehicle, glowing with cool blue light which adds depth and modernity to the presentation.\n\nOverall, the image conveys power, precision, cutting-edge technology, and brand identity associated with both the driver and team for their respective campaigns leading into the season. The atmosphere feels like a cinematic unveiling rather than mere documentation—a moment frozen between reality and performance art.",
+      "clip": [
+        "38",
+        0
+      ],
+      "vae": [
+        "39",
+        0
+      ],
+      "image1": [
+        "116",
+        0
+      ],
+      "image2": [
+        "106",
+        0
+      ],
+      "image3": [
+        "108",
+        0
+      ]
+    },
+    "class_type": "TextEncodeQwenImageEditPlus",
+    "_meta": {
+      "title": "Prompt Positivo"
+    }
+  },
+  "112": {
+    "inputs": {
+      "width": 1920,
+      "height": 1088,
+      "batch_size": 1
+    },
+    "class_type": "EmptySD3LatentImage",
+    "_meta": {
+      "title": "Tamanho"
+    }
+  },
+  "115": {
+    "inputs": {
+      "upscale_method": "nearest-exact",
+      "megapixels": 1,
+      "image": [
+        "78",
+        0
+      ]
+    },
+    "class_type": "ImageScaleToTotalPixels",
+    "_meta": {
+      "title": "ImageScaleToTotalPixels"
+    }
+  },
+  "116": {
+    "inputs": {
+      "detect_hand": "enable",
+      "detect_body": "enable",
+      "detect_face": "enable",
+      "resolution": 512,
+      "scale_stick_for_xinsr_cn": "disable",
+      "image": [
+        "115",
+        0
+      ]
+    },
+    "class_type": "OpenposePreprocessor",
+    "_meta": {
+      "title": "OpenPose Pose"
+    }
+  },
+  "117": {
+    "inputs": {
+      "images": [
+        "116",
+        0
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "Preview Image"
+    }
+  }
+};
+
+        function syntaxHighlight(json) {
+            if (typeof json != 'string') {
+                json = JSON.stringify(json, null, 2);
+            }
+            json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+            return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+                let cls = 'json-value';
+                if (/^"/.test(match)) {
+                    if (/:$/.test(match)) {
+                        cls = 'json-key';
+                    } else {
+                        cls = 'json-string';
+                    }
+                } else if (/true|false/.test(match)) {
+                    cls = 'json-type';
+                } else if (/null/.test(match)) {
+                    cls = 'json-type';
+                }
+                return '<span class="' + cls + '">' + match + '</span>';
+            });
+        }
+
+        document.getElementById('jsonViewer').innerHTML = syntaxHighlight(jsonData);
+    </script>
+</body>
 </html>