[object Object]

← back to Exo

Add error toast popup

7f9810c6482284c97929133a755dc55205828405 · 2024-09-26 00:36:49 -0600 · drew

I forgot that Alex hadn't added the tinygrad model for llama3.2 yet and kept trying to use it and it would fail, but not say anything. after checking the console I realized my mistake, but decided I could save people some trouble with a simple toast.

Files touched

Diff

commit 7f9810c6482284c97929133a755dc55205828405
Author: drew <drew.royster@gmail.com>
Date:   Thu Sep 26 00:36:49 2024 -0600

    Add error toast popup
    
    I forgot that Alex hadn't added the tinygrad model for llama3.2 yet and kept trying to use it and it would fail, but not say anything. after checking the console I realized my mistake, but decided I could save people some trouble with a simple toast.
---
 tinychat/examples/tinychat/index.css  | 14 +++++++++++++-
 tinychat/examples/tinychat/index.html |  3 +++
 tinychat/examples/tinychat/index.js   | 22 ++++++++++++++++++----
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/tinychat/examples/tinychat/index.css b/tinychat/examples/tinychat/index.css
index b9754683..6faee9b4 100644
--- a/tinychat/examples/tinychat/index.css
+++ b/tinychat/examples/tinychat/index.css
@@ -168,7 +168,19 @@ main {
 .message > pre {
   white-space: pre-wrap;
 }
-
+.toast {
+    width: 100%; /* Take up the full width of the page */
+    background-color: #fc2a2a; /* Dark background color */
+    color: #fff; /* White text color */
+    text-align: center; /* Centered text */
+    border-radius: 2px; /* Rounded borders */
+    padding: 16px; /* Padding */
+    position: fixed; /* Sit on top of the screen content */
+    z-index: 9999; /* Add a z-index if needed */
+    top: 0; /* Position at the top of the page */
+    left: 0; /* Extend from the left edge */
+    right: 0; /* Extend to the right edge */
+}
 .hljs {
   width: 100%;
   position: relative;
diff --git a/tinychat/examples/tinychat/index.html b/tinychat/examples/tinychat/index.html
index f51b7c4c..714bf339 100644
--- a/tinychat/examples/tinychat/index.html
+++ b/tinychat/examples/tinychat/index.html
@@ -25,6 +25,9 @@
 </link></head>
 <body>
 <main x-data="state" x-init="console.log(endpoint)">
+     <!-- Error Toast -->
+    <div x-show="errorMessage" x-transition.opacity x-text="errorMessage" class="toast">
+    </div>
 <div class="model-selector">
 <select @change="if (cstate) cstate.selectedModel = $event.target.value" x-model="cstate.selectedModel">
 <option selected="" value="llama-3.2-1b">Llama 3.2 1B</option>
diff --git a/tinychat/examples/tinychat/index.js b/tinychat/examples/tinychat/index.js
index 1cbcf870..7c48805b 100644
--- a/tinychat/examples/tinychat/index.js
+++ b/tinychat/examples/tinychat/index.js
@@ -13,6 +13,7 @@ document.addEventListener("alpine:init", () => {
     home: 0,
     generating: false,
     endpoint: `${window.location.origin}/v1`,
+    errorMessage: null,
 
     // performance tracking
     time_till_first: 0,
@@ -51,7 +52,8 @@ document.addEventListener("alpine:init", () => {
 
 
     async handleSend() {
-      const el = document.getElementById("input-form");
+      try {
+        const el = document.getElementById("input-form");
       const value = el.value.trim();
       if (!value && !this.imagePreview) return;
 
@@ -181,8 +183,15 @@ document.addEventListener("alpine:init", () => {
       } catch (error) {
         console.error("Failed to save histories to localStorage:", error);
       }
-
-      this.generating = false;
+      } catch (error) {
+        console.error('error', error)
+        this.errorMessage = error;
+        setTimeout(() => {
+          this.errorMessage = null;
+        }, 5 * 1000)
+      } finally {
+        this.generating = false;
+      }
     },
 
     async handleEnter(event) {
@@ -218,7 +227,12 @@ document.addEventListener("alpine:init", () => {
         }),
       });
       if (!response.ok) {
-        throw new Error("Failed to fetch");
+        const errorResBody = await response.json()
+        if (errorResBody?.detail) {
+          throw new Error(`Failed to fetch completions: ${errorResBody.detail}`);
+        } else {
+          throw new Error("Failed to fetch completions: Unknown error");
+        }
       }
 
       const reader = response.body.pipeThrough(new TextDecoderStream())

← 777102c9 add support for llama 3.2  ·  back to Exo  ·  cleanup 4a299218 →