Upload folder using huggingface_hub

frontend/app.py

@@ -197,9 +197,9 @@ def Search(request, search_results=[]):
 
 def LoadingMessage():
     return Div(
-        P(Lucide(icon="loader-circle", size="50", cls="animate-rotate htmx-indicator")),
-        P("Retrieving search results", cls="text-base text-center"),
-        cls="p-10 text-center text-muted-foreground",
+        Lucide(icon="loader-circle", cls="size-5 mr-1.5 animate-spin"),
+        Span("Retrieving search results", cls="text-base text-center"),
+        cls="p-10 text-muted-foreground flex items-center justify-center",
         id="loading-indicator",
     )
 
@@ -248,13 +248,21 @@ def SearchResult(results: list, query_id: Optional[str] = None):
             data_image_src=full_image_base64,
             cls="reset-button pointer-events-auto font-mono text-xs h-5 rounded-none px-2",
         )
+
+        tokens_icon = (
+            Lucide(icon="loader-circle", size="15", cls="animate-spin")
+            if query_id is not None
+            else Lucide(icon="images", size="15")
+        )
+
         # Add "Tokens" button - this has no action, just a placeholder
         tokens_button = Button(
-            Lucide(icon="images", size="15"),
+            tokens_icon,
             "Tokens",
             size="sm",
             cls="tokens-button flex gap-[3px] font-bold pointer-events-none font-mono text-xs h-5 rounded-none px-2",
         )
+
         result_items.append(
             Div(
                 Div(

globals.css

@@ -148,15 +148,6 @@
     }
 }
 
-@keyframes rotate {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
 .animate-fade-in {
     animation: fade-in 1s ease-out forwards;
 }
@@ -165,11 +156,6 @@
     animation: slide-up 1s ease-out forwards;
 }
 
-.animate-rotate {
-    animation: rotate 2s linear infinite;
-    display: inline;
-}
-
 .sim-map-button.active {
     background-color: #61D790;
     color: #2E2F27;

main.py

@@ -27,6 +27,7 @@ highlight_js = HighlightJS(
     light="github",
 )
 
+
 app, rt = fast_app(
     htmlkw={"cls": "h-full"},
     pico=False,
@@ -46,6 +47,12 @@ task_cache = LRUCache(
 thread_pool = ThreadPoolExecutor()
 
 
+@app.on_event("startup")
+def load_model_on_startup():
+    app.manager = ModelManager.get_instance()
+    return
+
+
 def generate_query_id(query):
     return hashlib.md5(query.encode("utf-8")).hexdigest()
 
@@ -111,10 +118,8 @@ async def get(request, query: str, nn: bool = True):
         # If task is not completed, return the results with query_id
         return SearchResult(search_results, query_id)
     task_cache.set(query_id, False)
-    # Fetch model and processor
-    manager = ModelManager.get_instance()
-    model = manager.model
-    processor = manager.processor
+    model = app.manager.model
+    processor = app.manager.processor
     q_embs, token_to_idx = get_query_embeddings_and_token_map(processor, model, query)
 
     start = time.perf_counter()

output.css

@@ -801,6 +801,10 @@ body {
   margin-bottom: 0.25rem;
 }
 
+.mr-1\.5 {
+  margin-right: 0.375rem;
+}
+
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -842,6 +846,11 @@ body {
   height: 1rem;
 }
 
+.size-5 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -930,6 +939,10 @@ body {
   min-height: 80px;
 }
 
+.min-h-screen {
+  min-height: 100vh;
+}
+
 .w-10 {
   width: 2.5rem;
 }
@@ -1047,6 +1060,16 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
 .cursor-default {
   cursor: default;
 }
@@ -1289,6 +1312,11 @@ body {
   background-color: rgb(0 0 0 / 0.8);
 }
 
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
 .bg-border {
   background-color: hsl(var(--border));
 }
@@ -1325,6 +1353,16 @@ body {
   background-color: hsl(var(--primary));
 }
 
+.bg-red-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
+}
+
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
 .bg-secondary {
   background-color: hsl(var(--secondary));
 }
@@ -1475,6 +1513,11 @@ body {
   line-height: 2rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .text-5xl {
   font-size: 3rem;
   line-height: 1;
@@ -1557,6 +1600,16 @@ body {
   color: hsl(var(--foreground) / 0.5);
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
 .text-muted-foreground {
   color: hsl(var(--muted-foreground));
 }
@@ -1903,16 +1956,6 @@ body {
   }
 }
 
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .animate-fade-in {
   animation: fade-in 1s ease-out forwards;
 }
@@ -1921,11 +1964,6 @@ body {
   animation: slide-up 1s ease-out forwards;
 }
 
-.animate-rotate {
-  animation: rotate 2s linear infinite;
-  display: inline;
-}
-
 .sim-map-button.active {
   background-color: #61D790;
   color: #2E2F27;