Halaman utama Jelajahi Bantuan
Daftar Masuk
lqb
/
exo
cermin dari https://github.com/exo-explore/exo
1
0
Fork 0
Berkas Masalah 0 Wiki
Jelajahi Sumber

working with side bar to choose model, show download percentage, select chat, go back to chats, intitiate download of undownloaded models

cadenmackenzie 8 bulan lalu
induk
7e6c69fd0a
melakukan
31ce70f464
3 mengubah file dengan 139 tambahan dan 65 penghapusan
Tampilan Split Tampilkan Statistik Diff
  1. 93 29
      exo/tinychat/index.css
  2. 32 9
      exo/tinychat/index.html
  3. 14 27
      exo/tinychat/index.js

+ 93 - 29
exo/tinychat/index.css
Tampilan Berkas 

@@ -21,8 +21,8 @@ main {
 
 .home {
 
   width: 100%;
 
   height: 90%;
 
-
 
   margin-bottom: 10rem;
 
+  padding-top: 2rem;
 
 }
 
 
 .title {
 
@@ -129,8 +129,9 @@ main {
 
   flex-direction: column;
 
   gap: 1rem;
 
   align-items: center;
 
-  padding-top: 1rem;
 
+  padding-top: 4rem;
 
   padding-bottom: 11rem;
 
+  margin: 0 auto;
 
 }
 
 
 .message {
 
@@ -149,10 +150,17 @@ main {
 
   color: #000;
 
 }
 
 .download-progress {
 
-  margin-bottom: 12em;
 
+  position: fixed;
 
+  bottom: 11rem;
 
+  left: 50%;
 
+  transform: translateX(-50%);
 
+  margin-left: 125px;
 
+  width: 100%;
 
+  max-width: 1200px;
 
   overflow-y: auto;
 
   min-height: 350px;
 
   padding: 2rem;
 
+  z-index: 998;
 
 }
 
 .message > pre {
 
   white-space: pre-wrap;
 
@@ -271,23 +279,24 @@ main {
 
 }
 
 
 .input-container {
 
-  position: absolute;
 
+  position: fixed;
 
   bottom: 0;
 
-
 
-  /* linear gradient from background-color to transparent on the top */
 
-  background: linear-gradient(
 
-    0deg,
 
-    var(--primary-bg-color) 55%,
 
-    transparent 100%
 
-  );
 
-
 
-  width: 100%;
 
+  left: 250px;
 
+  width: calc(100% - 250px);
 
   max-width: 1200px;
 
   display: flex;
 
   flex-direction: column;
 
   justify-content: center;
 
   align-items: center;
 
   z-index: 999;
 
+  background: linear-gradient(
 
+    0deg,
 
+    var(--primary-bg-color) 55%,
 
+    transparent 100%
 
+  );
 
+  left: 50%;
 
+  transform: translateX(-50%);
 
+  margin-left: 125px;
 
 }
 
 
 .input-performance {
 
@@ -372,22 +381,7 @@ p {
 
 }
 
 
 .model-selector {
 
-  display: flex;
 
-  justify-content: center;
 
-  padding: 20px 0;
 
-}
 
-.model-selector select {
 
-  padding: 10px 20px;
 
-  font-size: 16px;
 
-  border: 1px solid #ccc;
 
-  border-radius: 5px;
 
-  background-color: #f8f8f8;
 
-  cursor: pointer;
 
-}
 
-.model-selector select:focus {
 
-  outline: none;
 
-  border-color: #007bff;
 
-  box-shadow: 0 0 0 2px rgba(0,123,255,.25);
 
+  display: none;
 
 }
 
 
 /* Image upload button styles */
 
@@ -481,4 +475,74 @@ p {
 
 
 .clear-history-button i {
 
   font-size: 14px;
 
+}
 
+
 
+/* Add new sidebar styles */
 
+.sidebar {
 
+  position: fixed;
 
+  left: 0;
 
+  top: 0;
 
+  bottom: 0;
 
+  width: 250px;
 
+  background-color: var(--secondary-color);
 
+  padding: 20px;
 
+  overflow-y: auto;
 
+  z-index: 1000;
 
+}
 
+
 
+.model-option {
 
+  padding: 12px;
 
+  margin: 8px 0;
 
+  border-radius: 8px;
 
+  background-color: var(--primary-bg-color);
 
+  cursor: pointer;
 
+  transition: all 0.2s ease;
 
+}
 
+
 
+.model-option:hover {
 
+  transform: translateX(5px);
 
+}
 
+
 
+.model-option.selected {
 
+  border-left: 3px solid var(--primary-color);
 
+  background-color: var(--secondary-color-transparent);
 
+}
 
+
 
+.model-name {
 
+  font-weight: bold;
 
+  margin-bottom: 4px;
 
+}
 
+
 
+.model-progress {
 
+  font-size: 0.9em;
 
+  color: var(--secondary-color-transparent);
 
+}
 
+
 
+/* Adjust main content to accommodate sidebar */
 
+main {
 
+  margin-left: 250px;
 
+  width: calc(100% - 250px);
 
+}
 
+
 
+/* Add styles for the back button */
 
+.back-button {
 
+  position: fixed;
 
+  top: 1rem;
 
+  left: calc(250px + 1rem); /* Sidebar width + padding */
 
+  background-color: var(--secondary-color);
 
+  color: var(--foreground-color);
 
+  padding: 0.5rem 1rem;
 
+  border-radius: 8px;
 
+  border: none;
 
+  cursor: pointer;
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 0.5rem;
 
+  z-index: 1000;
 
+  transition: all 0.2s ease;
 
+}
 
+
 
+.back-button:hover {
 
+  transform: translateX(-5px);
 
+  background-color: var(--secondary-color-transparent);
 
 }

+ 32 - 9
exo/tinychat/index.html
Tampilan Berkas 

@@ -25,7 +25,22 @@
 
 </head>
 
 <body>
 
 <main x-data="state" x-init="console.log(endpoint)">
 
-     <!-- Error Toast -->
 
+  <div class="sidebar">
 
+    <h2 class="megrim-regular" style="margin-bottom: 20px;">Models</h2>
 
+    <template x-for="(model, key) in models" :key="key">
 
+        <div class="model-option" 
+             :class="{ 'selected': cstate.selectedModel === key }"
 
+             @click="cstate.selectedModel = key">
 
+            <div class="model-name" x-text="model.name"></div>
 
+            <div class="model-progress">
 
+                <template x-if="model.download_percentage != null">
 
+                    <span x-text="model.downloaded ? 'Downloaded' : `${Math.round(model.download_percentage)}% downloaded`"></span>
 
+                </template>
 
+            </div>
 
+        </div>
 
+    </template>
 
+  </div> 
+    <!-- Error Toast -->
 
     <div x-show="errorMessage !== null" x-transition.opacity class="toast">
 
         <div class="toast-header">
 
             <span class="toast-error-message" x-text="errorMessage?.basic || ''"></span>
 
@@ -44,10 +59,7 @@
 
             <span x-text="errorMessage?.stack || ''"></span>
 
         </div>
 
     </div>
 
-<div class="model-selector">
 
-  <select @change="if (cstate) cstate.selectedModel = $event.target.value" x-model="cstate.selectedModel" class='model-select'>
 
-  </select>
 
-</div>
 
+
 
 <div @popstate.window="
 
       if (home === 2) {
 
         home = -1;
 
@@ -79,10 +91,8 @@
 
 <template x-for="_state in histories.toSorted((a, b) =&gt; b.time - a.time)">
 
 <div @click="
 
             cstate = _state;
 
-            if (cstate) cstate.selectedModel = document.querySelector('.model-selector select').value
 
-            // updateTotalTokens(cstate.messages);
 
-            home = 1;
 
-            // ensure that going back in history will go back to home
 
+            if (!cstate.selectedModel) cstate.selectedModel = 'llama-3.2-1b';
 
+            home = 2;
 
             window.history.pushState({}, '', '/');
 
           " @touchend="
 
             if (Math.abs($event.changedTouches[0].clientX - otx) &gt; trigger) removeHistory(_state);
 
@@ -108,6 +118,19 @@
 
 </template>
 
 </div>
 
 </div>
 
+<button 
+    @click="
 
+        home = 0;
 
+        cstate = { time: null, messages: [], selectedModel: cstate.selectedModel };
 
+        time_till_first = 0;
 
+        tokens_per_second = 0;
 
+        total_tokens = 0;
 
+    " 
+    class="back-button"
 
+    x-show="home === 2">
 
+    <i class="fas fa-arrow-left"></i>
 
+    Back to Chats
 
+</button>
 
 <div class="messages" x-init="
 
       $watch('cstate', value =&gt; {
 
         $el.innerHTML = '';

+ 14 - 27
exo/tinychat/index.js
Tampilan Berkas 

@@ -36,6 +36,9 @@ document.addEventListener("alpine:init", () => {
 
 
     modelPoolInterval: null,
 
 
+    // Add models state alongside existing state
 
+    models: {},
 
+
 
     init() {
 
       // Clean up any pending messages
 
       localStorage.removeItem("pendingMessage");
 
@@ -93,34 +96,18 @@ document.addEventListener("alpine:init", () => {
 
 
         const data = await response.json();
 
         
-        const sel = document.querySelector('.model-select');
 
-        
-        // Only create options if they don't exist
 
-        if (sel.children.length === 0) {
 
-          Object.entries(data["model pool"]).forEach(([key, value]) => {
 
-            const opt = document.createElement("option");
 
-            opt.value = key;
 
-            opt.dataset.modelName = value.name;  // Store base name in dataset
 
-            opt.textContent = value.name;
 
-            sel.appendChild(opt);
 
-          });
 
-        }
 
-        
-        // Update existing options text
 
-        Array.from(sel.options).forEach(opt => {
 
-          const modelInfo = data["model pool"][opt.value];
 
-          if (modelInfo) {
 
-            let displayText = modelInfo.name;
 
-            if (modelInfo.download_percentage != null) {
 
-              if (modelInfo.downloaded) {
 
-                  displayText += ' (downloaded)';
 
-              } else {
 
-                  displayText += ` (${Math.round(modelInfo.download_percentage)}% downloaded)`;
 
-              }
 
-            }
 
-            opt.textContent = displayText;
 
+        // Update the models state with the full model pool data
 
+        Object.entries(data["model pool"]).forEach(([key, value]) => {
 
+          if (!this.models[key]) {
 
+            this.models[key] = value;
 
+          } else {
 
+            // Update existing model info while preserving reactivity
 
+            this.models[key].name = value.name;
 
+            this.models[key].downloaded = value.downloaded;
 
+            this.models[key].download_percentage = value.download_percentage;
 
           }
 
-      });
 
+        });
 
+        
       } catch (error) {
 
         console.error("Error populating model selector:", error);
 
         this.setError(error);