Spaces:

JoPmt
/

Txt-to-video

Running

File size: 11,310 Bytes

<!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">
<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>