-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
148 lines (140 loc) · 4.94 KB
/
index.html
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<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://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
<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="1"
max="2"
step="0.01"
value="1.10"
oninput="this.nextElementSibling.value = Number(this.value).toFixed(2)" />
<output class="n-block">1.10</output>
<label class="text-sm font-medium" for="top-p">Top P</label>
<input
type="range"
id="top-p"
min="0"
max="1"
step="0.01"
value="1.00"
oninput="this.nextElementSibling.value = Number(this.value).toFixed(2)" />
<output class="n-block">1.00</output>
</div>
</details>
<div class="text-base grid gap-3 py-5" id="container"></div>
</body>
</html>