mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
209 lines
9.9 KiB
HTML
209 lines
9.9 KiB
HTML
<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> |