Spaces:
Running
Running
File size: 4,155 Bytes
5c239ba 335e0ef 6f41437 335e0ef c6fcf99 5c239ba 880cedd 5c239ba c6fcf99 5c239ba 880cedd 5c239ba 8f246ac 18e6f1e 8f246ac 79743a3 8f246ac 79743a3 0483b0c 8f246ac 335e0ef 8db1028 6f41437 8db1028 6f41437 8f246ac 335e0ef 79743a3 8f246ac 18e6f1e 8f246ac 5c239ba 9828b28 5c239ba |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
<!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" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<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.gif" alt="AI generated creature" width="80" height="80">
<img src="static/blacky.gif" alt="AI generated creature" width="80" height="80">
<img src="static/bluey.gif" 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="">
<input id="name-input" name="name" type="text" placeholder="Ash" maxlength="75" />
<button type="submit">Submit</button>
</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.gif"
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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
</html>
|