Spaces:
Paused
Paused
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>CloudGate Text-2-Image Ver 1.0</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body> | |
| <main> | |
| <section id="img-gen" class="container mx-auto bg-slate-50"> | |
| <h1 class="text-4xl font-bold text-center py-6 mb-6">Text to Image Generation</h1> | |
| <form action="" class="img-gen-form p-6"> | |
| <div class="mb-4"> | |
| <label for="img-gen-prompt" class="block mb-2 text-2xl">Prompt</label> | |
| <input | |
| type="text" | |
| id="img-gen-prompt" | |
| class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300" | |
| value="A serene night scene featuring a house, majestic mountains, graceful trees, a tranquil lake, a glowing moon, and a shimmering sky adorned with countless stars." | |
| /> | |
| </div> | |
| <button class="img-gen-submit px-3 py-2 rounded-md bg-indigo-500 text-white">Submit</button> | |
| </form> | |
| <article> | |
| <!-- <h2 class="text-2xl font-bold text-center py-6 mb-6 text-indigo-500 italic">Output</h2> --> | |
| <div id="img-gen-output" class="py-6 px-6 rounded-md"> | |
| <p id="loading" class="text-center italic text-2xl text-green-500"></p> | |
| <img src="" alt="" id="img-tgt" class="mx-auto"> | |
| </div> | |
| </article> | |
| </section> | |
| </main> | |
| <script type="text/javascript"> | |
| const imgGenForm = document.querySelector('.img-gen-form'); | |
| const genImg = async (data) => { | |
| const response = await fetch(`t2i?prompt=${encodeURIComponent(data.prompt)}`); | |
| if (!response.ok) { | |
| console.error('Failed to fetch image:', response.statusText); | |
| return null; | |
| } | |
| return response.text(); | |
| } | |
| imgGenForm.addEventListener('submit', async (event) => { | |
| event.preventDefault(); | |
| const imgElement = document.getElementById('img-tgt') | |
| imgElement.src = ""; | |
| let loading_ = document.getElementById('loading'); | |
| loading_.textContent = "Generating an awesome image for you ...!"; | |
| const imgGenPrompt = document.getElementById('img-gen-prompt'); | |
| // const imgGenOutput = document.getElementById('img-gen-output'); | |
| try { | |
| genImg({ "prompt": imgGenPrompt.value, | |
| // "steps": 8, | |
| // "guide": 1.5 | |
| }).then((base64String) => { | |
| if (base64String) { | |
| // const imgElement = document.createElement('img'); | |
| loading_.textContent = ""; | |
| console.log(loading_) | |
| imgElement.src = `data:image/png;base64,${base64String}`; | |
| // imgGenOutput.appendChild(imgElement); | |
| } | |
| }); | |
| } catch (err) { | |
| console.error(err); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |