diff --git a/.github/workflows/link-checker.yml b/.github/workflows/link-checker.yml index 592654a57..2a20bd265 100644 --- a/.github/workflows/link-checker.yml +++ b/.github/workflows/link-checker.yml @@ -30,6 +30,7 @@ jobs: ignore-urls: |- src/main/application/schemas/wiki.sd#L80 /localhost:8080/ + /localhost:5001/ src/main/application/search/query-profiles /hub.docker.com/r/vespaengine/vespa/tags/ swap-urls: |- diff --git a/examples/fasthtml-demo/.env.example b/examples/fasthtml-demo/.env.example new file mode 100644 index 000000000..abd31e9e0 --- /dev/null +++ b/examples/fasthtml-demo/.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 \ No newline at end of file diff --git a/examples/fasthtml-demo/.gitignore b/examples/fasthtml-demo/.gitignore new file mode 100644 index 000000000..90cb85950 --- /dev/null +++ b/examples/fasthtml-demo/.gitignore @@ -0,0 +1,15 @@ +ft/ +db/ +session/ +todo/ +fasthtml/ +.venv/ +__pycache__/ +.python-version +# Python stuff +*.pyc +*.pyo + + +.env +.sesskey \ No newline at end of file diff --git a/examples/fasthtml-demo/Dockerfile b/examples/fasthtml-demo/Dockerfile new file mode 100644 index 000000000..9a70b71ee --- /dev/null +++ b/examples/fasthtml-demo/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"] diff --git a/examples/fasthtml-demo/Dockerfile.nonhf b/examples/fasthtml-demo/Dockerfile.nonhf new file mode 100644 index 000000000..2c41796e2 --- /dev/null +++ b/examples/fasthtml-demo/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"] \ No newline at end of file diff --git a/examples/fasthtml-demo/README.md b/examples/fasthtml-demo/README.md new file mode 100644 index 000000000..eafada2c1 --- /dev/null +++ b/examples/fasthtml-demo/README.md @@ -0,0 +1,141 @@ +--- +title: vespa-engine/fasthtml-vespa +emoji: 🚀 +colorFrom: purple +colorTo: red +sdk: docker +app_file: main.py +pinned: false +termination_grace_period: 2m +--- + + + + + + #Vespa + + + +# 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. 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. + +### How to use + +#### 1. Clone this folder to your local machine 📂 + +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-demo && mkdir -p ../fasthtml-demo && mv fasthtml-demo/* ../fasthtml-demp/ && 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 [--private true]` to deploy the app to Huggingface Spaces. +4. Remember to add `VESPA_APP_URL` and `VESPA_CLOUD_SECRET_TOKEN` to the environment variables in the [Huggingface Spaces settings.](https://huggingface.co/docs/hub/en/spaces-overview#managing-secrets) + +### Go build some cool Vespa apps! 🚀 \ No newline at end of file diff --git a/examples/fasthtml-demo/assets/admin-login.png b/examples/fasthtml-demo/assets/admin-login.png new file mode 100644 index 000000000..176200e4e Binary files /dev/null and b/examples/fasthtml-demo/assets/admin-login.png differ diff --git a/examples/fasthtml-demo/assets/query-log.png b/examples/fasthtml-demo/assets/query-log.png new file mode 100644 index 000000000..6147ce66b Binary files /dev/null and b/examples/fasthtml-demo/assets/query-log.png differ diff --git a/examples/fasthtml-demo/assets/search-page.png b/examples/fasthtml-demo/assets/search-page.png new file mode 100644 index 000000000..a2b123a90 Binary files /dev/null and b/examples/fasthtml-demo/assets/search-page.png differ diff --git a/examples/fasthtml-demo/config.ini b/examples/fasthtml-demo/config.ini new file mode 100644 index 000000000..76c049bda --- /dev/null +++ b/examples/fasthtml-demo/config.ini @@ -0,0 +1,5 @@ +[DEFAULT] +dataset_id = space-backup +db_dir = data +private_backup = True +interval = 5 diff --git a/examples/fasthtml-demo/deploy_app.ipynb b/examples/fasthtml-demo/deploy_app.ipynb new file mode 100644 index 000000000..b9fa5b31a --- /dev/null +++ b/examples/fasthtml-demo/deploy_app.ipynb @@ -0,0 +1,621 @@ +{ + "cells": [ + { + "cell_type": "markdown", + "id": "given-adoption", + "metadata": { + "pycharm": { + "name": "#%% md\n" + } + }, + "source": [ + "\n", + " \n", + " \n", + " \"#Vespa\"\n", + "\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": [ + "
\n", + " Refer to troubleshooting\n", + " for any problem when running this guide.\n", + "
\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(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(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(x[384])\")],\n", + " first_phase=\"closeness(field, embedding)\",\n", + " ),\n", + " RankProfile(\n", + " name=\"fusion\",\n", + " inherits=\"bm25\",\n", + " inputs=[(\"query(q)\", \"tensor(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\"], # Token client only needs read permission\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 and asthma prevalence has increased, although it remains unclear if these events are associated. OBJECTIVE: To examine children's total and component diet quality and asthma and airway hyperresponsiveness (AHR), a proxy for asthma severity. METHODS: Food frequency questionnaires adapted from the Nurses' Health Study and supplemented with foods whose nutrients which have garnered interest of late in relation to asthma were administered. From these data, diet quality scores (total and component), based on the Youth Healthy Eating Index (YHEI adapted) were developed. Asthma assessments were performed by pediatric allergists and classified by atopic status: Allergic asthma (≥1 positive skin prick test to common allergens >3 mm compared to negative control) versus non-allergic asthma (negative skin prick test). AHR was assessed via the Cockcroft technique. Participants included 270 boys (30% with asthma) and 206 girls (33% with asthma) involved in the 1995 Manitoba Prospective Cohort Study nested case-control study. Logistic regression was used to examine associations between diet quality and asthma, and multinomial logistic regression was used to examine associations between diet quality and AHR. RESULTS: Four hundred seventy six children (56.7% boys) were seen at 12.6 ± 0.5 years. Asthma and AHR prevalence were 26.2 and 53.8%, respectively. In fully adjusted models, high vegetable intake was protective against allergic asthma (OR 0.49; 95% CI 0.29-0.84; P < 0.009) and moderate/severe AHR (OR 0.58; 0.37-0.91; P < 0.019). CONCLUSIONS: Vegetable intake is inversely associated with allergic asthma and 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 and rhinitis are rare. A study was undertaken to examine whether this discrepancy could be attributed to a high consumption of fresh fruit and vegetables 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 and allergic symptoms and 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 (and 68% vegetables) at least twice a day. The intake of grapes, oranges, apples, and fresh tomatoes—the main local products in Crete—had no association with atopy but was protective for wheezing and 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) and 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 and atopy. Conclusion The results of this study suggest a beneficial effect of commonly consumed fruits, vegetables and nuts, and of a high adherence to a traditional Mediterranean diet during childhood on symptoms of asthma and 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 asthma prevalence in epidemiologic studies. We previously showed that short-term manipulation of antioxidant defenses leads to changes in asthma 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 asthma. DESIGN: Asthmatic adults (n = 137) were randomly assigned to a high-antioxidant diet (5 servings of vegetables and 2 servings of fruit daily; n = 46) or a low-antioxidant diet (≤2 servings of vegetables and 1 serving of fruit daily; n = 91) for 14 d and 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 and 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, and 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 and those who consumed placebo. CONCLUSIONS: Modifying the dietary intake of carotenoids alters clinical asthma outcomes. Improvements were evident only after increased fruit and vegetable 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 and asthma in schoolchildren in Taipei, Taiwan. An in-class interview survey elicited experiences of asthma and respiratory symptoms and 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, and exercise-induced cough or wheezing. Results showed that the consumption of sweetened beverages had the strongest association with respiratory symptoms and 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, and fruits were each negatively associated with one of the seven respiratory symptoms (all p < 0.05). Consumption of seafood was negatively associated with physician-diagnosed asthma and consumptions of sweetened beverages and eggs were positively associated with suspected asthma (p < 0.05). In conclusion, the study suggests that diet is associated with the respiratory symptoms in schoolchildren in Taipei. Consumptions of sweetened beverages and eggs are associated with increased risk of respiratory symptoms and asthma whereas consumptions of soy products and fruits 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 asthma prevalence. However, direct evidence that altering intake of antioxidant-rich foods affects asthma is lacking. The objective was to investigate changes in asthma and airway inflammation resulting from a low antioxidant diet and subsequent use of lycopene-rich treatments. Asthmatic 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) and tomato juice (45 mg lycopene/day)). With consumption of a low antioxidant diet, plasma carotenoid concentrations decreased, Asthma Control Score worsened, %FEV(1) and %FVC decreased and %sputum neutrophils increased. Treatment with both tomato juice and extract reduced airway neutrophil influx. Treatment with tomato extract also reduced sputum neutrophil elastase activity. In conclusion, dietary antioxidant consumption modifies clinical asthma outcomes. Changing dietary antioxidant intake may be contributing to rising asthma 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 +} diff --git a/examples/fasthtml-demo/deploy_hf.py b/examples/fasthtml-demo/deploy_hf.py new file mode 100644 index 000000000..4c0f7523d --- /dev/null +++ b/examples/fasthtml-demo/deploy_hf.py @@ -0,0 +1,93 @@ +import datetime +from huggingface_hub import create_repo, upload_folder, add_space_secret, whoami +from fastcore.utils import * +from fastcore.script import * + + +def _mk_docker(python_ver): + fn = Path("Dockerfile") + if fn.exists(): + return + packages = Path("packages.txt") + pkg_line = "" + reqs = Path("requirements.txt") + if not reqs.exists(): + reqs.write_text("python-fasthtml\nfasthtml-hf\n") + req_line = "RUN pip install --no-cache-dir -r requirements.txt" + if packages.exists(): + pkglist = " ".join(packages.readlines()) + pkg_line = f"RUN apt-get update -y && apt-get install -y {pkglist}" + + cts = f"""FROM python:{python_ver} +WORKDIR /code +COPY --link --chown=1000 . . +RUN mkdir -p /tmp/cache/ +RUN chmod a+rwx -R /tmp/cache/ +ENV HF_HUB_CACHE=HF_HOME +{req_line} +{pkg_line} +ENV PYTHONUNBUFFERED=1 PORT=7860 +CMD ["python", "main.py"] +""" + fn.write_text(cts) + + +def _mk_README(space_id, termination_grace_period): + fn = Path("README.md") + if fn.exists(): + return + cts = f"""--- +title: {space_id} +emoji: 🚀 +colorFrom: purple +colorTo: red +sdk: docker +app_file: app.py +pinned: false +termination_grace_period: {termination_grace_period} +--- +""" + fn.write_text(cts) + + +@call_parse +def deploy( + space_id: str, # ID of the space to upload to + token: str = None, # Hugging Face token for authentication + python_ver: str = "3.10", # Version of python to use + upload: bool_arg = True, # Set to `false` to skip uploading files + private: bool_arg = False, + termination_grace_period: str = "2m", +): # Make the repository private + "Upload current directory to Hugging Face Spaces" + if not token: + token = os.getenv("HF_TOKEN") + if not token: + return print("No token available") + if "/" not in space_id: + space_id = f"{whoami(token)['name']}/{space_id}" + # _mk_docker(python_ver) + # _mk_README(space_id, termination_grace_period) + private = bool( + private + ) # `private` can be 0,1 or False. As `create_repo` expects private to be True/False we cast it. + url = create_repo( + space_id, + token=token, + repo_type="space", + space_sdk="docker", + private=private, + exist_ok=True, + ) + if not upload: + return print("Repo created; upload skipped") + upload_folder( + folder_path=Path("."), + repo_id=space_id, + repo_type="space", + ignore_patterns=["__pycache__/*", ".sesskey", "deploy_hf.py", "data/*"], + commit_message=f"deploy at {datetime.datetime.now()}", + token=token, + ) + add_space_secret(space_id, token=token, key="HF_TOKEN", value=token) + print(f"Deployed space at {url}") diff --git a/examples/fasthtml-demo/main.py b/examples/fasthtml-demo/main.py new file mode 100644 index 000000000..f1c52c3e5 --- /dev/null +++ b/examples/fasthtml-demo/main.py @@ -0,0 +1,829 @@ +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, + H3, + Style, +) +from fasthtml.components import Nav, Article, Header, Mark +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 +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 +from enum import Enum +from typing import Tuple as T +from urllib.parse import quote + +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() +else: + print("DEV_MODE disabled - environment variables loaded from system") + +vespa_app_url = os.getenv("VESPA_APP_URL", None) +if vespa_app_url is None: + print("Please set the VESPA_APP_URL environment variable") + exit(1) + +ADMIN_NAME = os.getenv("ADMIN_NAME", "admin") +ADMIN_PWD = os.getenv("ADMIN_PWD", "admin") + +vespa_app: Vespa = Vespa( + url=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, 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() + +# 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 + + +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, +) + +# Read file contents once before starting the server +with open("README.md") as f: + README = f.read() +with open("main.py") as f: + SOURCE = f.read() + +# 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", + "/about", + ], +) + +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}") + + +# 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( + 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/vespa-engine/sample-apps/tree/master/examples/fasthtml-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 + + +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", + ] + 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", + # 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", + hx_on_click=f"document.getElementById('userquery').value='{query}'", + 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", + # list="search-options", + # placeholder="Search options", + # ), + # Datalist( + # *[ + # Option( + # "Covid-19", + # value="Covid-19", + # ), + # Option( + # "Vaccine", + # value="Vaccine", + # ), + # ], + # id="search-options", + # ), + # id="suggestions", + # ), + # Display spinner div only if it #spinner does not exist + Section( + spinner_div(), + 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"(|)", text) + elements = [] + open_tag = False + for part in parts: + if part == "": + open_tag = True + elif part == "": + open_tag = False + elif open_tag: + elements.append(Mark(part)) + else: + elements.append(part) + return elements + + +def log_query_to_db(query, ranking, sess): + return queries.insert( + Query(query=query, ranking=ranking, 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, + ), + ) + + +# 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, ranking: str, sess): + print(sess) + if "queries" not in sess: + sess["queries"] = [] + quoted = quote(userquery) + "&ranking=" + ranking + sess["queries"].append(quoted) + print(f"Searching for: {userquery}") + 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=yql, + query=userquery, + hits=10, + ranking=str(ranking), + body=body, + ) + 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( + spinner_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): + # 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`\n### This is the complete 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): + # Strip everything before the FIRST # in the README + stripped_readme = re.sub( + r"^.*?(?=# FastHTML Vespa frontend)", "", README, flags=re.DOTALL + ) + + 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( + stripped_readme, + 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() diff --git a/examples/fasthtml-demo/requirements.in b/examples/fasthtml-demo/requirements.in new file mode 100644 index 000000000..22ba25d17 --- /dev/null +++ b/examples/fasthtml-demo/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 diff --git a/examples/fasthtml-demo/requirements.txt b/examples/fasthtml-demo/requirements.txt new file mode 100644 index 000000000..9d9bc333a --- /dev/null +++ b/examples/fasthtml-demo/requirements.txt @@ -0,0 +1,164 @@ +# 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