bobur5012/anycoder-5bfad644
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>ComfyUI Workflow</title>7 <style>8 * {9 margin: 0;10 padding: 0;11 box-sizing: border-box;12 }13 body {14 font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;15 background-color: #000000;16 color: #f5f5f7;17 line-height: 1.6;18 padding: 20px;19 min-height: 100vh;20 }21 .container {22 max-width: 1200px;23 margin: 0 auto;24 }25 .header {26 text-align: center;27 margin-bottom: 40px;28 padding: 40px 20px;29 }30 .header h1 {31 font-size: 48px;32 font-weight: 600;33 color: #ffffff;34 margin-bottom: 12px;35 letter-spacing: -0.02em;36 }37 .header p {38 font-size: 18px;39 color: #86868b;40 font-weight: 400;41 }42 .controls {43 display: flex;44 gap: 12px;45 margin-bottom: 24px;46 justify-content: center;47 }48 .btn {49 padding: 12px 24px;50 border: none;51 border-radius: 24px;52 font-size: 14px;53 font-weight: 500;54 cursor: pointer;55 transition: all 0.2s;56 font-family: inherit;57 }58 .btn-primary {59 background: #ffffff;60 color: #000000;61 }62 .btn-primary:hover {63 background: #f5f5f7;64 transform: scale(0.98);65 }66 .btn-secondary {67 background: #1d1d1f;68 color: #f5f5f7;69 border: 1px solid #424245;70 }71 .btn-secondary:hover {72 background: #2d2d2f;73 transform: scale(0.98);74 }75 .json-container {76 background-color: #1d1d1f;77 border-radius: 16px;78 padding: 32px;79 overflow-x: auto;80 border: 1px solid #424245;81 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);82 }83 pre {84 margin: 0;85 font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;86 font-size: 13px;87 line-height: 1.6;88 white-space: pre-wrap;89 word-wrap: break-word;90 }91 .json-key {92 color: #9cdcfe;93 }94 .json-string {95 color: #ce9178;96 }97 .json-number {98 color: #b5cea8;99 }100 .json-boolean {101 color: #569cd6;102 }103 .json-null {104 color: #569cd6;105 }106 .success {107 color: #30d158;108 }109 @media (max-width: 768px) {110 .header h1 {111 font-size: 32px;112 }113 .controls {114 flex-direction: column;115 }116 .json-container {117 padding: 20px;118 }119 }120 </style>121</head>122<body>123 <div class="container">124 <div class="header">125 <h1>ComfyUI Workflow</h1>126 <p>View and download your workflow JSON</p>127 </div>128 129 <div class="controls">130 <button class="btn btn-primary" onclick="downloadJSON()">Download JSON</button>131 <button class="btn btn-secondary" onclick="copyToClipboard()">Copy to Clipboard</button>132 </div>133 134 <div class="json-container">135 <pre id="json-content">{136 "last_node_id": 17,137 "last_link_id": 23,138 "nodes": [139 {140 "id": 1,141 "type": "LoadImage",142 "pos": [143 100,144 200145 ],146 "size": {147 "0": 315,148 "1": 374149 },150 "flags": {},151 "order": 0,152 "mode": 0,153 "inputs": [154 {155 "name": "image",156 "type": "IMAGE",157 "link": null158 }159 ],160 "outputs": [161 {162 "name": "IMAGE",163 "type": "IMAGE",164 "links": [165 1166 ],167 "slot_index": 0168 }169 ],170 "properties": {171 "Node name for S&R": "LoadImage"172 },173 "widgets_values": [174 "example_image.png"175 ]176 },177 {178 "id": 2,179 "type": "VAEDecode",180 "pos": [181 500,182 200183 ],184 "size": {185 "0": 210,186 "1": 46187 },188 "flags": {},189 "order": 1,190 "mode": 0,191 "inputs": [192 {193 "name": "samples",194 "type": "LATENT",195 "link": 3196 },197 {198 "name": "vae",199 "type": "VAE",200 "link": null201 }202 ],203 "outputs": [204 {205 "name": "IMAGE",206 "type": "IMAGE",207 "links": [208 4209 ],210 "slot_index": 0211 }212 ],213 "properties": {214 "Node name for S&R": "VAEDecode"215 }216 },217 {218 "id": 3,219 "type": "EmptyLatentImage",220 "pos": [221 500,222 50223 ],224 "size": {225 "0": 315,226 "1": 106227 },228 "flags": {},229 "order": 2,230 "mode": 0,231 "inputs": [232 {233 "name": "width",234 "type": "INT",235 "link": null236 },237 {238 "name": "height",239 "type": "INT",240 "link": null241 },242 {243 "name": "batch_size",244 "type": "INT",245 "link": null246 }247 ],248 "outputs": [249 {250 "name": "LATENT",251 "type": "LATENT",252 "links": [253 2254 ],255 "slot_index": 0256 }257 ],258 "properties": {259 "Node name for S&R": "EmptyLatentImage"260 },261 "widgets_values": [262 512,263 512,264 1265 ]266 },267 {268 "id": 4,269 "type": "PreviewImage",270 "pos": [271 800,272 200273 ],274 "size": {275 "0": 210,276 "1": 46277 },278 "flags": {},279 "order": 3,280 "mode": 0,281 "inputs": [282 {283 "name": "images",284 "type": "IMAGE",285 "link": 5286 }287 ],288 "outputs": [],289 "properties": {290 "Node name for S&R": "PreviewImage"291 }292 },293 {294 "id": 5,295 "type": "ImageComposite",296 "pos": [297 650,298 350299 ],300 "size": {301 "0": 210,302 "1": 46303 },304 "flags": {},305 "order": 4,306 "mode": 0,307 "inputs": [308 {309 "name": "images1",310 "type": "IMAGE",311 "link": 1312 },313 {314 "name": "images2",315 "type": "IMAGE",316 "link": 6317 }318 ],319 "outputs": [320 {321 "name": "IMAGE",322 "type": "IMAGE",323 "links": [324 7325 ],326 "slot_index": 0327 }328 ],329 "properties": {330 "Node name for S&R": "ImageComposite"331 }332 },333 {334 "id": 6,335 "type": "CLIPTextEncode",336 "pos": [337 200,338 400339 ],340 "size": {341 "0": 425,342 "1": 180343 },344 "flags": {},345 "order": 5,346 "mode": 0,347 "inputs": [348 {349 "name": "clip",350 "type": "CLIP",351 "link": null352 },353 {354 "name": "text",355 "type": "STRING",356 "link": null357 }358 ],359 "outputs": [360 {361 "name": "CONDITIONING",362 "type": "CONDITIONING",363 "links": [364 8365 ],366 "slot_index": 0367 }368 ],369 "properties": {370 "Node name for S&R": "CLIPTextEncode"371 },372 "widgets_values": [373 "beautiful AI assistant dashboard with animated head and audio visualizer, futuristic design, glowing elements, neon colors, professional UI"374 ]375 },376 {377 "id": 7,378 "type": "KSampler",379 "pos": [380 500,381 400382 ],383 "size": {384 "0": 315,385 "1": 262386 },387 "flags": {},388 "order": 6,389 "mode": 0,390 "inputs": [391 {392 "name": "model",393 "type": "MODEL",394 "link": null395 },396 {397 "name": "positive",398 "type": "CONDITIONING",399 "link": 9400 },401 {402 "name": "negative",403 "type": "CONDITIONING",404 "link": 10405 },406 {407 "name": "latent_image",408 "type": "LATENT",409 "link": 11410 },411 {412 "name": "seed",413 "type": "INT",414 "link": null415 }416 ],417 "outputs": [418 {419 "name": "LATENT",420 "type": "LATENT",421 "links": [422 12423 ],424 "slot_index": 0425 }426 ],427 "properties": {428 "Node name for S&R": "KSampler"429 },430 "widgets_values": [431 156680208700286,432 20,433 8,434 0.5,435 "euler",436 "normal"437 ]438 },439 {440 "id": 8,441 "type": "CLIPTextEncode",442 "pos": [443 200,444 600445 ],446 "size": {447 "0": 425,448 "1": 180449 },450 "flags": {},451 "order": 7,452 "mode": 0,453 "inputs": [454 {455 "name": "clip",456 "type": "CLIP",457 "link": null458 },459 {460 "name": "text",461 "type": "STRING",462 "link": null463 }464 ],465 "outputs": [466 {467 "name": "CONDITIONING",468 "type": "CONDITIONING",469 "links": [470 13471 ],472 "slot_index": 0473 }474 ],475 "properties": {476 "Node name for S&R": "CLIPTextEncode"477 },478 "widgets_values": [479 "blurry, low quality, distorted, ugly"480 ]481 },482 {483 "id": 9,484 "type": "LoadCheckpoint",485 "pos": [486 100,487 50488 ],489 "size": {490 "0": 315,491 "1": 98492 },493 "flags": {},494 "order": 8,495 "mode": 0,496 "inputs": [497 {498 "name": "ckpt_name",499 "type": "COMBO",500 "link": null501 }502 ],503 "outputs": [504 {505 "name": "MODEL",506 "type": "MODEL",507 "links": [508 14,509 15510 ],511 "slot_index": 0512 },513 {514 "name": "CLIP",515 "type": "CLIP",516 "links": [517 16,518 17519 ],520 "slot_index": 1521 },522 {523 "name": "VAE",524 "type": "VAE",525 "links": [526 18527 ],528 "slot_index": 2529 }530 ],531 "properties": {532 "Node name for S&R": "LoadCheckpoint"533 },534 "widgets_values": [535 "v1-5-pruned-emaonly.ckpt"536 ]537 },538 {539 "id": 10,540 "type": "VAEEncode",541 "pos": [542 300,543 200544 ],545 "size": {546 "0": 210,547 "1": 46548 },549 "flags": {},550 "order": 9,551 "mode": 0,552 "inputs": [553 {554 "name": "pixels",555 "type": "IMAGE",556 "link": 19557 },558 {559 "name": "vae",560 "type": "VAE",561 "link": 20562 }563 ],564 "outputs": [565 {566 "name": "LATENT",567 "type": "LATENT",568 "links": [569 21570 ],571 "slot_index": 0572 }573 ],574 "properties": {575 "Node name for S&R": "VAEEncode"576 }577 },578 {579 "id": 11,580 "type": "ImageScale",581 "pos": [582 150,583 350584 ],585 "size": {586 "0": 210,587 "1": 46588 },589 "flags": {},590 "order": 10,591 "mode": 0,592 "inputs": [593 {594 "name": "image",595 "type": "IMAGE",596 "link": 22597 },598 {599 "name": "upscale_method",600 "type": "COMBO",601 "link": null602 },603 {604 "name": "width",605 "type": "INT",606 "link": null607 },608 {609 "name": "height",610 "type": "INT",611 "link": null612 }613 ],614 "outputs": [615 {616 "name": "IMAGE",617 "type": "IMAGE",618 "links": [619 23620 ],621 "slot_index": 0622 }623 ],624 "properties": {625 "Node name for S&R": "ImageScale"626 },627 "widgets_values": [628 "lanczos",629 1024,630 1024631 ]632 },633 {634 "id": 12,635 "type": "SaveImage",636 "pos": [637 900,638 400639 ],640 "size": {641 "0": 210,642 "1": 46643 },644 "flags": {},645 "order": 11,646 "mode": 0,647 "inputs": [648 {649 "name": "images",650 "type": "IMAGE",651 "link": null652 }653 ],654 "outputs": [],655 "properties": {656 "Node name for S&R": "SaveImage"657 }658 },659 {660 "id": 13,661 "type": "CR Multiline Text",662 "pos": [663 50,664 800665 ],666 "size": {667 "0": 400,668 "1": 200669 },670 "flags": {},671 "order": 12,672 "mode": 0,673 "inputs": [674 {675 "name": "text",676 "type": "STRING",677 "link": null678 }679 ],680 "outputs": [681 {682 "name": "STRING",683 "type": "STRING",684 "links": null,685 "slot_index": 0686 }687 ],688 "properties": {689 "Node name for S&R": "CR Multiline Text"690 },691 "widgets_values": [692 "AI Assistant Dashboard\nVoice Assistant Interface\nAudio Visualizer\nAnimated Head\nBeautiful Design"693 ]694 },695 {696 "id": 14,697 "type": "CR Module Pipe Loader",698 "pos": [699 50,700 1050701 ],702 "size": {703 "0": 210,704 "1": 98705 },706 "flags": {},707 "order": 13,708 "mode": 0,709 "inputs": [710 {711 "name": "model",712 "type": "MODEL",713 "link": null714 },715 {716 "name": "clip",717 "type": "CLIP",718 "link": null719 },720 {721 "name": "vae",722 "type": "VAE",723 "link": null724 },725 {726 "name": "module",727 "type": "COMBO",728 "link": null729 }730 ],731 "outputs": [732 {733 "name": "MODEL",734 "type": "MODEL",735 "links": null,736 "slot_index": 0737 },738 {739 "name": "CLIP",740 "type": "CLIP",741 "links": null,742 "slot_index": 1743 },744 {745 "name": "VAE",746 "type": "VAE",747 "links": null,748 "slot_index": 2749 }750 ],751 "properties": {752 "Node name for S&R": "CR Module Pipe Loader"753 },754 "widgets_values": [755 true756 ]757 },758 {759 "id": 15,760 "type": "CR Module Input",761 "pos": [762 300,763 1050764 ],765 "size": {766 "0": 210,767 "1": 98768 },769 "flags": {},770 "order": 14,771 "mode": 0,772 "inputs": [773 {774 "name": "model",775 "type": "MODEL",776 "link": null777 },778 {779 "name": "clip",780 "type": "CLIP",781 "link": null782 },783 {784 "name": "vae",785 "type": "VAE",786 "link": null787 }788 ],789 "outputs": [790 {791 "name": "MODEL",792 "type": "MODEL",793 "links": null,794 "slot_index": 0795 },796 {797 "name": "CLIP",798 "type": "CLIP",799 "links": null,800 "slot_index": 1801 },802 {803 "name": "VAE",804 "type": "VAE",805 "links": null,806 "slot_index": 2807 }808 ],809 "properties": {810 "Node name for S&R": "CR Module Input"811 }812 },813 {814 "id": 16,815 "type": "CR Module Output",816 "pos": [817 550,818 1050819 ],820 "size": {821 "0": 210,822 "1": 98823 },824 "flags": {},825 "order": 15,826 "mode": 0,827 "inputs": [828 {829 "name": "model",830 "type": "MODEL",831 "link": null832 },833 {834 "name": "clip",835 "type": "CLIP",836 "link": null837 },838 {839 "name": "vae",840 "type": "VAE",841 "link": null842 }843 ],844 "outputs": [845 {846 "name": "MODEL",847 "type": "MODEL",848 "links": null,849 "slot_index": 0850 },851 {852 "name": "CLIP",853 "type": "CLIP",854 "links": null,855 "slot_index": 1856 },857 {858 "name": "VAE",859 "type": "VAE",860 "links": null,861 "slot_index": 2862 }863 ],864 "properties": {865 "Node name for S&R": "CR Module Output"866 }867 },868 {869 "id": 17,870 "type": "CR Latent Input Switch",871 "pos": [872 800,873 1050874 ],875 "size": {876 "0": 210,877 "1": 98878 },879 "flags": {},880 "order": 16,881 "mode": 0,882 "inputs": [883 {884 "name": "Input",885 "type": "LATENT",886 "link": null887 },888 {889 "name": "select",890 "type": "INT",891 "link": null892 }893 ],894 "outputs": [895 {896 "name": "LATENT",897 "type": "LATENT",898 "links": null,899 "slot_index": 0900 }901 ],902 "properties": {903 "Node name for S&R": "CR Latent Input Switch"904 },905 "widgets_values": [906 1907 ]908 }909 ],910 "links": [911 [912 1,913 0,914 2,915 0916 ],917 [918 2,919 0,920 4,921 0922 ],923 [924 3,925 0,926 2,927 0928 ],929 [930 4,931 0,932 5,933 1934 ],935 [936 5,937 0,938 4,939 0940 ],941 [942 6,943 0,944 7,945 1946 ],947 [948 7,949 0,950 2,951 0952 ],953 [954 8,955 0,956 7,957 2958 ],959 [960 9,961 0,962 7,963 0964 ],965 [966 9,967 1,968 6,969 0970 ],971 [972 9,973 1,974 8,975 0976 ],977 [978 9,979 2,980 2,981 1982 ],983 [984 10,985 0,986 7,987 3988 ],989 [990 11,991 0,992 5,993 0994 ],995 [996 12,997 0,998 12,999 01000 ]1001 ],1002 "groups": [1003 {1004 "title": "AI Assistant Dashboard Generator",1005 "bounding": [1006 40,1007 30,1008 920,1009 11501010 ],1011 "color": "#2A2A2A"1012 }1013 ],1014 "config": {},1015 "extra": {},1016 "version": 0.41017}</pre>1018 </div>1019 </div>1020 1021 <script>1022 function copyToClipboard() {1023 const jsonContent = document.getElementById('json-content').textContent;1024 navigator.clipboard.writeText(jsonContent).then(() => {1025 const btn = event.target;1026 const originalText = btn.textContent;1027 btn.textContent = 'Copied!';1028 btn.classList.add('success');1029 setTimeout(() => {1030 btn.textContent = originalText;1031 btn.classList.remove('success');1032 }, 2000);1033 }).catch(err => {1034 alert('Failed to copy to clipboard');1035 });1036 }1037 1038 function downloadJSON() {1039 const jsonContent = document.getElementById('json-content').textContent;1040 const blob = new Blob([jsonContent], { type: 'application/json' });1041 const url = URL.createObjectURL(blob);1042 const a = document.createElement('a');1043 a.href = url;1044 a.download = 'comfyui_workflow.json';1045 document.body.appendChild(a);1046 a.click();1047 document.body.removeChild(a);1048 URL.revokeObjectURL(url);1049 1050 const btn = event.target;1051 const originalText = btn.textContent;1052 btn.textContent = 'Downloaded!';1053 btn.classList.add('success');1054 setTimeout(() => {1055 btn.textContent = originalText;1056 btn.classList.remove('success');1057 }, 2000);1058 }1059 1060 // Add syntax highlighting1061 function highlightJSON() {1062 const content = document.getElementById('json-content');1063 let html = content.innerHTML;1064 1065 // Highlight different JSON elements1066 html = html.replace(/"([^"]+)":/g, '<span class="json-key">"$1":</span>');1067 html = html.replace(/: "([^"]*)"/g, ': <span class="json-string">"$1"</span>');1068 html = html.replace(/: (-?\d+\.?\d*)/g, ': <span class="json-number">$1</span>');1069 html = html.replace(/: (true|false)/g, ': <span class="json-boolean">$1</span>');1070 html = html.replace(/: null/g, ': <span class="json-null">null</span>');1071 1072 content.innerHTML = html;1073 }1074 1075 // Apply syntax highlighting after page load1076 window.addEventListener('load', highlightJSON);1077 </script>1078</body>1079</html>