Upload folder using huggingface_hub

frontend/app.py

@@ -4,7 +4,7 @@ from urllib.parse import quote_plus
 from fasthtml.components import H1, H2, Div, Form, Img, NotStr, P, Span
 from fasthtml.xtend import A, Script
 from lucide_fasthtml import Lucide
-from shad4fast import Badge, Button, Input, Label, RadioGroup, RadioGroupItem
+from shad4fast import Badge, Button, Input, Label, RadioGroup, RadioGroupItem, Separator
 
 # JavaScript to check the input value and enable/disable the search button and radio buttons
 check_input_script = Script(
@@ -136,17 +136,17 @@ def SearchBox(with_border=False, query_value="", ranking_value="nn+colpali"):
                 RadioGroup(
                     Div(
                         RadioGroupItem(value="nn+colpali", id="nn+colpali"),
-                        Label("nn+colpali", htmlFor="nn+colpali"),
+                        Label("ColPali", htmlFor="ColPali"),
                         cls="flex items-center space-x-2",
                     ),
                     Div(
-                        RadioGroupItem(value="bm25+colpali", id="bm25+colpali"),
-                        Label("bm25+colpali", htmlFor="bm25+colpali"),
+                        RadioGroupItem(value="bm25", id="bm25"),
+                        Label("BM25", htmlFor="BM25"),
                         cls="flex items-center space-x-2",
                     ),
                     Div(
-                        RadioGroupItem(value="bm25", id="bm25"),
-                        Label("bm25", htmlFor="bm25"),
+                        RadioGroupItem(value="bm25+colpali", id="bm25+colpali"),
+                        Label("Hybrid ColPali + BM25", htmlFor="Hybrid ColPali + BM25"),
                         cls="flex items-center space-x-2",
                     ),
                     name="ranking",
@@ -276,7 +276,7 @@ def LoadingSkeleton():
 
 def SimMapButtonReady(query_id, idx, token, img_src):
     return Button(
-        token,
+        token.replace("\u2581", ""),
         size="sm",
         data_image_src=img_src,
         id=f"sim-map-button-{query_id}-{idx}-{token}",
@@ -367,14 +367,20 @@ def SearchResult(results: list, query_id: Optional[str] = None):
                     Div(
                         Lucide(icon="file-text"),
                         H2(fields["title"], cls="text-xl md:text-2xl font-semibold"),
+                        Separator(orientation="vertical"),
+                        Badge(
+                            f"Relevance score: {result['relevance']:.4f}",
+                            cls="flex gap-1.5 items-center justify-center",
+                        ),
                         cls="flex items-center gap-2",
                     ),
                     Div(
                         Button(
-                            "Show Text",
+                            "Hide Text",
                             size="sm",
                             id=f"toggle-button-{idx}",
                             onclick=f"toggleTextContent({idx})",
+                            cls="hidden md:block",
                         ),
                     ),
                     cls="flex flex-wrap items-center justify-between bg-background px-3 py-4",
@@ -417,11 +423,7 @@ def SearchResult(results: list, query_id: Optional[str] = None):
                                 "Page " + str(fields["page_number"]),
                                 cls="text-foreground font-mono bold text-sm",
                             ),
-                            Badge(
-                                f"Relevance score: {result['relevance']:.4f}",
-                                cls="flex gap-1.5 items-center justify-center",
-                            ),
-                            cls="flex items-center justify-between",
+                            cls="flex items-center justify-end",
                         ),
                         Div(
                             Div(
@@ -441,10 +443,10 @@ def SearchResult(results: list, query_id: Optional[str] = None):
                             cls="grid bg-border p-2",
                         ),
                         id=f"text-column-{idx}",
-                        cls="text-column relative bg-background px-3 py-5 hidden",
+                        cls="text-column relative bg-background px-3 py-5 hidden md-grid-text-column",
                     ),
                     id=f"image-text-columns-{idx}",
-                    cls="relative grid grid-cols-1 border-t",
+                    cls="relative grid grid-cols-1 border-t grid-image-text-columns",
                 ),
                 cls="grid grid-cols-1 grid-rows-[auto_1fr]",
             ),
@@ -461,7 +463,7 @@ def SearchResult(results: list, query_id: Optional[str] = None):
 
 def ChatResult(query_id: str, query: str):
     return Div(
-        Div("LLM Response", cls="text-xl font-semibold p-3"),
+        Div("AI-generated response", cls="text-xl font-semibold p-3"),
         Div(
             Div(
                 Div(

main.py

@@ -95,7 +95,7 @@ gemini_model = genai.GenerativeModel(
 )
 STATIC_DIR = Path(__file__).parent / "static"
 IMG_DIR = STATIC_DIR / "saved"
-os.makedirs(IMG_DIR, exist_ok=True)
+os.makedirs(STATIC_DIR, exist_ok=True)
 
 
 @app.on_event("startup")
@@ -307,14 +307,10 @@ async def full_image(docid: str, query_id: str, idx: int):
     Endpoint to get the full quality image for a given result id.
     """
     image_data = await vespa_app.get_full_image_from_vespa(docid)
-    # Update the cache with the full image data asynchronously to not block the request
+    # Update the cache with the full image data
     asyncio.create_task(update_full_image_cache(docid, query_id, idx, image_data))
-    # Save the image to a file
-    img_path = IMG_DIR / f"{docid}.jpg"
-    with open(img_path, "wb") as f:
-        f.write(base64.b64decode(image_data))
     return Img(
-        src=f"/static/saved/{docid}.jpg",
+        src=f"data:image/png;base64,{image_data}",
         alt="something",
         cls="result-image w-full h-full object-contain",
     )

output.css

@@ -1142,6 +1142,10 @@ body {
   align-items: center;
 }
 
+.justify-end {
+  justify-content: flex-end;
+}
+
 .justify-center {
   justify-content: center;
 }