Spaces:
Running
Running
| |
<html> | |
<head> | |
<title>HuggingFace.API.Model.Chain.Childrens.Bedtime.Stories.Generator</title> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta description="HuggingFace.API.Model.Chain.Childrens.Bedtime.Stories.Generator"> | |
<meta author="JoPmt aka Wes"> | |
</head> | |
<body style="height:100%;width:100%;text-align:center;background-color:#000000;color:#FFA500;background-position:center;background-repeat:repeat;background-size:contain;"> | |
<h1 style="padding:4%,4%,4%,4%;">HuggingFace Children's Bedtime Story Generator?</h1> | |
<h6>StabilityAI OpenJourney Runwayml Stable-Diffusion AI Models API Chaining text-to-image,text-to-text 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; 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 Content</button> | |
</form> | |
<div style="padding:10%;;width:80%;text-align:center;horizontal-align:center;items-align:center;align-items:center;justify-content:center;font-size:1.5em;" 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 form = document.querySelector('form'); | |
var responseContainer = document.querySelector('#response-container'); | |
var imgContainer = document.querySelector('#image-container'); | |
//var image = document.querySelector('#fooy'); | |
var hldr; | |
var meema = ""; | |
var allumettes = []; | |
var HF_API; | |
imgContainer.addEventListener('touchstart', function (event) { | |
if (event.target && event.target.matches("img")) { | |
document.body.style.backgroundImage = "url('" + event.target.src + "')"; | |
} | |
}); | |
async function stabilitytwoone(){ | |
try { | |
var anputText = ''+allumettes[0]+' ' + 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: "In Cinematographic Cartoon style 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); | |
document.body.style.backgroundImage = "url('" + vat.querySelector('img').src + "')"; | |
}).catch((erran) => { stabilitytwoone(); }); | |
} catch(errar){ responseContainer.innerHTML += "outerstabilitycatched: " +errar+ ""; }; | |
}; | |
async function pmpthero(){ | |
try { | |
var bnputText = ''+allumettes[1]+' ' + 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: "In Cinematographic Disney 3D Cartoon style 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); | |
document.body.style.backgroundImage = "url('" + vbt.querySelector('img').src + "')"; | |
}).catch((errbn) => { pmpthero(); }); | |
} catch(errbr){ responseContainer.innerHTML += "outercatched: " +errbr+ ""; }; | |
}; | |
async function ruwayonefive(){ | |
try { | |
var cnputText = ''+allumettes[2]+' ' + 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: "In Cinematographic Disney 3D Cartoon style 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); | |
document.body.style.backgroundImage = "url('" + vct.querySelector('img').src + "')"; | |
}).catch((errpn) => { ruwayonefive(); }); | |
} catch(errdr){ responseContainer.innerHTML += "outercatched: " +errdr+ ""; }; | |
}; | |
async function vjdj(){ | |
try { | |
var jnputText = document.querySelector('#input-text').value; | |
var jpiUrl = 'https://ramv-chatrobo-ii.hf.space/run/predict'; | |
var jeaders = new Headers(); | |
jeaders.append('Content-Type', 'application/json'); | |
var jody = JSON.stringify({ data: ["in 67 words or less, write a short childrens bedtime story about " + jnputText + ". The story: ",], options: { wait_for_model: true } }); | |
var jequestOptions = { | |
method: 'POST', | |
headers: jeaders, | |
body: jody, | |
responseType: "json", | |
redirect: 'follow' | |
}; | |
var jesponse = await fetch(jpiUrl, jequestOptions); | |
var jata = await jesponse.json(); | |
var vjzt = document.createElement('center'); | |
var vjt = document.createElement('p'); | |
vjt.style.setProperty("border","solid 1px"); | |
vjt.style.setProperty("color","#FFA500"); | |
vjt.style.setProperty("background-color", "#00000080"); | |
var seema = "" + jata.data[0] + ""; | |
var gleema = "" + seema.replace(/Q\: /g, '') + ""; | |
meema = "" + gleema.replace(/A\: /g, '') + ""; | |
vjt.innerHTML += "" + meema + ""; | |
var fluke = meema.match(/[^\.!\?]+[\.!\?]+/g); | |
allumettes = [...fluke]; | |
vjzt.appendChild(vjt); | |
responseContainer.insertBefore(vjzt, responseContainer.firstChild); | |
} catch(errcr){ await vjdj(); }; | |
}; | |
try { | |
form.addEventListener('submit', async (event) => { | |
event.preventDefault(); | |
if (HF_API == null){ | |
HF_API = prompt("Enter your HF_API key"); | |
} | |
await vjdj(); | |
stabilitytwoone(); | |
pmpthero(); | |
ruwayonefive(); | |
document.querySelector('#input-text').value = ''; | |
}); | |
} catch(errwr){ responseContainer.innerHTML += "outermaincatched: " +errwr+ ""; }; | |
</script> | |
</body> | |
</html> |