feat: polished UI for websat

NeonGeckoCom · Jan 4, 2024 · a1b5eb6 · a1b5eb6
1 parent a062295
commit a1b5eb6
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 29 deletions.
diff --git a/.gitignore b/.gitignore
@@ -127,3 +127,5 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+
+.DS_Store
diff --git a/README.md b/README.md
@@ -141,7 +141,7 @@ The websat web UI reads in the following items from `neon_iris/static/custom`:
 - `error.mp3` - Used for error responses
 - `wake.mp3` - Used for wake word responses
 - `favicon.ico` - The favicon for the web UI
-- `logo.webp` - The logo for the web UI
+- `logo.svg` - The logo for the web UI
 
 To customize these items, you can replace them in the `neon_iris/static/custom` folder and rebuild the image.
 

diff --git a/neon_iris/index.html b/neon_iris/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+
+<head>
+  <link rel="icon" href="static/custom/favicon.ico" type="image/x-icon" />
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{{ title }}</title>
+  <link rel="stylesheet" href="static/sprite.css" />
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" />
+  <style>
+    :root {
+      --color-neon-green: #2b7b2b;
+      --color-neon-orange: #ffa764;
+      --color-neon-beige: #ebd4b3;
+      --color-neon-gray: #fefefe;
+    }
+  </style>
+</head>
+
+<body class="font-roboto text-center bg-gray-900 text-white">
+  <div class="chat-container flex flex-col min-h-screen">
+    <div class="chat-header text-4xl font-bold p-6 bg-gray-800 shadow-md">
+      {{ description }}
+      <img src="static/custom/logo.svg" class="logo w-10 h-10 ml-2 inline-block" />
+    </div>
+    <button id="startButton"
+      class="btn mx-auto my-6 px-6 py-3 rounded shadow-lg text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-green-700 dark:bg-neon-green"
+      style="background-color: var(--color-neon-green)">
+      Start Recording
+    </button>
+    <div class="chat-window flex-grow p-4 overflow-auto">
+      <div id="chatHistory" class="flex flex-col items-start space-y-2 overflow-y-auto">
+        <!-- Chat messages will appear here -->
+      </div>
+    </div>
+    <div id="download-area" class="p-4 bg-gray-800 hidden">
+      <!-- Downloadable content or hidden if not needed -->
+    </div>
+    <div class="input-area flex justify-between items-center p-4 space-x-4 bg-gray-800">
+      <input type="text" id="chatInput" placeholder="{{ placeholder }}"
+        class="flex-grow px-4 py-3 rounded bg-gray-600 text-white focus:outline-none focus:ring-2 focus:ring-green-700" />
+      <button onclick="submitMessage()"
+        class="px-6 py-3 rounded shadow-lg text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-orange-700 dark:bg-neon-orange"
+        style="background-color: var(--color-neon-orange);">Submit</button>
+    </div>
+  </div>
+  <!-- Silero VAD -->
+  <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@ricky0123/[email protected]/dist/bundle.min.js"></script>
+  <!-- Config -->
+  <script>
+    const WS_URL = "{{ ws_url }}";
+  </script>
+  <!-- AI Code -->
+  <script src="static/scripts/websocket.js"></script>
+  <script src="static/scripts/audio.js"></script>
+  <script src="static/scripts/ui.js"></script>
+  <script src="static/scripts/sprite.js"></script>
+</body>
+
+</html>
diff --git a/neon_iris/static/custom/favicon.ico b/neon_iris/static/custom/favicon.ico
diff --git a/neon_iris/static/custom/logo.svg b/neon_iris/static/custom/logo.svg
diff --git a/neon_iris/static/custom/logo.webp b/neon_iris/static/custom/logo.webp
diff --git a/neon_iris/templates/index.html b/neon_iris/templates/index.html
@@ -1,42 +1,81 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
   <head>
-    <link rel="icon" href="/static/custom/favicon.ico" type="image/x-icon" />
+    <link rel="icon" href="static/custom/favicon.ico" type="image/x-icon" />
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{ title }}</title>
-    <link rel="stylesheet" href="/static/styles.css" />
-    <link rel="stylesheet" href="/static/sprite.css" />
+    <link rel="stylesheet" href="static/sprite.css" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
+      rel="stylesheet"
+    />
+    <style>
+      :root {
+        --color-neon-green: #2b7b2b;
+        --color-neon-orange: #ffa764;
+        --color-neon-beige: #ebd4b3;
+        --color-neon-gray: #fefefe;
+      }
+    </style>
   </head>
-  <body>
-    <div class="chat-container">
-      <div class="chat-header">
-        {{ description }} <img src="/static/custom/logo.webp" class="logo" />
+
+  <body class="font-roboto text-center bg-gray-900 text-white">
+    <div class="chat-container flex flex-col min-h-screen">
+      <div class="chat-header text-4xl font-bold p-6 bg-gray-800 shadow-md">
+        {{ description }}
+        <img
+          src="static/custom/logo.svg"
+          class="logo w-10 h-10 ml-2 inline-block"
+        />
       </div>
-      <button id="startButton">Start Recording</button>
-      <div class="chat-window" id="chatWindow">
-        <div id="chatHistory">
+      <button
+        id="startButton"
+        class="btn mx-auto my-6 px-6 py-3 rounded shadow-lg text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-green-700 dark:bg-neon-green"
+        style="background-color: var(--color-neon-green)"
+      >
+        Start Recording
+      </button>
+      <div class="chat-window flex-grow p-4 overflow-auto">
+        <div
+          id="chatHistory"
+          class="flex flex-col items-start space-y-2 overflow-y-auto"
+        >
           <!-- Chat messages will appear here -->
         </div>
       </div>
-      <div id="download-area"></div>
-      <div class="input-area">
-        <input type="text" id="chatInput" placeholder="{{ placeholder }}" />
-        <button onclick="submitMessage()">Submit</button>
-        <div class="sprite" />
+      <div id="download-area" class="p-4 bg-gray-800 hidden">
+        <!-- Downloadable content or hidden if not needed -->
+      </div>
+      <div
+        class="input-area flex justify-between items-center p-4 space-x-4 bg-gray-800"
+      >
+        <input
+          type="text"
+          id="chatInput"
+          placeholder="{{ placeholder }}"
+          class="flex-grow px-4 py-3 rounded bg-gray-600 text-white focus:outline-none focus:ring-2 focus:ring-green-700"
+        />
+        <button
+          onclick="submitMessage()"
+          class="px-6 py-3 rounded shadow-lg text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-orange-700 dark:bg-neon-orange"
+          style="background-color: var(--color-neon-orange)"
+        >
+          Submit
+        </button>
       </div>
     </div>
+    <!-- Silero VAD -->
+    <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@ricky0123/[email protected]/dist/bundle.min.js"></script>
+    <!-- Config -->
+    <script>
+      const WS_URL = "{{ ws_url }}";
+    </script>
+    <!-- AI Code -->
+    <script src="static/scripts/websocket.js"></script>
+    <script src="static/scripts/audio.js"></script>
+    <script src="static/scripts/ui.js"></script>
+    <script src="static/scripts/sprite.js"></script>
   </body>
-  <!-- Silero VAD -->
-  <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@ricky0123/[email protected]/dist/bundle.min.js"></script>
-  <!-- Config -->
-  <script>
-    const WS_URL = "{{ ws_url }}";
-  </script>
-  <!-- AI Code -->
-  <script src="/static/scripts/websocket.js"></script>
-  <script src="/static/scripts/audio.js"></script>
-  <script src="/static/scripts/ui.js"></script>
-  <script src="/static/scripts/sprite.js"></script>
 </html>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -127,3 +127,5 @@ dmypy.json

		# Pyre type checker
		.pyre/

		.DS_Store