Spaces:

bleckhert
/

anycoder-d92ea44c

Running

App Files Files Community

bleckhert commited on 25 days ago

Commit

4626b7a

verified ·

1 Parent(s): d6abe16

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +844 -19

index.html CHANGED Viewed

@@ -1,19 +1,844 @@
-<!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>
-</html>

+<!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": 15,
+  "last_link_id": 13,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "LoadImage",
+      "pos": [
+        100,
+        100
+      ],
+      "size": [
+        320,
+        280
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        [
+          "IMAGE",
+          0
+        ]
+      ],
+      "properties": {},
+      "widgets_values": [
+        "source_face.png",
+        "image"
+      ]
+    },
+    {
+      "id": 2,
+      "type": "LoadImage",
+      "pos": [
+        100,
+        450
+      ],
+      "size": [
+        320,
+        280
+      ],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        [
+          "IMAGE",
+          0
+        ]
+      ],
+      "properties": {},
+      "widgets_values": [
+        "target_image.png",
+        "image"
+      ]
+    },
+    {
+      "id": 3,
+      "type": "LoadImageMask",
+      "pos": [
+        480,
+        100
+      ],
+      "size": [
+        320,
+        280
+      ],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        [
+          "MASK",
+          0
+        ]
+      ],
+      "properties": {},
+      "widgets_values": [
+        "source_face.png",
+        "image",
+        0
+      ]
+    },
+    {
+      "id": 4,
+      "type": "LoadImageMask",
+      "pos": [
+        480,
+        450
+      ],
+      "size": [
+        320,
+        280
+      ],
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        [
+          "MASK",
+          0
+        ]
+      ],
+      "properties": {},
+      "widgets_values": [
+        "target_image.png",
+        "image",
+        0
+      ]
+    },
+    {
+      "id": 5,
+      "type": "ReActorFaceSwap",
+      "pos": [
+        860,
+        275
+      ],
+      "size": [
+        400,
+        300
+      ],
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [
+        [
+          "source_image",
+          0
+        ],
+        [
+          "target_image",
+          0
+        ],
+        [
+          "source_face_index",
+          0
+        ],
+        [
+          "target_face_index",
+          0
+        ],
+        [
+          "mask_source",
+          0
+        ],
+        [
+          "mask_target",
+          0
+        ]
+      ],
+      "outputs": [
+        [
+          "IMAGE",
+          0
+        ],
+        [
+          "FACE_MODEL",
+          0
+        ]
+      ],
+      "properties": {},
+      "widgets_values": [
+        0,
+        0,
+        "true",
+        "false",
+        "false",
+        0.5,
+        "GFPGAN",
+        0.5,
+        "None",
+        1.0,
+        "true",
+        "false"
+      ]
+    },
+    {
+      "id": 6,
+      "type": "PreviewImage",
+      "pos": [
+        1320,
+        100
+      ],
+      "size": [
+        320,
+        280
+      ],
+      "flags": {},
+      "order": 5,
+      "mode": 0,
+      "inputs": [
+        [
+          "images",
+          0
+        ]
+      ],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": []
+    },
+    {
+      "id": 7,
+      "type": "SaveImage",
+      "pos": [
+        1320,
+        450
+      ],
+      "size": [
+        320,
+        280
+      ],
+      "flags": {},
+      "order": 6,
+      "mode": 0,
+      "inputs": [
+        [
+          "images",
+          0
+        ]
+      ],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": [
+        "ComfyUI",
+        "FaceSwap_Result"
+      ]
+    },
+    {
+      "id": 8,
+      "type": "PrimitiveInt",
+      "pos": [
+        480,
+        780
+      ],
+      "size": [
+        200,
+        60
+      ],
+      "flags": {},
+      "order": 7,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        [
+          "INT",
+          0
+        ]
+      ],
+      "properties": {},
+      "widgets_values": [
+        0
+      ]
+    },
+    {
+      "id": 9,
+      "type": "PrimitiveInt",
+      "pos": [
+        480,
+        880
+      ],
+      "size": [
+        200,
+        60
+      ],
+      "flags": {},
+      "order": 8,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        [
+          "INT",
+          0
+        ]
+      ],
+      "properties": {},
+      "widgets_values": [
+        0
+      ]
+    },
+    {
+      "id": 10,
+      "type": "PrimitiveFloat",
+      "pos": [
+        480,
+        980
+      ],
+      "size": [
+        200,
+        60
+      ],
+      "flags": {},
+      "order": 9,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        [
+          "FLOAT",
+          0
+        ]
+      ],
+      "properties": {},
+      "widgets_values": [
+        0.5
+      ]
+    },
+    {
+      "id": 11,
+      "type": "PrimitiveFloat",
+      "pos": [
+        480,
+        1080
+      ],
+      "size": [
+        200,
+        60
+      ],
+      "flags": {},
+      "order": 10,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        [
+          "FLOAT",
+          0
+        ]
+      ],
+      "properties": {},
+      "widgets_values": [
+        1.0
+      ]
+    },
+    {
+      "id": 12,
+      "type": "PrimitiveBoolean",
+      "pos": [
+        100,
+        780
+      ],
+      "size": [
+        200,
+        60
+      ],
+      "flags": {},
+      "order": 11,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        [
+          "BOOLEAN",
+          0
+        ]
+      ],
+      "properties": {},
+      "widgets_values": [
+        true
+      ]
+    },
+    {
+      "id": 13,
+      "type": "PrimitiveBoolean",
+      "pos": [
+        100,
+        880
+      ],
+      "size": [
+        200,
+        60
+      ],
+      "flags": {},
+      "order": 12,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        [
+          "BOOLEAN",
+          0
+        ]
+      ],
+      "properties": {},
+      "widgets_values": [
+        false
+      ]
+    },
+    {
+      "id": 14,
+      "type": "PrimitiveBoolean",
+      "pos": [
+        100,
+        980
+      ],
+      "size": [
+        200,
+        60
+      ],
+      "flags": {},
+      "order": 13,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        [
+          "BOOLEAN",
+          0
+        ]
+      ],
+      "properties": {},
+      "widgets_values": [
+        true
+      ]
+    },
+    {
+      "id": 15,
+      "type": "Note",
+      "pos": [
+        100,
+        1100
+      ],
+      "size": [
+        400,
+        200
+      ],
+      "flags": {},
+      "order": 14,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": [
+        "Face Swap Application\n\n1. Load source face image (face to extract)\n2. Load target image (image to swap face into)\n3. Optional: Load masks for precise control\n4. Adjust settings:\n   - Face indices: Select which face if multiple\n   - Face restoration: Enable GFPGAN/CodeFormer\n   - Strength: Adjust blend intensity\n   - Upscaler: Optional face upscaling\n\nBuilt with anycoder - https://huggingface.co/spaces/akhaliq/anycoder"
+      ]
+    }
+  ],
+  "links": [
+    [
+      1,
+      1,
+      5,
+      0,
+      "IMAGE"
+    ],
+    [
+      2,
+      2,
+      5,
+      1,
+      "IMAGE"
+    ],
+    [
+      3,
+      3,
+      5,
+      5,
+      "MASK"
+    ],
+    [
+      4,
+      4,
+      5,
+      6,
+      "MASK"
+    ],
+    [
+      5,
+      5,
+      6,
+      0,
+      "IMAGE"
+    ],
+    [
+      5,
+      5,
+      7,
+      0,
+      "IMAGE"
+    ],
+    [
+      8,
+      0,
+      5,
+      2,
+      "INT"
+    ],
+    [
+      9,
+      0,
+      5,
+      3,
+      "INT"
+    ],
+    [
+      10,
+      0,
+      5,
+      6,
+      "FLOAT"
+    ],
+    [
+      11,
+      0,
+      5,
+      9,
+      "FLOAT"
+    ],
+    [
+      12,
+      0,
+      5,
+      4,
+      "BOOLEAN"
+    ],
+    [
+      13,
+      0,
+      5,
+      5,
+      "BOOLEAN"
+    ],
+    [
+      14,
+      0,
+      5,
+      10,
+      "BOOLEAN"
+    ]
+  ],
+  "groups": [
+    {
+      "title": "Source Face",
+      "bounding": [
+        80,
+        80,
+        740,
+        320
+      ],
+      "color": "#3f789e",
+      "font_size": 24
+    },
+    {
+      "title": "Target Image",
+      "bounding": [
+        80,
+        430,
+        740,
+        320
+      ],
+      "color": "#8f3e8e",
+      "font_size": 24
+    },
+    {
+      "title": "Face Swap Settings",
+      "bounding": [
+        80,
+        760,
+        620,
+        400
+      ],
+      "color": "#5e8f3e",
+      "font_size": 24
+    },
+    {
+      "title": "Output",
+      "bounding": [
+        1300,
+        80,
+        360,
+        670
+      ],
+      "color": "#bf5f3f",
+      "font_size": 24
+    }
+  ],
+  "config": {},
+  "extra": {
+    "workspace_info": {
+      "app_mode": true,
+      "app_inputs": [
+        {
+          "node_id": 1,
+          "name": "Source Face",
+          "type": "image",
+          "description": "Upload the face image to extract"
+        },
+        {
+          "node_id": 2,
+          "name": "Target Image",
+          "type": "image",
+          "description": "Upload the image to swap face into"
+        },
+        {
+          "node_id": 8,
+          "name": "Source Face Index",
+          "type": "int",
+          "description": "Which face to use from source (0 = first face)"
+        },
+        {
+          "node_id": 9,
+          "name": "Target Face Index",
+          "type": "int",
+          "description": "Which face to replace in target (0 = first face)"
+        },
+        {
+          "node_id": 10,
+          "name": "Face Restoration Strength",
+          "type": "float",
+          "description": "GFPGAN/CodeFormer restoration strength (0-1)"
+        },
+        {
+          "node_id": 11,
+          "name": "Upscale Factor",
+          "type": "float",
+          "description": "Face upscaling multiplier"
+        },
+        {
+          "node_id": 12,
+          "name": "Enable Face Restoration",
+          "type": "boolean",
+          "description": "Apply face restoration after swap"
+        },
+        {
+          "node_id": 13,
+          "name": "Enable Mask",
+          "type": "boolean",
+          "description": "Use masks for precise face placement"
+        },
+        {
+          "node_id": 14,
+          "name": "Save Output",
+          "type": "boolean",
+          "description": "Save the result to disk"
+        }
+      ],
+      "app_outputs": [
+        {
+          "node_id": 6,
+          "name": "Preview",
+          "description": "Preview the face swap result"
+        }
+      ],
+      "app_title": "Face Swap Studio",
+      "app_description": "Swap faces between two images with advanced controls for face selection, restoration, and upscaling. Upload a source face and target image to create realistic face swaps.",
+      "app_theme": "modern",
+      "app_layout": "horizontal"
+    }
+  }
+}</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>