deploy at 2024-08-22 13:23:49.666417

.env.example

@@ -0,0 +1,8 @@
+# The URL of your Vespa Cloud application (you get it when running `deploy_app.ipynb`)
+VESPA_APP_URL=https://my-vespa-endpoint.z.vespa-app.cloud/
+# The secret token for your Vespa Cloud application (Created in Vespa Cloud Console)
+VESPA_CLOUD_SECRET_TOKEN=vespa_cloud_mysecret_tokenabcdeabcdeabcdedcba 
+# Username of admin user (has access to query logs in SQLite DB)
+ADMIN_NAME=admin
+# Password of admin user 
+ADMIN_PWD=admin 

.gitignore

@@ -0,0 +1,15 @@
+ft/
+db/
+session/
+todo/
+fasthtml/
+.venv/
+__pycache__/
+.python-version
+# Python stuff
+*.pyc
+*.pyo
+
+
+.env
+.sesskey

Dockerfile

@@ -0,0 +1,10 @@
+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/
+ENV HF_HUB_CACHE=HF_HOME
+RUN pip install --no-cache-dir -r requirements.txt
+
+ENV PYTHONUNBUFFERED=1 PORT=7860
+CMD ["python", "main.py"]

Dockerfile.nonhf

@@ -0,0 +1,16 @@
+FROM python:3.10
+# Set working directory
+WORKDIR /code
+# Copy only the requirements file to leverage Docker cache
+COPY --chown=1000 requirements.txt .
+# Install dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+# Copy the rest of the application code
+COPY --chown=1000 . .
+# Create necessary directories with appropriate permissions
+RUN mkdir -p /tmp/cache/ session/ \
+    && chmod a+rwx -R /tmp/cache/ session/
+# Set environment variable
+ENV PYTHONUNBUFFERED=1
+# Define the command to run the application
+CMD ["python", "main.py"]

LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -1,10 +1,132 @@
 ---
-title: Fasthtml Vespa
-emoji: 👀
-colorFrom: gray
-colorTo: green
+title: thomasht86/fasthtml-vespa
+emoji: 🚀
+colorFrom: purple
+colorTo: red
 sdk: docker
+app_file: app.py
 pinned: false
+termination_grace_period: 2m
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## FastHTML Vespa-frontend
+
+This is a simple frontend for Vespa search engine. It is built using [FastHTML](https://www.fastht.ml/) and written in pure Python.
+
+Search page             |  Login page         |  Query logs
+:-------------------------:|:-------------------------:|:-------------------------:
+![search](assets/search-page.png)  |  ![admin-login](assets/admin-login.png) |  ![query-log](assets/query-log.png)
+
+### Features
+
+- Simple search interface, with links to search results.
+- Accordion with full JSON-response from Vespa.
+- SQLite DB for storing queries.
+- Admin authentication for viewing and downloading queries.
+- Deployment options - Docker + [Huggingface spaces](https://huggingface.co/spaces/).
+
+### 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.
+
+This sample-app can serve as an example of how you can build and deploy a simple frontend for Vespa, using FastHTML.
+
+### How to use
+
+#### 1. Clone this folder to your local machine 📂
+
+The command below will clone the repository and only fetch the `fasthtml-frontend` folder.
+
+```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
+```
+
+#### 2. Install dependencies 🔧
+
+```bash
+pip install -r requirements.txt
+```
+
+#### 3. Run the app locally  💻
+
+```bash
+python main.py
+```
+
+At this point, you should be able to access the app at [http://localhost:5001](http://localhost:5001).
+
+But, you will _not_ be able to search for anything, as your environment variables are not set up.
+
+#### 4. Deploy and feed your Vespa application ▶️
+
+By running the `deploy_app.ipynb` notebook, you will deploy a Vespa application to the Vespa Cloud. The application is just a sample hybrid search application using the [BEIR/nfcorpus](https://huggingface.co/datasets/BeIR/nfcorpus) dataset.
+Feel free to replace the dataset and application with your own.
+
+Make sure to replace these variables at the top of the notebook with your own values:
+
+```python
+# Replace with your tenant name from the Vespa Cloud Console
+tenant_name = "mytenant"
+# Replace with your application name (does not need to exist yet)
+application = "fasthtml"
+# Token id (from Vespa Cloud Console)
+token_id = "fasthtmltoken"
+```
+
+#### 5. Set up environment variables 🔐
+
+Make sure to add the output of the `token_endpoint` from the `deploy_app.ipynb`- notebook to your `.env.example` file.
+This value should be placed in the `VESPA_APP_URL` environment variable.
+
+At the same time, you should rename the `.env.example` file to `.env`. This is added to the `.gitignore` file.
+
+#### 6. Run the app locally 🚀
+
+Now, you should be able to run the app locally and search for queries. 
+
+```bash
+python main.py
+```
+
+Open your browser and navigate to [http://localhost:5001](http://localhost:5001).
+
+### Deployment
+
+If you want to deploy the app, you set the `DEV_MODE=False` in `main.py`.
+This will disable loading of environment variables from the `.env` file, and instead use the environment variables set in the deployment environment.
+
+#### Docker 🐳
+
+You can build and run the app using Docker.
+
+Note that there are two Dockerfiles in the repo:
+
+- `Dockerfile` is for building the image for Huggingface Spaces.
+- `Dockerfile.nonhf` is for building an image that can be run locally or on any other platform.
+
+Build the image:
+
+```bash
+docker build -t fhtdemoimg . -f Dockerfile.nonhf 
+```
+
+**Run the container:**
+
+- Makes the environment variables in the `.env` file available to the container.
+- Will mount the `db/` folder to the container, so that the SQLite database is persisted between runs.
+- Sets the hostname to `dockerhost`, so that we can know use that to enable hot-reloading in the FastHTML app.
+- Maps the default Starlette port `5001` to `8000` on the host.
+
+```bash
+docker run --name fhtdemo --rm --env-file .env -p 8000:5001 -h dockerhost -v $(pwd)/db:/code/db fhtdemoimg
+```
+
+#### Huggingface 🤗 Spaces
+
+This deployment option is free. The deployment script is shamelessly copied from the [fasthtml-hf](https://github.com/AnswerDotAI/fasthtml-hf) repo. Check it out for details on cli-options, configuration and DB-backup options.
+
+1. Get a huggingface token with `write` permissions. You can do this by going to your [Huggingface profile](https://huggingface.co/settings/tokens) and create a new token.
+2. Set the `HF_TOKEN` environment variable to the token you just created.
+3. Run `python deploy_hf.py <your-space-name> [--private true]` to deploy the app to Huggingface Spaces.
+
+### Go build and show us some cool Vespa apps! 🚀

config.ini

@@ -0,0 +1,5 @@
+[DEFAULT]
+dataset_id = space-backup
+db_dir = data
+private_backup = True
+interval = 5 

deploy_app.ipynb

@@ -0,0 +1,621 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "given-adoption",
+   "metadata": {
+    "pycharm": {
+     "name": "#%% md\n"
+    }
+   },
+   "source": [
+    "<picture>\n",
+    "  <source media=\"(prefers-color-scheme: dark)\" srcset=\"https://vespa.ai/assets/vespa-ai-logo-heather.svg\">\n",
+    "  <source media=\"(prefers-color-scheme: light)\" srcset=\"https://vespa.ai/assets/vespa-ai-logo-rock.svg\">\n",
+    "  <img alt=\"#Vespa\" width=\"200\" src=\"https://vespa.ai/assets/vespa-ai-logo-rock.svg\" style=\"margin-bottom: 25px;\">\n",
+    "</picture>\n",
+    "\n",
+    "# Deploy a sample app to Vespa Cloud\n",
+    "\n",
+    "This is the same guide as [getting-started-pyvespa](https://pyvespa.readthedocs.io/en/latest/getting-started-pyvespa.html), deploying to Vespa Cloud.\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "4f8c1448",
+   "metadata": {},
+   "source": [
+    "<div class=\"alert alert-info\">\n",
+    "    Refer to <a href=\"https://pyvespa.readthedocs.io/en/latest/troubleshooting.html\">troubleshooting</a>\n",
+    "    for any problem when running this guide.\n",
+    "</div>\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "148d275b",
+   "metadata": {},
+   "source": [
+    "**Pre-requisite**: Create a tenant at [cloud.vespa.ai](https://cloud.vespa.ai/), save the tenant name.\n",
+    "\n",
+    "[![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/vespa-engine/pyvespa/blob/master/docs/sphinx/source/getting-started-pyvespa-cloud.ipynb)\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "366b0d83",
+   "metadata": {},
+   "source": [
+    "## Install\n",
+    "\n",
+    "Install [pyvespa](https://pyvespa.readthedocs.io/) >= 0.45\n",
+    "and the [Vespa CLI](https://docs.vespa.ai/en/vespa-cli.html).\n",
+    "The Vespa CLI is used for data and control plane key management ([Vespa Cloud Security Guide](https://cloud.vespa.ai/en/security/guide)).\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "136750de",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "!pip3 install pyvespa vespacli datasets"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "02f706ff",
+   "metadata": {},
+   "source": [
+    "## Configure application\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "id": "9ca4da83",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Replace with your tenant name from the Vespa Cloud Console\n",
+    "tenant_name = \"mytenant\"\n",
+    "# Replace with your application name (does not need to exist yet)\n",
+    "application = \"fasthtml\"\n",
+    "# Token id (from Vespa Cloud Console)\n",
+    "token_id = \"fasthtmltoken\""
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "db637322",
+   "metadata": {},
+   "source": [
+    "## Create an application package\n",
+    "\n",
+    "The [application package](https://pyvespa.readthedocs.io/en/latest/reference-api.html#vespa.package.ApplicationPackage)\n",
+    "has all the Vespa configuration files -\n",
+    "create one from scratch:\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "id": "bd5c2629",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from vespa.package import (\n",
+    "    ApplicationPackage,\n",
+    "    Field,\n",
+    "    Schema,\n",
+    "    Document,\n",
+    "    HNSW,\n",
+    "    RankProfile,\n",
+    "    Component,\n",
+    "    Parameter,\n",
+    "    FieldSet,\n",
+    "    GlobalPhaseRanking,\n",
+    "    Function,\n",
+    "    AuthClient,\n",
+    ")\n",
+    "\n",
+    "package = ApplicationPackage(\n",
+    "    name=application,\n",
+    "    schema=[\n",
+    "        Schema(\n",
+    "            name=\"doc\",\n",
+    "            document=Document(\n",
+    "                fields=[\n",
+    "                    Field(name=\"id\", type=\"string\", indexing=[\"summary\"]),\n",
+    "                    Field(\n",
+    "                        name=\"title\",\n",
+    "                        type=\"string\",\n",
+    "                        indexing=[\"index\", \"summary\"],\n",
+    "                        index=\"enable-bm25\",\n",
+    "                    ),\n",
+    "                    Field(\n",
+    "                        name=\"body\",\n",
+    "                        type=\"string\",\n",
+    "                        indexing=[\"index\", \"summary\"],\n",
+    "                        index=\"enable-bm25\",\n",
+    "                        bolding=True,\n",
+    "                    ),\n",
+    "                    Field(\n",
+    "                        name=\"embedding\",\n",
+    "                        type=\"tensor<float>(x[384])\",\n",
+    "                        indexing=[\n",
+    "                            'input title . \" \" . input body',\n",
+    "                            \"embed\",\n",
+    "                            \"index\",\n",
+    "                            \"attribute\",\n",
+    "                        ],\n",
+    "                        ann=HNSW(distance_metric=\"angular\"),\n",
+    "                        is_document_field=False,\n",
+    "                    ),\n",
+    "                ]\n",
+    "            ),\n",
+    "            fieldsets=[FieldSet(name=\"default\", fields=[\"title\", \"body\"])],\n",
+    "            rank_profiles=[\n",
+    "                RankProfile(\n",
+    "                    name=\"bm25\",\n",
+    "                    inputs=[(\"query(q)\", \"tensor<float>(x[384])\")],\n",
+    "                    functions=[\n",
+    "                        Function(name=\"bm25sum\", expression=\"bm25(title) + bm25(body)\")\n",
+    "                    ],\n",
+    "                    first_phase=\"bm25sum\",\n",
+    "                ),\n",
+    "                RankProfile(\n",
+    "                    name=\"semantic\",\n",
+    "                    inputs=[(\"query(q)\", \"tensor<float>(x[384])\")],\n",
+    "                    first_phase=\"closeness(field, embedding)\",\n",
+    "                ),\n",
+    "                RankProfile(\n",
+    "                    name=\"fusion\",\n",
+    "                    inherits=\"bm25\",\n",
+    "                    inputs=[(\"query(q)\", \"tensor<float>(x[384])\")],\n",
+    "                    first_phase=\"closeness(field, embedding)\",\n",
+    "                    global_phase=GlobalPhaseRanking(\n",
+    "                        expression=\"reciprocal_rank_fusion(bm25sum, closeness(field, embedding))\",\n",
+    "                        rerank_count=1000,\n",
+    "                    ),\n",
+    "                ),\n",
+    "            ],\n",
+    "        )\n",
+    "    ],\n",
+    "    components=[\n",
+    "        Component(\n",
+    "            id=\"e5\",\n",
+    "            type=\"hugging-face-embedder\",\n",
+    "            parameters=[\n",
+    "                Parameter(\n",
+    "                    \"transformer-model\",\n",
+    "                    {\n",
+    "                        \"url\": \"https://github.com/vespa-engine/sample-apps/raw/master/simple-semantic-search/model/e5-small-v2-int8.onnx\"\n",
+    "                    },\n",
+    "                ),\n",
+    "                Parameter(\n",
+    "                    \"tokenizer-model\",\n",
+    "                    {\n",
+    "                        \"url\": \"https://raw.githubusercontent.com/vespa-engine/sample-apps/master/simple-semantic-search/model/tokenizer.json\"\n",
+    "                    },\n",
+    "                ),\n",
+    "            ],\n",
+    "        )\n",
+    "    ],\n",
+    "    auth_clients=[\n",
+    "        AuthClient(\n",
+    "            id=\"mtls\",\n",
+    "            permissions=[\"read\", \"write\"],\n",
+    "            parameters=[Parameter(\"certificate\", {\"file\": \"security/clients.pem\"})],\n",
+    "        ),\n",
+    "        AuthClient(\n",
+    "            id=\"token\",\n",
+    "            permissions=[\"read\", \"write\"],\n",
+    "            parameters=[Parameter(\"token\", {\"id\": token_id})],\n",
+    "        ),\n",
+    "    ],\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "2c5e2943",
+   "metadata": {},
+   "source": [
+    "Note that the name cannot have `-` or `_`.\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "careful-savage",
+   "metadata": {},
+   "source": [
+    "## Deploy to Vespa Cloud\n",
+    "\n",
+    "The app is now defined and ready to deploy to Vespa Cloud.\n",
+    "\n",
+    "Deploy `package` to Vespa Cloud, by creating an instance of\n",
+    "[VespaCloud](https://pyvespa.readthedocs.io/en/latest/reference-api.html#vespa.deployment.VespaCloud):\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "id": "canadian-blood",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Setting application...\n",
+      "Running: vespa config set application scoober.fasthtml\n",
+      "Setting target cloud...\n",
+      "Running: vespa config set target cloud\n",
+      "\n",
+      "No api-key found for control plane access. Using access token.\n",
+      "Checking for access token in auth.json...\n",
+      "Successfully obtained access token for control plane access.\n"
+     ]
+    }
+   ],
+   "source": [
+    "from vespa.deployment import VespaCloud\n",
+    "\n",
+    "vespa_cloud = VespaCloud(\n",
+    "    tenant=tenant_name,\n",
+    "    application=application,\n",
+    "    application_package=package,\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "197c0a27",
+   "metadata": {},
+   "source": [
+    "The following will upload the application package to Vespa Cloud Dev Zone (`aws-us-east-1c`), read more about [Vespa Zones](https://cloud.vespa.ai/en/reference/zones.html).\n",
+    "The Vespa Cloud Dev Zone is considered as a sandbox environment where resources are down-scaled and idle deployments are expired automatically.\n",
+    "For information about production deployments, see the following [example](https://pyvespa.readthedocs.io/en/latest/getting-started-pyvespa-cloud.html#Example:-Deploy-the-app-to-the-prod-environment).\n",
+    "\n",
+    "> Note: Deployments to dev and perf expire after 7 days of inactivity, i.e., 7 days after running deploy. This applies to all plans, not only the Free Trial. Use the Vespa Console to extend the expiry period, or redeploy the application to add 7 more days.\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 8,
+   "id": "752166fc",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Deployment started in run 13 of dev-aws-us-east-1c for scoober.fasthtml. This may take a few minutes the first time.\n",
+      "INFO    [10:44:08]  Deploying platform version 8.397.20 and application dev build 7 for dev-aws-us-east-1c of default ...\n",
+      "INFO    [10:44:08]  Using CA signed certificate version 1\n",
+      "INFO    [10:44:08]  Using 1 nodes in container cluster 'fasthtml_container'\n",
+      "INFO    [10:44:11]  Validating Onnx models memory usage for container cluster 'fasthtml_container', percentage of available memory too low (10 < 15) to avoid restart, consider a flavor with more memory to avoid this\n",
+      "INFO    [10:44:13]  Session 4210 for tenant 'scoober' prepared and activated.\n",
+      "INFO    [10:44:13]  ######## Details for all nodes ########\n",
+      "INFO    [10:44:13]  h94419b.dev.aws-us-east-1c.vespa-external.aws.oath.cloud: expected to be UP\n",
+      "INFO    [10:44:13]  --- platform vespa/cloud-tenant-rhel8:8.397.20\n",
+      "INFO    [10:44:13]  --- storagenode on port 19102 has config generation 4210, wanted is 4210\n",
+      "INFO    [10:44:13]  --- searchnode on port 19107 has config generation 4210, wanted is 4210\n",
+      "INFO    [10:44:13]  --- distributor on port 19111 has config generation 4210, wanted is 4210\n",
+      "INFO    [10:44:13]  --- metricsproxy-container on port 19092 has config generation 4210, wanted is 4210\n",
+      "INFO    [10:44:13]  h93281d.dev.aws-us-east-1c.vespa-external.aws.oath.cloud: expected to be UP\n",
+      "INFO    [10:44:13]  --- platform vespa/cloud-tenant-rhel8:8.397.20\n",
+      "INFO    [10:44:13]  --- container-clustercontroller on port 19050 has config generation 4209, wanted is 4210\n",
+      "INFO    [10:44:13]  --- metricsproxy-container on port 19092 has config generation 4210, wanted is 4210\n",
+      "INFO    [10:44:13]  h93281b.dev.aws-us-east-1c.vespa-external.aws.oath.cloud: expected to be UP\n",
+      "INFO    [10:44:13]  --- platform vespa/cloud-tenant-rhel8:8.397.20\n",
+      "INFO    [10:44:13]  --- logserver-container on port 4080 has config generation 4209, wanted is 4210\n",
+      "INFO    [10:44:13]  --- metricsproxy-container on port 19092 has config generation 4210, wanted is 4210\n",
+      "INFO    [10:44:13]  h95982a.dev.aws-us-east-1c.vespa-external.aws.oath.cloud: expected to be UP\n",
+      "INFO    [10:44:13]  --- platform vespa/cloud-tenant-rhel8:8.397.20\n",
+      "INFO    [10:44:13]  --- container on port 4080 has config generation 4209, wanted is 4210\n",
+      "INFO    [10:44:13]  --- metricsproxy-container on port 19092 has config generation 4209, wanted is 4210\n",
+      "INFO    [10:44:23]  Found endpoints:\n",
+      "INFO    [10:44:23]  - dev.aws-us-east-1c\n",
+      "INFO    [10:44:23]   |-- https://d14d3ce0.ba4a39d8.z.vespa-app.cloud/ (cluster 'fasthtml_container')\n",
+      "INFO    [10:44:23]  Deployment of new application complete!\n",
+      "Found mtls endpoint for fasthtml_container\n",
+      "URL: https://d14d3ce0.ba4a39d8.z.vespa-app.cloud/\n",
+      "Connecting to https://d14d3ce0.ba4a39d8.z.vespa-app.cloud/\n",
+      "Using Mutual TLS with key and cert to connect to Vespa endpoint https://d14d3ce0.ba4a39d8.z.vespa-app.cloud/\n",
+      "Application is up!\n",
+      "Finished deployment.\n"
+     ]
+    }
+   ],
+   "source": [
+    "app = vespa_cloud.deploy()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "aaae2f91",
+   "metadata": {},
+   "source": [
+    "If the deployment failed, it is possible you forgot to add the key in the Vespa Cloud Console in the `vespa auth api-key` step above.\n",
+    "\n",
+    "If you can authenticate, you should see lines like the following\n",
+    "\n",
+    "```\n",
+    " Deployment started in run 1 of dev-aws-us-east-1c for mytenant.hybridsearch.\n",
+    "```\n",
+    "\n",
+    "The deployment takes a few minutes the first time while Vespa Cloud sets up the resources for your Vespa application\n",
+    "\n",
+    "`app` now holds a reference to a [Vespa](https://pyvespa.readthedocs.io/en/latest/reference-api.html#vespa.application.Vespa) instance. We can access the\n",
+    "mTLS protected endpoint name using the control-plane (vespa_cloud) instance. This endpoint we can query and feed to (data plane access) using the\n",
+    "mTLS certificate generated in previous steps.\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "sealed-mustang",
+   "metadata": {},
+   "source": [
+    "### Feeding documents to Vespa\n",
+    "\n",
+    "In this example we use the [HF Datasets](https://huggingface.co/docs/datasets/index) library to stream the\n",
+    "[BeIR/nfcorpus](https://huggingface.co/datasets/BeIR/nfcorpus) dataset and index in our newly deployed Vespa instance. Read\n",
+    "more about the [NFCorpus](https://www.cl.uni-heidelberg.de/statnlpgroup/nfcorpus/):\n",
+    "\n",
+    "> NFCorpus is a full-text English retrieval data set for Medical Information Retrieval.\n",
+    "\n",
+    "The following uses the [stream](https://huggingface.co/docs/datasets/stream) option of datasets to stream the data without\n",
+    "downloading all the contents locally. The `map` functionality allows us to convert the\n",
+    "dataset fields into the expected feed format for `pyvespa` which expects a dict with the keys `id` and `fields`:\n",
+    "\n",
+    "`{ \"id\": \"vespa-document-id\", \"fields\": {\"vespa_field\": \"vespa-field-value\"}}`\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "id": "9a49fa8e",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Found token endpoint for fasthtml_container\n",
+      "URL: https://d3f601e7.ba4a39d8.z.vespa-app.cloud/\n"
+     ]
+    },
+    {
+     "data": {
+      "text/plain": [
+       "'https://d3f601e7.ba4a39d8.z.vespa-app.cloud/'"
+      ]
+     },
+     "execution_count": 6,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "token_endpoint = vespa_cloud.get_token_endpoint()\n",
+    "token_endpoint"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "126c0c29",
+   "metadata": {},
+   "source": [
+    "Add this endpoint to your `.env.example` file:\n",
+    "\n",
+    "```bash\n",
+    "VESPA_APP_URL=https://d3f601e7.ba4a39d8.z.vespa-app.cloud/\n",
+    "```\n",
+    "\n",
+    "Remember to rename the file to `.env`.\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "775f3dd4",
+   "metadata": {},
+   "source": [
+    "## Feed data\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "id": "executed-reservoir",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stderr",
+     "output_type": "stream",
+     "text": [
+      "/Users/thomas/.pyenv/versions/3.9.19/envs/pyvespa-dev/lib/python3.9/site-packages/tqdm/auto.py:21: TqdmWarning: IProgress not found. Please update jupyter and ipywidgets. See https://ipywidgets.readthedocs.io/en/stable/user_install.html\n",
+      "  from .autonotebook import tqdm as notebook_tqdm\n"
+     ]
+    }
+   ],
+   "source": [
+    "from datasets import load_dataset\n",
+    "\n",
+    "dataset = load_dataset(\"BeIR/nfcorpus\", \"corpus\", split=\"corpus\", streaming=True)\n",
+    "vespa_feed = dataset.map(\n",
+    "    lambda x: {\n",
+    "        \"id\": x[\"_id\"],\n",
+    "        \"fields\": {\"title\": x[\"title\"], \"body\": x[\"text\"], \"id\": x[\"_id\"]},\n",
+    "    }\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "4f0ca33f",
+   "metadata": {},
+   "source": [
+    "Now we can feed to Vespa using `feed_iterable` which accepts any `Iterable` and an optional callback function where we can\n",
+    "check the outcome of each operation. The application is configured to use [embedding](https://docs.vespa.ai/en/embedding.html)\n",
+    "functionality, that produce a vector embedding using a concatenation of the title and the body input fields. This step is resource intensive.\n",
+    "\n",
+    "Read more about embedding inference in Vespa in the [Accelerating Transformer-based Embedding Retrieval with Vespa](https://blog.vespa.ai/accelerating-transformer-based-embedding-retrieval-with-vespa/)\n",
+    "blog post.\n",
+    "\n",
+    "Default node resources in Vespa Cloud have 2 v-cpu for the Dev Zone.\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 8,
+   "id": "bottom-memorabilia",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Using mtls_key_cert Authentication against endpoint https://d14d3ce0.ba4a39d8.z.vespa-app.cloud//ApplicationStatus\n"
+     ]
+    }
+   ],
+   "source": [
+    "from vespa.io import VespaResponse\n",
+    "\n",
+    "\n",
+    "def callback(response: VespaResponse, id: str):\n",
+    "    if not response.is_successful():\n",
+    "        print(f\"Error when feeding document {id}: {response.get_json()}\")\n",
+    "\n",
+    "\n",
+    "app.feed_iterable(vespa_feed, schema=\"doc\", namespace=\"tutorial\", callback=callback)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "336e339d",
+   "metadata": {},
+   "source": [
+    "### Run a test query\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 9,
+   "id": "11faeacf",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "{'root': {'id': 'toplevel',\n",
+       "  'relevance': 1.0,\n",
+       "  'fields': {'totalCount': 1387},\n",
+       "  'coverage': {'coverage': 100,\n",
+       "   'documents': 3633,\n",
+       "   'full': True,\n",
+       "   'nodes': 1,\n",
+       "   'results': 1,\n",
+       "   'resultsFull': 1},\n",
+       "  'children': [{'id': 'id:tutorial:doc::MED-2464',\n",
+       "    'relevance': 0.03200204813108039,\n",
+       "    'source': 'fasthtml_content',\n",
+       "    'fields': {'sddocname': 'doc',\n",
+       "     'body': \"BACKGROUND: In recent decades, children's diet quality has changed <hi>and</hi> <hi>asthma</hi> prevalence has increased, although it remains unclear if these events are associated. OBJECTIVE: To examine children's total <hi>and</hi> component diet quality <hi>and</hi> <hi>asthma</hi> <hi>and</hi> airway hyperresponsiveness (AHR), a proxy for <hi>asthma</hi> severity. METHODS: Food frequency questionnaires adapted from the Nurses' Health Study <hi>and</hi> supplemented with foods whose nutrients which have garnered interest of late in relation to <hi>asthma</hi> were administered. From these data, diet quality scores (total <hi>and</hi> component), based on the Youth Healthy Eating Index (YHEI adapted) were developed. <hi>Asthma</hi> assessments were performed by pediatric allergists <hi>and</hi> classified by atopic status: Allergic <hi>asthma</hi> (≥1 positive skin prick test to common allergens >3 mm compared to negative control) versus non-allergic <hi>asthma</hi> (negative skin prick test). AHR was assessed via the Cockcroft technique. Participants included 270 boys (30% with <hi>asthma</hi>) <hi>and</hi> 206 girls (33% with <hi>asthma</hi>) involved in the 1995 Manitoba Prospective Cohort Study nested case-control study. Logistic regression was used to examine associations between diet quality <hi>and</hi> <hi>asthma</hi>, <hi>and</hi> multinomial logistic regression was used to examine associations between diet quality <hi>and</hi> AHR. RESULTS: Four hundred seventy six children (56.7% boys) were seen at 12.6 ± 0.5 years. <hi>Asthma</hi> <hi>and</hi> AHR prevalence were 26.2 <hi>and</hi> 53.8%, respectively. In fully adjusted models, high <hi>vegetable</hi> intake was protective against allergic <hi>asthma</hi> (OR 0.49; 95% CI 0.29-0.84; P < 0.009) <hi>and</hi> moderate/severe AHR (OR 0.58; 0.37-0.91; P < 0.019). CONCLUSIONS: <hi>Vegetable</hi> intake is inversely associated with allergic <hi>asthma</hi> <hi>and</hi> moderate/severe AHR. Copyright © 2012 Wiley Periodicals, Inc.\",\n",
+       "     'documentid': 'id:tutorial:doc::MED-2464',\n",
+       "     'id': 'MED-2464',\n",
+       "     'title': 'Low vegetable intake is associated with allergic asthma and moderate-to-severe airway hyperresponsiveness.'}},\n",
+       "   {'id': 'id:tutorial:doc::MED-2450',\n",
+       "    'relevance': 0.03177805800756621,\n",
+       "    'source': 'fasthtml_content',\n",
+       "    'fields': {'sddocname': 'doc',\n",
+       "     'body': \"Background Atopy is not uncommon among children living in rural Crete, but wheeze <hi>and</hi> rhinitis are rare. A study was undertaken to examine whether this discrepancy could be attributed to a high consumption of fresh fruit <hi>and</hi> <hi>vegetables</hi> or adherence to a traditional Mediterranean diet. Methods A cross‐sectional survey was performed in 690 children aged 7–18\\u2005years in rural Crete. Parents completed a questionnaire on their child's respiratory <hi>and</hi> allergic symptoms <hi>and</hi> a 58‐item food frequency questionnaire. Adherence to a Mediterranean diet was measured using a scale with 12 dietary items. Children underwent skin prick tests with 10 common aeroallergens. Results 80% of children ate fresh fruit (<hi>and</hi> 68% <hi>vegetables</hi>) at least twice a day. The intake of grapes, oranges, apples, <hi>and</hi> fresh tomatoes—the main local products in Crete—had no association with atopy but was protective for wheezing <hi>and</hi> rhinitis. A high consumption of nuts was found to be inversely associated with wheezing (OR 0.46; 95% CI 0.20 to 0.98), whereas margarine increased the risk of both wheeze (OR 2.19; 95% CI 1.01 to 4.82) <hi>and</hi> allergic rhinitis (OR 2.10; 95% CI 1.31 to 3.37). A high level of adherence to the Mediterranean diet was protective for allergic rhinitis (OR 0.34; 95% CI 0.18 to 0.64) while a more modest protection was observed for wheezing <hi>and</hi> atopy. Conclusion The results of this study suggest a beneficial effect of commonly consumed <hi>fruits</hi>, <hi>vegetables</hi> <hi>and</hi> nuts, <hi>and</hi> of a high adherence to a traditional Mediterranean diet during childhood on symptoms of <hi>asthma</hi> <hi>and</hi> rhinitis. Diet may explain the relative lack of allergic symptoms in this population.\",\n",
+       "     'documentid': 'id:tutorial:doc::MED-2450',\n",
+       "     'id': 'MED-2450',\n",
+       "     'title': 'Protective effect of fruits, vegetables and the Mediterranean diet on asthma and allergies among children in Crete'}},\n",
+       "   {'id': 'id:tutorial:doc::MED-2458',\n",
+       "    'relevance': 0.030776515151515152,\n",
+       "    'source': 'fasthtml_content',\n",
+       "    'fields': {'sddocname': 'doc',\n",
+       "     'body': 'BACKGROUND: Antioxidant-rich diets are associated with reduced <hi>asthma</hi> prevalence in epidemiologic studies. We previously showed that short-term manipulation of antioxidant defenses leads to changes in <hi>asthma</hi> outcomes. OBJECTIVE: The objective was to investigate the effects of a high-antioxidant diet compared with those of a low-antioxidant diet, with or without lycopene supplementation, in <hi>asthma</hi>. DESIGN: <hi>Asthmatic</hi> adults (n = 137) were randomly assigned to a high-antioxidant diet (5 servings of <hi>vegetables</hi> <hi>and</hi> 2 servings of fruit daily; n = 46) or a low-antioxidant diet (≤2 servings of <hi>vegetables</hi> <hi>and</hi> 1 serving of fruit daily; n = 91) for 14 d <hi>and</hi> then commenced a parallel, randomized, controlled supplementation trial. Subjects who consumed the high-antioxidant diet received placebo. Subjects who consumed the low-antioxidant diet received placebo or tomato extract (45 mg lycopene/d). The intervention continued until week 14 or until an exacerbation occurred. RESULTS: After 14 d, subjects consuming the low-antioxidant diet had a lower percentage predicted forced expiratory volume in 1 s <hi>and</hi> percentage predicted forced vital capacity than did those consuming the high-antioxidant diet. Subjects in the low-antioxidant diet group had increased plasma C-reactive protein at week 14. At the end of the trial, time to exacerbation was greater in the high-antioxidant than in the low-antioxidant diet group, <hi>and</hi> the low-antioxidant diet group was 2.26 (95% CI: 1.04, 4.91; P = 0.039) times as likely to exacerbate. Of the subjects in the low-antioxidant diet group, no difference in airway or systemic inflammation or clinical outcomes was observed between the groups that consumed the tomato extract <hi>and</hi> those who consumed placebo. CONCLUSIONS: Modifying the dietary intake of carotenoids alters clinical <hi>asthma</hi> outcomes. Improvements were evident only after increased fruit <hi>and</hi> <hi>vegetable</hi> intake, which suggests that whole-food interventions are most effective. This trial was registered at http://www.actr.org.au as ACTRN012606000286549.',\n",
+       "     'documentid': 'id:tutorial:doc::MED-2458',\n",
+       "     'id': 'MED-2458',\n",
+       "     'title': 'Manipulating antioxidant intake in asthma: a randomized controlled trial.'}},\n",
+       "   {'id': 'id:tutorial:doc::MED-2461',\n",
+       "    'relevance': 0.03055037313432836,\n",
+       "    'source': 'fasthtml_content',\n",
+       "    'fields': {'sddocname': 'doc',\n",
+       "     'body': 'This study aimed to evaluate the association of diet with respiratory symptoms <hi>and</hi> <hi>asthma</hi> in schoolchildren in Taipei, Taiwan. An in-class interview survey elicited experiences of <hi>asthma</hi> <hi>and</hi> respiratory symptoms <hi>and</hi> consumption frequencies of the major food categories in 2290 fifth graders. Respiratory symptoms surveyed included persistent cough, chest tightness, wheezing with cold, wheezing without cold, dyspnea-associated wheezing, <hi>and</hi> exercise-induced cough or wheezing. Results showed that the consumption of sweetened beverages had the strongest association with respiratory symptoms <hi>and</hi> was positively associated with six of the seven respiratory symptoms (all p < 0.05). The adjusted odds ratios (aOR) ranged from 1.05 (95% confidence interval (CI = 1.01-1.09) for exercise-induced cough to 1.09 (95% CI = 1.03-1.16) for wheezing without cold. Egg consumption was associated with 5 of the 7 respiratory symptoms. Consumptions of seafood, soy products, <hi>and</hi> <hi>fruits</hi> were each negatively associated with one of the seven respiratory symptoms (all p < 0.05). Consumption of seafood was negatively associated with physician-diagnosed <hi>asthma</hi> <hi>and</hi> consumptions of sweetened beverages <hi>and</hi> eggs were positively associated with suspected <hi>asthma</hi> (p < 0.05). In conclusion, the study suggests that diet is associated with the respiratory symptoms in schoolchildren in Taipei. Consumptions of sweetened beverages <hi>and</hi> eggs are associated with increased risk of respiratory symptoms <hi>and</hi> <hi>asthma</hi> whereas consumptions of soy products <hi>and</hi> <hi>fruits</hi> are associated with reduced risk of respiratory symptoms.',\n",
+       "     'documentid': 'id:tutorial:doc::MED-2461',\n",
+       "     'id': 'MED-2461',\n",
+       "     'title': 'The association of diet with respiratory symptoms and asthma in schoolchildren in Taipei, Taiwan.'}},\n",
+       "   {'id': 'id:tutorial:doc::MED-5072',\n",
+       "    'relevance': 0.027757078986587184,\n",
+       "    'source': 'fasthtml_content',\n",
+       "    'fields': {'sddocname': 'doc',\n",
+       "     'body': 'Antioxidant-rich diets are associated with reduced <hi>asthma</hi> prevalence. However, direct evidence that altering intake of antioxidant-rich foods affects <hi>asthma</hi> is lacking. The objective was to investigate changes in <hi>asthma</hi> <hi>and</hi> airway inflammation resulting from a low antioxidant diet <hi>and</hi> subsequent use of lycopene-rich treatments. <hi>Asthmatic</hi> adults (n=32) consumed a low antioxidant diet for 10 days, then commenced a randomized, cross-over trial involving 3 x 7 day treatment arms (placebo, tomato extract (45 mg lycopene/day) <hi>and</hi> tomato juice (45 mg lycopene/day)). With consumption of a low antioxidant diet, plasma carotenoid concentrations decreased, <hi>Asthma</hi> Control Score worsened, %FEV(1) <hi>and</hi> %FVC decreased <hi>and</hi> %sputum neutrophils increased. Treatment with both tomato juice <hi>and</hi> extract reduced airway neutrophil influx. Treatment with tomato extract also reduced sputum neutrophil elastase activity. In conclusion, dietary antioxidant consumption modifies clinical <hi>asthma</hi> outcomes. Changing dietary antioxidant intake may be contributing to rising <hi>asthma</hi> prevalence. Lycopene-rich supplements should be further investigated as a therapeutic intervention.',\n",
+       "     'documentid': 'id:tutorial:doc::MED-5072',\n",
+       "     'id': 'MED-5072',\n",
+       "     'title': 'Lycopene-rich treatments modify noneosinophilic airway inflammation in asthma: proof of concept.'}}]}}"
+      ]
+     },
+     "execution_count": 9,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "with app.syncio(connections=1) as session:\n",
+    "    query = \"How Fruits and Vegetables Can Treat Asthma?\"\n",
+    "    response = session.query(\n",
+    "        yql=\"select * from sources * where userQuery() or ({targetHits:1000}nearestNeighbor(embedding,q)) limit 5\",\n",
+    "        query=query,\n",
+    "        ranking=\"fusion\",\n",
+    "        body={\"input.query(q)\": f\"embed({query})\"},\n",
+    "    )\n",
+    "    assert response.is_successful()\n",
+    "response.json"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "072a12ac",
+   "metadata": {},
+   "source": [
+    "Now, you should be all set to run your frontend against the Vespa Cloud application.\n"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.9.19"
+  },
+  "nbsphinx": {
+   "allow_errors": true
+  },
+  "vscode": {
+   "interpreter": {
+    "hash": "b0fa6594d8f4cbf19f97940f81e996739fb7646882a419484c72d19e05852a7e"
+   }
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

main.py

@@ -0,0 +1,713 @@
+from fasthtml_hf import setup_hf_backup
+from fasthtml.common import (
+    picolink,
+    serve,
+    Div,
+    Title,
+    Main,
+    Input,
+    Button,
+    A,
+    Section,
+    H2,
+    Ul,
+    Li,
+    P,
+    Img,
+    Details,
+    MarkdownJS,
+    HighlightJS,
+    Summary,
+    Script,
+    I,
+    Form,
+    RedirectResponse,
+    dataclass,
+    Favicon,
+    database,
+    get_key,
+    Table,
+    Thead,
+    Tr,
+    Th,
+    Tbody,
+    Td,
+    FileResponse,
+    fast_app,
+    Beforeware,
+    Hidden,
+    Request,
+)
+from fasthtml.components import Nav, Article, Header, Mark
+from fasthtml.pico import Search
+from starlette.middleware import Middleware
+from starlette.middleware.base import BaseHTTPMiddleware
+from starlette.middleware.sessions import SessionMiddleware
+from vespa.application import Vespa
+import json
+import os
+import re
+import time
+from hmac import compare_digest
+from io import StringIO
+import csv
+import tempfile
+
+DEV_MODE = True
+
+if DEV_MODE:
+    print("Running in DEV_MODE - Hot reload enabled")
+    from dotenv import load_dotenv
+
+    load_dotenv()
+
+ADMIN_NAME = os.getenv("ADMIN_NAME", "admin")
+ADMIN_PWD = os.getenv("ADMIN_PWD", "admin")
+
+vespa_app: Vespa = Vespa(
+    url=os.getenv("VESPA_APP_URL"),
+    vespa_cloud_secret_token=os.getenv("VESPA_CLOUD_SECRET_TOKEN"),
+)
+status = vespa_app.get_application_status()
+if status is None:
+    print("Could not connect to Vespa application")
+else:
+    print("Connected to Vespa application!")
+
+fa = Script(src="https://kit.fontawesome.com/664eb1a115.js", crossorigin="anonymous")
+favicon = Favicon(
+    "https://search.vespa.ai/favicon.ico",
+    "https://search.vespa.ai/favicon.ico",
+)
+DB_FILE = "db/vespa.db"
+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")
+    # Add autoincrement to the qid column
+    db.query("ALTER TABLE queries ADD COLUMN qid INTEGER PRIMARY KEY AUTOINCREMENT")
+Query = queries.dataclass()
+
+# Add a classmethod to the Query dataclass to convert timestamp field to a human readable format
+Query.get_datetime = lambda self: time.strftime(
+    "%Y-%m-%d %H:%M:%S", time.localtime(self.timestamp)
+)
+
+# Status code 303 is a redirect that can change POST to GET,
+# so it's appropriate for a login page.
+login_redir = RedirectResponse("/login", status_code=303)
+
+
+def user_auth_before(req, sess):
+    # The `auth` key in the request scope is automatically provided
+    # to any handler which requests it, and can not be injected
+    # by the user using query params, cookies, etc, so it should
+    # be secure to use.
+    print(f"Session Data before route: {sess}")
+    auth = req.scope["auth"] = sess.get("auth", None)
+    print(f"Auth: {auth}")
+    if not auth:
+        return login_redir
+
+
+headers = (picolink, MarkdownJS(), HighlightJS(langs=["json", "python"]), favicon, fa)
+
+# Sesskey
+sess_key_path = "session/.sesskey"
+# Make sure session directory exists
+os.makedirs("session", exist_ok=True)
+
+# Middleware
+
+
+class XFrameOptionsMiddleware(BaseHTTPMiddleware):
+    async def dispatch(self, request, call_next):
+        response = await call_next(request)
+        response.headers["X-Frame-Options"] = "ALLOW-FROM https://huggingface.co/"
+        return response
+
+
+middlewares = [
+    Middleware(
+        SessionMiddleware,
+        secret_key=get_key(fname=sess_key_path),
+        max_age=3600,
+    ),
+    Middleware(XFrameOptionsMiddleware),
+]
+bware = Beforeware(
+    user_auth_before,
+    skip=[
+        r"/favicon\.ico",
+        r"/static/.*",
+        r".*\.css",
+        r".*\.js",
+        "/",
+        "/login",
+        "/search",
+        "/document/.*",
+        "/expand/.*",
+        "/source",
+    ],
+)
+
+app, rt = fast_app(
+    before=bware,
+    live=DEV_MODE,
+    hdrs=headers,
+    middleware=middlewares,
+    key_fname=sess_key_path,
+    same_site="None",
+)
+
+
+sesskey = get_key(fname=sess_key_path)
+print(f"Session key: {sesskey}")
+
+
+def get_navbar(admin: bool):
+    print(f"In get_navbar: {admin}")
+    bar = Nav(
+        Ul(
+            Li(
+                A(
+                    Img(src="https://vespa.ai/assets/vespa-ai-logo-heather.svg"),
+                    href="https://cloud.vespa.ai",
+                    target="_blank",
+                    style="margin: 10px;",
+                ),
+            )
+        ),
+        Ul(H2("Vespa-fastHTML demo")),
+        Ul(
+            # A question mark icon with link to an about page
+            A(
+                I(cls="fa fa-question-circle fa-2x"),
+                href="/about",
+                style="margin: 10px;",
+                title="About this app",
+            ),
+            A(
+                I(cls="fab fa-slack fa-2x"),
+                href="https://slack.vespa.ai/",
+                style="margin: 10px;",
+                target="_blank",
+                title="Join Vespa Slack channel",
+            ),
+            A(
+                I(cls="fab fa-github fa-2x"),
+                href="https://github.com/thomasht86/fasthtml-vespa-demo/",
+                style="margin: 10px;",
+                target="_blank",
+                title="View source code on GitHub",
+            ),
+            A(
+                I(cls="fa fa-code fa-2x"),
+                href="/source",
+                style="margin: 10px;",
+                title="View source code",
+            ),
+            # Login icon (link to /login) show tooltip on hover. MAke it hidden if admin is logged in
+            A(
+                I(cls="fa fa-shield fa-2x"),
+                href="/login" if not admin else "/admin",
+                style="margin: 10px;",
+                title="Admin login",
+            ),
+            # Logout icon if admin is logged in
+            A(
+                I(cls="fa fa-sign-out fa-2x"),
+                href="/logout",
+                style="margin: 10px;" if admin else "display: none;",
+                title="Logout",
+            ),
+        ),
+        # 10px margin to right of navbar
+        style="margin-right: 10px;",
+    )
+    return bar
+
+
+@app.route("/")
+def get(sess):
+    # Can not get auth directly, as it is skipped in beforeware
+    auth = sess.get("auth", False)
+    return (
+        Title("Vespa demo"),
+        get_navbar(auth),
+        Main(
+            # Search bar
+            Search(
+                Input(
+                    type="search",
+                    placeholder="Ask/search for medical information?",
+                    id="userquery",
+                ),
+                # Get search results on button click with search-input as query parameter
+                Button(
+                    "Search",
+                    hx_get="/search",
+                    hx_include="#userquery",
+                    hx_target="#results",
+                    hx_indicator="#spinner",
+                ),
+                style="margin: 10% 10px 0 0;",
+            ),
+            # Section(
+            #     Input(
+            #         id="suggestion-input",
+            #         list="search-options",
+            #         placeholder="Search options",
+            #     ),
+            #     Datalist(
+            #             *[
+            #                 Option(
+            #                     "Covid-19",
+            #                     value="Covid-19",
+            #                 ),
+            #                 Option(
+            #                     "Vaccine",
+            #                     value="Vaccine",
+            #                 ),
+            #             ],
+            #             id="search-options",
+            #         ),
+            #     id="suggestions",
+            # ),
+            Section(
+                Div(
+                    A(
+                        id="spinner",
+                        aria_busy="true",
+                        cls="htmx-indicator",
+                        style="font-size: 2em;",
+                    ),
+                    style="text-align: center; margin-top: 40px;",
+                ),
+                id="results",
+                hx_swap="innerHTML",
+                style="margin: 20px;",
+            ),
+            style="margin: 0 auto; width: 70%;",
+            id="main",
+        ),
+    )
+
+
+@dataclass
+class Login:
+    name: str
+    pwd: str
+
+
+@app.get("/login")
+def get_login_form(sess, error: bool = False):
+    auth = sess.get("auth", False)
+    frm = Form(
+        Input(id="name", placeholder="Name"),
+        Input(id="pwd", type="password", placeholder="Password"),
+        Button("login"),
+        action="/login",
+        method="post",
+    )
+    err_msg = P("Incorrect password", style="color: red;") if error else ""
+    return (
+        Title("Admin login"),
+        get_navbar(auth),
+        Main(
+            err_msg,
+            frm,
+            style="width: 50%; margin: 10% auto;",
+        ),
+    )
+
+
+@app.post("/login")
+def post(login: Login, sess):
+    if not compare_digest(ADMIN_PWD.encode("utf-8"), login.pwd.encode("utf-8")):
+        # Incorrect password - add error message
+        return RedirectResponse("/login?error=True", status_code=303)
+    sess["auth"] = True
+    print(f"Sess after login: {sess}")
+    return RedirectResponse("/admin", status_code=303)
+
+
+@app.get("/logout")
+def logout(sess):
+    sess["auth"] = False
+    return RedirectResponse("/")
+
+
+def replace_hi_with_strong(text):
+    parts = re.split(r"(<hi>|</hi>)", text)
+    elements = []
+    open_tag = False
+    for part in parts:
+        if part == "<hi>":
+            open_tag = True
+        elif part == "</hi>":
+            open_tag = False
+        elif open_tag:
+            elements.append(Mark(part))
+        else:
+            elements.append(part)
+    return elements
+
+
+def log_query_to_db(query, sess):
+    return queries.insert(
+        Query(query=query, sess_id=sesskey, timestamp=int(time.time()))
+    )
+
+
+def parse_results(records):
+    return [
+        Article(
+            Header(
+                H2(
+                    A(
+                        result["title"],
+                        hx_get=f"/document/{result['id']}",
+                        hx_target="#results",
+                    )
+                )
+            ),
+            Div(
+                P(
+                    *replace_hi_with_strong(
+                        result["body"][:300] + "..."
+                    ),  # Display first 300 characters of body
+                ),
+                Div(
+                    # Button with "Show more" - center align
+                    Button(
+                        "Show more",
+                        hx_post=f"/expand/{result['id']}?expand=true",
+                        hx_target=f"#{result['id']}",
+                        hx_include=f"#{result['id']}-full",
+                        cls="outline secondary",
+                        # Style to fill whole width of parent div
+                        style="width: 100%;",
+                    ),
+                    style="text-align: center;",
+                ),
+                id=result["id"],
+            ),
+            Hidden(result["body"], id=f"{result['id']}-full"),
+        )
+        for result in records
+    ]
+
+
+@app.post("/expand/{docid}")
+async def expand(request: Request, docid: str, expand: bool):
+    print(f"Expanding {docid}")
+    form_data = await request.form()
+    result = form_data.get(f"{docid}-full")
+    if not expand:
+        result = result[:300] + "..."
+    return (
+        Div(
+            P(
+                *replace_hi_with_strong(result),  # Display full body
+            ),
+            Div(
+                # Button with "Show less" - center align
+                Button(
+                    "Show less" if expand else "Show more",
+                    hx_post=f"/expand/{docid}?expand="
+                    + ("false" if expand else "true"),
+                    hx_target=f"#{docid}",
+                    hx_include=f"#{docid}-full",
+                    cls="outline secondary",
+                    # Style to fill whole width of parent div
+                    style="width: 100%;",
+                ),
+                style="text-align: center;",
+            ),
+            id=docid,
+        ),
+    )
+
+
+@app.get("/search")
+async def search(userquery: str, sess):
+    print(sess)
+    if "queries" not in sess:
+        sess["queries"] = []
+    else:
+        sess["queries"].append(userquery)
+    print(f"Searching for: {userquery}")
+    log_query_to_db(userquery, sess)
+    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;",
+            query=userquery,
+            hits=10,
+            ranking="fusion",
+            body={"input.query(q)": f"embed({userquery})"},
+        )
+    records = []
+    fields = ["id", "title", "body"]
+    for hit in resp.hits:
+        record = {}
+        for field in fields:
+            record[field] = hit["fields"][field]
+        records.append(record)
+    results = parse_results(records)
+    json_dump = json.dumps(resp.get_json(), indent=4)
+    return Div(
+        # Accordion (with Details)
+        Details(
+            Summary("Full JSON response"),
+            Div(
+                f"""```json\n{json_dump}\n```""",
+                cls="marked",
+            ),
+        ),
+        H2(
+            "Search Results",
+        ),
+        Div(
+            *results,
+            id="all-searchresults",
+        ),
+    )
+
+
+@app.get("/download_csv")
+def download_csv(auth):
+    queries_dict = list(db.query("SELECT * FROM queries"))
+    queries = [Query(**query) for query in queries_dict]
+
+    # Create CSV in memory
+    csv_file = StringIO()
+    csv_writer = csv.writer(csv_file)
+    csv_writer.writerow(["Query", "Session ID", "Timestamp"])
+    for query in queries:
+        csv_writer.writerow([query.query, query.sess_id, query.timestamp])
+
+    # Move to the beginning of the StringIO object
+    csv_file.seek(0)
+
+    # Save CSV to a temporary file
+    temp_file = tempfile.NamedTemporaryFile(delete=False, suffix=".csv")
+    temp_file.write(csv_file.getvalue().encode("utf-8"))
+    temp_file.close()
+
+    return FileResponse(
+        temp_file.name,
+        filename="queries.csv",
+        media_type="text/csv",
+        content_disposition_type="attachment",
+    )
+
+
+@app.get("/admin")
+def get_admin(auth, page: int = 1):
+    limit = 15
+    offset = (page - 1) * limit
+    total_queries_result = list(
+        db.query("SELECT COUNT(*) AS count FROM queries ORDER BY timestamp DESC")
+    )
+    total_queries = total_queries_result[0]["count"]
+    queries_dict = list(
+        db.query(f"SELECT * FROM queries LIMIT {limit} OFFSET {offset}")
+    )
+    queries = [Query(**query) for query in queries_dict]
+
+    total_pages = (
+        total_queries + limit - 1
+    ) // limit  # Calculate total number of pages
+
+    # Define the range of pages to display
+    page_window = 5  # Number of pages to display at once
+    start_page = max(1, page - page_window // 2)
+    end_page = min(total_pages, start_page + page_window - 1)
+
+    # Adjust the start and end pages if they exceed the limits
+    if end_page - start_page < page_window:
+        start_page = max(1, end_page - page_window + 1)
+
+    # Pagination controls with "First", "Previous", "Next", and "Last"
+    pagination_controls = Div(
+        A(
+            "First",
+            href="/admin?page=1",
+            style="margin: 5px;"
+            if page > 1
+            else "margin: 5px; color: grey; pointer-events: none;",
+        ),
+        A(
+            "Previous",
+            href=f"/admin?page={page - 1}",
+            style="margin: 5px;"
+            if page > 1
+            else "margin: 5px; color: grey; pointer-events: none;",
+        ),
+        *[
+            A(
+                f"{i}",
+                href=f"/admin?page={i}",
+                style="margin: 5px;"
+                if i != page
+                else "margin: 5px; font-weight: bold;",
+            )
+            for i in range(start_page, end_page + 1)
+        ],
+        A(
+            "Next",
+            href=f"/admin?page={page + 1}",
+            style="margin: 5px;"
+            if page < total_pages
+            else "margin: 5px; color: grey; pointer-events: none;",
+        ),
+        A(
+            "Last",
+            href=f"/admin?page={total_pages}",
+            style="margin: 5px;"
+            if page < total_pages
+            else "margin: 5px; color: grey; pointer-events: none;",
+        ),
+        style="text-align: center; margin: 20px;",
+    )
+
+    # Total pages indication
+    total_pages_indicator = Div(
+        f"Page {page} of {total_pages}",
+        style="text-align: center; margin: 10px;",
+    )
+
+    return (
+        Title("Admin"),
+        get_navbar(auth),
+        Main(
+            Div(
+                A(
+                    I(cls="fa fa-arrow-left"),
+                    "Back",
+                    href="/",
+                    title="Back to main page",
+                    style="margin: 10px;",
+                ),
+                style="margin: 10px;",
+            ),
+            H2("Queries"),
+            # Table of all queries
+            Table(
+                Thead(
+                    Tr(
+                        Th("Query"),
+                        Th("Session ID"),
+                        Th("Datetime"),
+                    )
+                ),
+                Tbody(
+                    *[
+                        Tr(
+                            Td(query.query),
+                            Td(query.sess_id),
+                            Td(query.get_datetime()),
+                        )
+                        for query in queries
+                    ],
+                ),
+                cls="striped",
+            ),
+            total_pages_indicator,  # Include the total pages indicator here
+            pagination_controls,
+            Div(
+                A(
+                    I(cls="fa fa-download fa-2x"),
+                    " Download CSV",
+                    href="/download_csv",
+                    style="margin: 10px; float: right;",
+                    title="Download queries as CSV",
+                ),
+                style="text-align: right; margin: 20px;",
+            ),
+            style="width: 80%; margin: 40px auto;",
+        ),
+    )
+
+
+@app.get("/source")
+def get_source(auth, sess):
+    with open("main.py") as f:
+        source = f.read()
+    # Back icon to go back to main page in top left corner
+    return (
+        Title("Source code"),
+        get_navbar(auth),
+        Main(
+            Div(
+                A(
+                    I(cls="fa fa-arrow-left"),
+                    "Back",
+                    href="/",
+                    title="Back to main page",
+                    style="margin: 10px;",
+                ),
+                Div(
+                    f"""### main.py - This is the whole source code for this app (!)\n```python\n{source}\n```""",
+                    cls="marked",
+                    style="margin: 10px;",
+                ),
+                style="width: 80%; margin: 40px auto;",
+            ),
+        ),
+    )
+
+
+@app.get("/about")
+def get_about(auth, sess):
+    return (
+        Title("About this app"),
+        get_navbar(auth),
+        Main(
+            Div(
+                A(
+                    I(cls="fa fa-arrow-left"),
+                    "Back",
+                    href="/",
+                    title="Back to main page",
+                    style="margin: 10px;",
+                ),
+                Div(
+                    """# About this app \n We wanted to see if we could build a simple search interface using Vespa and fastHTML. This is the result!""",
+                    cls="marked",
+                    style="margin: 10px;",
+                ),
+                style="width: 80%; margin: 40px auto;",
+            ),
+        ),
+    )
+
+
+@app.get("/document/{docid}")
+def get_document(docid: str, sess):
+    resp = vespa_app.get_data(data_id=docid, schema="doc", namespace="tutorial")
+    doc = resp.json
+    # Link with Back to search results at top of page
+    return Main(
+        Div(
+            A(
+                I(cls="fa fa-arrow-left"),
+                "Back to search results",
+                hx_get=f"/search?userquery={sess['queries'][-1]}",
+                hx_target="#results",
+                style="margin: 10px;",
+            ),
+            H2(doc["fields"]["title"], style="margin: 10px;"),
+            P(doc["fields"]["body"], cls="marked"),
+        ),
+    )
+
+
+if not DEV_MODE:
+    try:
+        setup_hf_backup(app)
+    except Exception as e:
+        print(f"Error setting up hf backup: {e}")
+serve()

requirements.txt

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