Something went wrong. Try again.
a tiny pet with a GPT-2 brain, living in your browser
Something went wrong. Try again.
4.1 kB · 120 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121import { useState } from "preact/hooks";import { RUNTIME_BYTES, loadBrain, onMobileData } from "../app/brain.ts";import { exportBadEgg, getEgg, hatchPet, replaceBadEgg } from "../app/commands.ts";import { CFG, NAME_IDEAS } from "../app/config.ts";import { brain, store } from "../app/store.ts";import { fmtMB, pick } from "../app/utils.ts";
export function Setup() { const { state: s, badEgg } = store; const [owner, setOwner] = useState(s.owner); const [name, setName] = useState(() => pick(NAME_IDEAS)); const ownerStep = !s.owner || !s.egg; const progress = brain.progress; const note = brain.state === "ready" ? "The egg is wiggling! Name your pet to hatch it." : brain.state === "error" ? `The egg needs its brain, which could not load: ${brain.error}` : brain.state === "warming" ? "Almost there… something is stirring inside." : progress ? `Your egg is warming up while its brain downloads: ${fmtMB(progress.loaded)} of ${fmtMB(progress.total)}.` : "Your egg is warming up…"; return ( <div id="pet-setup" class="pet-setup" hidden={!!s.pet}> <form id="setup-owner" hidden={!ownerStep || !!badEgg} onSubmit={(e) => { e.preventDefault(); getEgg(owner); }} > <label for="owner-name">What should your pet call you?</label> <div class="pet-row"> <input id="owner-name" name="owner" maxLength={24} autoComplete="nickname" required value={owner} onInput={(e) => setOwner(e.currentTarget.value)} /> <button class="primary" type="submit"> get an egg </button> </div> <p id="setup-size" class="muted small"> The egg hatches once its brain has downloaded: about {fmtMB(CFG.size + RUNTIME_BYTES)}, once. It stays in this browser. {onMobileData() ? " You seem to be on mobile data; Wi-Fi may be kinder to your plan." : " Wi-Fi is a good idea."} </p> </form> <div id="bad-egg" class="bad-egg" hidden={!badEgg}> <h2>Bad egg?!</h2> <p id="bad-egg-why"> {badEgg && `The save in this browser couldn't be read: ${badEgg.why}. It's still there, untouched.`} </p> <p class="muted small"> Download it to keep a copy, try again if this page might be out of date, or start with a new egg. </p> <div class="pet-row"> <button id="bad-egg-save" type="button" class="text-button" onClick={exportBadEgg}> download it </button> <button id="bad-egg-retry" type="button" class="text-button" hidden={!badEgg?.newer} onClick={() => location.reload()} > try again </button> <button id="bad-egg-new" type="button" class="primary" onClick={replaceBadEgg}> start anew </button> </div> </div> <form id="setup-hatch" hidden={ownerStep || !!badEgg} onSubmit={(e) => { e.preventDefault(); hatchPet(name); }} > <p id="setup-hatch-note">{note}</p> <button id="setup-retry" type="button" class="text-button" hidden={brain.state !== "error"} onClick={() => loadBrain()} > retry brain download </button> <label for="pet-name">Name your pet</label> <div class="pet-row"> <input id="pet-name" name="pet" maxLength={16} required value={name} onInput={(e) => setName(e.currentTarget.value)} /> <button id="hatch-btn" class="primary" type="submit" disabled={brain.state !== "ready"}> hatch! </button> </div> </form> </div> );}