Upload folder using huggingface_hub

backend/vespa_app.py

@@ -1,6 +1,6 @@
 import os
 import time
-from typing import Dict, Any, Tuple
+from typing import Any, Dict, Tuple
 
 import numpy as np
 import torch
@@ -276,6 +276,39 @@ class VespaQueryClient:
             )
         return response.json["root"]["children"][0]["fields"]["full_image"]
 
+    async def get_suggestions(self, query: str) -> list:
+        async with self.app.asyncio(connections=1) as session:
+            start = time.perf_counter()
+            yql = f'select questions from {self.VESPA_SCHEMA_NAME} where questions matches "{query}" limit 3'
+            print(yql)
+            response: VespaQueryResponse = await session.query(
+                body={
+                    "yql": yql,
+                    "ranking": "unranked",
+                    "presentation.timing": True,
+                },
+            )
+            assert response.is_successful(), response.json
+            stop = time.perf_counter()
+            print(
+                f"Getting suggestions from Vespa took: {stop - start} s, Vespa reported searchtime was "
+                f"{response.json.get('timing', {}).get('searchtime', -1)} s"
+            )
+            search_results = (
+                response.json["root"]["children"]
+                if "root" in response.json and "children" in response.json["root"]
+                else []
+            )
+            print(response.json)
+
+            questions = [
+                result["fields"]["questions"]
+                for result in search_results
+                if "questions" in result["fields"]
+            ]
+            flat_questions = [item for sublist in questions for item in sublist]
+            return flat_questions
+
     async def query_vespa_nearest_neighbor(
         self,
         query: str,

frontend/app.py

@@ -84,6 +84,28 @@ toggle_text_content = Script(
     """
 )
 
+autocomplete_script = Script(
+    """
+    document.addEventListener('DOMContentLoaded', function() {
+        const input = document.querySelector('#search-input');
+        const awesomplete = new Awesomplete(input, { minChars: 1, maxItems: 5 });
+
+        input.addEventListener('input', function() {
+            if (this.value.length >= 1) {
+                // Use template literals to insert the input value dynamically in the query parameter
+                fetch(`/suggestions?query=${encodeURIComponent(this.value)}`)
+                    .then(response => response.json())
+                    .then(data => {
+                        // Update the Awesomplete list dynamically with fetched suggestions
+                        awesomplete.list = data.suggestions;
+                    })
+                    .catch(err => console.error('Error fetching suggestions:', err));
+            }
+        });
+    });
+    """
+)
+
 
 def SearchBox(with_border=False, query_value="", ranking_value="nn+colpali"):
     grid_cls = "grid gap-2 items-center p-3 bg-muted/80 dark:bg-muted/40 w-full"
@@ -93,13 +115,16 @@ def SearchBox(with_border=False, query_value="", ranking_value="nn+colpali"):
 
     return Form(
         Div(
-            Lucide(icon="search", cls="absolute left-2 top-2 text-muted-foreground"),
+            Lucide(
+                icon="search", cls="absolute left-2 top-2 text-muted-foreground z-10"
+            ),
             Input(
                 placeholder="Enter your search query...",
                 name="query",
                 value=query_value,
                 id="search-input",
-                cls="text-base pl-10 border-transparent ring-offset-transparent ring-0 focus-visible:ring-transparent",
+                cls="text-base pl-10 border-transparent ring-offset-transparent ring-0 focus-visible:ring-transparent awesomplete",
+                data_list="#suggestions",
                 style="font-size: 1rem",
                 autofocus=True,
             ),
@@ -140,6 +165,7 @@ def SearchBox(with_border=False, query_value="", ranking_value="nn+colpali"):
             cls="flex justify-between",
         ),
         check_input_script,
+        autocomplete_script,
         action=f"/search?query={quote_plus(query_value)}&ranking={quote_plus(ranking_value)}",
         method="GET",
         hx_get=f"/fetch_results?query={quote_plus(query_value)}&ranking={quote_plus(ranking_value)}",

globals.css

@@ -217,3 +217,59 @@ aside {
 .md-grid-text-column {
     @apply md:grid md:grid-rows-subgrid md:row-span-2 md:content-start;
 }
+
+#search-input[aria-expanded="true"] {
+    border-top: 1px solid hsl(var(--input));
+    border-left: 1px solid hsl(var(--input));
+    border-right: 1px solid hsl(var(--input));
+    border-bottom: none;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.awesomplete {
+    width: 100%;
+}
+
+.awesomplete > ul {
+    @apply text-sm space-y-0.5;
+    margin: 0;
+    border-top: none;
+    border-left: 1px solid hsl(var(--input));
+    border-right: 1px solid hsl(var(--input));
+    border-bottom: 1px solid hsl(var(--input));
+    border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px);
+    background: hsl(var(--background));
+    box-shadow: none;
+    text-shadow: none;
+}
+
+.awesomplete > ul:before {
+    display: none;
+}
+
+.awesomplete > ul > li:hover {
+    background-color: #B7E2F1;
+    color: #2E2F27;
+}
+
+.awesomplete > ul > li[aria-selected="true"] {
+    background-color: #B7E2F1;
+    color: #2E2F27;
+}
+
+.awesomplete mark {
+    background-color: #61D790;
+    color: #2E2F27;
+}
+
+.awesomplete li:hover mark {
+    background-color: #61D790;
+    color: #2E2F27;
+}
+
+.awesomplete li[aria-selected="true"] mark {
+    background-color: #61D790;
+    color: #2E2F27;
+}
+

main.py

@@ -49,19 +49,29 @@ overlayscrollbars_link = Link(
 overlayscrollbars_js = Script(
     src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/2.10.0/browser/overlayscrollbars.browser.es5.min.js"
 )
+awesomplete_link = Link(
+    rel="stylesheet",
+    href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.7/awesomplete.min.css",
+    type="text/css",
+)
+awesomplete_js = Script(
+    src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.7/awesomplete.min.js"
+)
 sselink = Script(src="https://unpkg.com/htmx-ext-sse@2.2.1/sse.js")
 
 app, rt = fast_app(
     htmlkw={"cls": "grid h-full"},
     pico=False,
     hdrs=(
-        ShadHead(tw_cdn=False, theme_handle=True),
         highlight_js,
         highlight_js_theme_link,
         highlight_js_theme,
         overlayscrollbars_link,
         overlayscrollbars_js,
+        awesomplete_link,
+        awesomplete_js,
         sselink,
+        ShadHead(tw_cdn=False, theme_handle=True),
     ),
 )
 vespa_app: Vespa = VespaQueryClient()
@@ -85,7 +95,7 @@ gemini_model = genai.GenerativeModel(
 )
 STATIC_DIR = Path(__file__).parent / "static"
 IMG_DIR = STATIC_DIR / "saved"
-os.makedirs(STATIC_DIR, exist_ok=True)
+os.makedirs(IMG_DIR, exist_ok=True)
 
 
 @app.on_event("startup")
@@ -310,6 +320,18 @@ async def full_image(docid: str, query_id: str, idx: int):
     )
 
 
+@rt("/suggestions")
+async def get_suggestions(request):
+    query = request.query_params.get("query", "").lower().strip()
+
+    if query:
+        suggestions = await vespa_app.get_suggestions(query)
+        if len(suggestions) > 0:
+            return JSONResponse({"suggestions": suggestions})
+
+    return JSONResponse({"suggestions": []})
+
+
 async def message_generator(query_id: str, query: str):
     images = []
     result = None

output.css

@@ -758,6 +758,10 @@ body {
   top: 50%;
 }
 
+.z-10 {
+  z-index: 10;
+}
+
 .z-50 {
   z-index: 50;
 }
@@ -2077,6 +2081,68 @@ aside {
   }
 }
 
+#search-input[aria-expanded="true"] {
+  border-top: 1px solid hsl(var(--input));
+  border-left: 1px solid hsl(var(--input));
+  border-right: 1px solid hsl(var(--input));
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.awesomplete {
+  width: 100%;
+}
+
+.awesomplete > ul > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
+}
+
+.awesomplete > ul {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin: 0;
+  border-top: none;
+  border-left: 1px solid hsl(var(--input));
+  border-right: 1px solid hsl(var(--input));
+  border-bottom: 1px solid hsl(var(--input));
+  border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px);
+  background: hsl(var(--background));
+  box-shadow: none;
+  text-shadow: none;
+}
+
+.awesomplete > ul:before {
+  display: none;
+}
+
+.awesomplete > ul > li:hover {
+  background-color: #B7E2F1;
+  color: #2E2F27;
+}
+
+.awesomplete > ul > li[aria-selected="true"] {
+  background-color: #B7E2F1;
+  color: #2E2F27;
+}
+
+.awesomplete mark {
+  background-color: #61D790;
+  color: #2E2F27;
+}
+
+.awesomplete li:hover mark {
+  background-color: #61D790;
+  color: #2E2F27;
+}
+
+.awesomplete li[aria-selected="true"] mark {
+  background-color: #61D790;
+  color: #2E2F27;
+}
+
 :root:has(.data-\[state\=open\]\:no-bg-scroll[data-state="open"]) {
   overflow: hidden;
 }
@@ -2695,3 +2761,4 @@ aside {
 .\[\&_tr\]\:border-b tr {
   border-bottom-width: 1px;
 }
+