← back to Exo
working with side bar to choose model, show download percentage, select chat, go back to chats, intitiate download of undownloaded models
31ce70f4643a0e2b2ec80f9135898a23f5d924ab · 2024-11-21 15:09:34 -0800 · cadenmackenzie
Files touched
M exo/tinychat/index.cssM exo/tinychat/index.htmlM exo/tinychat/index.js
Diff
commit 31ce70f4643a0e2b2ec80f9135898a23f5d924ab
Author: cadenmackenzie <cadenmackenzie@gmail.com>
Date: Thu Nov 21 15:09:34 2024 -0800
working with side bar to choose model, show download percentage, select chat, go back to chats, intitiate download of undownloaded models
---
exo/tinychat/index.css | 122 ++++++++++++++++++++++++++++++++++++------------
exo/tinychat/index.html | 41 ++++++++++++----
exo/tinychat/index.js | 41 ++++++----------
3 files changed, 139 insertions(+), 65 deletions(-)
diff --git a/exo/tinychat/index.css b/exo/tinychat/index.css
index eb9669dd..28364063 100644
--- a/exo/tinychat/index.css
+++ b/exo/tinychat/index.css
@@ -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);
}
\ No newline at end of file
diff --git a/exo/tinychat/index.html b/exo/tinychat/index.html
index c4f97c51..b5612994 100644
--- a/exo/tinychat/index.html
+++ b/exo/tinychat/index.html
@@ -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) => 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) > 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 => {
$el.innerHTML = '';
diff --git a/exo/tinychat/index.js b/exo/tinychat/index.js
index 4a2ca232..04b53435 100644
--- a/exo/tinychat/index.js
+++ b/exo/tinychat/index.js
@@ -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);
← 7e6c69fd remvoing console log
·
back to Exo
·
adding amount that has been downloaded if model is not fully fb3baf50 →