Skip to content

Commit 5c59683

Browse files
dmarcosdmarcos
committed
Add CSS styles to demo page to make it a bit cleaner
1 parent 94f81e7 commit 5c59683

File tree

2 files changed

+192
-33
lines changed

2 files changed

+192
-33
lines changed

‎index.html

+46-33
Original file line numberDiff line numberDiff line change
@@ -6,52 +6,62 @@
66
http-equiv="origin-trial"
77
content="Anx9P4m5tzLOL/wLICKy/mA+DRyoSsTkyqmnK5t+S7oyw7A2SeBI2jO4LKqoQiQgChP2MTtqMNKofelMwvGtPQsAAABKeyJvcmlnaW4iOiJodHRwczovL2ttZWFucy5vcmc6NDQzIiwiZmVhdHVyZSI6IldlYkdQVSIsImV4cGlyeSI6MTY5MTcxMTk5OX0="
88
/>
9+
<link rel="stylesheet" href="styles.css">
910
<script src="tokenizer.js"></script>
1011
<script src="instructions.js"></script>
1112
<script src="model.js"></script>
1213
<script src="visuals.js"></script>
1314
<script src="globals.js"></script>
1415
</head>
1516
<body>
16-
<h1>WebGPU GPT Model Demo</h1>
17-
<p id="webgpuSupportMessage">Checking WebGPU support...</p>
18-
<p>
19-
<i>PS: Loading models is 5x slower on the web rather than running locally. Just <a href="https://github.com/0hq/WebGPT">clone the repo</a> and open!</i>
20-
</p>
21-
22-
<button class="loadModelButton" onclick="loadModel('better_shakespeare', 'char')" disabled>Load Shakespeare Model</button>
23-
<button class="loadModelButton" onclick="loadModel('gpt2', 'bpe')" disabled>Load GPT2 117M Model</button>
24-
<button id="destroyCacheButton" onclick="destroyCache()" disabled>Destroy Cache</button>
25-
26-
<p>
27-
<i>Special models (download required):</i>
28-
</p>
29-
<button class="loadModelButton" onclick="loadModel('large-models/gpt2-medium', 'bpe')" disabled>Load GPT2 377M Model</button>
30-
<button class="loadModelButton" onclick="loadModel('large-models/gpt2-large', 'bpe')" disabled>Load GPT2 777M Model</button>
31-
<button class="loadModelButton" onclick="loadModel('large-models/gpt2-xl', 'bpe')" disabled>Load GPT2 1.5B Model</button>
32-
33-
<br />
34-
<br />
35-
<label for="tokens">Number of tokens:</label>
36-
<input type="number" min="1" max="300" value="100" id="tokensInput" disabled />
37-
<br /><br />
38-
<label for="topK">Top K:</label>
39-
<input type="number" min="1" max="100" value="2" id="topKInput" disabled />
40-
<br /><br />
41-
<label for="temperature">Temperature:</label>
42-
<input type="number" step="0.01" min="0.1" max="2" value="1" id="temperatureInput" disabled />
43-
<br /><br />
44-
<button id="generateButton" onclick="startGeneration()" disabled>Generate Text</button>
45-
<br /><br />
46-
<textarea id="prompt" rows="15" cols="50" disabled>
17+
<div class="container">
18+
19+
<h1>WebGPU GPT Model Demo</h1>
20+
<h3 id="webgpuSupportMessage" class="support-message">Checking WebGPU support...</h3>
21+
<p>
22+
<i>PS: Loading models is 5x slower on the web rather than running locally. Just <a href="https://github.com/0hq/WebGPT">clone the repo</a> and open!</i>
23+
</p>
24+
25+
<button class="loadModelButton" onclick="loadModel('better_shakespeare', 'char', this)" disabled>
26+
<span class="button-text">Load Shakespeare Model</span>
27+
</button>
28+
<button class="loadModelButton" onclick="loadModel('gpt2', 'bpe', this)" disabled>
29+
<span class="button-text">Load GPT2 117M Model</span>
30+
</button>
31+
<button id="destroyCacheButton" onclick="destroyCache()" disabled>Destroy Cache</button>
32+
33+
<p>
34+
<i>Special models (download required):</i>
35+
</p>
36+
<button class="loadModelButton" onclick="loadModel('large-models/gpt2-medium', 'bpe', this)" disabled>
37+
<span class="button-text">Load GPT2 377M Model</span>
38+
</button>
39+
<button class="loadModelButton" onclick="loadModel('large-models/gpt2-large', 'bpe', this)" disabled>
40+
<span class="button-text">Load GPT2 777M Model</span>
41+
</button>
42+
<button class="loadModelButton" onclick="loadModel('large-models/gpt2-xl', 'bpe', this)" disabled>
43+
<span class="button-text">Load GPT2 1.5B Model</span>
44+
</button>
45+
46+
<div>
47+
<button id="generateButton" onclick="startGeneration()" disabled>Generate Text</button>
48+
<label for="tokens">Number of tokens:</label>
49+
<input type="number" min="1" max="300" value="100" id="tokensInput" disabled />
50+
<label for="topK">Top K:</label>
51+
<input type="number" min="1" max="100" value="2" id="topKInput" disabled />
52+
<label for="temperature">Temperature:</label>
53+
<input type="number" step="0.01" min="0.1" max="2" value="1" id="temperatureInput" disabled />
54+
<textarea class="prompt" id="prompt" rows="15" cols="50" disabled>
4755
WILL:
4856
Ah, how dare you challenge me?
4957
Have you forgotten I built WebGPT?&#13;&#10;</textarea
5058
>
59+
</div>
5160
<br /><br />
5261
<button id="updateVisuals" onclick="updateVisuals()" disabled>Force Update Visuals</button>
5362
<br /><br />
5463
<div id="visualsContainer"></div>
64+
</div>
5565
<script>
5666
const webgpuSupportMessage = document.getElementById("webgpuSupportMessage");
5767
const loadModelButton = document.getElementsByClassName("loadModelButton");
@@ -74,9 +84,11 @@ <h1>WebGPU GPT Model Demo</h1>
7484
if (!navigator.gpu) {
7585
webgpuSupportMessage.innerHTML =
7686
"WebGPU is not supported in your browser yet. Update Chrome to v113 or download <a href='https://www.google.com/chrome/canary/'>Chrome Canary</a>. Also available on <a href='https://www.microsoftedgeinsider.com/en-us/download/canary'>Edge Canary</a>.";
87+
webgpuSupportMessage.classList.add('red');
7788
console.error("WebGPU is not supported");
7889
} else {
7990
webgpuSupportMessage.innerHTML = "WebGPU is supported in your browser!";
91+
webgpuSupportMessage.classList.add('green');
8092
setModelButtonDisabled(false);
8193
}
8294

@@ -98,13 +110,14 @@ <h1>WebGPU GPT Model Demo</h1>
98110
setTextareaDisabled(false);
99111
}
100112

101-
async function loadModel(folder, tokenizer) {
113+
async function loadModel(folder, tokenizer, buttonEl) {
102114
setModelButtonDisabled(true);
103115

116+
buttonEl.classList.add('loading');
104117
GPTModel = new GPT(folder, tokenizer);
105118
await GPTModel.initialize();
106119

107-
120+
buttonEl.classList.remove('loading');
108121
promptTextarea.value = GPTModel.defaultPrompt;
109122
topKInput.value = GPTModel.defaultTopK;
110123
tokensInput.value = GPTModel.defaultTokens;

‎styles.css

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
* {
2+
box-sizing: content-box;
3+
}
4+
5+
body {
6+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
7+
display: flex;
8+
justify-content: center;
9+
font-size: 16px;
10+
}
11+
12+
.container {
13+
width: 90%;
14+
}
15+
16+
h1 {
17+
font-size: 36px;
18+
}
19+
20+
h2 {
21+
font-size: 20px;
22+
line-height: 36px;
23+
}
24+
25+
h3 {
26+
font-weight: normal;
27+
font-size: 16px;
28+
margin-bottom: 30px;
29+
}
30+
31+
button {
32+
color: rgb(36, 41, 47);
33+
background-color: rgb(246, 248, 250);
34+
transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
35+
transition-property: color,background-color,box-shadow,border-color;
36+
display: inline-block;
37+
padding: 5px 16px;
38+
line-height: 20px;
39+
vertical-align: middle;
40+
cursor: pointer;
41+
user-select: none;
42+
border: 1px solid;
43+
border-radius: 6px;
44+
appearance: none;
45+
border-color: rgba(31, 35, 40, 0.15);
46+
position: relative;
47+
margin-right: 10px;
48+
}
49+
50+
button:hover {
51+
background-color: rgb(243, 244, 246);
52+
transition-duration: .1s;
53+
}
54+
55+
button:active {
56+
background-color: rgb(235, 236, 240);
57+
}
58+
59+
button:disabled {
60+
background-color: rgba(239, 239, 239, 0.3);
61+
color: rgba(16, 16, 16, 0.3);
62+
border-color: rgba(118, 118, 118, 0.3);
63+
cursor: default;
64+
}
65+
66+
button.loading::after {
67+
content: "";
68+
position: absolute;
69+
width: 12px;
70+
height: 12px;
71+
top: 0;
72+
left: 0;
73+
right: 0;
74+
bottom: 0;
75+
margin: auto;
76+
border: 0.2rem solid #6c757d;
77+
border-right-color: transparent;
78+
border-radius: 50%;
79+
vertical-align: middle;
80+
color: #6c757d;
81+
animation: spinner .75s linear infinite;
82+
}
83+
84+
button.loading .button-text {
85+
visibility: hidden;
86+
}
87+
88+
@keyframes spinner {
89+
100% {
90+
transform: rotate(360deg);
91+
}
92+
}
93+
94+
textarea {
95+
resize: vertical;
96+
box-sizing: border-box;
97+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
98+
margin-top: 20px;
99+
}
100+
101+
.prompt {
102+
display: block;
103+
width: 100%;
104+
padding: 10px 20px;
105+
max-width: 700px;
106+
background-clip: padding-box;
107+
border: 1px solid #dee2e6;
108+
appearance: none;
109+
border-radius: 6px;
110+
}
111+
112+
.prompt:disabled {
113+
background-color: rgba(239, 239, 239, 0.3);
114+
color: rgba(16, 16, 16, 0.3);
115+
border-color: rgba(118, 118, 118, 0.3);
116+
cursor: default;
117+
user-select: none;
118+
}
119+
120+
input[type="number"] {
121+
display: inline-block;
122+
line-height: 20px;
123+
background-clip: padding-box;
124+
border: 1px solid #dee2e6;
125+
appearance: none;
126+
border-radius: 6px;
127+
padding: 5px 5px 5px 12px;;
128+
line-height: 20px;
129+
margin: 30px 10px 0px 0;
130+
}
131+
132+
input[type="number"]:disabled {
133+
background-color: rgba(239, 239, 239, 0.3);
134+
color: rgba(16, 16, 16, 0.3);
135+
border-color: rgba(118, 118, 118, 0.3);
136+
cursor: default;
137+
user-select: none;
138+
}
139+
140+
.support-message.green {
141+
color: #13795b;
142+
}
143+
144+
.support-message.red {
145+
color: #c6303e;
146+
}

0 commit comments

Comments
 (0)