From 5c59683074a2191460038f2f67fa8c1d8738282b Mon Sep 17 00:00:00 2001
From: Diego Marcos Segura <diego.marcos@gmail.com>
Date: Tue, 9 May 2023 00:13:03 -0700
Subject: [PATCH] Add CSS styles to demo page to make it a bit cleaner

---
 index.html |  79 +++++++++++++++++------------
 styles.css | 146 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 192 insertions(+), 33 deletions(-)
 create mode 100644 styles.css
diff --git a/index.html b/index.html
index 44b3de9..00f42ee 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
       http-equiv="origin-trial"
       content="Anx9P4m5tzLOL/wLICKy/mA+DRyoSsTkyqmnK5t+S7oyw7A2SeBI2jO4LKqoQiQgChP2MTtqMNKofelMwvGtPQsAAABKeyJvcmlnaW4iOiJodHRwczovL2ttZWFucy5vcmc6NDQzIiwiZmVhdHVyZSI6IldlYkdQVSIsImV4cGlyeSI6MTY5MTcxMTk5OX0="
     />
+    <link rel="stylesheet" href="styles.css">
     <script src="tokenizer.js"></script>
     <script src="instructions.js"></script>
     <script src="model.js"></script>
@@ -13,45 +14,54 @@
     <script src="globals.js"></script>
   </head>
   <body>
-    <h1>WebGPU GPT Model Demo</h1>
-    <p id="webgpuSupportMessage">Checking WebGPU support...</p>
-    <p>
-      <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>
-    </p>
-
-    <button class="loadModelButton" onclick="loadModel('better_shakespeare', 'char')" disabled>Load Shakespeare Model</button>
-    <button class="loadModelButton" onclick="loadModel('gpt2', 'bpe')" disabled>Load GPT2 117M Model</button>
-    <button id="destroyCacheButton" onclick="destroyCache()" disabled>Destroy Cache</button>
-
-    <p>
-      <i>Special models (download required):</i>
-    </p>
-    <button class="loadModelButton" onclick="loadModel('large-models/gpt2-medium', 'bpe')" disabled>Load GPT2 377M Model</button>
-    <button class="loadModelButton" onclick="loadModel('large-models/gpt2-large', 'bpe')" disabled>Load GPT2 777M Model</button>
-    <button class="loadModelButton" onclick="loadModel('large-models/gpt2-xl', 'bpe')" disabled>Load GPT2 1.5B Model</button>
-
-    <br />
-    <br />
-    <label for="tokens">Number of tokens:</label>
-    <input type="number" min="1" max="300" value="100" id="tokensInput" disabled />
-    <br /><br />
-    <label for="topK">Top K:</label>
-    <input type="number" min="1" max="100" value="2" id="topKInput" disabled />
-    <br /><br />
-    <label for="temperature">Temperature:</label>
-    <input type="number" step="0.01" min="0.1" max="2" value="1" id="temperatureInput" disabled />
-    <br /><br />
-    <button id="generateButton" onclick="startGeneration()" disabled>Generate Text</button>
-    <br /><br />
-    <textarea id="prompt" rows="15" cols="50" disabled>
+    <div class="container">
+
+      <h1>WebGPU GPT Model Demo</h1>
+      <h3 id="webgpuSupportMessage" class="support-message">Checking WebGPU support...</h3>
+      <p>
+        <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>
+      </p>
+
+      <button class="loadModelButton" onclick="loadModel('better_shakespeare', 'char', this)" disabled>
+        <span class="button-text">Load Shakespeare Model</span>
+      </button>
+      <button class="loadModelButton" onclick="loadModel('gpt2', 'bpe', this)" disabled>
+        <span class="button-text">Load GPT2 117M Model</span>
+      </button>
+      <button id="destroyCacheButton" onclick="destroyCache()" disabled>Destroy Cache</button>
+
+      <p>
+        <i>Special models (download required):</i>
+      </p>
+      <button class="loadModelButton" onclick="loadModel('large-models/gpt2-medium', 'bpe', this)" disabled>
+        <span class="button-text">Load GPT2 377M Model</span>
+      </button>
+      <button class="loadModelButton" onclick="loadModel('large-models/gpt2-large', 'bpe', this)" disabled>
+        <span class="button-text">Load GPT2 777M Model</span>
+      </button>
+      <button class="loadModelButton" onclick="loadModel('large-models/gpt2-xl', 'bpe', this)" disabled>
+        <span class="button-text">Load GPT2 1.5B Model</span>
+      </button>
+
+      <div>
+        <button id="generateButton" onclick="startGeneration()" disabled>Generate Text</button>
+        <label for="tokens">Number of tokens:</label>
+        <input type="number" min="1" max="300" value="100" id="tokensInput" disabled />
+        <label for="topK">Top K:</label>
+        <input type="number" min="1" max="100" value="2" id="topKInput" disabled />
+        <label for="temperature">Temperature:</label>
+        <input type="number" step="0.01" min="0.1" max="2" value="1" id="temperatureInput" disabled />
+        <textarea class="prompt" id="prompt" rows="15" cols="50" disabled>
 WILL:
 Ah, how dare you challenge me?
 Have you forgotten I built WebGPT?&#13;&#10;</textarea
     >
+    </div>
     <br /><br />
     <button id="updateVisuals" onclick="updateVisuals()" disabled>Force Update Visuals</button>
     <br /><br />
     <div id="visualsContainer"></div>
+    </div>
     <script>
       const webgpuSupportMessage = document.getElementById("webgpuSupportMessage");
       const loadModelButton = document.getElementsByClassName("loadModelButton");
@@ -74,9 +84,11 @@ <h1>WebGPU GPT Model Demo</h1>
       if (!navigator.gpu) {
         webgpuSupportMessage.innerHTML =
           "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>.";
+          webgpuSupportMessage.classList.add('red');
         console.error("WebGPU is not supported");
       } else {
         webgpuSupportMessage.innerHTML = "WebGPU is supported in your browser!";
+        webgpuSupportMessage.classList.add('green');
         setModelButtonDisabled(false);
       }
 
@@ -98,13 +110,14 @@ <h1>WebGPU GPT Model Demo</h1>
         setTextareaDisabled(false);
       }
 
-      async function loadModel(folder, tokenizer) {
+      async function loadModel(folder, tokenizer, buttonEl) {
         setModelButtonDisabled(true);
 
+        buttonEl.classList.add('loading');
         GPTModel = new GPT(folder, tokenizer);
         await GPTModel.initialize();
 
-
+        buttonEl.classList.remove('loading');
         promptTextarea.value = GPTModel.defaultPrompt;
         topKInput.value = GPTModel.defaultTopK;
         tokensInput.value = GPTModel.defaultTokens;
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..74e39bf
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,146 @@
+* {
+  box-sizing: content-box;
+}
+
+body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  font-size: 16px;
+}
+
+.container {
+  width: 90%;
+}
+
+h1 {
+  font-size: 36px;
+}
+
+h2 {
+  font-size: 20px;
+  line-height: 36px;
+}
+
+h3 {
+  font-weight: normal;
+  font-size: 16px;
+  margin-bottom: 30px;
+}
+
+button {
+  color: rgb(36, 41, 47);
+  background-color: rgb(246, 248, 250);
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color,background-color,box-shadow,border-color;
+  display: inline-block;
+  padding: 5px 16px;
+  line-height: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  border: 1px solid;
+  border-radius: 6px;
+  appearance: none;
+  border-color: rgba(31, 35, 40, 0.15);
+  position: relative;
+  margin-right: 10px;
+}
+
+button:hover {
+  background-color: rgb(243, 244, 246);
+  transition-duration: .1s;
+}
+
+button:active {
+  background-color: rgb(235, 236, 240);
+}
+
+button:disabled {
+  background-color: rgba(239, 239, 239, 0.3);
+  color: rgba(16, 16, 16, 0.3);
+  border-color: rgba(118, 118, 118, 0.3);
+  cursor: default;
+}
+
+button.loading::after {
+  content: "";
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  border: 0.2rem solid #6c757d;
+  border-right-color: transparent;
+  border-radius: 50%;
+  vertical-align: middle;
+  color: #6c757d;
+  animation: spinner .75s linear infinite;
+}
+
+button.loading .button-text {
+  visibility: hidden;
+}
+
+@keyframes spinner {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+textarea {
+  resize: vertical;
+  box-sizing: border-box; 
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  margin-top: 20px;
+}
+
+.prompt {
+  display: block;
+  width: 100%;
+  padding: 10px 20px;
+  max-width: 700px;
+  background-clip: padding-box;
+  border: 1px solid #dee2e6;
+  appearance: none;
+  border-radius: 6px;
+}
+
+.prompt:disabled {
+  background-color: rgba(239, 239, 239, 0.3);
+  color: rgba(16, 16, 16, 0.3);
+  border-color: rgba(118, 118, 118, 0.3);
+  cursor: default;
+  user-select: none;
+}
+
+input[type="number"] {
+  display: inline-block;
+  line-height: 20px;
+  background-clip: padding-box;
+  border: 1px solid #dee2e6;
+  appearance: none;
+  border-radius: 6px;
+  padding: 5px 5px 5px 12px;;
+  line-height: 20px;
+  margin: 30px 10px 0px 0;
+}
+
+input[type="number"]:disabled {
+  background-color: rgba(239, 239, 239, 0.3);
+  color: rgba(16, 16, 16, 0.3);
+  border-color: rgba(118, 118, 118, 0.3);
+  cursor: default;
+  user-select: none;
+}
+
+.support-message.green {
+  color: #13795b;
+}
+
+.support-message.red {
+  color: #c6303e;
+}
\ No newline at end of file
