Hugging Face's logo

Spaces:
HusseinHE
/
Magic
Runtime error

App Files Community
radames commited on
Commit
406a520
•
1 Parent(s): 7cdc8db

dark mode

Browse files
Files changed (2) hide show
  1. img2img/index.html +15 -12
  2. txt2img/index.html +15 -13
img2img/index.html CHANGED
@@ -9,6 +9,11 @@
9
  src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
10
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/piexif.min.js"></script>
11
  <script src="https://cdn.tailwindcss.com"></script>
 
 
 
 
 
12
  <script type="module">
13
  // you can change the size of the input image to 768x768 if you have a powerful GPU
14
  const WIDTH = 512;
@@ -70,7 +75,7 @@
70
 
71
  async function videoTimeUpdateHandler() {
72
  const canvas = new OffscreenCanvas(WIDTH, HEIGHT);
73
- const videoW = webcamVideo.videoWidth;
74
  const videoH = webcamVideo.videoHeight;
75
 
76
  const ctx = canvas.getContext("2d");
@@ -203,7 +208,7 @@
203
  </script>
204
  </head>
205
 
206
- <body>
207
  <div class="fixed right-2 top-2 p-4 font-bold text-sm rounded-lg max-w-xs text-center" id="error">
208
  </div>
209
  <main class="container mx-auto px-4 py-4 max-w-4xl flex flex-col gap-4">
@@ -235,7 +240,7 @@
235
  class="text-blue-500 underline hover:no-underline">Compel</a> syntax.
236
  </p>
237
  <div class="flex text-normal px-1 py-1 border border-gray-700 rounded-md items-center">
238
- <textarea type="text" id="prompt" class="font-light w-full px-3 py-2 mx-1 outline-none"
239
  title="Prompt, this is an example, feel free to modify"
240
  placeholder="Add your prompt here...">Portrait of The Terminator with , glare pose, detailed, intricate, full of colour, cinematic lighting, trending on artstation, 8k, hyperrealistic, focused, extreme details, unreal engine 5, cinematic, masterpiece</textarea>
241
  </div>
@@ -258,26 +263,23 @@
258
  0.5</output>
259
  <label class="text-sm font-medium" for="seed">Seed</label>
260
  <input type="number" id="seed" name="seed" value="299792458"
261
- class="font-light border border-gray-700 text-right rounded-md p-2">
262
  <button
263
  onclick="document.querySelector('#seed').value = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER)"
264
- class="bg-gray-700 hover:bg-gray-800 text-white font-normal py-1 w-[50px] rounded disabled:bg-gray-300 disabled:cursor-not-allowed text-sm">
265
  Rand
266
  </button>
267
  </div>
268
  </details>
269
  </div>
270
  <div class="flex gap-3">
271
- <button id="start"
272
- class="bg-gray-700 hover:bg-gray-800 text-white font-normal p-2 rounded disabled:bg-gray-300 disabled:cursor-not-allowed">
273
  Start
274
  </button>
275
- <button id="stop"
276
- class="bg-gray-700 hover:bg-gray-800 text-white font-normal p-2 rounded disabled:bg-gray-300 disabled:cursor-not-allowed">
277
  Stop
278
  </button>
279
- <button id="snap" disabled
280
- class="bg-gray-700 hover:bg-gray-800 text-white font-normal p-2 rounded disabled:bg-gray-300 disabled:cursor-not-allowed ml-auto">
281
  Snapshot
282
  </button>
283
  </div>
@@ -285,7 +287,8 @@
285
  <img id="player" class="w-full aspect-square rounded-lg "
286
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
287
  <div class="absolute top-0 left-0 w-1/4 aspect-square">
288
- <video id="webcam" class="w-full aspect-square relative z-10 object-cover" playsinline autoplay muted loop></video>
 
289
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 448" width="100"
290
  class="w-full p-4 absolute top-0 opacity-20 z-0">
291
  <path fill="currentColor"
 
9
  src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
10
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/piexif.min.js"></script>
11
  <script src="https://cdn.tailwindcss.com"></script>
12
+ <style type="text/tailwindcss">
13
+ .button {
14
+ @apply bg-gray-700 hover:bg-gray-800 text-white font-normal p-2 rounded disabled:bg-gray-300 dark:disabled:bg-gray-700 disabled:cursor-not-allowed dark:disabled:text-black
15
+ }
16
+ </style>
17
  <script type="module">
18
  // you can change the size of the input image to 768x768 if you have a powerful GPU
19
  const WIDTH = 512;
 
75
 
76
  async function videoTimeUpdateHandler() {
77
  const canvas = new OffscreenCanvas(WIDTH, HEIGHT);
78
+ const videoW = webcamVideo.videoWidth;
79
  const videoH = webcamVideo.videoHeight;
80
 
81
  const ctx = canvas.getContext("2d");
 
208
  </script>
209
  </head>
210
 
211
+ <body class="text-black dark:bg-gray-900 dark:text-white">
212
  <div class="fixed right-2 top-2 p-4 font-bold text-sm rounded-lg max-w-xs text-center" id="error">
213
  </div>
214
  <main class="container mx-auto px-4 py-4 max-w-4xl flex flex-col gap-4">
 
240
  class="text-blue-500 underline hover:no-underline">Compel</a> syntax.
241
  </p>
242
  <div class="flex text-normal px-1 py-1 border border-gray-700 rounded-md items-center">
243
+ <textarea type="text" id="prompt" class="font-light w-full px-3 py-2 mx-1 outline-none dark:text-black"
244
  title="Prompt, this is an example, feel free to modify"
245
  placeholder="Add your prompt here...">Portrait of The Terminator with , glare pose, detailed, intricate, full of colour, cinematic lighting, trending on artstation, 8k, hyperrealistic, focused, extreme details, unreal engine 5, cinematic, masterpiece</textarea>
246
  </div>
 
263
  0.5</output>
264
  <label class="text-sm font-medium" for="seed">Seed</label>
265
  <input type="number" id="seed" name="seed" value="299792458"
266
+ class="font-light border border-gray-700 text-right rounded-md p-2 dark:text-black">
267
  <button
268
  onclick="document.querySelector('#seed').value = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER)"
269
+ class="button">
270
  Rand
271
  </button>
272
  </div>
273
  </details>
274
  </div>
275
  <div class="flex gap-3">
276
+ <button id="start" class="button">
 
277
  Start
278
  </button>
279
+ <button id="stop" class="button">
 
280
  Stop
281
  </button>
282
+ <button id="snap" disabled class="button ml-auto">
 
283
  Snapshot
284
  </button>
285
  </div>
 
287
  <img id="player" class="w-full aspect-square rounded-lg "
288
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
289
  <div class="absolute top-0 left-0 w-1/4 aspect-square">
290
+ <video id="webcam" class="w-full aspect-square relative z-10 object-cover" playsinline autoplay muted
291
+ loop></video>
292
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 448" width="100"
293
  class="w-full p-4 absolute top-0 opacity-20 z-0">
294
  <path fill="currentColor"
txt2img/index.html CHANGED
@@ -9,6 +9,11 @@
9
  src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
10
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/piexif.min.js"></script>
11
  <script src="https://cdn.tailwindcss.com"></script>
 
 
 
 
 
12
  <script type="module">
13
 
14
  const seedEl = document.querySelector("#seed");
@@ -177,9 +182,9 @@
177
  </script>
178
  </head>
179
 
180
- <body>
181
  <div class="fixed right-2 top-2 p-4 font-bold text-sm rounded-lg max-w-xs text-center" id="error">
182
- </div>
183
  <main class="container mx-auto px-4 py-4 max-w-4xl flex flex-col gap-4">
184
  <article class="text-center max-w-xl mx-auto">
185
  <h1 class="text-3xl font-bold">Real-Time Latent Consistency Model</h1>
@@ -203,14 +208,14 @@
203
  </article>
204
  <div>
205
  <h2 class="font-medium">Prompt</h2>
206
- <p class="text-sm text-gray-500">
207
  Start your session and type your prompt here, accepts
208
  <a href="https://github.com/damian0815/compel/blob/main/doc/syntax.md" target="_blank"
209
  class="text-blue-500 underline hover:no-underline">Compel</a> syntax.
210
  </p>
211
  <div class="flex text-normal px-1 py-1 border border-gray-700 rounded-md items-center">
212
- <textarea type="text" id="prompt" class="font-light w-full px-3 py-2 mx-1 outline-none"
213
- title="Start your session and type your prompt here, you can see the result in real-time."
214
  placeholder="Add your prompt here...">Portrait of The Terminator with , glare pose, detailed, intricate, full of colour, cinematic lighting, trending on artstation, 8k, hyperrealistic, focused, extreme details, unreal engine 5, cinematic, masterpiece</textarea>
215
  </div>
216
 
@@ -227,26 +232,23 @@
227
  8.0</output>
228
  <label class="text-sm font-medium" for="seed">Seed</label>
229
  <input type="number" id="seed" name="seed" value="299792458"
230
- class="font-light border border-gray-700 text-right rounded-md p-2">
231
  <button
232
  onclick="document.querySelector('#seed').value = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER); document.querySelector('#seed').dispatchEvent(new Event('input'));"
233
- class="bg-gray-700 hover:bg-gray-800 text-white font-normal py-1 w-[50px] rounded disabled:bg-gray-300 disabled:cursor-not-allowed text-sm">
234
  Rand
235
  </button>
236
  </div>
237
  </details>
238
  </div>
239
  <div class="flex gap-3">
240
- <button id="start"
241
- class="bg-gray-700 hover:bg-gray-800 text-white font-normal p-2 rounded disabled:bg-gray-300 disabled:cursor-not-allowed">
242
  Start
243
  </button>
244
- <button id="stop"
245
- class="bg-gray-700 hover:bg-gray-800 text-white font-normal p-2 rounded disabled:bg-gray-300 disabled:cursor-not-allowed">
246
  Stop
247
  </button>
248
- <button id="snap" disabled
249
- class="bg-gray-700 hover:bg-gray-800 text-white font-normal p-2 rounded disabled:bg-gray-300 disabled:cursor-not-allowed ml-auto">
250
  Snapshot
251
  </button>
252
  </div>
 
9
  src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
10
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/piexif.min.js"></script>
11
  <script src="https://cdn.tailwindcss.com"></script>
12
+ <style type="text/tailwindcss">
13
+ .button {
14
+ @apply bg-gray-700 hover:bg-gray-800 text-white font-normal p-2 rounded disabled:bg-gray-300 dark:disabled:bg-gray-700 disabled:cursor-not-allowed dark:disabled:text-black
15
+ }
16
+ </style>
17
  <script type="module">
18
 
19
  const seedEl = document.querySelector("#seed");
 
182
  </script>
183
  </head>
184
 
185
+ <body class="text-black dark:bg-gray-900 dark:text-white">
186
  <div class="fixed right-2 top-2 p-4 font-bold text-sm rounded-lg max-w-xs text-center" id="error">
187
+ </div>  
188
  <main class="container mx-auto px-4 py-4 max-w-4xl flex flex-col gap-4">
189
  <article class="text-center max-w-xl mx-auto">
190
  <h1 class="text-3xl font-bold">Real-Time Latent Consistency Model</h1>
 
208
  </article>
209
  <div>
210
  <h2 class="font-medium">Prompt</h2>
211
+ <p class="text-sm text-gray-500 dark:text-gray-400">
212
  Start your session and type your prompt here, accepts
213
  <a href="https://github.com/damian0815/compel/blob/main/doc/syntax.md" target="_blank"
214
  class="text-blue-500 underline hover:no-underline">Compel</a> syntax.
215
  </p>
216
  <div class="flex text-normal px-1 py-1 border border-gray-700 rounded-md items-center">
217
+ <textarea type="text" id="prompt" class="font-light w-full px-3 py-2 mx-1 outline-none dark:text-black"
218
+ title=" Start your session and type your prompt here, you can see the result in real-time."
219
  placeholder="Add your prompt here...">Portrait of The Terminator with , glare pose, detailed, intricate, full of colour, cinematic lighting, trending on artstation, 8k, hyperrealistic, focused, extreme details, unreal engine 5, cinematic, masterpiece</textarea>
220
  </div>
221
 
 
232
  8.0</output>
233
  <label class="text-sm font-medium" for="seed">Seed</label>
234
  <input type="number" id="seed" name="seed" value="299792458"
235
+ class="font-light border border-gray-700 text-right rounded-md p-2 dark:text-black">
236
  <button
237
  onclick="document.querySelector('#seed').value = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER); document.querySelector('#seed').dispatchEvent(new Event('input'));"
238
+ class="button">
239
  Rand
240
  </button>
241
  </div>
242
  </details>
243
  </div>
244
  <div class="flex gap-3">
245
+ <button id="start" class="button">
 
246
  Start
247
  </button>
248
+ <button id="stop" class="button">
 
249
  Stop
250
  </button>
251
+ <button id="snap" disabled class="button ml-auto">
 
252
  Snapshot
253
  </button>
254
  </div>