<!DOCTYPE html>
<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>