|
<!doctype html> |
|
<html> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>Real-Time Latent Consistency Model</title> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<script |
|
src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/piexifjs@1.0.6/piexif.min.js"></script> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<script type="module"> |
|
const WIDTH = 768; |
|
const HEIGHT = 768; |
|
const seedEl = document.querySelector("#seed"); |
|
const promptEl = document.querySelector("#prompt"); |
|
const guidanceEl = document.querySelector("#guidance-scale"); |
|
const strengthEl = document.querySelector("#strength"); |
|
const startBtn = document.querySelector("#start"); |
|
const stopBtn = document.querySelector("#stop"); |
|
const videoEl = document.querySelector("#webcam"); |
|
const imageEl = document.querySelector("#player"); |
|
const queueSizeEl = document.querySelector("#queue_size"); |
|
const errorEl = document.querySelector("#error"); |
|
const snapBtn = document.querySelector("#snap"); |
|
|
|
function LCMLive(webcamVideo, liveImage, seedEl, promptEl, guidanceEl, strengthEl) { |
|
let websocket; |
|
|
|
async function start() { |
|
return new Promise((resolve, reject) => { |
|
const websocketURL = `${window.location.protocol === "https:" ? "wss" : "ws" |
|
}:${window.location.host}/ws`; |
|
|
|
const socket = new WebSocket(websocketURL); |
|
socket.onopen = () => { |
|
console.log("Connected to websocket"); |
|
}; |
|
socket.onclose = () => { |
|
console.log("Disconnected from websocket"); |
|
stop(); |
|
resolve({ "status": "disconnected" }); |
|
}; |
|
socket.onerror = (err) => { |
|
console.error(err); |
|
reject(err); |
|
}; |
|
socket.onmessage = (event) => { |
|
const data = JSON.parse(event.data); |
|
switch (data.status) { |
|
case "success": |
|
break; |
|
case "start": |
|
const userId = data.userId; |
|
initVideoStream(userId); |
|
break; |
|
case "timeout": |
|
stop(); |
|
resolve({ "status": "timeout" }); |
|
case "error": |
|
stop(); |
|
reject(data.message); |
|
|
|
} |
|
}; |
|
websocket = socket; |
|
}) |
|
} |
|
|
|
async function videoTimeUpdateHandler() { |
|
const canvas = new OffscreenCanvas(WIDTH, HEIGHT); |
|
const videoW = webcamVideo.videoWidth; |
|
const videoH = webcamVideo.videoHeight; |
|
|
|
const ctx = canvas.getContext("2d"); |
|
|
|
ctx.drawImage(webcamVideo, videoW / 2 - WIDTH / 2, videoH / 2 - HEIGHT / 2, WIDTH, HEIGHT, 0, 0, canvas.width, canvas.height); |
|
const blob = await canvas.convertToBlob({ type: "image/jpeg", quality: 1 }); |
|
websocket.send(blob); |
|
websocket.send(JSON.stringify({ |
|
"seed": seedEl.value, |
|
"prompt": promptEl.value, |
|
"guidance_scale": guidanceEl.value, |
|
"strength": strengthEl.value |
|
})); |
|
} |
|
|
|
function initVideoStream(userId) { |
|
liveImage.src = `/stream/${userId}`; |
|
const constraints = { |
|
audio: false, |
|
video: { width: WIDTH, height: HEIGHT }, |
|
}; |
|
navigator.mediaDevices |
|
.getUserMedia(constraints) |
|
.then((mediaStream) => { |
|
webcamVideo.srcObject = mediaStream; |
|
webcamVideo.onloadedmetadata = () => { |
|
webcamVideo.play(); |
|
webcamVideo.addEventListener("timeupdate", videoTimeUpdateHandler); |
|
}; |
|
}) |
|
.catch((err) => { |
|
console.error(`${err.name}: ${err.message}`); |
|
}); |
|
} |
|
|
|
async function stop() { |
|
websocket.close(); |
|
navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => { |
|
mediaStream.getTracks().forEach((track) => track.stop()); |
|
}); |
|
webcamVideo.removeEventListener("timeupdate", videoTimeUpdateHandler); |
|
webcamVideo.srcObject = null; |
|
} |
|
return { |
|
start, |
|
stop |
|
} |
|
} |
|
function toggleMessage(type) { |
|
errorEl.hidden = false; |
|
errorEl.scrollIntoView(); |
|
switch (type) { |
|
case "error": |
|
errorEl.innerText = "To many users are using the same GPU, please try again later."; |
|
errorEl.classList.toggle("bg-red-300", "text-red-900"); |
|
break; |
|
case "success": |
|
errorEl.innerText = "Your session has ended, please start a new one."; |
|
errorEl.classList.toggle("bg-green-300", "text-green-900"); |
|
break; |
|
} |
|
setTimeout(() => { |
|
errorEl.hidden = true; |
|
}, 2000); |
|
} |
|
function snapImage() { |
|
try { |
|
const zeroth = {}; |
|
const exif = {}; |
|
const gps = {}; |
|
zeroth[piexif.ImageIFD.Make] = "LCM Image-to-Image"; |
|
zeroth[piexif.ImageIFD.ImageDescription] = `prompt: ${promptEl.value} | seed: ${seedEl.value} | guidance_scale: ${guidanceEl.value} | strength: ${strengthEl.value}`; |
|
zeroth[piexif.ImageIFD.Software] = "https://github.com/radames/Real-Time-Latent-Consistency-Model"; |
|
|
|
exif[piexif.ExifIFD.DateTimeOriginal] = new Date().toISOString(); |
|
|
|
const exifObj = { "0th": zeroth, "Exif": exif, "GPS": gps }; |
|
const exifBytes = piexif.dump(exifObj); |
|
|
|
const canvas = document.createElement("canvas"); |
|
canvas.width = imageEl.naturalWidth; |
|
canvas.height = imageEl.naturalHeight; |
|
const ctx = canvas.getContext("2d"); |
|
ctx.drawImage(imageEl, 0, 0); |
|
const dataURL = canvas.toDataURL("image/jpeg"); |
|
const withExif = piexif.insert(exifBytes, dataURL); |
|
|
|
const a = document.createElement("a"); |
|
a.href = withExif; |
|
a.download = `lcm_txt_2_img${Date.now()}.png`; |
|
a.click(); |
|
} catch (err) { |
|
console.log(err); |
|
} |
|
} |
|
|
|
|
|
const lcmLive = LCMLive(videoEl, imageEl, seedEl, promptEl, guidanceEl, strengthEl); |
|
startBtn.addEventListener("click", async () => { |
|
try { |
|
startBtn.disabled = true; |
|
snapBtn.disabled = false; |
|
const res = await lcmLive.start(); |
|
startBtn.disabled = false; |
|
if (res.status === "timeout") |
|
toggleMessage("success") |
|
} catch (err) { |
|
console.log(err); |
|
toggleMessage("error") |
|
startBtn.disabled = false; |
|
} |
|
}); |
|
stopBtn.addEventListener("click", () => { |
|
lcmLive.stop(); |
|
}); |
|
window.addEventListener("beforeunload", () => { |
|
lcmLive.stop(); |
|
}); |
|
snapBtn.addEventListener("click", snapImage); |
|
setInterval(() => |
|
fetch("/queue_size") |
|
.then((res) => res.json()) |
|
.then((data) => { |
|
queueSizeEl.innerText = data.queue_size; |
|
}) |
|
.catch((err) => { |
|
console.log(err); |
|
}) |
|
, 5000); |
|
</script> |
|
</head> |
|
|
|
<body> |
|
<div class="fixed right-2 top-2 p-4 font-bold text-sm rounded-lg max-w-xs text-center" id="error"> |
|
</div> |
|
<main class="container mx-auto px-4 py-4 max-w-4xl flex flex-col gap-4"> |
|
<article class="text-center max-w-xl mx-auto"> |
|
<h1 class="text-3xl font-bold">Real-Time Latent Consistency Model</h1> |
|
<h2 class="text-2xl font-bold mb-4">Image to Image</h2> |
|
<p class="text-sm"> |
|
This demo showcases |
|
<a href="https://huggingface.co/SimianLuo/LCM_Dreamshaper_v7" target="_blank" |
|
class="text-blue-500 underline hover:no-underline">LCM</a> Image to Image pipeline |
|
using |
|
<a href="https://github.com/huggingface/diffusers/tree/main/examples/community#latent-consistency-pipeline" |
|
target="_blank" class="text-blue-500 underline hover:no-underline">Diffusers</a> with a MJPEG |
|
stream server. |
|
</p> |
|
<p class="text-sm"> |
|
There are <span id="queue_size" class="font-bold">0</span> user(s) sharing the same GPU, affecting |
|
real-time performance. Maximum queue size is 4. <a |
|
href="https://huggingface.co/spaces/radames/Real-Time-Latent-Consistency-Model?duplicate=true" |
|
target="_blank" class="text-blue-500 underline hover:no-underline">Duplicate</a> and run it on your |
|
own GPU. |
|
</p> |
|
</article> |
|
<div> |
|
<h2 class="font-medium">Prompt</h2> |
|
<p class="text-sm text-gray-500"> |
|
Change the prompt to generate different images, accepts <a |
|
href="https://github.com/damian0815/compel/blob/main/doc/syntax.md" target="_blank" |
|
class="text-blue-500 underline hover:no-underline">Compel</a> syntax. |
|
</p> |
|
<div class="flex text-normal px-1 py-1 border border-gray-700 rounded-md items-center"> |
|
<textarea type="text" id="prompt" class="font-light w-full px-3 py-2 mx-1 outline-none" |
|
title="Prompt, this is an example, feel free to modify" |
|
placeholder="Add your prompt here...">Portrait of The Terminator with , glare pose, detailed, intricate, full of colour, cinematic lighting, trending on artstation, 8k, hyperrealistic, focused, extreme details, unreal engine 5, cinematic, masterpiece</textarea> |
|
</div> |
|
|
|
</div> |
|
<div class=""> |
|
<details> |
|
<summary class="font-medium cursor-pointer">Advanced Options</summary> |
|
<div class="grid grid-cols-3 max-w-md items-center gap-3 py-3"> |
|
<label class="text-sm font-medium" for="guidance-scale">Guidance Scale |
|
</label> |
|
<input type="range" id="guidance-scale" name="guidance-scale" min="1" max="30" step="0.001" |
|
value="8.0" oninput="this.nextElementSibling.value = Number(this.value).toFixed(2)"> |
|
<output class="text-xs w-[50px] text-center font-light px-1 py-1 border border-gray-700 rounded-md"> |
|
8.0</output> |
|
<label class="text-sm font-medium" for="strength">Strength</label> |
|
<input type="range" id="strength" name="strength" min="0.20" max="1" step="0.001" value="0.50" |
|
oninput="this.nextElementSibling.value = Number(this.value).toFixed(2)"> |
|
<output class="text-xs w-[50px] text-center font-light px-1 py-1 border border-gray-700 rounded-md"> |
|
0.5</output> |
|
<label class="text-sm font-medium" for="seed">Seed</label> |
|
<input type="number" id="seed" name="seed" value="299792458" |
|
class="font-light border border-gray-700 text-right rounded-md p-2"> |
|
<button |
|
onclick="document.querySelector('#seed').value = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER)" |
|
class="bg-gray-700 hover:bg-gray-800 text-white font-normal py-1 w-[50px] rounded disabled:bg-gray-300 disabled:cursor-not-allowed text-sm"> |
|
Rand |
|
</button> |
|
</div> |
|
</details> |
|
</div> |
|
<div class="flex gap-3"> |
|
<button id="start" |
|
class="bg-gray-700 hover:bg-gray-800 text-white font-normal p-2 rounded disabled:bg-gray-300 disabled:cursor-not-allowed"> |
|
Start |
|
</button> |
|
<button id="stop" |
|
class="bg-gray-700 hover:bg-gray-800 text-white font-normal p-2 rounded disabled:bg-gray-300 disabled:cursor-not-allowed"> |
|
Stop |
|
</button> |
|
<button id="snap" disabled |
|
class="bg-gray-700 hover:bg-gray-800 text-white font-normal p-2 rounded disabled:bg-gray-300 disabled:cursor-not-allowed ml-auto"> |
|
Snapshot |
|
</button> |
|
</div> |
|
<div class="relative rounded-lg border border-slate-300 overflow-hidden"> |
|
<img id="player" class="w-full aspect-square rounded-lg " |
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="> |
|
<div class="absolute top-0 left-0 w-1/4 aspect-square"> |
|
<video id="webcam" class="w-full aspect-square relative z-10 object-cover" playsinline autoplay muted loop></video> |
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 448" width="100" |
|
class="w-full p-4 absolute top-0 opacity-20 z-0"> |
|
<path fill="currentColor" |
|
d="M224 256a128 128 0 1 0 0-256 128 128 0 1 0 0 256zm-45.7 48A178.3 178.3 0 0 0 0 482.3 29.7 29.7 0 0 0 29.7 512h388.6a29.7 29.7 0 0 0 29.7-29.7c0-98.5-79.8-178.3-178.3-178.3h-91.4z" /> |
|
</svg> |
|
</div> |
|
</div> |
|
</main> |
|
</body> |
|
|
|
</html> |
