Hugging Face's logo

Spaces:
JoPmt
/
Short_Bedtime_Stories
Running

App Files Community
JoPmt commited on
Commit
6480da6
•
1 Parent(s): 780c02a

Upload 0000soliloquiofastorygenai.html

Browse files
Files changed (1) hide show
  1. 0000soliloquiofastorygenai.html +183 -0
0000soliloquiofastorygenai.html ADDED
@@ -0,0 +1,183 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>HuggingFace.API.Model.Chain.Childrens.Bedtime.Stories.Generator</title>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <meta description="HuggingFace.API.Model.Chain.Childrens.Bedtime.Stories.Generator">
8
+ <meta author="JoPmt aka Wes">
9
+ </head>
10
+ <body style="height:100%;width:100%;text-align:center;background-color:#000000;color:#FFA500;background-position:center;background-repeat:repeat;background-size:contain;">
11
+ <h1 style="padding:4%,4%,4%,4%;">HuggingFace Children's Bedtime Story Generator?</h1>
12
+ <h6>StabilityAI OpenJourney Runwayml Stable-Diffusion AI Models API Chaining text-to-image,text-to-text Demo</h6>
13
+ <form style="border: solid 1px; border-color: #FFA500;">
14
+ <label for="input-text">Huggingface.Model.Chain.Demo.Interface:</label>
15
+ <br>
16
+ <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>
17
+ <br>
18
+ <button type="submit">Generate Content</button>
19
+ </form>
20
+ <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>
21
+ <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>
22
+ <script>
23
+ var form = document.querySelector('form');
24
+ var responseContainer = document.querySelector('#response-container');
25
+ var imgContainer = document.querySelector('#image-container');
26
+ //var image = document.querySelector('#fooy');
27
+ var hldr;
28
+ var meema = "";
29
+ var allumettes = [];
30
+ var HF_API;
31
+
32
+ imgContainer.addEventListener('touchstart', function (event) {
33
+ if (event.target && event.target.matches("img")) {
34
+ document.body.style.backgroundImage = "url('" + event.target.src + "')";
35
+ }
36
+ });
37
+
38
+ async function stabilitytwoone(){
39
+ try {
40
+ var anputText = ''+allumettes[0]+' ' + document.querySelector('#input-text').value + '';
41
+ var apiUrl = 'https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-2-1';
42
+ var aeaders = new Headers();
43
+ aeaders.append('Authorization', 'Bearer ' + HF_API + '');
44
+ aeaders.append('Accept', 'image/jpeg'),
45
+ aeaders.append('Content-Type', 'application/json');
46
+ var aody = JSON.stringify({ inputs: "In Cinematographic Cartoon style render: " + anputText + " " + Date.now() + "", options: { wait_for_model: true } });
47
+ var aequestOptions = {
48
+ method: 'POST',
49
+ headers: aeaders,
50
+ body: aody,
51
+ responseType: "blob",
52
+ redirect: 'follow',
53
+ };
54
+ var aesponse = await fetch(apiUrl, aequestOptions).then((aesponse) => aesponse.blob()).then((alob) => {
55
+ var abjectURL = URL.createObjectURL(alob);
56
+ var vat = document.createElement('p');
57
+ vat.style.setProperty("border","solid 1px");
58
+ vat.style.setProperty("color","#FFA500");
59
+ vat.style.setProperty("width","18%");
60
+ vat.style.setProperty("display","block");
61
+ vat.style.setProperty("background-color", "#00000080");
62
+ vat.innerHTML = '<img style="object-fit:contain;" width="100%" src="' + abjectURL + '" type="image/jpeg"></img>';
63
+ imgContainer.insertBefore(vat, imgContainer.firstChild);
64
+ document.body.style.backgroundImage = "url('" + vat.querySelector('img').src + "')";
65
+ }).catch((erran) => { stabilitytwoone(); });
66
+ } catch(errar){ responseContainer.innerHTML += "outerstabilitycatched: " +errar+ ""; };
67
+
68
+ };
69
+
70
+ async function pmpthero(){
71
+ try {
72
+ var bnputText = ''+allumettes[1]+' ' + document.querySelector('#input-text').value + '';
73
+ var bpiUrl = 'https://api-inference.huggingface.co/models/prompthero/openjourney';
74
+ var beaders = new Headers();
75
+ beaders.append('Authorization', 'Bearer ' + HF_API + '');
76
+ beaders.append('Accept', 'image/jpeg'),
77
+ beaders.append('Content-Type', 'application/json');
78
+ var body = JSON.stringify({ inputs: "In Cinematographic Disney 3D Cartoon style render: " + bnputText + " " + Date.now() + "", options: { wait_for_model: true, } });
79
+ var bequestOptions = {
80
+ method: 'POST',
81
+ headers: beaders,
82
+ body: body,
83
+ responseType: "blob",
84
+ redirect: 'follow',
85
+ };
86
+ var besponse = await fetch(bpiUrl, bequestOptions).then((besponse) => besponse.blob()).then((blob) => {
87
+ var bbjectURL = URL.createObjectURL(blob);
88
+ var vbt = document.createElement('p');
89
+ vbt.style.setProperty("border","solid 1px");
90
+ vbt.style.setProperty("width","18%");
91
+ vbt.style.setProperty("display","block");
92
+ vbt.style.setProperty("color","#FFA500");
93
+ vbt.style.setProperty("background-color", "#00000080");
94
+ vbt.innerHTML += '<img style="object-fit:contain;" width="100%" src="' + bbjectURL + '" type="image/jpeg"></img>';
95
+ imgContainer.insertBefore(vbt, imgContainer.firstChild);
96
+ document.body.style.backgroundImage = "url('" + vbt.querySelector('img').src + "')";
97
+ }).catch((errbn) => { pmpthero(); });
98
+
99
+ } catch(errbr){ responseContainer.innerHTML += "outercatched: " +errbr+ ""; };
100
+
101
+ };
102
+
103
+ async function ruwayonefive(){
104
+ try {
105
+ var cnputText = ''+allumettes[2]+' ' + document.querySelector('#input-text').value + '';
106
+ var cpiUrl = 'https://api-inference.huggingface.co/models/runwayml/stable-diffusion-v1-5';
107
+ var ceaders = new Headers();
108
+ ceaders.append('Authorization', 'Bearer ' + HF_API + '');
109
+ ceaders.append('Accept', 'image/jpeg'),
110
+ ceaders.append('Content-Type', 'application/json');
111
+ var cody = JSON.stringify({ inputs: "In Cinematographic Disney 3D Cartoon style render: " + cnputText + " " + Date.now() + "", options: { wait_for_model: true } });
112
+
113
+ var cequestOptions = {
114
+ method: 'POST',
115
+ headers: ceaders,
116
+ body: cody,
117
+ responseType: "blob",
118
+ redirect: 'follow',
119
+ };
120
+ var cesponse = await fetch(cpiUrl, cequestOptions).then((cesponse) => cesponse.blob()).then((clob) => {
121
+ var cbjectURL = URL.createObjectURL(clob);
122
+ var vct = document.createElement('p');
123
+ vct.style.setProperty("border","solid 1px");
124
+ vct.style.setProperty("width","18%");
125
+ vct.style.setProperty("display","block");
126
+ vct.style.setProperty("color","#FFA500");
127
+ vct.style.setProperty("background-color", "#00000080");
128
+ vct.innerHTML += '<img style="object-fit:contain;" width="100%" src="' + cbjectURL + '" type="image/jpeg"></img>';
129
+ imgContainer.insertBefore(vct, imgContainer.firstChild);
130
+ document.body.style.backgroundImage = "url('" + vct.querySelector('img').src + "')";
131
+ }).catch((errpn) => { ruwayonefive(); });
132
+ } catch(errdr){ responseContainer.innerHTML += "outercatched: " +errdr+ ""; };
133
+ };
134
+
135
+ async function vjdj(){
136
+ try {
137
+ var jnputText = document.querySelector('#input-text').value;
138
+ var jpiUrl = 'https://ramv-chatrobo-ii.hf.space/run/predict';
139
+ var jeaders = new Headers();
140
+ jeaders.append('Content-Type', 'application/json');
141
+ 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 } });
142
+ var jequestOptions = {
143
+ method: 'POST',
144
+ headers: jeaders,
145
+ body: jody,
146
+ responseType: "json",
147
+ redirect: 'follow'
148
+ };
149
+ var jesponse = await fetch(jpiUrl, jequestOptions);
150
+ var jata = await jesponse.json();
151
+ var vjzt = document.createElement('center');
152
+ var vjt = document.createElement('p');
153
+ vjt.style.setProperty("border","solid 1px");
154
+ vjt.style.setProperty("color","#FFA500");
155
+ vjt.style.setProperty("background-color", "#00000080");
156
+ var seema = "" + jata.data[0] + "";
157
+ var gleema = "" + seema.replace(/Q\: /g, '') + "";
158
+ meema = "" + gleema.replace(/A\: /g, '') + "";
159
+ vjt.innerHTML += "" + meema + "";
160
+ var fluke = meema.match(/[^\.!\?]+[\.!\?]+/g);
161
+ allumettes = [...fluke];
162
+ vjzt.appendChild(vjt);
163
+ responseContainer.insertBefore(vjzt, responseContainer.firstChild);
164
+ } catch(errcr){ await vjdj(); };
165
+ };
166
+
167
+ try {
168
+ form.addEventListener('submit', async (event) => {
169
+ event.preventDefault();
170
+ if (HF_API == null){
171
+ HF_API = prompt("Enter your HF_API key");
172
+ }
173
+ await vjdj();
174
+ stabilitytwoone();
175
+ pmpthero();
176
+ ruwayonefive();
177
+ document.querySelector('#input-text').value = '';
178
+ });
179
+ } catch(errwr){ responseContainer.innerHTML += "outermaincatched: " +errwr+ ""; };
180
+
181
+ </script>
182
+ </body>
183
+ </html>