Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>This Pokémon Does Not Exist</title> | |
| <style> | |
| .actions { | |
| opacity: 0; | |
| } | |
| </style> | |
| <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" /> | |
| <link rel="stylesheet" id="stylesheet-tag" /> | |
| <script type="module" id="script-tag"></script> | |
| <script> | |
| const basePath = document.location.origin + document.location.pathname; | |
| document.getElementById('script-tag').src = `${basePath}static/js/index.js`; | |
| document.getElementById('stylesheet-tag').href = `${basePath}static/style.css`; | |
| </script> | |
| </head> | |
| <body> | |
| <main> | |
| <section class="info"> | |
| <div class="poke-trio"> | |
| <img src="static/whitey.png" alt="AI generated creature" width="80" height="80"> | |
| <img src="static/blacky.png" alt="AI generated creature" width="80" height="80"> | |
| <img src="static/bluey.png" alt="AI generated creature" width="80" height="80"> | |
| </div> | |
| <h1>This Pokémon<br />Does Not Exist</h1> | |
| <label> | |
| Enter your trainer name | |
| <form class="trainer-name" action=""> | |
| <input name="name" type="text" placeholder="Ash" maxlength="75" /> | |
| </form> | |
| </label> | |
| <p> | |
| Each illustration is <strong>generated with AI</strong> using a <a href="https://rudalle.ru/en/">ruDALL-E</a> | |
| model <a href="https://huggingface.co/minimaxir/ai-generated-pokemon-rudalle" | |
| >fine-tuned by Max Woolf.</a> More than | |
| <a href="https://huggingface.co/models">30,000 such models</a> are hosted on Hugging Face for immediate use.</a | |
| > | |
| </p> | |
| </section> | |
| <section class="output" data-mode="booster" data-state="ready"> | |
| <div class="actions"> | |
| <!-- <button class="share">Share</button> --> | |
| <div class="buttons"> | |
| <button class="save">Save</button> | |
| <button class="toggle-name" data-include>Trainer Name</button> | |
| <button class="generate-new">New Pokémon</button> | |
| </div> | |
| <div class="duration"><span class="elapsed">0.0</span>s (ETA: <span class="eta">40</span>s)</div> | |
| </div> | |
| <div class="scene"> | |
| <div class="booster"> | |
| <div class="foil triangle top left"></div> | |
| <div class="foil triangle top right"></div> | |
| <div class="foil top flat"></div> | |
| <div class="foil top front"></div> | |
| <div class="foil top back"></div> | |
| <div class="face front"> | |
| <img | |
| class="title" | |
| src="static/huggingface-pokemon-logo-1200.png" | |
| alt="The words 'Hugging Face' in the style of the Pokémon logo" | |
| draggable="false" | |
| /> | |
| <img class="hf-logo" src="static/huggingface-logo.svg" alt="Hugging Face emoji logo" draggable="false" /> | |
| </div> | |
| <div class="face back"></div> | |
| <div class="foil back flat"></div> | |
| <div class="foil back flap"></div> | |
| <div class="face top foil"></div> | |
| <div class="face bottom foil"></div> | |
| <div class="face left"></div> | |
| <div class="face right"></div> | |
| <div class="foil bottom front"></div> | |
| <div class="foil bottom back"></div> | |
| <div class="foil triangle bottom left"></div> | |
| <div class="foil triangle bottom right"></div> | |
| <div class="foil bottom flat"></div> | |
| </div> | |
| <div class="card-slot"></div> | |
| </div> | |
| </section> | |
| </main> | |
| </body> | |
| </html> | |