<html lang="en"> <head> <title>InvokeAI Test</title> <meta charset="utf-8" /> <link rel="icon" type="image/x-icon" href="static/dream_web/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!--<script src="config.js"></script>--> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fslightbox/3.0.9/index.js"></script> <style> body { background: #334; } #gallery > a.image { display: inline-block; width: 128px; height: 128px; margin: 8px; background-size: contain; background-repeat: no-repeat; background-position: center; } .results { border-color: green; border-width: 1px; border-style: solid; } .intermediates { border-color: yellow; border-width: 1px; border-style: solid; } </style> </head> <body> <button onclick="dostuff();">Test Invoke</button> <div id="gallery"></div> <div id="textlog"> <textarea id="log" rows="10" cols="60" autofocus> </textarea> </div> <script type="text/javascript"> const socket_url = `ws://${window.location.host}`; const socket = io(socket_url, { path: '/ws/socket.io', }); socket.on('connect', (data) => { //socket.emit('subscribe', { 'session': 'WcBtYATwT92Mrb9zLgeyNw==' }); }); function addGalleryImage(src, className) { let gallery = document.getElementById('gallery'); let div = document.createElement('a'); div.href = src; div.setAttribute('data-fslightbox', ''); div.classList.add('image'); div.classList.add(className); div.style.backgroundImage = `url('${src}')`; gallery.appendChild(div); refreshFsLightbox(); } function log(event, data) { document.getElementById('log').value += `${event} => ${JSON.stringify( data )}\n`; if (data.result?.image?.image_type) { addGalleryImage( `/api/v1/images/${data.result.image.image_type}/${data.result.image.image_name}`, data.result.image.image_type ); } if (data.result?.mask?.image_type) { addGalleryImage( `/api/v1/images/${data.result.mask.image_type}/${data.result.mask.image_name}`, data.result.mask.image_type ); } console.log(`${event} => ${JSON.stringify(data)}`); } socket.on('generator_progress', (data) => log('generator_progress', data) ); socket.on('invocation_complete', (data) => log('invocation_complete', data) ); socket.on('invocation_started', (data) => log('invocation_started', data) ); socket.on('session_complete', (data) => { log('session_complete', data); // NOTE: you may not want to unsubscribe if you plan to continue using this session, // just make sure you unsubscribe eventually socket.emit('unsubscribe', { session: data.session_id }); }); function dostuff() { let prompt = 'hyper detailed 4k cryengine 3D render of a cat in a dune buggy, trending on artstation, soft atmospheric lighting, volumetric lighting, cinematic still, golden hour, crepuscular rays, smooth [grainy]'; let strength = 0.95; let sampler = 'keuler_a'; let steps = 50; let seed = -1; // Start building nodes var id = 1; var initialNode = { id: id.toString(), type: 'txt2img', prompt: prompt, model: 'stable-diffusion-1-5', sampler: sampler, steps: steps, seed: seed, }; id++; var i2iNode = { id: id.toString(), type: 'img2img', prompt: prompt, model: 'stable-diffusion-1-5', sampler: sampler, steps: steps, seed: Math.floor(Math.random() * 10000), }; id++; var upscaleNode = { id: id.toString(), type: 'show_image' }; id++; nodes = {}; nodes[initialNode.id] = initialNode; nodes[i2iNode.id] = i2iNode; nodes[upscaleNode.id] = upscaleNode; links = [ { source: { node_id: initialNode.id, field: 'image' }, destination: { node_id: i2iNode.id, field: 'image' }, }, { source: { node_id: i2iNode.id, field: 'image' }, destination: { node_id: upscaleNode.id, field: 'image' }, }, ]; // expandSize = 128; // for (var i = 0; i < 6; ++i) { // var i_seed = (seed == -1) ? -1 : seed + i + 1; // var startid = id - 1; // var offset = (i < 3) ? -expandSize : (3 * expandSize) + ((i - 3 + 1) * expandSize); // nodes.push({"id": id.toString(), "type": "crop", "x": offset, "y": 0, "width": 512, "height": 512}); // let id_gen = id; // links.push({"from_node": {"id": startid.toString(), "field": "image"},"to_node": {"id": id_gen.toString(),"field": "image"}}); // id++; // nodes.push({"id": id.toString(), "type": "tomask"}); // let id_mask = id; // links.push({"from_node": {"id": id_gen.toString(), "field": "image"},"to_node": {"id": id_mask.toString(),"field": "image"}}); // id++; // nodes.push({"id": id.toString(), "type": "blur", "radius": 32}); // let id_mask_blur = id; // links.push({"from_node": {"id": id_mask.toString(), "field": "mask"},"to_node": {"id": id_mask_blur.toString(),"field": "image"}}); // id++ // nodes.push({"id": id.toString(), "type": "ilerp", "min": 128, "max": 255}); // let id_ilerp = id; // links.push({"from_node": {"id": id_mask_blur.toString(), "field": "image"},"to_node": {"id": id_ilerp.toString(),"field": "image"}}); // id++ // nodes.push({"id": id.toString(), "type": "cv_inpaint"}); // let id_cv_inpaint = id; // links.push({"from_node": {"id": id_gen.toString(), "field": "image"},"to_node": {"id": id_cv_inpaint.toString(),"field": "image"}}); // links.push({"from_node": {"id": id_mask.toString(), "field": "mask"},"to_node": {"id": id_cv_inpaint.toString(),"field": "mask"}}); // id++; // nodes.push({"id": id.toString(), "type": "img2img", "prompt": prompt, "strength": strength, "sampler": sampler, "steps": steps, "seed": i_seed, "color_match": true, "inpaint_replace": inpaint_replace}); // let id_i2i = id; // links.push({"from_node": {"id": id_cv_inpaint.toString(), "field": "image"},"to_node": {"id": id_i2i.toString(),"field": "image"}}); // links.push({"from_node": {"id": id_ilerp.toString(), "field": "image"},"to_node": {"id": id_i2i.toString(),"field": "mask"}}); // id++; // nodes.push({"id": id.toString(), "type": "paste", "x": offset, "y": 0}); // let id_paste = id; // links.push({"from_node": {"id": startid.toString(), "field": "image"},"to_node": {"id": id_paste.toString(),"field": "base_image"}}); // links.push({"from_node": {"id": id_i2i.toString(), "field": "image"},"to_node": {"id": id_paste.toString(),"field": "image"}}); // links.push({"from_node": {"id": id_ilerp.toString(), "field": "image"},"to_node": {"id": id_paste.toString(),"field": "mask"}}); // id++; // } var graph = { nodes: nodes, edges: links, }; // var defaultGraph = {"nodes": [ // {"id": "1", "type": "txt2img", "prompt": prompt}, // {"id": "2", "type": "crop", "x": -256, "y": 128, "width": 512, "height": 512}, // {"id": "3", "type": "tomask"}, // {"id": "4", "type": "cv_inpaint"}, // {"id": "5", "type": "img2img", "prompt": prompt, "strength": 0.9}, // {"id": "6", "type": "paste", "x": -256, "y": 128}, // ], // "links": [ // {"from_node": {"id": "1","field": "image"},"to_node": {"id": "2","field": "image"}}, // {"from_node": {"id": "2","field": "image"},"to_node": {"id": "3","field": "image"}}, // {"from_node": {"id": "2","field": "image"},"to_node": {"id": "4","field": "image"}}, // {"from_node": {"id": "3","field": "mask"},"to_node": {"id": "4","field": "mask"}}, // {"from_node": {"id": "4","field": "image"},"to_node": {"id": "5","field": "image"}}, // {"from_node": {"id": "3","field": "mask"},"to_node": {"id": "5","field": "mask"}}, // {"from_node": {"id": "1","field": "image"},"to_node": {"id": "6","field": "base_image"}}, // {"from_node": {"id": "5","field": "image"},"to_node": {"id": "6","field": "image"}} // ]}; fetch('/api/v1/sessions/', { method: 'POST', headers: new Headers({ 'content-type': 'application/json' }), body: JSON.stringify(graph), }) .then((response) => response.json()) .then((data) => { sessionId = data.id; socket.emit('subscribe', { session: sessionId }); fetch(`/api/v1/sessions/${sessionId}/invoke?all=true`, { method: 'PUT', headers: new Headers({ 'content-type': 'application/json' }), body: '', }); }); } </script> </body> </html>