anycoder-068e88fc / index.html
joshsp87's picture
Upload folder using huggingface_hub
9104376 verified
Raw
History Blame Contribute Delete
30.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ComfyUI Workflow</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
background-color: #000000;
color: #f5f5f7;
line-height: 1.6;
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 40px;
padding: 40px 20px;
}
.header h1 {
font-size: 48px;
font-weight: 600;
color: #ffffff;
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.header p {
font-size: 18px;
color: #86868b;
font-weight: 400;
}
.controls {
display: flex;
gap: 12px;
margin-bottom: 24px;
justify-content: center;
}
.btn {
padding: 12px 24px;
border: none;
border-radius: 24px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.btn-primary {
background: #ffffff;
color: #000000;
}
.btn-primary:hover {
background: #f5f5f7;
transform: scale(0.98);
}
.btn-secondary {
background: #1d1d1f;
color: #f5f5f7;
border: 1px solid #424245;
}
.btn-secondary:hover {
background: #2d2d2f;
transform: scale(0.98);
}
.json-container {
background-color: #1d1d1f;
border-radius: 16px;
padding: 32px;
overflow-x: auto;
border: 1px solid #424245;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
pre {
margin: 0;
font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
font-size: 13px;
line-height: 1.6;
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;
}
.success {
color: #30d158;
}
@media (max-width: 768px) {
.header h1 {
font-size: 32px;
}
.controls {
flex-direction: column;
}
.json-container {
padding: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>ComfyUI Workflow</h1>
<p>View and download your workflow JSON</p>
</div>
<div class="controls">
<button class="btn btn-primary" onclick="downloadJSON()">Download JSON</button>
<button class="btn btn-secondary" onclick="copyToClipboard()">Copy to Clipboard</button>
</div>
<div class="json-container">
<pre id="json-content">{
"last_node_id": 25,
"last_link_id": 28,
"nodes": [
{
"id": 1,
"type": "CheckpointLoaderSimple",
"pos": [
50,
100
],
"size": [
315,
98
],
"flags": {},
"order": 0,
"mode": 0,
"outputs": [
{
"name": "MODEL",
"type": "MODEL",
"links": [
1
],
"slot_index": 0
},
{
"name": "CLIP",
"type": "CLIP",
"links": [
2,
3
],
"slot_index": 1
},
{
"name": "VAE",
"type": "VAE",
"links": [
4
],
"slot_index": 2
}
],
"properties": {
"Node name for S&R": "CheckpointLoaderSimple"
},
"widgets_values": [
"animagineXLV31_v31.safetensors"
]
},
{
"id": 2,
"type": "CLIPTextEncode",
"pos": [
450,
50
],
"size": [
400,
200
],
"flags": {},
"order": 1,
"mode": 0,
"inputs": [
{
"name": "clip",
"type": "CLIP",
"link": 2
}
],
"outputs": [
{
"name": "CONDITIONING",
"type": "CONDITIONING",
"links": [
5
],
"slot_index": 0
}
],
"properties": {
"Node name for S&R": "CLIPTextEncode"
},
"widgets_values": [
"masterpiece, best quality, manhwa style, korean webtoon, vibrant colors, clean lineart, dynamic pose, detailed eyes, beautiful lighting, cel shading, 1girl, long flowing black hair, elegant hanbok dress, cherry blossom background, soft pink petals falling, dreamy atmosphere, professional illustration, high contrast, sharp details"
],
"title": "Positive Prompt (Manhwa Style)"
},
{
"id": 3,
"type": "CLIPTextEncode",
"pos": [
450,
280
],
"size": [
400,
200
],
"flags": {},
"order": 2,
"mode": 0,
"inputs": [
{
"name": "clip",
"type": "CLIP",
"link": 3
}
],
"outputs": [
{
"name": "CONDITIONING",
"type": "CONDITIONING",
"links": [
6
],
"slot_index": 0
}
],
"properties": {
"Node name for S&R": "CLIPTextEncode"
},
"widgets_values": [
"lowres, bad anatomy, bad hands, text, error, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature, watermark, username, blurry, realistic, 3d, photograph, western comic style, manga screentones, sketch, unfinished"
],
"title": "Negative Prompt"
},
{
"id": 4,
"type": "EmptyLatentImage",
"pos": [
450,
520
],
"size": [
315,
106
],
"flags": {},
"order": 3,
"mode": 0,
"outputs": [
{
"name": "LATENT",
"type": "LATENT",
"links": [
7
],
"slot_index": 0
}
],
"properties": {
"Node name for S&R": "EmptyLatentImage"
},
"widgets_values": [
832,
1216,
1
],
"title": "Manhwa Panel Size (Portrait)"
},
{
"id": 5,
"type": "KSampler",
"pos": [
900,
100
],
"size": [
315,
262
],
"flags": {},
"order": 4,
"mode": 0,
"inputs": [
{
"name": "model",
"type": "MODEL",
"link": 1
},
{
"name": "positive",
"type": "CONDITIONING",
"link": 5
},
{
"name": "negative",
"type": "CONDITIONING",
"link": 6
},
{
"name": "latent_image",
"type": "LATENT",
"link": 7
}
],
"outputs": [
{
"name": "LATENT",
"type": "LATENT",
"links": [
8
],
"slot_index": 0
}
],
"properties": {
"Node name for S&R": "KSampler"
},
"widgets_values": [
42,
"fixed",
28,
7.5,
"euler_ancestral",
"normal",
1
]
},
{
"id": 6,
"type": "VAEDecode",
"pos": [
1250,
100
],
"size": [
210,
46
],
"flags": {},
"order": 5,
"mode": 0,
"inputs": [
{
"name": "samples",
"type": "LATENT",
"link": 8
},
{
"name": "vae",
"type": "VAE",
"link": 4
}
],
"outputs": [
{
"name": "IMAGE",
"type": "IMAGE",
"links": [
9,
10
],
"slot_index": 0
}
],
"properties": {
"Node name for S&R": "VAEDecode"
}
},
{
"id": 7,
"type": "SaveImage",
"pos": [
1500,
100
],
"size": [
315,
270
],
"flags": {},
"order": 6,
"mode": 0,
"inputs": [
{
"name": "images",
"type": "IMAGE",
"link": 9
}
],
"properties": {
"Node name for S&R": "SaveImage"
},
"widgets_values": [
"manhwa/panel"
],
"title": "Save Manhwa Panel"
},
{
"id": 8,
"type": "PreviewImage",
"pos": [
1500,
400
],
"size": [
315,
270
],
"flags": {},
"order": 7,
"mode": 0,
"inputs": [
{
"name": "images",
"type": "IMAGE",
"link": 10
}
],
"properties": {
"Node name for S&R": "PreviewImage"
},
"title": "Preview"
},
{
"id": 10,
"type": "Note",
"pos": [
50,
250
],
"size": [
350,
200
],
"flags": {},
"order": 8,
"mode": 0,
"properties": {
"text": ""
},
"widgets_values": [
"🎨 MANHWA GENERATOR WORKFLOW\n\nBuilt with anycoder\nhttps://huggingface.co/spaces/akhaliq/anycoder\n\n📌 Recommended Models:\n- AnimagineXL V3.1\n- Anything V5\n- Counterfeit V3\n- MeinaMix\n\n📌 Manhwa Style Keywords:\n- manhwa style, korean webtoon\n- vibrant colors, clean lineart\n- cel shading, dynamic pose\n- detailed eyes, beautiful lighting\n\n📌 Panel Sizes:\n- Portrait: 832x1216\n- Square: 1024x1024\n- Landscape: 1216x832"
],
"title": "📖 Instructions"
},
{
"id": 11,
"type": "CheckpointLoaderSimple",
"pos": [
50,
550
],
"size": [
315,
98
],
"flags": {},
"order": 9,
"mode": 0,
"outputs": [
{
"name": "MODEL",
"type": "MODEL",
"links": [
11
],
"slot_index": 0
},
{
"name": "CLIP",
"type": "CLIP",
"links": [
12,
13
],
"slot_index": 1
},
{
"name": "VAE",
"type": "VAE",
"links": [
14
],
"slot_index": 2
}
],
"properties": {
"Node name for S&R": "CheckpointLoaderSimple"
},
"widgets_values": [
"animagineXLV31_v31.safetensors"
],
"title": "Character Panel Checkpoint"
},
{
"id": 12,
"type": "CLIPTextEncode",
"pos": [
450,
700
],
"size": [
400,
200
],
"flags": {},
"order": 10,
"mode": 0,
"inputs": [
{
"name": "clip",
"type": "CLIP",
"link": 12
}
],
"outputs": [
{
"name": "CONDITIONING",
"type": "CONDITIONING",
"links": [
15
],
"slot_index": 0
}
],
"properties": {
"Node name for S&R": "CLIPTextEncode"
},
"widgets_values": [
"masterpiece, best quality, manhwa style, korean webtoon, action scene, 1boy, handsome male protagonist, sharp jawline, intense eyes, black spiky hair, modern clothing, hoodie and jeans, urban city background, night scene, neon lights, dramatic lighting, motion blur effect, speed lines, dynamic composition, professional illustration"
],
"title": "Action Scene Prompt"
},
{
"id": 13,
"type": "CLIPTextEncode",
"pos": [
450,
930
],
"size": [
400,
200
],
"flags": {},
"order": 11,
"mode": 0,
"inputs": [
{
"name": "clip",
"type": "CLIP",
"link": 13
}
],
"outputs": [
{
"name": "CONDITIONING",
"type": "CONDITIONING",
"links": [
16
],
"slot_index": 0
}
],
"properties": {
"Node name for S&R": "CLIPTextEncode"
},
"widgets_values": [
"lowres, bad anatomy, bad hands, text, error, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature, watermark, username, blurry, realistic, 3d, photograph, western comic style"
],
"title": "Negative (Action)"
},
{
"id": 14,
"type": "EmptyLatentImage",
"pos": [
450,
1160
],
"size": [
315,
106
],
"flags": {},
"order": 12,
"mode": 0,
"outputs": [
{
"name": "LATENT",
"type": "LATENT",
"links": [
17
],
"slot_index": 0
}
],
"properties": {
"Node name for S&R": "EmptyLatentImage"
},
"widgets_values": [
1216,
832,
1
],
"title": "Action Panel (Landscape)"
},
{
"id": 15,
"type": "KSampler",
"pos": [
900,
700
],
"size": [
315,
262
],
"flags": {},
"order": 13,
"mode": 0,
"inputs": [
{
"name": "model",
"type": "MODEL",
"link": 11
},
{
"name": "positive",
"type": "CONDITIONING",
"link": 15
},
{
"name": "negative",
"type": "CONDITIONING",
"link": 16
},
{
"name": "latent_image",
"type": "LATENT",
"link": 17
}
],
"outputs": [
{
"name": "LATENT",
"type": "LATENT",
"links": [
18
],
"slot_index": 0
}
],
"properties": {
"Node name for S&R": "KSampler"
},
"widgets_values": [
123456,
"fixed",
30,
8,
"dpmpp_2m",
"karras",
1
],
"title": "Action Sampler"
},
{
"id": 16,
"type": "VAEDecode",
"pos": [
1250,
700
],
"size": [
210,
46
],
"flags": {},
"order": 14,
"mode": 0,
"inputs": [
{
"name": "samples",
"type": "LATENT",
"link": 18
},
{
"name": "vae",
"type": "VAE",
"link": 14
}
],
"outputs": [
{
"name": "IMAGE",
"type": "IMAGE",
"links": [
19,
20
],
"slot_index": 0
}
],
"properties": {
"Node name for S&R": "VAEDecode"
}
},
{
"id": 17,
"type": "SaveImage",
"pos": [
1500,
700
],
"size": [
315,
270
],
"flags": {},
"order": 15,
"mode": 0,
"inputs": [
{
"name": "images",
"type": "IMAGE",
"link": 19
}
],
"properties": {
"Node name for S&R": "SaveImage"
},
"widgets_values": [
"manhwa/action_panel"
],
"title": "Save Action Panel"
},
{
"id": 18,
"type": "PreviewImage",
"pos": [
1500,
1000
],
"size": [
315,
270
],
"flags": {},
"order": 16,
"mode": 0,
"inputs": [
{
"name": "images",
"type": "IMAGE",
"link": 20
}
],
"properties": {
"Node name for S&R": "PreviewImage"
},
"title": "Action Preview"
},
{
"id": 19,
"type": "Note",
"pos": [
50,
700
],
"size": [
350,
150
],
"flags": {},
"order": 17,
"mode": 0,
"properties": {
"text": ""
},
"widgets_values": [
"🎬 ACTION SCENE GENERATOR\n\nThis section generates dynamic action\npanels with motion effects.\n\nTips for action scenes:\n- Use landscape orientation\n- Add speed lines keywords\n- Include motion blur\n- Use dramatic lighting"
],
"title": "⚡ Action Tips"
},
{
"id": 20,
"type": "CheckpointLoaderSimple",
"pos": [
50,
1350
],
"size": [
315,
98
],
"flags": {},
"order": 18,
"mode": 0,
"outputs": [
{
"name": "MODEL",
"type": "MODEL",
"links": [
21
],
"slot_index": 0
},
{
"name": "CLIP",
"type": "CLIP",
"links": [
22,
23
],
"slot_index": 1
},
{
"name": "VAE",
"type": "VAE",
"links": [
24
],
"slot_index": 2
}
],
"properties": {
"Node name for S&R": "CheckpointLoaderSimple"
},
"widgets_values": [
"animagineXLV31_v31.safetensors"
],
"title": "Romance Panel Checkpoint"
},
{
"id": 21,
"type": "CLIPTextEncode",
"pos": [
450,
1350
],
"size": [
400,
200
],
"flags": {},
"order": 19,
"mode": 0,
"inputs": [
{
"name": "clip",
"type": "CLIP",
"link": 22
}
],
"outputs": [
{
"name": "CONDITIONING",
"type": "CONDITIONING",
"links": [
25
],
"slot_index": 0
}
],
"properties": {
"Node name for S&R": "CLIPTextEncode"
},
"widgets_values": [
"masterpiece, best quality, manhwa style, korean webtoon, romance scene, couple, 1boy and 1girl, eye contact, blushing, soft lighting, sparkle effects, flower petals, dreamy background, pastel colors, emotional moment, close-up shot, beautiful detailed eyes, tender expression, school uniform, rooftop scene, sunset, golden hour lighting, soft focus background"
],
"title": "Romance Scene Prompt"
},
{
"id": 22,
"type": "CLIPTextEncode",
"pos": [
450,
1580
],
"size": [
400,
200
],
"flags": {},
"order": 20,
"mode": 0,
"inputs": [
{
"name": "clip",
"type": "CLIP",
"link": 23
}
],
"outputs": [
{
"name": "CONDITIONING",
"type": "CONDITIONING",
"links": [
26
],
"slot_index": 0
}
],
"properties": {
"Node name for S&R": "CLIPTextEncode"
},
"widgets_values": [
"lowres, bad anatomy, bad hands, text, error, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature, watermark, username, blurry, realistic, 3d, photograph, nsfw, explicit"
],
"title": "Negative (Romance)"
},
{
"id": 23,
"type": "EmptyLatentImage",
"pos": [
450,
1810
],
"size": [
315,
106
],
"flags": {},
"order": 21,
"mode": 0,
"outputs": [
{
"name": "LATENT",
"type": "LATENT",
"links": [
27
],
"slot_index": 0
}
],
"properties": {
"Node name for S&R": "EmptyLatentImage"
},
"widgets_values": [
1024,
1024,
1
],
"title": "Romance Panel (Square)"
},
{
"id": 24,
"type": "KSampler",
"pos": [
900,
1350
],
"size": [
315,
262
],
"flags": {},
"order": 22,
"mode": 0,
"inputs": [
{
"name": "model",
"type": "MODEL",
"link": 21
},
{
"name": "positive",
"type": "CONDITIONING",
"link": 25
},
{
"name": "negative",
"type": "CONDITIONING",
"link": 26
},
{
"name": "latent_image",
"type": "LATENT",
"link": 27
}
],
"outputs": [
{
"name": "LATENT",
"type": "LATENT",
"links": [
28
],
"slot_index": 0
}
],
"properties": {
"Node name for S&R": "KSampler"
},
"widgets_values": [
789012,
"fixed",
25,
7,
"euler",
"normal",
1
],
"title": "Romance Sampler"
},
{
"id": 25,
"type": "VAEDecode",
"pos": [
1250,
1350
],
"size": [
210,
46
],
"flags": {},
"order": 23,
"mode": 0,
"inputs": [
{
"name": "samples",
"type": "LATENT",
"link": 28
},
{
"name": "vae",
"type": "VAE",
"link": 24
}
],
"outputs": [
{
"name": "IMAGE",
"type": "IMAGE",
"links": [
29,
30
],
"slot_index": 0
}
],
"properties": {
"Node name for S&R": "VAEDecode"
}
},
{
"id": 26,
"type": "SaveImage",
"pos": [
1500,
1350
],
"size": [
315,
270
],
"flags": {},
"order": 24,
"mode": 0,
"inputs": [
{
"name": "images",
"type": "IMAGE",
"link": 29
}
],
"properties": {
"Node name for S&R": "SaveImage"
},
"widgets_values": [
"manhwa/romance_panel"
],
"title": "Save Romance Panel"
},
{
"id": 27,
"type": "PreviewImage",
"pos": [
1500,
1650
],
"size": [
315,
270
],
"flags": {},
"order": 25,
"mode": 0,
"inputs": [
{
"name": "images",
"type": "IMAGE",
"link": 30
}
],
"properties": {
"Node name for S&R": "PreviewImage"
},
"title": "Romance Preview"
},
{
"id": 28,
"type": "Note",
"pos": [
50,
1500
],
"size": [
350,
150
],
"flags": {},
"order": 26,
"mode": 0,
"properties": {
"text": ""
},
"widgets_values": [
"💕 ROMANCE SCENE GENERATOR\n\nPerfect for romantic manhwa panels.\n\nTips for romance scenes:\n- Use soft pastel colors\n- Add sparkle/flower effects\n- Include emotional expressions\n- Use golden hour lighting"
],
"title": "💖 Romance Tips"
}
],
"links": [
[
1,
1,
0,
5,
0,
"MODEL"
],
[
2,
1,
1,
2,
0,
"CLIP"
],
[
3,
1,
1,
3,
0,
"CLIP"
],
[
4,
1,
2,
6,
1,
"VAE"
],
[
5,
2,
0,
5,
1,
"CONDITIONING"
],
[
6,
3,
0,
5,
2,
"CONDITIONING"
],
[
7,
4,
0,
5,
3,
"LATENT"
],
[
8,
5,
0,
6,
0,
"LATENT"
],
[
9,
6,
0,
7,
0,
"IMAGE"
],
[
10,
6,
0,
8,
0,
"IMAGE"
],
[
11,
11,
0,
15,
0,
"MODEL"
],
[
12,
11,
1,
12,
0,
"CLIP"
],
[
13,
11,
1,
13,
0,
"CLIP"
],
[
14,
11,
2,
16,
1,
"VAE"
],
[
15,
12,
0,
15,
1,
"CONDITIONING"
],
[
16,
13,
0,
15,
2,
"CONDITIONING"
],
[
17,
14,
0,
15,
3,
"LATENT"
],
[
18,
15,
0,
16,
0,
"LATENT"
],
[
19,
16,
0,
17,
0,
"IMAGE"
],
[
20,
16,
0,
18,
0,
"IMAGE"
],
[
21,
20,
0,
24,
0,
"MODEL"
],
[
22,
20,
1,
21,
0,
"CLIP"
],
[
23,
20,
1,
22,
0,
"CLIP"
],
[
24,
20,
2,
25,
1,
"VAE"
],
[
25,
21,
0,
24,
1,
"CONDITIONING"
],
[
26,
22,
0,
24,
2,
"CONDITIONING"
],
[
27,
23,
0,
24,
3,
"LATENT"
],
[
28,
24,
0,
25,
0,
"LATENT"
],
[
29,
25,
0,
26,
0,
"IMAGE"
],
[
30,
25,
0,
27,
0,
"IMAGE"
]
],
"groups": [
{
"title": "🌸 Portrait Panel Generator",
"bounding": [
40,
40,
1800,
450
],
"color": "#a1a1a1",
"font_size": 24
},
{
"title": "⚡ Action Scene Generator",
"bounding": [
40,
520,
1800,
500
],
"color": "#ff6b6b",
"font_size": 24
},
{
"title": "💕 Romance Scene Generator",
"bounding": [
40,
1300,
1800,
650
],
"color": "#ff69b4",
"font_size": 24
}
],
"config": {},
"extra": {
"info": {
"name": "Manhwa Generator Workflow",
"author": "Built with anycoder - https://huggingface.co/spaces/akhaliq/anycoder",
"description": "A comprehensive ComfyUI workflow for generating Korean manhwa/webtoon style artwork. Includes three specialized generators for portrait panels, action scenes, and romance scenes.",
"version": "1.0.0",
"features": [
"Portrait panel generation with classic manhwa aesthetics",
"Dynamic action scene generator with motion effects",
"Romantic scene generator with soft lighting and effects",
"Optimized prompts for Korean webtoon style",
"Multiple aspect ratios for different panel types"
]
}
},
"version": 0.4
}</pre>
</div>
</div>
<script>
function copyToClipboard() {
const jsonContent = document.getElementById('json-content').textContent;
navigator.clipboard.writeText(jsonContent).then(() => {
const btn = event.target;
const originalText = btn.textContent;
btn.textContent = 'Copied!';
btn.classList.add('success');
setTimeout(() => {
btn.textContent = originalText;
btn.classList.remove('success');
}, 2000);
}).catch(err => {
alert('Failed to copy to clipboard');
});
}
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 = 'comfyui_workflow.json';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
const btn = event.target;
const originalText = btn.textContent;
btn.textContent = 'Downloaded!';
btn.classList.add('success');
setTimeout(() => {
btn.textContent = originalText;
btn.classList.remove('success');
}, 2000);
}
// 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>