refactor: V3

- refactor(inference): Move operations to notebook
- feat(backend): Remove queuing system
- feat(backend): Add rate-limited card pulling
- feat(endpoints): Merge details and image reqs
- perf(images): Save to JPG instead of PNG
- perf(images): Batch generate images
- refactor(logging): Improve details and order
- refactor(rand_attack): Improve readability
- refactor(rand_type): Rename to rand_energy
- refactor(energy types): Use consistent lowercasing
- refactor(energy types): Order alphabetically
- feat(ui): Remove ETA display
- fix(animation): Fix card showing below booster
- feat(input): Add submit button

.gitattributes

@@ -25,3 +25,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zstandard filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+datasets/pregenerated_pokemon.h5 filter=lfs diff=lfs merge=lfs -text

app.py

@@ -1,131 +1,43 @@
-from time import time
-from statistics import mean
+from typing import Union
+from time import gmtime, strftime
 
-from fastapi import BackgroundTasks, FastAPI
+from fastapi import FastAPI
 from fastapi.staticfiles import StaticFiles
 from fastapi.responses import FileResponse
-from pydantic import BaseModel
 
-from modules.details import rand_details
-from modules.inference import generate_image
+from modules.details import Details, rand_details
+from modules.dataset import get_image, get_stats
 
 app = FastAPI(docs_url=None, redoc_url=None)
 
 app.mount("/static", StaticFiles(directory="static"), name="static")
 
-tasks = {}
-
-
-class NewTask(BaseModel):
-    prompt = "покемон"
-
-
-def get_place_in_queue(task_id):
-    queued_tasks = list(task for task in tasks.values()
-                        if task["status"] == "queued" or task["status"] == "processing")
-
-    queued_tasks.sort(key=lambda task: task["created_at"])
-
-    queued_task_ids = list(task["task_id"] for task in queued_tasks)
-
-    try:
-        return queued_task_ids.index(task_id) + 1
-    except:
-        return 0
-
-
-def calculate_eta(task_id):
-    total_durations = list(task["completed_at"] - task["started_at"]
-                           for task in tasks.values() if "completed_at" in task and task["status"] == "completed")
-
-    initial_place_in_queue = tasks[task_id]["initial_place_in_queue"]
-
-    if len(total_durations):
-        eta = initial_place_in_queue * mean(total_durations)
-    else:
-        eta = initial_place_in_queue * 35
-
-    return round(eta, 1)
-
-
-def next_task(task_id):
-    tasks[task_id]["completed_at"] = time()
-
-    queued_tasks = list(task for task in tasks.values() if task["status"] == "queued")
-
-    if queued_tasks:
-        print(f"{task_id} {tasks[task_id]['status']}. Task/s remaining: {len(queued_tasks)}")
-        process_task(queued_tasks[0]["task_id"])
-
-
-def process_task(task_id):
-    if 'processing' in list(task['status'] for task in tasks.values()):
-        return
-
-    if tasks[task_id]["last_poll"] and time() - tasks[task_id]["last_poll"] > 30:
-        tasks[task_id]["status"] = "abandoned"
-        next_task(task_id)
-
-    tasks[task_id]["status"] = "processing"
-    tasks[task_id]["started_at"] = time()
-    print(f"Processing {task_id}")
-
-    try:
-        tasks[task_id]["value"] = generate_image(tasks[task_id]["prompt"])
-    except Exception as ex:
-        tasks[task_id]["status"] = "failed"
-        tasks[task_id]["error"] = repr(ex)
-    else:
-        tasks[task_id]["status"] = "completed"
-    finally:
-        next_task(task_id)
+card_logs = []
 
 
 @app.head('/')
 @app.get('/')
-def index():
+def index() -> FileResponse:
     return FileResponse(path="static/index.html", media_type="text/html")
 
 
-@app.get('/details')
-def generate_details():
-    return rand_details()
-
+@app.get('/new_card')
+def new_card() -> dict[str, Union[Details, str]]:
+    card_logs.append(strftime('%Y-%m-%dT%H:%M:%SZ', gmtime()))
 
-@app.post('/task/create')
-def create_task(background_tasks: BackgroundTasks, new_task: NewTask):
-    created_at = time()
+    details: Details = rand_details()
 
-    task_id = f"{str(created_at)}_{new_task.prompt}"
-
-    tasks[task_id] = {
-        "task_id": task_id,
-        "status": "queued",
-        "eta": None,
-        "created_at": created_at,
-        "started_at": None,
-        "completed_at": None,
-        "last_poll": None,
-        "poll_count": 0,
-        "initial_place_in_queue": None,
-        "place_in_queue": None,
-        "prompt": new_task.prompt,
-        "value": None,
+    return {
+        "details": details,
+        "image": get_image(details["energy_type"]),
     }
 
-    tasks[task_id]["initial_place_in_queue"] = get_place_in_queue(task_id)
-    tasks[task_id]["eta"] = calculate_eta(task_id)
-
-    background_tasks.add_task(process_task, task_id)
-
-    return tasks[task_id]
 
+@app.get('/stats')
+def stats() -> dict[str, Union[int, object]]:
+    return get_stats() | {"cards_served": len(card_logs)}
 
-@app.get('/task/poll')
-def poll_task(task_id: str):
-    tasks[task_id]["place_in_queue"] = get_place_in_queue(task_id)
-    tasks[task_id]["eta"] = calculate_eta(task_id)
-    tasks[task_id]["last_poll"] = time()
-    tasks[task_id]["poll_count"] += 1
 
-    return tasks[task_id]
+@app.get('/logs')
+def logs() -> list[str]:
+    return card_logs

datasets/pregenerated_pokemon.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:69bfb8a58317d91df48c385fb8051805ae7fa75cbe116ffab02c74231fb86e5c
+size 412480704

modules/dataset.py

@@ -0,0 +1,39 @@
+import os
+from random import choices, randint
+from typing import cast, Optional, TypedDict
+import h5py
+
+
+datasets_dir: str = './datasets'
+datasets_file: str = 'pregenerated_pokemon.h5'
+h5_file: str = os.path.join(datasets_dir, datasets_file)
+
+
+class Stats(TypedDict):
+    size_total: int
+    size_mb: float
+    size_counts: dict[str, int]
+
+
+def get_stats(h5_file: str = h5_file) -> Stats:
+    with h5py.File(h5_file, 'r') as datasets:
+        return {
+            "size_total": sum(list(datasets[energy].size.item() for energy in datasets.keys())),
+            "size_mb": round(os.path.getsize(h5_file) / 1024**2, 1),
+            "size_counts": {key: datasets[key].size.item() for key in datasets.keys()},
+        }
+
+
+energy_types: list[str] = ['colorless', 'darkness', 'dragon', 'fairy', 'fighting',
+                           'fire', 'grass', 'lightning', 'metal', 'psychic', 'water']
+
+
+def get_image(energy: Optional[str] = None, row: Optional[int] = None) -> str:
+    if not energy:
+        energy = choices(energy_types)[0]
+
+    with h5py.File(h5_file, 'r') as datasets:
+        if not row:
+            row = randint(0, datasets[energy].size - 1)
+
+        return datasets[energy].asstr()[row][0]

modules/details.py

@@ -1,8 +1,20 @@
 import random
 import json
+from typing import cast, Optional, TypedDict, Union
 
 
-def load_lists(list_names, base_dir="lists"):
+class Attack(TypedDict):
+    name: str
+    cost: list[str]
+    convertedEnergyCost: int
+    damage: str
+    text: str
+
+
+ListCollection = dict[str, Union[list[str], list[Attack]]]
+
+
+def load_lists(list_names: list[str], base_dir: str = "lists") -> ListCollection:
     lists = {}
 
     for name in list_names:
@@ -12,45 +24,47 @@ def load_lists(list_names, base_dir="lists"):
     return lists
 
 
-def rand_hp():
+def rand_hp() -> int:
     # Weights from https://bulbapedia.bulbagarden.net/wiki/HP_(TCG)
 
-    hp_range = list(range(30, 340 + 1, 10))
+    hp_range: list[int] = list(range(30, 340 + 1, 10))
 
-    weights = [156, 542, 1264, 1727, 1477, 1232, 1008, 640, 436, 515, 469, 279, 188,
-               131, 132, 132, 56, 66, 97, 74, 23, 24, 25, 7, 15, 6, 0, 12, 18, 35, 18, 3]
+    weights: list[int] = [156, 542, 1264, 1727, 1477, 1232, 1008, 640, 436, 515, 469, 279, 188,
+                          131, 132, 132, 56, 66, 97, 74, 23, 24, 25, 7, 15, 6, 0, 12, 18, 35, 18, 3]
 
     return random.choices(hp_range, weights)[0]
 
 
-def rand_type(types=['Grass', 'Fire', 'Water', 'Lightning', 'Fighting',
-                     'Psychic', 'Colorless', 'Darkness', 'Metal', 'Dragon', 'Fairy'], can_be_none=False):
+def rand_energy(can_be_none: bool = False) -> Union[str, None]:
+    types: list[str] = ['colorless', 'darkness', 'dragon', 'fairy', 'fighting',
+                        'fire', 'grass', 'lightning', 'metal', 'psychic', 'water']
+
     if can_be_none:
         return random.choices([random.choices(types)[0], None])[0]
     else:
         return random.choices(types)[0]
 
 
-def rand_name(energy_type=rand_type()):
-    lists = load_lists([energy_type], 'lists/names')
+def rand_name(energy_type: str = cast(str, rand_energy())) -> str:
+    lists: ListCollection = load_lists([energy_type], 'lists/names')
 
-    return random.choices(lists[energy_type])[0]
+    return cast(str, random.choices(lists[energy_type])[0])
 
 
-def rand_species(species):
-    random_species = random.choices(species)[0]
+def rand_species(species: list[str]) -> str:
+    random_species: str = random.choices(species)[0]
 
     return f'{random_species.capitalize()}'
 
 
-def rand_length():
+def rand_length() -> dict[str, int]:
     # Weights from https://bulbapedia.bulbagarden.net/wiki/List_of_Pok%C3%A9mon_by_height
 
-    feet_ranges = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '16',
-                   '17', '18', '19', '20', '21', '22', '23', '24', '26', '28', '30', '32', '34', '35', '47', '65', '328']
+    feet_ranges: list[int] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 16,
+                              17, 18, 19, 20, 21, 22, 23, 24, 26, 28, 30, 32, 34, 35, 47, 65, 328]
 
-    weights = [30, 220, 230, 176, 130, 109, 63, 27, 17, 17, 5, 5, 6,
-               4, 3, 2, 2, 2, 1, 2, 3, 1, 2, 1, 1, 1, 2, 1, 1, 2, 1, 1, 1]
+    weights: list[int] = [30, 220, 230, 176, 130, 109, 63, 27, 17, 17, 5, 5, 6,
+                          4, 3, 2, 2, 2, 1, 2, 3, 1, 2, 1, 1, 1, 2, 1, 1, 2, 1, 1, 1]
 
     return {
         "feet": random.choices(feet_ranges, weights)[0],
@@ -58,45 +72,65 @@ def rand_length():
     }
 
 
-def rand_weight():
+def rand_weight() -> str:
     # Weights from https://bulbapedia.bulbagarden.net/wiki/List_of_Pok%C3%A9mon_by_weight
 
-    weight_ranges = [{"start": 1, "end": 22}, {"start": 22, "end": 44}, {"start": 44, "end": 55}, {"start": 55, "end": 110}, {"start": 110, "end": 132}, {"start": 132, "end": 218}, {"start": 218, "end": 220}, {"start": 221, "end": 226}, {
-        "start": 226, "end": 331}, {"start": 331, "end": 441}, {"start": 441, "end": 451}, {"start": 452, "end": 661}, {"start": 661, "end": 677}, {"start": 677, "end": 793}, {"start": 794, "end": 903}, {"start": 903, "end": 2204}]
-
-    # 'weights' as in statistical weightings
-    weights = [271, 145, 53, 204, 57, 122, 1, 11, 57, 28, 7, 34, 4, 17, 5, 31]
-
+    weight_ranges: list[dict[str, int]] = [
+        {"start": 1, "end": 22},
+        {"start": 22, "end": 44},
+        {"start": 44, "end": 55},
+        {"start": 55, "end": 110},
+        {"start": 110, "end": 132},
+        {"start": 132, "end": 218},
+        {"start": 218, "end": 220},
+        {"start": 221, "end": 226},
+        {"start": 226, "end": 331},
+        {"start": 331, "end": 441},
+        {"start": 441, "end": 451},
+        {"start": 452, "end": 661},
+        {"start": 661, "end": 677},
+        {"start": 677, "end": 793},
+        {"start": 794, "end": 903},
+        {"start": 903, "end": 2204}]
+
+    # 'weights' as in statistical weightings, not physical mass
+    weights: list[int] = [271, 145, 53, 204, 57, 122, 1, 11, 57, 28, 7, 34, 4, 17, 5, 31]
+
+    start: int
+    end: int
     start, end = random.choices(weight_ranges, weights)[0].values()
 
-    random_weight = random.randrange(start, end + 1, 1)
+    random_weight: int = random.randrange(start, end + 1, 1)
 
     return f'{random_weight} lbs.'
 
 
-def rand_attack(attacks, name, energy_type=None, colorless_only_allowed=False):
-    random_attack = random.choices(attacks)[0]
+def rand_attack(
+        attacks: list[Attack],
+        name: str, energy_type: Optional[str],
+        colorless_only_allowed: bool = False) -> Attack:
+    random_attack: Attack = random.choices(attacks)[0]
 
-    # There are no attacks in Pokémon TCG that have Dragon energy costs
-    # so this would loop indefinitely if looking for one
+    energy_type = energy_type.capitalize() if energy_type else None  # Energy is capitalised in the JSON lists
 
-    if energy_type is not None and energy_type != 'Dragon' and not colorless_only_allowed:
-        while energy_type not in random_attack["cost"]:
-            random_attack = random.choices(attacks)[0]
-    elif energy_type is not None and energy_type != 'Dragon' and colorless_only_allowed:
-        while energy_type not in random_attack["cost"] and 'Colorless' not in random_attack["cost"]:
-            random_attack = random.choices(attacks)[0]
+    if energy_type and energy_type != 'Dragon':  # No attacks use Dragon energy so this would otherwise infinitely loop
+        if colorless_only_allowed:
+            while energy_type not in random_attack["cost"] and 'colorless' not in random_attack["cost"]:
+                random_attack = random.choices(attacks)[0]
+        else:
+            while energy_type not in random_attack["cost"]:
+                random_attack = random.choices(attacks)[0]
 
     random_attack['text'] = random_attack['text'].replace('<name>', name)
 
     return random_attack
 
 
-def rand_attacks(attacks, name, energy_type=None, n=2):
-    attack1 = rand_attack(attacks, name, energy_type)
+def rand_attacks(attacks: list[Attack], name: str, energy_type: Optional[str], n: int = 2) -> list[Attack]:
+    attack1: Attack = rand_attack(attacks, name, energy_type)
 
     if n > 1:
-        attack2 = rand_attack(attacks, name, energy_type, True)
+        attack2: Attack = rand_attack(attacks, name, energy_type, True)
         while attack1['text'] == attack2['text']:
             attack2 = rand_attack(attacks, name, energy_type, True)
         return [attack1, attack2]
@@ -104,32 +138,50 @@ def rand_attacks(attacks, name, energy_type=None, n=2):
         return [attack1]
 
 
-def rand_retreat():
+def rand_retreat() -> int:
     return random.randrange(0, 4, 1)
 
 
-def rand_description(descriptions):
+def rand_description(descriptions) -> str:
     return random.choices(descriptions)[0]
 
 
-def rand_rarity():
+def rand_rarity() -> str:
     return random.choices(['●', '◆', '★'], [10, 5, 1])[0]
 
 
-def rand_details(lists=load_lists(['attacks', 'descriptions', 'species'])):
-    energy_type = rand_type()
-    name = rand_name(energy_type)
+lists: ListCollection = load_lists(['attacks', 'descriptions', 'species'])
+
+
+class Details(TypedDict):
+    name: str
+    hp: int
+    energy_type: str
+    species: str
+    length: dict[str, int]
+    weight: str
+    attacks: list[Attack]
+    weakness: Union[str, None]
+    resistance: Union[str, None]
+    retreat: int
+    description: str
+    rarity: str
+
+
+def rand_details() -> Details:
+    energy_type: str = cast(str, rand_energy())
+    name: str = rand_name(energy_type)
 
     return {
         "name": name,
         "hp": rand_hp(),
         "energy_type": energy_type,
-        "species": rand_species(lists["species"]),
+        "species": rand_species(cast(list[str], lists["species"])),
         "length": rand_length(),
         "weight": rand_weight(),
-        "attacks": rand_attacks(lists["attacks"], name, energy_type=energy_type),
-        "weakness": rand_type(can_be_none=True),
-        "resistance": rand_type(can_be_none=True),
+        "attacks": cast(list[Attack], rand_attacks(cast(list[Attack], lists["attacks"]), name, energy_type=energy_type)),
+        "weakness": rand_energy(can_be_none=True),
+        "resistance": rand_energy(can_be_none=True),
         "retreat": rand_retreat(),
         "description": rand_description(lists["descriptions"]),
         "rarity": rand_rarity(),

modules/inference.py

@@ -1,64 +0,0 @@
-from time import gmtime, strftime
-
-print(f'{strftime("%Y-%m-%d %H:%M:%S", gmtime())} Preparing for inference...')  # noqa
-
-from rudalle.pipelines import generate_images
-from rudalle import get_rudalle_model, get_tokenizer, get_vae
-from huggingface_hub import hf_hub_url, cached_download
-import torch
-from io import BytesIO
-import base64
-
-print(f"GPUs available: {torch.cuda.device_count()}")
-print(f"GPU[0] memory: {int(torch.cuda.get_device_properties(0).total_memory / 1048576)}Mib")
-print(f"GPU[0] memory reserved: {int(torch.cuda.memory_reserved(0) / 1048576)}Mib")
-print(f"GPU[0] memory allocated: {int(torch.cuda.memory_allocated(0) / 1048576)}Mib")
-
-device = "cuda" if torch.cuda.is_available() else "cpu"
-fp16 = torch.cuda.is_available()
-
-file_dir = "./models"
-file_name = "pytorch_model.bin"
-config_file_url = hf_hub_url(repo_id="minimaxir/ai-generated-pokemon-rudalle", filename=file_name)
-cached_download(config_file_url, cache_dir=file_dir, force_filename=file_name)
-
-model = get_rudalle_model('Malevich', pretrained=False, fp16=fp16, device=device)
-model.load_state_dict(torch.load(f"{file_dir}/{file_name}", map_location=f"{'cuda:0' if torch.cuda.is_available() else 'cpu'}"))
-
-vae = get_vae().to(device)
-tokenizer = get_tokenizer()
-
-print(f'{strftime("%Y-%m-%d %H:%M:%S", gmtime())} Ready for inference')
-
-
-def english_to_russian(english_string):
-    word_map = {
-        "grass": "Покемон трава",
-        "fire": "Покемон огня",
-        "water": "Покемон в воду",
-        "lightning": "Покемон электрического типа",
-        "fighting": "Покемон боевого типа",
-        "psychic": "Покемон психического типа",
-        "colorless": "Покемон нормального типа",
-        "darkness": "Покемон темного типа",
-        "metal": "Покемон из стали типа",
-        "dragon": "Покемон типа дракона",
-        "fairy": "Покемон фея"
-    }
-
-    return word_map[english_string.lower()]
-
-
-def generate_image(prompt):
-    if prompt.lower() in ['grass', 'fire', 'water', 'lightning', 'fighting', 'psychic', 'colorless', 'darkness',
-                          'metal', 'dragon', 'fairy']:
-        prompt = english_to_russian(prompt)
-
-    result, _ = generate_images(prompt, tokenizer, model, vae, top_k=2048, images_num=1, top_p=0.995)
-
-    buffer = BytesIO()
-    result[0].save(buffer, format="PNG")
-    base64_bytes = base64.b64encode(buffer.getvalue())
-    base64_string = base64_bytes.decode("UTF-8")
-
-    return "data:image/png;base64," + base64_string

static/index.html

@@ -27,14 +27,15 @@
           <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>
+        <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/" target="_blank">ruDALL-E</a>
+          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
           >
@@ -47,10 +48,9 @@
             <button class="toggle-name" data-include tabindex="-1">Trainer Name</button>
             <button class="generate-new" tabindex="-1">New Pokémon</button>
           </div>
-          <div class="duration"><span class="elapsed">0.0</span>s (ETA: <span class="eta">35</span>s)</div>
         </div>
         <div class="scene">
-          <div class="booster">
+          <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>

static/js/card-html.js

@@ -1,19 +1,19 @@
 const TYPES = {
-  Grass: '🍃',
-  Fire: '🔥',
-  Water: '💧',
-  Lightning: '⚡',
-  Fighting: '✊',
-  Psychic: '👁️',
-  Colorless: '⭐',
-  Darkness: '🌑',
-  Metal: '⚙️',
-  Dragon: '🐲',
-  Fairy: '🧚',
+  colorless: '⭐',
+  darkness: '🌑',
+  dragon: '🐲',
+  fairy: '🧚',
+  fighting: '✊',
+  fire: '🔥',
+  grass: '🍃',
+  lightning: '⚡',
+  metal: '⚙️',
+  psychic: '👁️',
+  water: '💧',
 };
 
 const energyHTML = (type, types = TYPES) => {
-  return `<span title="${type} energy" class="energy ${type.toLowerCase()}">${types[type]}</span>`;
+  return `<span title="${type} energy" class="energy ${type.toLowerCase()}">${types[type.toLowerCase()]}</span>`;
 };
 
 const attackCostHTML = (cost) => {
@@ -78,7 +78,7 @@ export const cardHTML = (details) => {
   const poke_name = details.name; // `name` would be reserved JS word
 
   return `
-<div class="pokecard ${energy_type.toLowerCase()}" data-displayed="true">
+<div class="pokecard ${energy_type.toLowerCase()}">
   <p class="evolves">Basic Pokémon</p>
   <header>
     <h1 class="name">${poke_name}</h1>
@@ -122,5 +122,5 @@ export const cardHTML = (details) => {
       <span title="Rarity">${rarity}</span>
     </div>
   </div>
-  </div>`;
+</div>`;
 };

static/js/dom-manipulation.js

@@ -1,42 +1,5 @@
 import { toPng } from 'https://cdn.skypack.dev/html-to-image';
 
-const durationTimer = () => {
-  const elapsedDisplay = document.querySelector('.elapsed');
-  let duration = 0.0;
-
-  return () => {
-    const startTime = performance.now();
-
-    const incrementSeconds = setInterval(() => {
-      duration += 0.1;
-      elapsedDisplay.textContent = duration.toFixed(1);
-    }, 100);
-
-    const updateDuration = (task) => {
-      if (task?.status == 'completed') {
-        duration = Date.now() / 1_000 - task.created_at;
-        return;
-      }
-
-      duration = Number(((performance.now() - startTime) / 1_000).toFixed(1));
-    };
-
-    window.addEventListener('focus', updateDuration);
-
-    return {
-      cleanup: (completedTask) => {
-        if (completedTask) {
-          updateDuration(completedTask);
-        }
-
-        clearInterval(incrementSeconds);
-        window.removeEventListener('focus', updateDuration);
-        elapsedDisplay.textContent = duration.toFixed(1);
-      },
-    };
-  };
-};
-
 const updateCardName = (trainerName, pokeName, useTrainerName) => {
   const cardName = document.querySelector('.pokecard .name');
 
@@ -127,4 +90,4 @@ const screenshotCard = async () => {
   return imageUrl;
 };
 
-export { durationTimer, updateCardName, initialiseCardRotation, setOutput, screenshotCard };
+export { updateCardName, initialiseCardRotation, setOutput, screenshotCard };

static/js/index.js

@@ -1,12 +1,5 @@
-import { generateDetails, createTask, longPollTask } from './network.js';
 import { cardHTML } from './card-html.js';
-import {
-  durationTimer,
-  updateCardName,
-  initialiseCardRotation,
-  setOutput,
-  screenshotCard,
-} from './dom-manipulation.js';
+import { updateCardName, initialiseCardRotation, setOutput, screenshotCard } from './dom-manipulation.js';
 
 const nameInput = document.querySelector('input[name="name"');
 const nameToggle = document.querySelector('button.toggle-name');
@@ -25,60 +18,46 @@ const generate = async () => {
   const scene = document.querySelector('.scene');
   const cardSlot = scene.querySelector('.card-slot');
   const actions = document.querySelector('.actions');
-  const durationDisplay = actions.querySelector('.duration');
-  const etaDisplay = durationDisplay.querySelector('.eta');
-  const timer = durationTimer(durationDisplay);
-  const timerCleanup = timer().cleanup;
 
   scene.removeEventListener('mousemove', mousemoveHandlerForPreviousCard, true);
   cardSlot.innerHTML = '';
   generating = true;
+  document.querySelector('.scene .booster').removeAttribute('title');
   setOutput('booster', 'generating');
 
   try {
-    const details = await generateDetails();
-    pokeName = details.name;
-    const task = await createTask(details.energy_type);
-
     actions.style.opacity = '1';
     actions.setAttribute('aria-hidden', 'false');
     actions.querySelectorAll('button').forEach((button) => button.setAttribute('tabindex', '0'));
-    etaDisplay.textContent = Math.round(task.eta);
-    durationDisplay.classList.add('displayed');
 
-    if (window.innerWidth <= 500) {
-      durationDisplay.scrollIntoView({ behavior: 'smooth' });
+    if (window.innerWidth <= 920) {
+      scene.scrollIntoView({ behavior: 'smooth', block: 'center' });
     }
 
-    // Theoretically, keep client waiting only an extra half interval once task is complete
-    const interval = 5_000;
-    await new Promise((resolve) => setTimeout(resolve, task.eta * 1_000 - interval / 2));
-    const completedTask = await longPollTask(task, interval);
+    await new Promise((resolve) => setTimeout(resolve, 5_000));
 
-    generating = false;
-    timerCleanup(completedTask);
+    const cardResponse = await fetch('/new_card');
+    const card = await cardResponse.json();
 
-    if (completedTask.status === 'failed') {
-      setOutput('booster', 'failed');
-      throw new Error(`Task failed: ${completedTask.error}`);
-    }
+    pokeName = card.details.name;
 
-    setOutput('booster', 'completed');
-
-    cardSlot.innerHTML = cardHTML(details);
-    updateCardName(trainerName, pokeName, useTrainerName);
-    document.querySelector('img.picture').src = completedTask.value;
+    generating = false;
 
-    mousemoveHandlerForPreviousCard = initialiseCardRotation(scene);
+    setOutput('booster', 'completed');
 
     await new Promise((resolve) =>
       setTimeout(resolve, window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 1_500 : 1_000)
     );
 
+    cardSlot.innerHTML = cardHTML(card.details);
+    updateCardName(trainerName, pokeName, useTrainerName);
+    document.querySelector('img.picture').src = card.image;
+
+    mousemoveHandlerForPreviousCard = initialiseCardRotation(scene);
+
     setOutput('card', 'completed');
   } catch (err) {
     generating = false;
-    timerCleanup();
     setOutput('booster', 'failed');
     console.error(err);
   }
@@ -92,7 +71,7 @@ nameInput.addEventListener('input', (e) => {
   updateCardName(trainerName, pokeName, useTrainerName);
 });
 
-document.querySelector('form.trainer-name').addEventListener('submit', (e) => {
+document.querySelector('form.name-form').addEventListener('submit', (e) => {
   e.preventDefault();
 
   if (document.querySelector('.output').dataset.state === 'completed') {

static/js/network.js

@@ -1,59 +0,0 @@
-/**
- * Reconcile paths for hf.space resources fetched from hf.co iframe
- */
-
-const pathFor = (path) => {
-  const basePath = document.location.origin + document.location.pathname;
-  return new URL(path, basePath).href;
-};
-
-const generateDetails = async () => {
-  const details = await fetch(pathFor('details'));
-  return await details.json();
-};
-
-const createTask = async (prompt) => {
-  const taskResponse = await fetch(pathFor('task/create'), {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({ prompt }),
-  });
-
-  if (!taskResponse.ok || !taskResponse.headers.get('content-type')?.includes('application/json')) {
-    throw new Error(await taskResponse.text());
-  }
-
-  const task = await taskResponse.json();
-
-  return task;
-};
-
-const pollTask = async (task) => {
-  const taskResponse = await fetch(pathFor(`task/poll?task_id=${task.task_id}`));
-
-  if (!taskResponse.ok || !taskResponse.headers.get('content-type')?.includes('application/json')) {
-    throw new Error(await taskResponse.text());
-  }
-
-  return await taskResponse.json();
-};
-
-const longPollTask = async (task, interval = 5_000, max) => {
-  const etaDisplay = document.querySelector('.eta');
-
-  task = await pollTask(task);
-
-  if (task.status === 'completed' || task.status === 'failed' || (max && task.poll_count > max)) {
-    return task;
-  }
-
-  etaDisplay.textContent = Math.round(task.eta);
-
-  await new Promise((resolve) => setTimeout(resolve, interval));
-
-  return await longPollTask(task, interval, max);
-};
-
-export { generateDetails, createTask, longPollTask };

static/style.css

@@ -9,11 +9,6 @@
   --theme-error-border: hsl(355 85% 55%);
 }
 
-html,
-body {
-  overflow: scroll;
-}
-
 * {
   transition: outline-offset 0.25s ease-out;
   outline-style: none;
@@ -36,11 +31,19 @@ body {
   background-color: gold;
 }
 
+html {
+  display: flex;
+  display: grid;
+  align-items: center;
+  height: 100%;
+}
+
 body {
-  height: 100vh;
+  margin: 0;
   background-color: whitesmoke;
   background-image: linear-gradient(300deg, var(--theme-highlight), white);
   font-family: 'Gill Sans', 'Gill Sans Mt', 'sans-serif';
+  overflow-x: hidden;
 }
 
 main {
@@ -49,7 +52,8 @@ main {
   grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
   gap: 1.5rem 0;
   max-width: 80rem;
-  padding: 3rem;
+  height: 100%;
+  padding: 0 3rem;
   margin: 0 auto;
 }
 
@@ -69,7 +73,18 @@ main {
   .scene .card-slot {
     margin-top: 1rem;
   }
+}
 
+@media (max-width: 895px) {
+  html {
+    height: auto;
+  }
+}
+
+@media (max-width: 1024px) {
+  .output .booster {
+    --booster-scale: 0.6;
+  }
 }
 
 @media (max-width: 1280px) {
@@ -148,19 +163,31 @@ section {
   font-weight: 700;
 }
 
+.info form {
+  display: flex;
+  flex-direction: row;
+  width: 80%;
+  margin: 0.5rem auto;
+}
+
+.info .name-interactive {
+  display: flex;
+  flex-direction: row;
+}
+
 .info input {
   display: block;
-  width: 80%;
+  width: 100%;
   box-sizing: border-box;
-  padding: 0.5rem 1rem;
-  margin: 0.5rem auto;
+  padding: 0.5rem 1rem 0.5rem 5rem;
   border: 0.2rem solid hsl(0 0% 70%);
-  border-radius: 1rem;
+  border-right: none;
   text-align: center;
   font-size: 1.25rem;
-  transition: border-color 0.25s ease-in;
-  box-shadow: 0 0 0.25rem hsl(165.1 64.7% 48.8% / 60%);
-  outline-color: white;
+  transition: box-shadow 0.5s ease-out;
+  border-top-left-radius: 1rem;
+  border-bottom-left-radius: 1rem;
+  box-shadow: none;
 }
 
 .info input::placeholder {
@@ -168,9 +195,14 @@ section {
 }
 
 input:focus {
-  border-color: transparent;
-  outline-style: solid;
-  outline-color: var(--theme-primary);
+  border-color: var(--theme-secondary);
+  box-shadow: 0 0 0.5rem hsl(165 67% 48% / 60%);
+}
+
+form button {
+  height: 2.8125rem;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
 .info p {
@@ -181,7 +213,8 @@ input:focus {
   line-height: 1.5rem;
 }
 
-.info a, info a:is(:hover, :focus, :active, :visited) {
+.info a,
+info a:is(:hover, :focus, :active, :visited) {
   color: var(--theme-subtext);
   cursor: pointer;
 }
@@ -192,7 +225,7 @@ input:focus {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
-  height: max-content;
+  height: min-content;
 }
 
 .output .actions {
@@ -218,13 +251,16 @@ button {
   font-weight: bold;
   color: white;
   transform-origin: bottom;
-  transform: translateY(-25%);
+
   transition: transform 0.5s ease, box-shadow 0.1s, outline-offset 0.25s ease-out, filter 0.25s ease-out, opacity 0.25s;
-  transition: transform 0.5s, opacity 0.5s;
   whitespace: nowrap;
-  box-shadow: 0 0.2rem 0.375rem hsl(158 100% 33% / 60%);
   filter: saturate(1);
   cursor: pointer;
+}
+
+.actions button {
+  transform: translateY(-25%);
+  box-shadow: 0 0.2rem 0.375rem hsl(158 100% 33% / 60%);
   user-select: none;
   pointer-events: none;
   opacity: 0;
@@ -245,49 +281,12 @@ button.toggle-name.off {
   filter: saturate(0.15);
 }
 
-.duration {
-  visibility: hidden;
-  width: max-content;
-  padding: 0.35rem 1rem;
-  border: 0.1rem solid hsl(90 100% 50% / 25%);
-  border-radius: 1rem;
-  background-color: var(--theme-highlight);
-  text-align: right;
-  color: var(--theme-subtext);
-  transform: translateY(-25%);
-  transition: transform 0.5s, opacity 0.5s;
-  opacity: 0;
-}
-
-.duration.displayed {
-  visibility: visible;
-  transform: translateY(0);
-  opacity: 1;
-}
-
-[data-state="failed"] .duration {
-  border-color: var(--theme-error-border);
-  background-color: var(--theme-error-bg);
-  color: transparent;
-}
-
-[data-state="failed"] .duration.displayed::after {
-  content: 'Try again';
-  position: absolute;
-  top: 20%;
-  left: 0;
-  width: 100%;
-  text-align: center;
-  color: white;
-}
-
 .scene {
   --scale: 0.9;
-  height: 40rem;
+  height: min-content;
   box-sizing: border-box;
-  margin: 2rem;
   perspective: 100rem;
-  transform-origin: center 40%;
+  transform-origin: center;
   transform: scale(var(--scale));
   transition: transform 0.5s ease-out;
 }
@@ -584,11 +583,11 @@ img.hf-logo {
 
 @keyframes shrink {
   from {
-    transform: rotateZ(-45deg) scale(var(--booster-scale));
+    transform: rotateZ(45deg) scale(var(--booster-scale));
     opacity: 1;
   }
   to {
-    transform: rotateZ(-270deg) scale(0);
+    transform: rotateZ(270deg) scale(0);
     opacity: 0;
   }
 }
@@ -616,6 +615,7 @@ img.hf-logo {
 
 [data-mode='booster'][data-state='completed'] .card-slot {
   transform: scale(0);
+  opacity: 0;
 }
 
 [data-mode='booster'][data-state='completed'] .back {
@@ -628,17 +628,26 @@ img.hf-logo {
 
 [data-mode='card'][data-state='completed'] .card-slot {
   transform: scale(1);
+  opacity: 1;
 }
 
 @media (prefers-reduced-motion) {
   @keyframes pulse {
-    from { opacity: 1; }
-    to { opacity: 0.6; }
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0.6;
+    }
   }
 
   @keyframes fade {
-    from { opacity: 1; }
-    to { opacity: 0; }
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
   }
 
   .card-slot .pokecard {
@@ -671,12 +680,12 @@ img.hf-logo {
   }
 }
 
-
 /* Pokémon Card */
 
 .card-slot {
+  height: 100%;
   perspective: 100rem;
-  transition: transform 0.5s ease-out;
+  transition: transform 0.5s ease-out, opacity 0.5s ease-in;
 }
 
 .grass {
@@ -825,13 +834,6 @@ img.hf-logo {
   box-shadow: 0 0.75rem 1.25rem 0 hsl(0 0% 50% / 40%);
 }
 
-.pokecard[data-displayed='true'] {
-  display: flex;
-}
-.pokecard[data-displayed='false'] {
-  display: none;
-}
-
 .pokecard .lower-half {
   display: flex;
   flex-direction: column;
@@ -980,11 +982,12 @@ header .energy {
   text-align: center;
 }
 
-.no-cost .attack-text > span:only-child, .no-cost.no-damage .attack-text > span:only-child {
+.no-cost .attack-text > span:only-child,
+.no-cost.no-damage .attack-text > span:only-child {
   width: var(--card-width);
   margin-left: -2.5rem;
 }
-.no-damage .attack-text  > span:only-child {
+.no-damage .attack-text > span:only-child {
   width: var(--card-width);
   margin-left: -5.5rem;
 }