|
<html> |
|
<head> |
|
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> |
|
<title>TinyStories - Candle Llama.c Rust/WASM</title> |
|
</head> |
|
<body></body> |
|
</html> |
|
|
|
<!doctype html> |
|
<html> |
|
<head> |
|
<meta charset="UTF-8" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
<style> |
|
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@200;400;500;700&family=Source+Sans+3:wght@200;400;500;600;700;800;900&display=swap"); |
|
html, |
|
body { |
|
font-family: "Source Sans 3", sans-serif; |
|
} |
|
.mono { |
|
font-family: "IBM Plex Mono", monospace; |
|
} |
|
</style> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<style type="text/tailwindcss"> |
|
.c-block { |
|
grid-column: 1; |
|
@apply bg-slate-100 text-gray-500 px-5 py-6 rounded-2xl min-h-[30em] sm:min-h-[25em] leading-relaxed cursor-pointer overflow-hidden row-span-6; |
|
font-family: "IBM Plex Mono", monospace; |
|
} |
|
.c-block span { |
|
font-weight: 600; |
|
} |
|
.n-block { |
|
@apply text-xs w-[50px] text-center font-light px-1 py-1 border border-white rounded-md; |
|
} |
|
.c-hover { |
|
z-index: 100; |
|
filter: drop-shadow(0 35px 35px rgba(0, 0, 0, 0.9)); |
|
transform: scale(1.05); |
|
transition: transform 0.1s ease-in-out; |
|
} |
|
</style> |
|
<script type="module" src="./code.js"></script> |
|
</head> |
|
<body class="container mx-auto max-w-2xl p-4 bg-[#020058]"> |
|
<img src="./imgs/cat.png" class="fixed top-0 left-0 w-20 -z-10" /> |
|
<header class="py-2 mb-6"> |
|
<h1 class="text-5xl font-bold text-white text-center">Tiny Stories</h1> |
|
<h1 class="text-3xl text-white text-center mono"> |
|
<a |
|
href="https://github.com/huggingface/candle" |
|
target="_blank" |
|
class="underline hover:no-underline" |
|
>Candle</a |
|
> |
|
<a |
|
href="https://github.com/karpathy/llama2.c" |
|
target="_blank" |
|
class="underline hover:no-underline" |
|
>Llama2.c |
|
</a> |
|
</h1> |
|
<h2 class="text-2xl text-white text-center mono">Rust/WASM</h2> |
|
</header> |
|
<form |
|
id="form" |
|
class="flex text-normal px-1 py-2 border-2 border-white rounded-md items-center" |
|
> |
|
<input type="submit" hidden="" /> |
|
<input |
|
type="text" |
|
id="prompt" |
|
class="w-full px-3 py-2 mx-1 resize-none outline-none bg-[#020058] text-white" |
|
placeholder="Add your prompt here..." |
|
value="Once upon a time" |
|
/> |
|
<button |
|
id="run" |
|
class="bg-white hover:bg-gray-400 text-black font-normal py-2 w-20 rounded disabled:bg-gray-300 disabled:cursor-not-allowed" |
|
> |
|
Create |
|
</button> |
|
</form> |
|
<details class="text-white cursor-pointer"> |
|
<summary class="text-xs">Advanced:</summary> |
|
<div class="grid grid-cols-3 max-w-md items-center gap-3 py-3"> |
|
<label for="model" class="text-sm">Models Options: </label> |
|
<select |
|
id="model" |
|
class="border-2 border-white rounded-md font-light text-white bg-[#020058] px-1" |
|
> |
|
<option value="stories15M" selected>stories 15M (60.8 MB)</option> |
|
<option value="stories42M">stories 42M (167 MB)</option> |
|
<option value="stories110M">stories 110M (438 MB) WARNING</option> |
|
</select> |
|
<span></span> |
|
<label class="text-sm font-medium" for="max-seq">Maximum length </label> |
|
<input |
|
type="range" |
|
id="max-seq" |
|
min="1" |
|
max="256" |
|
step="1" |
|
value="150" |
|
oninput="this.nextElementSibling.value = Number(this.value)" |
|
/> |
|
<output class="n-block"> 150</output> |
|
<label class="text-sm font-medium" for="temperature">Temperature</label> |
|
<input |
|
type="range" |
|
id="temperature" |
|
min="0" |
|
max="2" |
|
step="0.01" |
|
value="0.2" |
|
oninput="this.nextElementSibling.value = Number(this.value).toFixed(2)" |
|
/> |
|
<output class="n-block">0.2</output> |
|
|
|
<label class="text-sm font-medium" for="repeat_penalty" |
|
>Repeat Penalty</label |
|
> |
|
<input |
|
type="range" |
|
id="repeat-penalty" |
|
min="-2" |
|
max="2" |
|
step="0.01" |
|
value="1.10" |
|
oninput="this.nextElementSibling.value = Number(this.value).toFixed(2)" |
|
/> |
|
<output class="n-block">1.10</output> |
|
</div> |
|
</details> |
|
<div class="text-base grid gap-3 py-5" id="container"></div> |
|
</body> |
|
</html> |
|
|
