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