Upload folder using huggingface_hub

README.md

@@ -78,8 +78,6 @@ python hello.py
 
 First, set up your `.env` file by renaming `.env.example` to `.env` and filling in the required values.
 (Token can be shared with 1password, `HF_TOKEN` is personal and must be created at huggingface)
-If you are just connecting to a deployed Vespa app, you can skip
-to [Connecting to the Vespa app](#connecting-to-the-vespa-app-and-querying).
 
 ### Deploying the Vespa app
 

backend/vespa_app.py

@@ -330,3 +330,23 @@ class VespaQueryClient:
             )
             assert response.is_successful(), response.json
         return self.format_query_results(query, response)
+
+    async def keepalive(self) -> bool:
+        """
+        Query Vespa to keep the connection alive.
+
+        Returns:
+            bool: True if the connection is alive.
+        """
+        async with self.app.asyncio(connections=1) as session:
+            response: VespaQueryResponse = await session.query(
+                body={
+                    "yql": f"select title from {self.VESPA_SCHEMA_NAME} where true limit 1;",
+                    "ranking": "unranked",
+                    "query": "keepalive",
+                    "timeout": "3s",
+                    "hits": 1,
+                },
+            )
+            assert response.is_successful(), response.json
+        return True

frontend/app.py

@@ -62,6 +62,28 @@ image_swapping = Script(
     """
 )
 
+toggle_text_content = Script(
+    """
+    function toggleTextContent(idx) {
+        const textColumn = document.getElementById(`text-column-${idx}`);
+        const imageTextColumns = document.getElementById(`image-text-columns-${idx}`);
+        const toggleButton = document.getElementById(`toggle-button-${idx}`);
+    
+        if (textColumn.classList.contains('md-grid-text-column')) {
+          // Hide the text column
+          textColumn.classList.remove('md-grid-text-column');
+          imageTextColumns.classList.remove('grid-image-text-columns');
+          toggleButton.innerText = `Show Text`;
+        } else {
+          // Show the text column
+          textColumn.classList.add('md-grid-text-column');
+          imageTextColumns.classList.add('grid-image-text-columns');
+          toggleButton.innerText = `Hide Text`;
+        }
+    }
+    """
+)
+
 
 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"
@@ -131,13 +153,11 @@ def SearchBox(with_border=False, query_value="", ranking_value="nn+colpali"):
 
 def SampleQueries():
     sample_queries = [
-        "Proportion of female new hires 2021-2023?",
         "Total amount of fixed salaries paid in 2023?",
-        "What is the percentage distribution of employees with performance-based pay relative to the limit in 2023?",
-        "What is the breakdown of management costs by investment strategy in 2023?",
-        "2023 profit loss portfolio",
-        "net cash flow operating activities",
-        "fund currency basket returns",
+        "Proportion of female new hires 2021-2023?",
+        "Value of unlisted real estate 2023?",
+        "Fund currency basket returns 2023",
+        "Employees per office site?",
     ]
 
     query_badges = []
@@ -167,13 +187,13 @@ def Hero():
     return Div(
         H1(
             "Vespa.ai + ColPali",
-            cls="text-4xl md:text-7xl font-bold tracking-wide md:tracking-wider bg-clip-text text-transparent bg-gradient-to-r from-black to-gray-700 dark:from-white dark:to-gray-300 animate-fade-in",
+            cls="text-5xl md:text-7xl font-bold tracking-wide md:tracking-wider bg-clip-text text-transparent bg-gradient-to-r from-black to-gray-700 dark:from-white dark:to-gray-300 animate-fade-in",
         ),
         P(
             "Efficient Document Retrieval with Vision Language Models",
             cls="text-lg md:text-2xl text-muted-foreground md:tracking-wide",
         ),
-        cls="grid gap-5 text-center pt-5",
+        cls="grid gap-5 text-center",
     )
 
 
@@ -183,7 +203,7 @@ def Home():
             Hero(),
             SearchBox(with_border=True),
             SampleQueries(),
-            cls="grid gap-8 md:-mt-[34vh]",  # Negative margin only on medium and larger screens
+            cls="grid gap-8 -mt-[21vh]",
         ),
         cls="grid w-full h-full max-w-screen-md items-center gap-4 mx-auto",
     )
@@ -219,6 +239,15 @@ def LoadingMessage(display_text="Retrieving search results"):
     )
 
 
+def LoadingSkeleton():
+    return Div(
+        Div(cls="h-5 bg-muted"),
+        Div(cls="h-5 bg-muted"),
+        Div(cls="h-5 bg-muted"),
+        cls="grid gap-2 animate-pulse",
+    )
+
+
 def SimMapButtonReady(query_id, idx, token, img_src):
     return Button(
         token,
@@ -310,76 +339,107 @@ def SearchResult(results: list, query_id: Optional[str] = None):
             Div(
                 Div(
                     Div(
-                        tokens_button,
-                        *sim_map_buttons,
-                        reset_button,
-                        cls="flex flex-wrap gap-px w-full pointer-events-none",
+                        Lucide(icon="file-text"),
+                        H2(fields["title"], cls="text-xl md:text-2xl font-semibold"),
+                        cls="flex items-center gap-2",
                     ),
                     Div(
-                        Div(
-                            Img(
-                                src=blur_image_base64,
-                                hx_get=f"/full_image?docid={fields['id']}&query_id={query_id}&idx={idx}",
-                                style="filter: blur(5px);",
-                                hx_trigger="load",
-                                hx_swap="outerHTML",
-                                alt=fields["title"],
-                                cls="result-image w-full h-full object-contain",
-                            ),
-                            Div(
-                                cls="overlay-container absolute top-0 left-0 w-full h-full pointer-events-none"
-                            ),
-                            cls="relative w-full h-full",
+                        Button(
+                            "Show Text",
+                            size="sm",
+                            id=f"toggle-button-{idx}",
+                            onclick=f"toggleTextContent({idx})",
                         ),
-                        cls="grid bg-border p-2",
                     ),
-                    cls="relative grid content-start bg-background px-3 py-5",
+                    cls="flex flex-wrap items-center justify-between bg-background px-3 py-4",
                 ),
                 Div(
                     Div(
-                        H2(fields["title"], cls="text-xl font-semibold"),
-                        P(
-                            "Page " + str(fields["page_number"]),
-                            cls="text-foreground font-mono bold",
+                        Div(
+                            tokens_button,
+                            *sim_map_buttons,
+                            reset_button,
+                            cls="flex flex-wrap gap-px w-full pointer-events-none",
+                        ),
+                        Div(
+                            Div(
+                                Div(
+                                    Img(
+                                        src=blur_image_base64,
+                                        hx_get=f"/full_image?docid={fields['id']}&query_id={query_id}&idx={idx}",
+                                        style="backdrop-filter: blur(5px);",
+                                        hx_trigger="load",
+                                        hx_swap="outerHTML",
+                                        alt=fields["title"],
+                                        cls="result-image w-full h-full object-contain",
+                                    ),
+                                    Div(
+                                        cls="overlay-container absolute top-0 left-0 w-full h-full pointer-events-none"
+                                    ),
+                                    cls="relative w-full h-full",
+                                ),
+                                cls="grid bg-border p-2",
+                            ),
+                            cls="block",
                         ),
+                        id=f"image-column-{idx}",
+                        cls="image-column relative bg-background px-3 py-5 grid-image-column",
+                    ),
+                    Div(
                         Div(
+                            P(
+                                "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",
                         ),
-                        P(
-                            NotStr(fields.get("snippet", "")),
-                            cls="text-highlight text-muted-foreground",
-                        ),
-                        P(
-                            NotStr(fields.get("text", "")),
-                            cls="text-highlight text-muted-foreground",
+                        Div(
+                            Div(
+                                Div(
+                                    P(
+                                        NotStr(fields.get("snippet", "")),
+                                        cls="text-highlight text-muted-foreground",
+                                    ),
+                                    P(
+                                        NotStr(fields.get("text", "")),
+                                        cls="text-highlight text-muted-foreground",
+                                    ),
+                                    cls="grid gap-y-3 p-5 text-sm",
+                                ),
+                                cls="grid bg-background content-start ",
+                            ),
+                            cls="grid bg-border p-2",
                         ),
-                        cls="text-sm grid gap-y-4",
+                        id=f"text-column-{idx}",
+                        cls="text-column relative bg-background px-3 py-5 hidden",
                     ),
-                    cls="bg-background px-3 py-5 hidden md:block",
+                    id=f"image-text-columns-{idx}",
+                    cls="relative grid grid-cols-1 border-t",
                 ),
-                cls="grid grid-cols-1 md:grid-cols-2 col-span-2 border-t",
-            )
+                cls="grid grid-cols-1 grid-rows-[auto_1fr]",
+            ),
         )
 
     return Div(
         *result_items,
         image_swapping,
+        toggle_text_content,
         id="search-results",
-        cls="grid grid-cols-2 gap-px bg-border",
+        cls="grid grid-cols-1 gap-px bg-border",
     )
 
 
 def ChatResult(query_id: str, query: str):
     return Div(
-        Div("Chat", cls="text-xl font-semibold p-3"),
+        Div("LLM Response", cls="text-xl font-semibold p-3"),
         Div(
             Div(
                 Div(
-                    LoadingMessage(display_text="Waiting for response..."),
-                    cls="bg-muted/80 dark:bg-muted/40 text-black dark:text-white p-2 rounded-md",
+                    LoadingSkeleton(),
                     hx_ext="sse",
                     sse_connect=f"/get-message?query_id={query_id}&query={quote_plus(query)}",
                     sse_swap="message",

frontend/layout.py

@@ -3,7 +3,7 @@ from fasthtml.xtend import A, Script
 from lucide_fasthtml import Lucide
 from shad4fast import Button, Separator
 
-script = Script(
+layout_script = Script(
     """
     document.addEventListener("DOMContentLoaded", function () {
           const main = document.querySelector('main');
@@ -11,12 +11,12 @@ script = Script(
           const body = document.body;
         
           if (main && aside && main.nextElementSibling === aside) {
-            // Main + Aside layout
-            body.classList.add('grid-cols-[minmax(0,_4fr)_minmax(0,_1fr)]');
-            aside.classList.remove('hidden');
+            // If we have both main and aside, adjust the layout for larger screens
+            body.classList.remove('grid-cols-1'); // Remove single-column layout
+            body.classList.add('md:grid-cols-[minmax(0,_45fr)_minmax(0,_15fr)]'); // Two-column layout on larger screens
           } else if (main) {
-            // Only Main layout (full width)
-            body.classList.add('grid-cols-[1fr]');
+            // If only main, keep it full width
+            body.classList.add('grid-cols-1');
           }
     });
     """
@@ -136,6 +136,6 @@ def Layout(*c, **kwargs):
             **kwargs,
             cls="grid grid-rows-[55px_1fr] min-h-0",
         ),
-        script,
+        layout_script,
         overlay_scrollbars,
     )

globals.css

@@ -205,3 +205,15 @@ aside {
     background-color: #61D790;
     color: #2E2F27;
 }
+
+.grid-image-text-columns {
+    @apply md:grid-cols-2 md:col-span-2
+}
+
+.grid-image-column {
+    @apply grid grid-rows-subgrid row-span-2 content-start;
+}
+
+.md-grid-text-column {
+    @apply md:grid md:grid-rows-subgrid md:row-span-2 md:content-start;
+}

icons.py

@@ -1 +1 @@
-ICONS = {"chevrons-right": "<path d=\"m6 17 5-5-5-5\"></path><path d=\"m13 17 5-5-5-5\"></path>", "moon": "<path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"></path>", "sun": "<circle cx=\"12\" cy=\"12\" r=\"4\"></circle><path d=\"M12 2v2\"></path><path d=\"M12 20v2\"></path><path d=\"m4.93 4.93 1.41 1.41\"></path><path d=\"m17.66 17.66 1.41 1.41\"></path><path d=\"M2 12h2\"></path><path d=\"M20 12h2\"></path><path d=\"m6.34 17.66-1.41 1.41\"></path><path d=\"m19.07 4.93-1.41 1.41\"></path>", "github": "<path d=\"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4\"></path><path d=\"M9 18c-4.51 2-5-2-7-2\"></path>", "slack": "<rect height=\"8\" rx=\"1.5\" width=\"3\" x=\"13\" y=\"2\"></rect><path d=\"M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5\"></path><rect height=\"8\" rx=\"1.5\" width=\"3\" x=\"8\" y=\"14\"></rect><path d=\"M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5\"></path><rect height=\"3\" rx=\"1.5\" width=\"8\" x=\"14\" y=\"13\"></rect><path d=\"M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5\"></path><rect height=\"3\" rx=\"1.5\" width=\"8\" x=\"2\" y=\"8\"></rect><path d=\"M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5\"></path>", "settings": "<path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\"></path><circle cx=\"12\" cy=\"12\" r=\"3\"></circle>", "arrow-right": "<path d=\"M5 12h14\"></path><path d=\"m12 5 7 7-7 7\"></path>", "search": "<circle cx=\"11\" cy=\"11\" r=\"8\"></circle><path d=\"m21 21-4.3-4.3\"></path>", "file-search": "<path d=\"M14 2v4a2 2 0 0 0 2 2h4\"></path><path d=\"M4.268 21a2 2 0 0 0 1.727 1H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v3\"></path><path d=\"m9 18-1.5-1.5\"></path><circle cx=\"5\" cy=\"14\" r=\"3\"></circle>", "message-circle-question": "<path d=\"M7.9 20A9 9 0 1 0 4 16.1L2 22Z\"></path><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path><path d=\"M12 17h.01\"></path>", "text-search": "<path d=\"M21 6H3\"></path><path d=\"M10 12H3\"></path><path d=\"M10 18H3\"></path><circle cx=\"17\" cy=\"15\" r=\"3\"></circle><path d=\"m21 19-1.9-1.9\"></path>", "maximize": "<path d=\"M8 3H5a2 2 0 0 0-2 2v3\"></path><path d=\"M21 8V5a2 2 0 0 0-2-2h-3\"></path><path d=\"M3 16v3a2 2 0 0 0 2 2h3\"></path><path d=\"M16 21h3a2 2 0 0 0 2-2v-3\"></path>", "expand": "<path d=\"m21 21-6-6m6 6v-4.8m0 4.8h-4.8\"></path><path d=\"M3 16.2V21m0 0h4.8M3 21l6-6\"></path><path d=\"M21 7.8V3m0 0h-4.8M21 3l-6 6\"></path><path d=\"M3 7.8V3m0 0h4.8M3 3l6 6\"></path>", "fullscreen": "<path d=\"M3 7V5a2 2 0 0 1 2-2h2\"></path><path d=\"M17 3h2a2 2 0 0 1 2 2v2\"></path><path d=\"M21 17v2a2 2 0 0 1-2 2h-2\"></path><path d=\"M7 21H5a2 2 0 0 1-2-2v-2\"></path><rect height=\"8\" rx=\"1\" width=\"10\" x=\"7\" y=\"8\"></rect>", "images": "<path d=\"M18 22H4a2 2 0 0 1-2-2V6\"></path><path d=\"m22 13-1.296-1.296a2.41 2.41 0 0 0-3.408 0L11 18\"></path><circle cx=\"12\" cy=\"8\" r=\"2\"></circle><rect height=\"16\" rx=\"2\" width=\"16\" x=\"6\" y=\"2\"></rect>", "circle": "<circle cx=\"12\" cy=\"12\" r=\"10\"></circle>", "loader-circle": "<path d=\"M21 12a9 9 0 1 1-6.219-8.56\"></path>"}
+ICONS = {"chevrons-right": "<path d=\"m6 17 5-5-5-5\"></path><path d=\"m13 17 5-5-5-5\"></path>", "moon": "<path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"></path>", "sun": "<circle cx=\"12\" cy=\"12\" r=\"4\"></circle><path d=\"M12 2v2\"></path><path d=\"M12 20v2\"></path><path d=\"m4.93 4.93 1.41 1.41\"></path><path d=\"m17.66 17.66 1.41 1.41\"></path><path d=\"M2 12h2\"></path><path d=\"M20 12h2\"></path><path d=\"m6.34 17.66-1.41 1.41\"></path><path d=\"m19.07 4.93-1.41 1.41\"></path>", "github": "<path d=\"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4\"></path><path d=\"M9 18c-4.51 2-5-2-7-2\"></path>", "slack": "<rect height=\"8\" rx=\"1.5\" width=\"3\" x=\"13\" y=\"2\"></rect><path d=\"M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5\"></path><rect height=\"8\" rx=\"1.5\" width=\"3\" x=\"8\" y=\"14\"></rect><path d=\"M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5\"></path><rect height=\"3\" rx=\"1.5\" width=\"8\" x=\"14\" y=\"13\"></rect><path d=\"M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5\"></path><rect height=\"3\" rx=\"1.5\" width=\"8\" x=\"2\" y=\"8\"></rect><path d=\"M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5\"></path>", "settings": "<path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\"></path><circle cx=\"12\" cy=\"12\" r=\"3\"></circle>", "arrow-right": "<path d=\"M5 12h14\"></path><path d=\"m12 5 7 7-7 7\"></path>", "search": "<circle cx=\"11\" cy=\"11\" r=\"8\"></circle><path d=\"m21 21-4.3-4.3\"></path>", "file-search": "<path d=\"M14 2v4a2 2 0 0 0 2 2h4\"></path><path d=\"M4.268 21a2 2 0 0 0 1.727 1H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v3\"></path><path d=\"m9 18-1.5-1.5\"></path><circle cx=\"5\" cy=\"14\" r=\"3\"></circle>", "message-circle-question": "<path d=\"M7.9 20A9 9 0 1 0 4 16.1L2 22Z\"></path><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path><path d=\"M12 17h.01\"></path>", "text-search": "<path d=\"M21 6H3\"></path><path d=\"M10 12H3\"></path><path d=\"M10 18H3\"></path><circle cx=\"17\" cy=\"15\" r=\"3\"></circle><path d=\"m21 19-1.9-1.9\"></path>", "maximize": "<path d=\"M8 3H5a2 2 0 0 0-2 2v3\"></path><path d=\"M21 8V5a2 2 0 0 0-2-2h-3\"></path><path d=\"M3 16v3a2 2 0 0 0 2 2h3\"></path><path d=\"M16 21h3a2 2 0 0 0 2-2v-3\"></path>", "expand": "<path d=\"m21 21-6-6m6 6v-4.8m0 4.8h-4.8\"></path><path d=\"M3 16.2V21m0 0h4.8M3 21l6-6\"></path><path d=\"M21 7.8V3m0 0h-4.8M21 3l-6 6\"></path><path d=\"M3 7.8V3m0 0h4.8M3 3l6 6\"></path>", "fullscreen": "<path d=\"M3 7V5a2 2 0 0 1 2-2h2\"></path><path d=\"M17 3h2a2 2 0 0 1 2 2v2\"></path><path d=\"M21 17v2a2 2 0 0 1-2 2h-2\"></path><path d=\"M7 21H5a2 2 0 0 1-2-2v-2\"></path><rect height=\"8\" rx=\"1\" width=\"10\" x=\"7\" y=\"8\"></rect>", "images": "<path d=\"M18 22H4a2 2 0 0 1-2-2V6\"></path><path d=\"m22 13-1.296-1.296a2.41 2.41 0 0 0-3.408 0L11 18\"></path><circle cx=\"12\" cy=\"8\" r=\"2\"></circle><rect height=\"16\" rx=\"2\" width=\"16\" x=\"6\" y=\"2\"></rect>", "circle": "<circle cx=\"12\" cy=\"12\" r=\"10\"></circle>", "loader-circle": "<path d=\"M21 12a9 9 0 1 1-6.219-8.56\"></path>", "file-text": "<path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"></path><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"></path><path d=\"M10 9H8\"></path><path d=\"M16 13H8\"></path><path d=\"M16 17H8\"></path>"}

main.py

@@ -1,11 +1,15 @@
 import asyncio
+import base64
 import hashlib
+import io
+import os
 import time
 from concurrent.futures import ThreadPoolExecutor
 from functools import partial
-import os
 
+import google.generativeai as genai
 from fasthtml.common import *
+from PIL import Image
 from shad4fast import *
 from vespa.application import Vespa
 
@@ -27,10 +31,6 @@ from frontend.app import (
     SimMapButtonReady,
 )
 from frontend.layout import Layout
-import google.generativeai as genai
-from PIL import Image
-import io
-import base64
 
 highlight_js_theme_link = Link(id="highlight-theme", rel="stylesheet", href="")
 highlight_js_theme = Script(src="/static/js/highlightjs-theme.js")
@@ -73,7 +73,9 @@ thread_pool = ThreadPoolExecutor()
 
 genai.configure(api_key=os.getenv("GEMINI_API_KEY"))
 GEMINI_SYSTEM_PROMPT = """If the user query is a question, try your best to answer it based on the provided images. 
-If the user query is not an obvious question, reply with 'No question detected.'. Your response should be HTML formatted.
+If the user query can not be interpreted as a question, or if the answer to the query can not be inferred from the images,
+answer with the exact phrase "I am sorry, I do not have enough information in the image to answer your question.".
+Your response should be HTML formatted, but only simple tags, such as <b>. <p>, <i>, <br> <ul> and <li> are allowed. No HTML tables.
 This means that newlines will be replaced with <br> tags, bold text will be enclosed in <b> tags, and so on.
 But, you should NOT include backticks (`) or HTML tags in your response.
 """
@@ -88,6 +90,12 @@ def load_model_on_startup():
     return
 
 
+@app.on_event("startup")
+async def keepalive():
+    asyncio.create_task(poll_vespa_keepalive())
+    return
+
+
 def generate_query_id(query):
     return hashlib.md5(query.encode("utf-8")).hexdigest()
 
@@ -139,7 +147,8 @@ def get(request):
     return Layout(
         Main(Search(request), data_overlayscrollbars_initialize=True, cls="border-t"),
         Aside(
-            ChatResult(query_id=query_id, query=query_value), cls="border-t border-l"
+            ChatResult(query_id=query_id, query=query_value),
+            cls="border-t border-l hidden md:block",
         ),
     )  # Show SearchBox and Loading message initially
 
@@ -207,6 +216,13 @@ def get_results_children(result):
     return search_results
 
 
+async def poll_vespa_keepalive():
+    while True:
+        await asyncio.sleep(5)
+        await vespa_app.keepalive()
+        print(f"Vespa keepalive: {time.time()}")
+
+
 async def generate_similarity_map(
     model, processor, query, q_embs, token_to_idx, result, query_id
 ):
@@ -290,7 +306,9 @@ async def message_generator(query_id: str, query: str):
     images = []
     result = None
     all_images_ready = False
-    while not all_images_ready:
+    max_wait = 10  # seconds
+    start_time = time.time()
+    while not all_images_ready and time.time() - start_time < max_wait:
         result = result_cache.get(query_id)
         if result is None:
             await asyncio.sleep(0.1)
@@ -308,6 +326,10 @@ async def message_generator(query_id: str, query: str):
 
     # from b64 to PIL image
     images = [Image.open(io.BytesIO(base64.b64decode(img))) for img in images]
+    if not images:
+        yield "event: message\ndata: I am sorry, I do not have enough information in the image to answer your question.\n\n"
+        yield "event: close\ndata: \n\n"
+        return
 
     # If newlines are present in the response, the connection will be closed.
     def replace_newline_with_br(text):
@@ -321,7 +343,7 @@ async def message_generator(query_id: str, query: str):
             response_text += chunk.text
             response_text = replace_newline_with_br(response_text)
             yield f"event: message\ndata: {response_text}\n\n"
-            await asyncio.sleep(0.5)
+            await asyncio.sleep(0.1)
     yield "event: close\ndata: \n\n"
 
 

output.css

@@ -766,10 +766,6 @@ body {
   z-index: 100;
 }
 
-.col-span-2 {
-  grid-column: span 2 / span 2;
-}
-
 .-mx-1 {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
@@ -793,8 +789,8 @@ body {
   margin-top: -1rem;
 }
 
-.-mt-\[34vh\] {
-  margin-top: -34vh;
+.-mt-\[21vh\] {
+  margin-top: -21vh;
 }
 
 .mb-1 {
@@ -1056,6 +1052,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 pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -1096,22 +1102,14 @@ body {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
-.grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.grid-cols-\[1fr\] {
-  grid-template-columns: 1fr;
-}
-
-.grid-cols-\[minmax\(0\2c _4fr\)_minmax\(0\2c _1fr\)\] {
-  grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
-}
-
 .grid-rows-\[55px_1fr\] {
   grid-template-rows: 55px 1fr;
 }
 
+.grid-rows-\[auto_1fr\] {
+  grid-template-rows: auto 1fr;
+}
+
 .grid-rows-\[auto_1fr_auto\] {
   grid-template-rows: auto 1fr auto;
 }
@@ -1140,10 +1138,6 @@ body {
   align-items: center;
 }
 
-.justify-end {
-  justify-content: flex-end;
-}
-
 .justify-center {
   justify-content: center;
 }
@@ -1198,8 +1192,8 @@ body {
        column-gap: 1.25rem;
 }
 
-.gap-y-4 {
-  row-gap: 1rem;
+.gap-y-3 {
+  row-gap: 0.75rem;
 }
 
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
@@ -1232,10 +1226,6 @@ body {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
-.self-end {
-  align-self: flex-end;
-}
-
 .self-stretch {
   align-self: stretch;
 }
@@ -1288,11 +1278,6 @@ body {
   border-width: 2px;
 }
 
-.border-x {
-  border-left-width: 1px;
-  border-right-width: 1px;
-}
-
 .border-b {
   border-bottom-width: 1px;
 }
@@ -1448,6 +1433,10 @@ body {
   padding: 1rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .p-6 {
   padding: 1.5rem;
 }
@@ -1501,6 +1490,11 @@ body {
   padding-bottom: 0.5rem;
 }
 
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .py-5 {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
@@ -1534,10 +1528,6 @@ body {
   padding-top: 1rem;
 }
 
-.pr-3 {
-  padding-right: 0.75rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -1622,11 +1612,6 @@ body {
   letter-spacing: 0.025em;
 }
 
-.text-black {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
 .text-card-foreground {
   color: hsl(var(--card-foreground));
 }
@@ -1770,6 +1755,11 @@ body {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.backdrop-filter {
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -2064,6 +2054,29 @@ aside {
   color: #2E2F27;
 }
 
+@media (min-width: 768px) {
+  .grid-image-text-columns {
+    grid-column: span 2 / span 2;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.grid-image-column {
+  grid-row: span 2 / span 2;
+  display: grid;
+  grid-template-rows: subgrid;
+  align-content: flex-start;
+}
+
+@media (min-width: 768px) {
+  .md-grid-text-column {
+    grid-row: span 2 / span 2;
+    display: grid;
+    grid-template-rows: subgrid;
+    align-content: flex-start;
+  }
+}
+
 :root:has(.data-\[state\=open\]\:no-bg-scroll[data-state="open"]) {
   overflow: hidden;
 }
@@ -2555,8 +2568,8 @@ aside {
     max-width: 420px;
   }
 
-  .md\:grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  .md\:grid-cols-\[minmax\(0\2c _45fr\)_minmax\(0\2c _15fr\)\] {
+    grid-template-columns: minmax(0, 45fr) minmax(0, 15fr);
   }
 
   .md\:text-2xl {
@@ -2608,11 +2621,6 @@ aside {
   --tw-gradient-to: #d1d5db var(--tw-gradient-to-position);
 }
 
-.dark\:text-white:where(.dark, .dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
 .dark\:hover\:border-white:hover:where(.dark, .dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));