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="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" /> | |
| <link rel="stylesheet" id="stylesheet-tag" /> | |
| <script type="module" id="script-tag"></script> | |
| <script> | |
| const basePath = document.location.origin + document.location.pathname; | |
| document.getElementById('stylesheet-tag').href = `${basePath}static/style.css`; | |
| document.getElementById('script-tag').src = `${basePath}static/js/index.js`; | |
| </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 for="name-input">Enter your trainer name</label> | |
| <form class="name-form" action=""> | |
| <!-- <div class="name-interactive"> --> | |
| <input id="name-input" name="name" type="text" placeholder="Ash" maxlength="75" /> | |
| <button type="submit">Submit</button> | |
| <!-- </div> --> | |
| </form> | |
| <p> | |
| Each illustration is <strong>generated with AI</strong> using a <a href="https://rudalle.ru/en/" rel="noopener" target="_blank">ruDALL-E</a> | |
| model <a href="https://huggingface.co/minimaxir/ai-generated-pokemon-rudalle" target="_blank">fine-tuned by Max Woolf.</a> Over | |
| <a href="https://huggingface.co/models" target="_blank">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" aria-hidden="true"> | |
| <div class="buttons"> | |
| <button class="save" tabindex="-1">Save</button> | |
| <button class="toggle-name" data-include tabindex="-1">Trainer Name</button> | |
| <button class="generate-new" tabindex="-1">New Pokémon</button> | |
| </div> | |
| </div> | |
| <div class="scene"> | |
| <div class="booster" title="Open booster pack for new card"> | |
| <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.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> | |