Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>HuggingFace.API.Model.Stable.Diffusion.To.Canvas.Video</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="HuggingFace.API.Model.Chain.Childrens.Bedtime.Stories.Generator"> | |
| <meta name="author" content="JoPmt aka Wes"> | |
| <style> | |
| #cloak { | |
| top:0; | |
| left:0; | |
| width: 100%; | |
| height: 100%; | |
| display:none; | |
| position: absolute; | |
| z-index: 9000; | |
| background-color: #00000080; | |
| } | |
| </style> | |
| </head> | |
| <body style="height:100%;width:100%;text-align:center;justify-content:center;background-color:#000000;color:#FFA500;background-position:center;background-repeat:repeat;background-size:contain;"> | |
| <h1 style="padding:4%,4%,4%,4%;">HuggingFace text-to-Stable-Diffusion-to-canvas video?</h1> | |
| <h6>StabilityAI OpenJourney Runwayml Stable-Diffusion AI Models API text-to-image,text-to-video Demo</h6> | |
| <form style="border: solid 1px; border-color: #FFA500;"> | |
| <label for="input-text">Huggingface.Model.Stable-Diffusion.Demo.Interface:</label> | |
| <br> | |
| <textarea style="text-align:center;justify-content:center;vertical-align:50%;background-color:#00000070; color: white; border: solid 1px; border-color: #FFA500;" id="input-text" name="input-text" rows="5" cols="40" required></textarea> | |
| <br> | |
| <button type="submit">Generate Video</button> | |
| </form> | |
| <video style="height:64%;width:36%;display:none;" id="hoowdy" src="" controls="true"></video> | |
| <center><canvas style="display:block;justify-content:center;" id="javas"></canvas></center> | |
| <div style="padding:10%;;width:80%;text-align:center;horizontal-align:center;items-align:center;align-items:center;justify-content:center;" id="response-container"></div> | |
| <div style="text-align:center; display:flex;items-align:center;align-items:center;justify-content:center; overflow:auto;" width="80%" height="30%" id="image-container"></div> | |
| <script> | |
| var HF_API; | |
| var javas = document.querySelector('#javas'); | |
| javas.height = window.innerHeight*65/100; | |
| javas.width = window.innerWidth*65/100; | |
| var c = javas.getContext('2d'); | |
| javas.style.display = 'none'; | |
| var form = document.querySelector('form'); | |
| var responseContainer = document.querySelector('#response-container'); | |
| var imgContainer = document.querySelector('#image-container'); | |
| var hldr; | |
| var meema = ""; | |
| var allumettes = []; | |
| var bigboy = []; | |
| var clown = 0; | |
| var instant = Date.now(); | |
| var startTime=Date.now(); | |
| var cycleTime=1000*1; | |
| var elapsed = 0; | |
| var elapsedCycle=0; | |
| var elapsedCyclePercent=0; | |
| var moment = 0; | |
| var frame = 0; | |
| var jnstant = Date.now(); | |
| var jtartTime=Date.now(); | |
| var jycleTime=1000*1; | |
| var jlapsed = 0; | |
| var jlapsedCycle=0; | |
| var jlapsedCyclePercent=0; | |
| var joment = 0; | |
| var jrame = 0; | |
| var arrow = 0; | |
| var tarrot = 0; | |
| var blanket = document.createElement('canvas'); | |
| var deus; | |
| var du; | |
| var knot = 'false'; | |
| var vroom = 0; | |
| var petit = 0; | |
| var clock = 0; | |
| var ti = 0; | |
| var donuty; | |
| var toik = 0; | |
| var petot = 0; | |
| imgContainer.addEventListener('touchstart', function (event) { | |
| if (event.target && event.target.matches("img")) { | |
| document.body.style.backgroundImage = "url('" + event.target.src + "')"; | |
| } | |
| }); | |
| function decep(){ | |
| blanket.setAttribute('id','cloak'); | |
| blanket.width = window.innerWidth; | |
| blanket.height = window.innerHeight; | |
| document.body.appendChild(blanket); | |
| deus = document.querySelector('#cloak'); | |
| du = deus.getContext('2d'); | |
| }; | |
| async function getmages(){ | |
| async function stabilitytwoone(){ | |
| try { | |
| var anputText = document.querySelector('#input-text').value; | |
| var apiUrl = 'https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-2-1'; | |
| var aeaders = new Headers(); | |
| aeaders.append('Authorization', 'Bearer ' + HF_API + ''); | |
| aeaders.append('Accept', 'image/jpeg'), | |
| aeaders.append('Content-Type', 'application/json'); | |
| var aody = JSON.stringify({ inputs: "cinematographic style, 4k, hi-res, dslr style, high-quality, render: " + anputText + " " + Date.now() + "", options: { wait_for_model: true } }); | |
| var aequestOptions = { | |
| method: 'POST', | |
| headers: aeaders, | |
| body: aody, | |
| responseType: "blob", | |
| redirect: 'follow', | |
| }; | |
| var aesponse = await fetch(apiUrl, aequestOptions).then((aesponse) => aesponse.blob()).then((alob) => { | |
| var abjectURL = URL.createObjectURL(alob); | |
| var vat = document.createElement('p'); | |
| vat.style.setProperty("border","solid 1px"); | |
| vat.style.setProperty("color","#FFA500"); | |
| vat.style.setProperty("width","18%"); | |
| vat.style.setProperty("display","block"); | |
| vat.style.setProperty("background-color", "#00000080"); | |
| vat.innerHTML = '<img style="object-fit:contain;" width="100%" src="' + abjectURL + '" type="image/jpeg"></img>'; | |
| imgContainer.insertBefore(vat, imgContainer.firstChild); | |
| vroom += 3; | |
| }).catch((erran) => { stabilitytwoone(); }); | |
| } catch(errar){ responseContainer.innerHTML += "outerstabilitycatched: " +errar+ ""; }; | |
| }; | |
| async function pmpthero(){ | |
| try { | |
| var bnputText = document.querySelector('#input-text').value; | |
| var bpiUrl = 'https://api-inference.huggingface.co/models/prompthero/openjourney'; | |
| var beaders = new Headers(); | |
| beaders.append('Authorization', 'Bearer ' + HF_API + ''); | |
| beaders.append('Accept', 'image/jpeg'), | |
| beaders.append('Content-Type', 'application/json'); | |
| var body = JSON.stringify({ inputs: "cinematographic style, 4k, hi-res, dslr style, high-quality, render: " + bnputText + " " + Date.now() + "", options: { wait_for_model: true, } }); | |
| var bequestOptions = { | |
| method: 'POST', | |
| headers: beaders, | |
| body: body, | |
| responseType: "blob", | |
| redirect: 'follow', | |
| }; | |
| var besponse = await fetch(bpiUrl, bequestOptions).then((besponse) => besponse.blob()).then((blob) => { | |
| var bbjectURL = URL.createObjectURL(blob); | |
| var vbt = document.createElement('p'); | |
| vbt.style.setProperty("border","solid 1px"); | |
| vbt.style.setProperty("width","18%"); | |
| vbt.style.setProperty("display","block"); | |
| vbt.style.setProperty("color","#FFA500"); | |
| vbt.style.setProperty("background-color", "#00000080"); | |
| vbt.innerHTML += '<img style="object-fit:contain;" width="100%" src="' + bbjectURL + '" type="image/jpeg"></img>'; | |
| imgContainer.insertBefore(vbt, imgContainer.firstChild); | |
| vroom += 3; | |
| }).catch((errbn) => { pmpthero(); }); | |
| } catch(errbr){ responseContainer.innerHTML += "outercatched: " +errbr+ ""; }; | |
| }; | |
| async function ruwayonefive(){ | |
| try { | |
| var cnputText = document.querySelector('#input-text').value; | |
| var cpiUrl = 'https://api-inference.huggingface.co/models/runwayml/stable-diffusion-v1-5'; | |
| var ceaders = new Headers(); | |
| ceaders.append('Authorization', 'Bearer ' + HF_API + ''); | |
| ceaders.append('Accept', 'image/jpeg'), | |
| ceaders.append('Content-Type', 'application/json'); | |
| var cody = JSON.stringify({ inputs: "cinematographic style, 4k, hi-res, dslr style, high-quality, render: " + cnputText + " " + Date.now() + "", options: { wait_for_model: true } }); | |
| var cequestOptions = { | |
| method: 'POST', | |
| headers: ceaders, | |
| body: cody, | |
| responseType: "blob", | |
| redirect: 'follow', | |
| }; | |
| var cesponse = await fetch(cpiUrl, cequestOptions).then((cesponse) => cesponse.blob()).then((clob) => { | |
| var cbjectURL = URL.createObjectURL(clob); | |
| var vct = document.createElement('p'); | |
| vct.style.setProperty("border","solid 1px"); | |
| vct.style.setProperty("width","18%"); | |
| vct.style.setProperty("display","block"); | |
| vct.style.setProperty("color","#FFA500"); | |
| vct.style.setProperty("background-color", "#00000080"); | |
| vct.innerHTML += '<img style="object-fit:contain;" width="100%" src="' + cbjectURL + '" type="image/jpeg"></img>'; | |
| imgContainer.insertBefore(vct, imgContainer.firstChild); | |
| vroom += 3; | |
| }).catch((errpn) => { ruwayonefive(); }); | |
| } catch(errdr){ responseContainer.innerHTML += "outercatched: " +errdr+ ""; }; | |
| }; | |
| try { | |
| await stabilitytwoone(); | |
| await pmpthero(); | |
| await ruwayonefive(); | |
| }catch(egnor){getmages();}; | |
| tarrot++; | |
| }; | |
| function drawFrames() { | |
| c.font = "16px Arial"; | |
| c.fillStyle = "#FFA500"; | |
| c.fillText("Frame: "+frame, 30, 180); | |
| c.fill(); | |
| }; | |
| function drawMomentos() { | |
| c.font = "16px Arial"; | |
| c.fillStyle = "#FFA500"; | |
| c.fillText("Elapsed: "+elapsed+"ms", 30, 35); | |
| c.fill(); | |
| }; | |
| function drawFps() { | |
| c.font = "16px Arial"; | |
| c.fillStyle = "#FFA500"; | |
| c.fillText("Fps: "+elapsed/frame, 30, 210); | |
| c.fill(); | |
| }; | |
| function drawJrames() { | |
| du.font = "16px Arial"; | |
| du.fillStyle = "#FFA500"; | |
| du.fillText("Frame: "+jrame, (deus.width/2)-150, (deus.height/2)+20); | |
| du.fill(); | |
| }; | |
| function drawJomentos() { | |
| du.font = "16px Arial"; | |
| du.fillStyle = "#FFA500"; | |
| du.fillText("Elapsed: "+jlapsed+"ms", (deus.width/2)-150, (deus.height/2)+40); | |
| du.fill(); | |
| }; | |
| function drawJps() { | |
| du.font = "16px Arial"; | |
| du.fillStyle = "#FFA500"; | |
| du.fillText("fps: "+jlapsed/jrame, (deus.width/2)-150, (deus.height/2)+60); | |
| du.fill(); | |
| }; | |
| function jraw(){ | |
| jrame += 1; | |
| jlapsed=Date.now()-jtartTime; | |
| jlapsedCycle=elapsed%cycleTime; | |
| jlapsedCyclePercent=jlapsedCycle/jycleTime; | |
| joment += jlapsed; | |
| du.clearRect(0, 0, deus.width, deus.height); | |
| du.font = "50px Arial"; | |
| du.fillStyle = "#FFA500"; | |
| du.fillText("Building..."+vroom+"%", (deus.width/2)-150, (deus.height/2)); | |
| du.fill(); | |
| drawJomentos(); | |
| }; | |
| function draw(){ | |
| frame += 1; | |
| elapsed=Date.now()-startTime; | |
| elapsedCycle=elapsed%cycleTime; | |
| elapsedCyclePercent=elapsedCycle/cycleTime; | |
| moment += elapsed; | |
| if (frame < clock){ | |
| if (donuty[ti].complete && donuty[ti].naturalHeight !== 0){ | |
| c.clearRect(0, 0, javas.width, javas.height); | |
| c.drawImage(donuty[ti], 0, 0, javas.width, javas.height); | |
| c.font = "16px Arial"; | |
| c.fillStyle = "#FFA500"; | |
| c.fill(); | |
| drawMomentos(); | |
| window.requestAnimationFrame(draw); | |
| }else{ ti++; window.requestAnimationFrame(draw);}; | |
| } | |
| if (frame == clock){ | |
| clock += 7300; | |
| if (ti < donuty.length-1){ | |
| ti++; | |
| } | |
| if (toik == 3){ | |
| toik = 0; | |
| petot += 1; | |
| } | |
| toik++; | |
| } | |
| }; | |
| joob = setInterval(function(){ | |
| jraw(); | |
| }, 32/1000); | |
| noob = setInterval(function(){ | |
| draw(); | |
| }, 32/1000); | |
| tinny = setInterval(function(){ | |
| arrow++; | |
| }, 30000/bigboy.length); | |
| winny = setInterval(function(){ | |
| petit++; | |
| }, 30000/allumettes.length); | |
| function recordCanvas(canvas, videoLength) { | |
| const recordedChunks = []; | |
| const mediaRecorder = new MediaRecorder( | |
| canvas.captureStream(32), {mimeType: 'video/webm; codecs=vp8'}); | |
| mediaRecorder.ondataavailable = event => recordedChunks.push(event.data); | |
| mediaRecorder.onstop = () => { | |
| const url = URL.createObjectURL( | |
| new Blob(recordedChunks, {type: "video/webm"})); | |
| const anchor = document.createElement("a"); | |
| anchor.href = url; | |
| anchor.download = "video.webm"; | |
| anchor.click(); | |
| //window.URL.revokeObjectURL(url); | |
| document.querySelector('#javas').style.display = 'none'; | |
| document.querySelector('#cloak').style.display = 'none'; | |
| imgContainer.innerHTML = ''; | |
| vroom = 0; | |
| document.querySelector('#input-text').value = ''; | |
| ti = 0; | |
| elapsed = 0; | |
| frame = 0; | |
| clock = 0; | |
| } | |
| mediaRecorder.start(); | |
| vroom += 5; | |
| window.setTimeout(() => {mediaRecorder.stop();vroom=vroom+(100-vroom);}, 30000); | |
| }; | |
| function jigo(){ | |
| du.clearRect(0, 0, deus.width, deus.height); | |
| requestAnimationFrame(joob); | |
| }; | |
| try { | |
| form.addEventListener('submit', async (event) => { | |
| event.preventDefault(); | |
| if (HF_API == null){ | |
| HF_API = prompt("Enter your HF API key"); | |
| } | |
| decep(); | |
| deus.style.display = 'block'; | |
| for (var tapdance = 0; tapdance < 6; tapdance++){ | |
| await getmages(); | |
| if (tapdance == 5){ | |
| vroom += 5; | |
| javas.style.display = 'block'; | |
| donuty = document.getElementsByTagName('img'); | |
| vroom += 10; | |
| clock = frame + 7300; | |
| var fowl = donuty.length*6000; | |
| recordCanvas(javas, 30000); | |
| window.requestAnimationFrame(noob); | |
| } | |
| }; | |
| jigo(); | |
| }); | |
| } catch(errwr){ responseContainer.innerHTML += "outermaincatched: " +errwr+ ""; }; | |
| </script> | |
| </body> | |
| </html> | |