deploy at 2024-08-23 11:29:10.212130

Dockerfile

@@ -1,8 +1,8 @@
 FROM python:3.10
 WORKDIR /code
 COPY --link --chown=1000 . .
-RUN mkdir -p /tmp/cache/ session/ db/ 
-RUN chmod a+rwx -R /tmp/cache/ session/ db/ assets/
+RUN mkdir -p /tmp/cache/ session/ db/
+RUN chmod a+rwx -R /tmp/cache/ session/ db/
 ENV HF_HUB_CACHE=HF_HOME
 RUN pip install --no-cache-dir -r requirements.txt
 

README.md

@@ -35,7 +35,7 @@ Search page             |  Login page         |  Query logs
 
 ### Why?
 
-We have recognized the need, both for ourselves and others, to be able to set up a simple frontend for Vespa, without having to navigate the frontend framework jungle.
+We have recognized the need, both for ourselves and others, to be able to set up a simple frontend for Vespa, without having to navigate the frontend framework jungle. Demo frontend apps often end up with a bunch of dependendcies and angry github renovate bots. :robot: :sad:
 
 This sample-app can serve as an example of how you can build and deploy a simple frontend for Vespa, using FastHTML.
 
@@ -43,10 +43,10 @@ This sample-app can serve as an example of how you can build and deploy a simple
 
 #### 1. Clone this folder to your local machine 📂
 
-The command below will clone the repository and only fetch the `fasthtml-frontend` folder.
+The command below will clone the repository and only fetch the `fasthtml-demo` directory.
 
 ```bash
-git clone --depth 1 --filter=blob:none --sparse https://github.com/vespa-engine/sample-apps.git temp-sample-apps && cd temp-sample-apps && git sparse-checkout set fasthtml-frontend && mkdir -p ../fasthtml-frontend && mv fasthtml-frontend/* ../fasthtml-frontend/ && cd .. && rm -rf temp-sample-apps
+git clone --depth 1 --filter=blob:none --sparse https://github.com/vespa-engine/sample-apps.git temp-sample-apps && cd temp-sample-apps && git sparse-checkout set fasthtml-demo && mkdir -p ../fasthtml-demo && mv fasthtml-demo/* ../fasthtml-demp/ && cd .. && rm -rf temp-sample-apps
 ```
 
 #### 2. Install dependencies 🔧

deploy_app.ipynb

@@ -211,7 +211,7 @@
     "        ),\n",
     "        AuthClient(\n",
     "            id=\"token\",\n",
-    "            permissions=[\"read\", \"write\"],\n",
+    "            permissions=[\"read\"], # Token client only needs read permission\n",
     "            parameters=[Parameter(\"token\", {\"id\": token_id})],\n",
     "        ),\n",
     "    ],\n",

main.py

@@ -37,9 +37,11 @@ from fasthtml.common import (
     Beforeware,
     Hidden,
     Request,
+    H3,
+    Style,
 )
 from fasthtml.components import Nav, Article, Header, Mark
-from fasthtml.pico import Search
+from fasthtml.pico import Search, Grid, Fieldset, Label
 from starlette.middleware import Middleware
 from starlette.middleware.base import BaseHTTPMiddleware
 from starlette.middleware.sessions import SessionMiddleware
@@ -52,11 +54,15 @@ from hmac import compare_digest
 from io import StringIO
 import csv
 import tempfile
+from enum import Enum
+from typing import Tuple as T
+from urllib.parse import quote
 
-DEV_MODE = True
+DEV_MODE = False
 
 if DEV_MODE:
     print("Running in DEV_MODE - Hot reload enabled")
+    print("Loading environment variables from .env")
     from dotenv import load_dotenv
 
     load_dotenv()
@@ -84,7 +90,9 @@ db = database(DB_FILE)
 queries = db.t.queries
 if queries not in db.t:
     # You can pass a dict, or kwargs, to most MiniDataAPI methods.
-    queries.create(dict(qid=int, query=str, sess_id=str, timestamp=int), pk="qid")
+    queries.create(
+        dict(qid=int, query=str, ranking=str, sess_id=str, timestamp=int), pk="qid"
+    )
     # Add autoincrement to the qid column
     db.query("ALTER TABLE queries ADD COLUMN qid INTEGER PRIMARY KEY AUTOINCREMENT")
 Query = queries.dataclass()
@@ -111,7 +119,24 @@ def user_auth_before(req, sess):
         return login_redir
 
 
-headers = (picolink, MarkdownJS(), HighlightJS(langs=["json", "python"]), favicon, fa)
+spinner_css = Style("""
+    .htmx-indicator {
+        display: none; /* Hide spinner by default */
+    }
+
+    .htmx-indicator.htmx-request {
+        display: block;    
+    }
+""")
+
+headers = (
+    picolink,
+    MarkdownJS(),
+    HighlightJS(langs=["json", "python"]),
+    favicon,
+    fa,
+    spinner_css,
+)
 
 # Sesskey
 sess_key_path = "session/.sesskey"
@@ -167,6 +192,13 @@ sesskey = get_key(fname=sess_key_path)
 print(f"Session key: {sesskey}")
 
 
+# enum class for rank profiles
+class RankProfile(str, Enum):
+    bm25 = "bm25"
+    semantic = "semantic"
+    fusion = "fusion"
+
+
 def get_navbar(admin: bool):
     print(f"In get_navbar: {admin}")
     bar = Nav(
@@ -230,10 +262,32 @@ def get_navbar(admin: bool):
     return bar
 
 
+def spinner_div(hidden: bool = False):
+    return Div(
+        A(
+            id="spinner",
+            aria_busy="true",
+            cls="htmx-indicator",
+            style="font-size: 2em;",
+        ),
+        style="text-align: center; margin-top: 40px;"
+        if not hidden
+        else "display: none;",
+    )
+
+
 @app.route("/")
 def get(sess):
     # Can not get auth directly, as it is skipped in beforeware
     auth = sess.get("auth", False)
+    queries = [
+        "Breast Cancer Cells Feed on Cholesterol",
+        "Treating Asthma With Plants vs. Pills",
+        "Alkylphenol Endocrine Disruptors",
+        "Testing Turmeric on Smokers",
+        "The Role of Pesticides in Parkinson's Disease",
+        "Vitamin D for sleep quality in older adults",
+    ]
     return (
         Title("Vespa demo"),
         get_navbar(auth),
@@ -249,12 +303,48 @@ def get(sess):
                 Button(
                     "Search",
                     hx_get="/search",
-                    hx_include="#userquery",
+                    # include userquery and id of selected ranking radio button
+                    hx_include="#userquery, input[name=ranking]:checked",
                     hx_target="#results",
                     hx_indicator="#spinner",
                 ),
                 style="margin: 10% 10px 0 0;",
             ),
+            Fieldset(
+                Input(type="radio", id="bm25", name="ranking", value="bm25"),
+                Label("BM25", htmlfor="bm25"),
+                Input(type="radio", id="semantic", name="ranking", value="semantic"),
+                Label("Semantic", htmlfor="semantic"),
+                Input(
+                    type="radio",
+                    id="fusion",
+                    name="ranking",
+                    value="fusion",
+                    checked="",
+                ),
+                Label("Reciprocal Rank fusion", htmlfor="fusion"),
+                style="margin: 10px; text-align: center;",
+                id="ranking",
+            ),
+            H3("Example queries"),
+            # Buttons with predefined search queries
+            Grid(
+                *[
+                    Button(
+                        query,
+                        hx_get="/search?userquery=" + query,
+                        hx_include="input[name=ranking]:checked",
+                        hx_target="#results",
+                        hx_indicator="#spinner",
+                        style="margin: 10px; padding: 5px;",
+                        cls="secondary outline",
+                        id=f"example-{qid}",
+                    )
+                    for qid, query in enumerate(queries)
+                ],
+                # Make the grid buttons have same height and distribute evenly and center align
+                style="grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));",
+            ),
             # Section(
             #     Input(
             #         id="suggestion-input",
@@ -276,16 +366,9 @@ def get(sess):
             #         ),
             #     id="suggestions",
             # ),
+            # Display spinner div only if it #spinner does not exist
             Section(
-                Div(
-                    A(
-                        id="spinner",
-                        aria_busy="true",
-                        cls="htmx-indicator",
-                        style="font-size: 2em;",
-                    ),
-                    style="text-align: center; margin-top: 40px;",
-                ),
+                spinner_div(),
                 id="results",
                 hx_swap="innerHTML",
                 style="margin: 20px;",
@@ -356,9 +439,9 @@ def replace_hi_with_strong(text):
     return elements
 
 
-def log_query_to_db(query, sess):
+def log_query_to_db(query, ranking, sess):
     return queries.insert(
-        Query(query=query, sess_id=sesskey, timestamp=int(time.time()))
+        Query(query=query, ranking=ranking, sess_id=sesskey, timestamp=int(time.time()))
     )
 
 
@@ -432,22 +515,38 @@ async def expand(request: Request, docid: str, expand: bool):
     )
 
 
+# Returns tuple of (yql, body(dict)) based on the ranking profile
+def get_yql(ranking: RankProfile, userquery: str) -> T[str, dict]:
+    if ranking == RankProfile.bm25:
+        yql = "select * from sources * where userQuery() limit 10"
+        body = {}
+    elif ranking == RankProfile.semantic:
+        yql = "select * from sources * where ({targetHits:10}nearestNeighbor(embedding,q)) limit 10"
+        body = {"input.query(q)": f"embed({userquery})"}
+    elif ranking == RankProfile.fusion:
+        yql = "select * from sources * where rank({targetHits:1000}nearestNeighbor(embedding,q), userQuery()) limit 10"
+        body = {"input.query(q)": f"embed({userquery})"}
+    return yql, body
+
+
 @app.get("/search")
-async def search(userquery: str, sess):
+async def search(userquery: str, ranking: str, sess):
     print(sess)
     if "queries" not in sess:
         sess["queries"] = []
-    else:
-        sess["queries"].append(userquery)
+    quoted = quote(userquery) + "&ranking=" + ranking
+    sess["queries"].append(quoted)
     print(f"Searching for: {userquery}")
-    log_query_to_db(userquery, sess)
+    print(f"Ranking: {ranking}")
+    log_query_to_db(userquery, ranking, sess)
+    yql, body = get_yql(ranking, userquery)
     async with vespa_app.asyncio() as session:
         resp = await session.query(
-            yql="select * from sources * where userQuery() or ({targetHits:1000}nearestNeighbor(embedding,q)) limit 10;",
+            yql=yql,
             query=userquery,
             hits=10,
-            ranking="fusion",
-            body={"input.query(q)": f"embed({userquery})"},
+            ranking=str(ranking),
+            body=body,
         )
     records = []
     fields = ["id", "title", "body"]
@@ -459,6 +558,7 @@ async def search(userquery: str, sess):
     results = parse_results(records)
     json_dump = json.dumps(resp.get_json(), indent=4)
     return Div(
+        spinner_div(),
         # Accordion (with Details)
         Details(
             Summary("Full JSON response"),

requirements.in

@@ -0,0 +1,6 @@
+python-fasthtml==0.4.4
+huggingface-hub
+git+https://github.com/AnswerDotAI/fasthtml-hf@a7ae831a1bd01105a9f771fb3a4e4c454ddc3176 # latest released version did not work
+pyvespa
+vespacli
+python-dotenv

requirements.txt

@@ -1,5 +1,164 @@
-python-fasthtml
-git+https://github.com/AnswerDotAI/fasthtml-hf@a7ae831a1bd01105a9f771fb3a4e4c454ddc3176 # latest released version did not work
-pyvespa
-vespacli
-python-dotenv
+# This file was autogenerated by uv via the following command:
+#    uv pip compile requirements.in --output-file requirements.txt
+aiohappyeyeballs==2.4.0
+    # via aiohttp
+aiohttp==3.10.5
+    # via pyvespa
+aiosignal==1.3.1
+    # via aiohttp
+anyio==4.4.0
+    # via
+    #   httpx
+    #   starlette
+    #   watchfiles
+async-timeout==4.0.3
+    # via aiohttp
+attrs==24.2.0
+    # via aiohttp
+beautifulsoup4==4.12.3
+    # via python-fasthtml
+certifi==2024.7.4
+    # via
+    #   httpcore
+    #   httpx
+    #   requests
+cffi==1.17.0
+    # via cryptography
+charset-normalizer==3.3.2
+    # via requests
+click==8.1.7
+    # via uvicorn
+cryptography==43.0.0
+    # via pyvespa
+docker==7.1.0
+    # via pyvespa
+exceptiongroup==1.2.2
+    # via anyio
+fastcore==1.7.1
+    # via
+    #   fasthtml-hf
+    #   fastlite
+    #   python-fasthtml
+    #   sqlite-minutils
+fasthtml-hf @ git+https://github.com/AnswerDotAI/fasthtml-hf@a7ae831a1bd01105a9f771fb3a4e4c454ddc3176
+    # via -r requirements.in
+fastlite==0.0.9
+    # via python-fasthtml
+filelock==3.15.4
+    # via huggingface-hub
+frozenlist==1.4.1
+    # via
+    #   aiohttp
+    #   aiosignal
+fsspec==2024.6.1
+    # via huggingface-hub
+h11==0.14.0
+    # via
+    #   httpcore
+    #   uvicorn
+h2==4.1.0
+    # via httpx
+hpack==4.0.0
+    # via h2
+httpcore==1.0.5
+    # via httpx
+httptools==0.6.1
+    # via uvicorn
+httpx==0.27.0
+    # via
+    #   python-fasthtml
+    #   pyvespa
+huggingface-hub==0.24.6
+    # via
+    #   -r requirements.in
+    #   fasthtml-hf
+hyperframe==6.0.1
+    # via h2
+idna==3.7
+    # via
+    #   anyio
+    #   httpx
+    #   requests
+    #   yarl
+itsdangerous==2.2.0
+    # via python-fasthtml
+jinja2==3.1.4
+    # via pyvespa
+markupsafe==2.1.5
+    # via jinja2
+multidict==6.0.5
+    # via
+    #   aiohttp
+    #   yarl
+oauthlib==3.2.2
+    # via python-fasthtml
+packaging==24.1
+    # via
+    #   fastcore
+    #   huggingface-hub
+pycparser==2.22
+    # via cffi
+python-dateutil==2.9.0.post0
+    # via
+    #   python-fasthtml
+    #   pyvespa
+python-dotenv==1.0.1
+    # via
+    #   -r requirements.in
+    #   uvicorn
+python-fasthtml==0.4.4
+    # via -r requirements.in
+python-multipart==0.0.9
+    # via python-fasthtml
+pyvespa==0.46.0
+    # via -r requirements.in
+pyyaml==6.0.2
+    # via
+    #   huggingface-hub
+    #   uvicorn
+requests==2.31.0
+    # via
+    #   docker
+    #   huggingface-hub
+    #   pyvespa
+    #   requests-toolbelt
+requests-toolbelt==1.0.0
+    # via pyvespa
+six==1.16.0
+    # via python-dateutil
+sniffio==1.3.1
+    # via
+    #   anyio
+    #   httpx
+soupsieve==2.6
+    # via beautifulsoup4
+sqlite-minutils==3.37.0.post1
+    # via fastlite
+starlette==0.38.2
+    # via python-fasthtml
+tenacity==9.0.0
+    # via pyvespa
+tqdm==4.66.5
+    # via huggingface-hub
+typing-extensions==4.12.2
+    # via
+    #   anyio
+    #   huggingface-hub
+    #   pyvespa
+    #   uvicorn
+urllib3==2.2.2
+    # via
+    #   docker
+    #   requests
+uvicorn==0.30.6
+    # via python-fasthtml
+uvloop==0.20.0
+    # via uvicorn
+vespacli==8.391.23
+    # via -r requirements.in
+watchfiles==0.23.0
+    # via uvicorn
+websockets==13.0
+    # via uvicorn
+yarl==1.9.4
+    # via aiohttp