Skip to content

Commit a4fd718

Browse files
dmarcosdmarcos
committed
Add CSS styles to demo page to make it a bit cleaner
1 parent ae0086f commit a4fd718

File tree

2 files changed

+194
-35
lines changed

2 files changed

+194
-35
lines changed

‎index.html

Lines changed: 48 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -6,48 +6,57 @@
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="globals.js"></script>
1314
</head>
1415
<body>
15-
<h1>WebGPU GPT Model Demo</h1>
16-
<p id="webgpuSupportMessage">Checking WebGPU support...</p>
17-
<p>
18-
<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>
19-
</p>
20-
21-
<button class="loadModelButton" onclick="loadModel('better_shakespeare', 'char')" disabled>Load Shakespeare Model</button>
22-
<button class="loadModelButton" onclick="loadModel('gpt2', 'bpe')" disabled>Load GPT2 117M Model</button>
23-
<button id="destroyCacheButton" onclick="destroyCache()" disabled>Destroy Cache</button>
24-
25-
<p>
26-
<i>Special models (download required):</i>
27-
</p>
28-
<button class="loadModelButton" onclick="loadModel('large-models/gpt2-medium', 'bpe')" disabled>Load GPT2 377M Model</button>
29-
<button class="loadModelButton" onclick="loadModel('large-models/gpt2-large', 'bpe')" disabled>Load GPT2 777M Model</button>
30-
<button class="loadModelButton" onclick="loadModel('large-models/gpt2-xl', 'bpe')" disabled>Load GPT2 1.5B Model</button>
31-
32-
<br />
33-
<br />
34-
<label for="tokens">Number of tokens:</label>
35-
<input type="number" min="1" max="300" value="100" id="tokensInput" disabled />
36-
<br /><br />
37-
<label for="topK">Top K:</label>
38-
<input type="number" min="1" max="100" value="2" id="topKInput" disabled />
39-
<br /><br />
40-
<label for="temperature">Temperature:</label>
41-
<input type="number" step="0.01" min="0.1" max="2" value="1" id="temperatureInput" disabled />
42-
<br /><br />
43-
<button id="generateButton" onclick="startGeneration()" disabled>Generate Text</button>
44-
<br /><br />
45-
<textarea id="prompt" rows="15" cols="50" disabled>
16+
<div class="container">
17+
18+
<h1>WebGPU GPT Model Demo</h1>
19+
<h3 id="webgpuSupportMessage" class="support-message">Checking WebGPU support...</h3>
20+
<p>
21+
<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>
22+
</p>
23+
24+
<button class="loadModelButton" onclick="loadModel('better_shakespeare', 'char', this)" disabled>
25+
<span class="button-text">Load Shakespeare Model</span>
26+
</button>
27+
<button class="loadModelButton" onclick="loadModel('gpt2', 'bpe', this)" disabled>
28+
<span class="button-text">Load GPT2 117M Model</span>
29+
</button>
30+
<button id="destroyCacheButton" onclick="destroyCache()" disabled>Destroy Cache</button>
31+
32+
<p>
33+
<i>Special models (download required):</i>
34+
</p>
35+
<button class="loadModelButton" onclick="loadModel('large-models/gpt2-medium', 'bpe', this)" disabled>
36+
<span class="button-text">Load GPT2 377M Model</span>
37+
</button>
38+
<button class="loadModelButton" onclick="loadModel('large-models/gpt2-large', 'bpe', this)" disabled>
39+
<span class="button-text">Load GPT2 777M Model</span>
40+
</button>
41+
<button class="loadModelButton" onclick="loadModel('large-models/gpt2-xl', 'bpe', this)" disabled>
42+
<span class="button-text">Load GPT2 1.5B Model</span>
43+
</button>
44+
45+
<div>
46+
<button id="generateButton" onclick="startGeneration()" disabled>Generate Text</button>
47+
<label for="tokens">Number of tokens:</label>
48+
<input type="number" min="1" max="300" value="100" id="tokensInput" disabled />
49+
<label for="topK">Top K:</label>
50+
<input type="number" min="1" max="100" value="2" id="topKInput" disabled />
51+
<label for="temperature">Temperature:</label>
52+
<input type="number" step="0.01" min="0.1" max="2" value="1" id="temperatureInput" disabled />
53+
<textarea class="prompt" id="prompt" rows="15" cols="50" disabled>
4654
WILL:
4755
Ah, how dare you challenge me?
48-
Have you forgotten I built WebGPT?&#13;&#10;</textarea
49-
>
50-
<br /><br />
56+
Have you forgotten I built WebGPT?&#13;&#10;
57+
</textarea>
58+
</div>
59+
</div>
5160
<script>
5261
const webgpuSupportMessage = document.getElementById("webgpuSupportMessage");
5362
const loadModelButton = document.getElementsByClassName("loadModelButton");
@@ -68,9 +77,11 @@ <h1>WebGPU GPT Model Demo</h1>
6877
if (!navigator.gpu) {
6978
webgpuSupportMessage.innerHTML =
7079
"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>.";
80+
webgpuSupportMessage.classList.add('red');
7181
console.error("WebGPU is not supported");
7282
} else {
7383
webgpuSupportMessage.innerHTML = "WebGPU is supported in your browser!";
84+
webgpuSupportMessage.classList.add('green');
7485
setModelButtonDisabled(false);
7586
}
7687

@@ -91,12 +102,14 @@ <h1>WebGPU GPT Model Demo</h1>
91102
setTextareaDisabled(false);
92103
}
93104

94-
async function loadModel(folder, tokenizer) {
105+
async function loadModel(folder, tokenizer, buttonEl) {
95106
setModelButtonDisabled(true);
96107

108+
buttonEl.classList.add('loading');
97109
GPTModel = new GPT(folder, tokenizer);
98110
await GPTModel.initialize();
99111

112+
buttonEl.classList.remove('loading');
100113
promptTextarea.value = GPTModel.defaultPrompt;
101114
topKInput.value = GPTModel.defaultTopK;
102115
tokensInput.value = GPTModel.defaultTokens;

‎styles.css

Lines changed: 146 additions & 0 deletions
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)