Spaces:

JoPmt
/

Txt-to-video

Running

App Files Files Community

JoPmt commited on Aug 9, 2023

Commit

512ec5e

1 Parent(s): 7a3a3a2

Upload index23.html

Browse files

Files changed (1) hide show

index23.html +364 -0

index23.html ADDED Viewed

	@@ -0,0 +1,364 @@

+<!DOCTYPE html>
+<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">
+<link rel="stylesheet" href="style.css">
+<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 Chaining text-to-image,text-to-video Demo</h6>
+<form style="border: solid 1px; border-color: #FFA500;">
+<label for="input-text">Huggingface.Model.Chain.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 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 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');
+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 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');
+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 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');
+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();
+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>