Upload folder using huggingface_hub

.env.example

@@ -0,0 +1,3 @@
+VESPA_APP_URL=https://abcde.z.vespa-app.cloud
+HF_TOKEN=hf_xxxxxxxxxx
+VESPA_CLOUD_SECRET_TOKEN=vespa_cloud_xxxxxxxx

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+tailwindcss filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,8 @@
+.sesskey
+.venv/
+__pycache__/
+.python-version
+.env
+template/
+*.json
+output/

README.md

@@ -1,14 +1,109 @@
 ---
-title: Colpali Vespa Visual Retrieval
-emoji: 👁
-colorFrom: red
-colorTo: red
+title: ColPali 🤝 Vespa - Visual Retrieval
+short_description: Visual Retrieval with ColPali and Vespa
+emoji: 👀
+colorFrom: purple
+colorTo: blue
 sdk: gradio
-sdk_version: 4.44.1
-app_file: app.py
+sdk_version: 4.44.0
+app_file: main.py
 pinned: false
 license: apache-2.0
-short_description: ColPali 🤝 Vespa - Visual Retrieval
+models:
+  - vidore/colpaligemma-3b-pt-448-base
+  - vidore/colpali-v1.2
+preload_from_hub:
+  - vidore/colpaligemma-3b-pt-448-base config.json,model-00001-of-00002.safetensors,model-00002-of-00002.safetensors,model.safetensors.index.json,preprocessor_config.json,special_tokens_map.json,tokenizer.json,tokenizer_config.json 12c59eb7e23bc4c26876f7be7c17760d5d3a1ffa
+  - vidore/colpali-v1.2 adapter_config.json,adapter_model.safetensors,preprocessor_config.json,special_tokens_map.json,tokenizer.json,tokenizer_config.json 9912ce6f8a462d8cf2269f5606eabbd2784e764f
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+<!-- Copyright Vespa.ai. Licensed under the terms of the Apache 2.0 license. See LICENSE in the project root. -->
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://assets.vespa.ai/logos/Vespa-logo-green-RGB.svg">
+  <source media="(prefers-color-scheme: light)" srcset="https://assets.vespa.ai/logos/Vespa-logo-dark-RGB.svg">
+  <img alt="#Vespa" width="200" src="https://assets.vespa.ai/logos/Vespa-logo-dark-RGB.svg" style="margin-bottom: 25px;">
+</picture>
+
+# Visual Retrieval ColPali
+
+
+# Developing
+
+First, install `uv`:
+  
+```bash
+curl -LsSf https://astral.sh/uv/install.sh | sh
+```
+
+Then, in this directory, run:
+
+```bash
+uv sync --extra dev
+```
+
+This will generate a virtual environment with the required dependencies at `.venv`.
+
+To activate the virtual environment, run:
+
+```bash
+source .venv/bin/activate
+```
+
+And run development server:
+
+```bash
+python hello.py
+```
+
+## Preparation
+
+First, set up your `.env` file by renaming `.env.example` to `.env` and filling in the required values.
+(Token can be shared with 1password, `HF_TOKEN` is personal and must be created at huggingface)
+If you are just connecting to a deployed Vespa app, you can skip to [Connecting to the Vespa app](#connecting-to-the-vespa-app-and-querying).
+
+### Deploying the Vespa app
+
+To deploy the Vespa app, run:
+
+```bash
+python deploy_vespa_app.py --tenant_name mytenant --vespa_application_name myapp --token_id_write mytokenid_write --token_id_read mytokenid_read
+```
+
+You should get an output like:
+
+```bash
+Found token endpoint: https://abcde.z.vespa-app.cloud
+````
+
+### Feeding the data
+
+#### Dependencies
+
+In addition to the python dependencies, you also need `poppler`
+On Mac:
+
+```bash
+brew install poppler
+```
+
+First, you need to create a huggingface token, after you have accepted the term to use the model at https://huggingface.co/google/paligemma-3b-mix-448.
+Add the token to your environment variables as `HF_TOKEN`:
+
+```bash
+export HF_TOKEN=yourtoken
+```
+
+To feed the data, run:
+
+```bash
+python feed_vespa.py --vespa_app_url https://myapp.z.vespa-app.cloud --vespa_cloud_secret_token mysecrettoken
+```
+
+### Connecting to the Vespa app and querying
+
+As a first step, until we hook up to frontend, you can run the `query_vespa.py` script to run some sample queries against the Vespa app:
+
+```bash
+python query_vespa.py
+```

backend/colpali.py

@@ -0,0 +1,521 @@
+#!/usr/bin/env python3
+
+import torch
+from PIL import Image
+import numpy as np
+from typing import cast
+import pprint
+from pathlib import Path
+import base64
+from io import BytesIO
+from typing import Union, Tuple
+import matplotlib
+import re
+
+from colpali_engine.models import ColPali, ColPaliProcessor
+from colpali_engine.utils.torch_utils import get_torch_device
+from einops import rearrange
+from vidore_benchmark.interpretability.plot_utils import plot_similarity_heatmap
+from vidore_benchmark.interpretability.torch_utils import (
+    normalize_similarity_map_per_query_token,
+)
+from vidore_benchmark.interpretability.vit_configs import VIT_CONFIG
+from vidore_benchmark.utils.image_utils import scale_image
+from vespa.application import Vespa
+from vespa.io import VespaQueryResponse
+
+matplotlib.use("Agg")
+
+MAX_QUERY_TERMS = 64
+OUTPUT_DIR = Path(__file__).parent.parent / "output" / "sim_maps"
+OUTPUT_DIR.mkdir(exist_ok=True)
+
+COLPALI_GEMMA_MODEL_ID = "vidore--colpaligemma-3b-pt-448-base"
+COLPALI_GEMMA_MODEL_SNAPSHOT = "12c59eb7e23bc4c26876f7be7c17760d5d3a1ffa"
+COLPALI_GEMMA_MODEL_PATH = (
+    Path().home()
+    / f".cache/huggingface/hub/models--{COLPALI_GEMMA_MODEL_ID}/snapshots/{COLPALI_GEMMA_MODEL_SNAPSHOT}"
+)
+COLPALI_MODEL_ID = "vidore--colpali-v1.2"
+COLPALI_MODEL_SNAPSHOT = "9912ce6f8a462d8cf2269f5606eabbd2784e764f"
+COLPALI_MODEL_PATH = (
+    Path().home()
+    / f".cache/huggingface/hub/models--{COLPALI_MODEL_ID}/snapshots/{COLPALI_MODEL_SNAPSHOT}"
+)
+COLPALI_GEMMA_MODEL_NAME = COLPALI_GEMMA_MODEL_ID.replace("--", "/")
+
+
+def load_model() -> Tuple[ColPali, ColPaliProcessor]:
+    model_name = "vidore/colpali-v1.2"
+
+    device = get_torch_device("auto")
+    print(f"Using device: {device}")
+
+    # Load the model
+    model = cast(
+        ColPali,
+        ColPali.from_pretrained(
+            model_name,
+            torch_dtype=torch.bfloat16 if torch.cuda.is_available() else torch.float32,
+            device_map=device,
+        ),
+    ).eval()
+
+    # Load the processor
+    processor = cast(ColPaliProcessor, ColPaliProcessor.from_pretrained(model_name))
+    return model, processor
+
+
+def load_vit_config(model):
+    # Load the ViT config
+    print(f"VIT config: {VIT_CONFIG}")
+    vit_config = VIT_CONFIG[COLPALI_GEMMA_MODEL_NAME]
+    return vit_config
+
+
+# Create dummy image
+dummy_image = Image.new("RGB", (448, 448), (255, 255, 255))
+
+
+def gen_similarity_map(
+    model, processor, device, vit_config, query, image: Union[Path, str]
+):
+    # Should take in the b64 image from Vespa query result
+    # And possibly the tensor representing the output_image
+    if isinstance(image, Path):
+        # image is a file path
+        try:
+            image = Image.open(image)
+        except Exception as e:
+            raise ValueError(f"Failed to open image from path: {e}")
+    elif isinstance(image, str):
+        # image is b64 string
+        try:
+            image = Image.open(BytesIO(base64.b64decode(image)))
+        except Exception as e:
+            raise ValueError(f"Failed to open image from b64: {e}")
+
+    # Preview the image
+    scale_image(image, 512)
+    # Preprocess inputs
+    input_text_processed = processor.process_queries([query]).to(device)
+    input_image_processed = processor.process_images([image]).to(device)
+    # Forward passes
+    with torch.no_grad():
+        output_text = model.forward(**input_text_processed)
+        output_image = model.forward(**input_image_processed)
+    # output_image is the tensor that we could get from the Vespa query
+    # Print shape of output_text and output_image
+    # Output image shape: torch.Size([1, 1030, 128])
+    # Remove the special tokens from the output
+    output_image = output_image[
+        :, : processor.image_seq_length, :
+    ]  # (1, n_patches_x * n_patches_y, dim)
+
+    # Rearrange the output image tensor to explicitly represent the 2D grid of patches
+    output_image = rearrange(
+        output_image,
+        "b (h w) c -> b h w c",
+        h=vit_config.n_patch_per_dim,
+        w=vit_config.n_patch_per_dim,
+    )  # (1, n_patches_x, n_patches_y, dim)
+    # Get the similarity map
+    similarity_map = torch.einsum(
+        "bnk,bijk->bnij", output_text, output_image
+    )  # (1, query_tokens, n_patches_x, n_patches_y)
+
+    # Normalize the similarity map
+    similarity_map_normalized = normalize_similarity_map_per_query_token(
+        similarity_map
+    )  # (1, query_tokens, n_patches_x, n_patches_y)
+    # Use this cell output to choose a token using its index
+    query_tokens = processor.tokenizer.tokenize(
+        processor.decode(input_text_processed.input_ids[0])
+    )
+    # Choose a token
+    token_idx = (
+        10  # e.g. if "12: '▁Kazakhstan',", set 12 to choose the token 'Kazakhstan'
+    )
+    selected_token = processor.decode(input_text_processed.input_ids[0, token_idx])
+    # strip whitespace
+    selected_token = selected_token.strip()
+    print(f"Selected token: `{selected_token}`")
+    # Retrieve the similarity map for the chosen token
+    pprint.pprint({idx: val for idx, val in enumerate(query_tokens)})
+    # Resize the image to square
+    input_image_square = image.resize((vit_config.resolution, vit_config.resolution))
+
+    # Plot the similarity map
+    fig, ax = plot_similarity_heatmap(
+        input_image_square,
+        patch_size=vit_config.patch_size,
+        image_resolution=vit_config.resolution,
+        similarity_map=similarity_map_normalized[0, token_idx, :, :],
+    )
+    ax = annotate_plot(ax, selected_token)
+    return fig, ax
+
+
+def save_figure(fig, filename: str = "similarity_map.png"):
+    fig.savefig(
+        OUTPUT_DIR / filename,
+        bbox_inches="tight",
+        pad_inches=0,
+    )
+
+
+def annotate_plot(ax, query, selected_token):
+    # Add the query text
+    ax.set_title(query, fontsize=18)
+    # Add annotation with selected token
+    ax.annotate(
+        f"Selected token:`{selected_token}`",
+        xy=(0.5, 0.95),
+        xycoords="axes fraction",
+        ha="center",
+        va="center",
+        fontsize=18,
+        color="black",
+        bbox=dict(boxstyle="round,pad=0.3", fc="white", ec="black", lw=1),
+    )
+    return ax
+
+
+def gen_similarity_map_new(
+    processor: ColPaliProcessor,
+    model: ColPali,
+    device,
+    vit_config,
+    query: str,
+    query_embs: torch.Tensor,
+    token_idx_map: dict,
+    token_to_show: str,
+    image: Union[Path, str],
+):
+    if isinstance(image, Path):
+        # image is a file path
+        try:
+            image = Image.open(image)
+        except Exception as e:
+            raise ValueError(f"Failed to open image from path: {e}")
+    elif isinstance(image, str):
+        # image is b64 string
+        try:
+            image = Image.open(BytesIO(base64.b64decode(image)))
+        except Exception as e:
+            raise ValueError(f"Failed to open image from b64: {e}")
+    token_idx = token_idx_map[token_to_show]
+    print(f"Selected token: `{token_to_show}`")
+    # strip whitespace
+    # Preview the image
+    # scale_image(image, 512)
+    # Preprocess inputs
+    input_image_processed = processor.process_images([image]).to(device)
+    # Forward passes
+    with torch.no_grad():
+        output_image = model.forward(**input_image_processed)
+    # output_image is the tensor that we could get from the Vespa query
+    # Print shape of output_text and output_image
+    # Output image shape: torch.Size([1, 1030, 128])
+    # Remove the special tokens from the output
+    print(f"Output image shape before dim: {output_image.shape}")
+    output_image = output_image[
+        :, : processor.image_seq_length, :
+    ]  # (1, n_patches_x * n_patches_y, dim)
+    print(f"Output image shape after dim: {output_image.shape}")
+    # Rearrange the output image tensor to explicitly represent the 2D grid of patches
+    output_image = rearrange(
+        output_image,
+        "b (h w) c -> b h w c",
+        h=vit_config.n_patch_per_dim,
+        w=vit_config.n_patch_per_dim,
+    )  # (1, n_patches_x, n_patches_y, dim)
+    # Get the similarity map
+    print(f"Query embs shape: {query_embs.shape}")
+    # Add 1 extra dim to start of query_embs
+    query_embs = query_embs.unsqueeze(0).to(device)
+    print(f"Output image shape: {output_image.shape}")
+    similarity_map = torch.einsum(
+        "bnk,bijk->bnij", query_embs, output_image
+    )  # (1, query_tokens, n_patches_x, n_patches_y)
+    print(f"Similarity map shape: {similarity_map.shape}")
+    # Normalize the similarity map
+    similarity_map_normalized = normalize_similarity_map_per_query_token(
+        similarity_map
+    )  # (1, query_tokens, n_patches_x, n_patches_y)
+    print(f"Similarity map normalized shape: {similarity_map_normalized.shape}")
+    # Use this cell output to choose a token using its index
+    input_image_square = image.resize((vit_config.resolution, vit_config.resolution))
+
+    # Plot the similarity map
+    fig, ax = plot_similarity_heatmap(
+        input_image_square,
+        patch_size=vit_config.patch_size,
+        image_resolution=vit_config.resolution,
+        similarity_map=similarity_map_normalized[0, token_idx, :, :],
+    )
+    ax = annotate_plot(ax, query, token_to_show)
+    # save the figure
+    save_figure(fig, f"similarity_map_{token_to_show}.png")
+    return fig, ax
+
+
+def get_query_embeddings_and_token_map(
+    processor, model, query, image
+) -> Tuple[torch.Tensor, dict]:
+    inputs = processor.process_queries([query]).to(model.device)
+    with torch.no_grad():
+        embeddings_query = model(**inputs)
+        q_emb = embeddings_query.to("cpu")[0]  # Extract the single embedding
+    # Use this cell output to choose a token using its index
+    query_tokens = processor.tokenizer.tokenize(processor.decode(inputs.input_ids[0]))
+    # reverse key, values in dictionary
+    print(query_tokens)
+    token_to_idx = {val: idx for idx, val in enumerate(query_tokens)}
+    return q_emb, token_to_idx
+
+
+def format_query_results(query, response, hits=5) -> dict:
+    query_time = response.json.get("timing", {}).get("searchtime", -1)
+    query_time = round(query_time, 2)
+    count = response.json.get("root", {}).get("fields", {}).get("totalCount", 0)
+    result_text = f"Query text: '{query}', query time {query_time}s, count={count}, top results:\n"
+    print(result_text)
+    return response.json
+
+
+async def query_vespa_default(
+    app: Vespa,
+    query: str,
+    q_emb: torch.Tensor,
+    hits: int = 3,
+    timeout: str = "10s",
+    **kwargs,
+) -> dict:
+    async with app.asyncio(connections=1, total_timeout=120) as session:
+        query_embedding = format_q_embs(q_emb)
+        response: VespaQueryResponse = await session.query(
+            body={
+                "yql": "select id,title,url,image,page_number,text from pdf_page where userQuery();",
+                "ranking": "default",
+                "query": query,
+                "timeout": timeout,
+                "hits": hits,
+                "input.query(qt)": query_embedding,
+                "presentation.timing": True,
+                **kwargs,
+            },
+        )
+        assert response.is_successful(), response.json
+    return format_query_results(query, response)
+
+
+def float_to_binary_embedding(float_query_embedding: dict) -> dict:
+    binary_query_embeddings = {}
+    for k, v in float_query_embedding.items():
+        binary_vector = (
+            np.packbits(np.where(np.array(v) > 0, 1, 0)).astype(np.int8).tolist()
+        )
+        binary_query_embeddings[k] = binary_vector
+        if len(binary_query_embeddings) >= MAX_QUERY_TERMS:
+            print(f"Warning: Query has more than {MAX_QUERY_TERMS} terms. Truncating.")
+            break
+    return binary_query_embeddings
+
+
+def create_nn_query_strings(
+    binary_query_embeddings: dict, target_hits_per_query_tensor: int = 20
+) -> Tuple[str, dict]:
+    # Query tensors for nearest neighbor calculations
+    nn_query_dict = {}
+    for i in range(len(binary_query_embeddings)):
+        nn_query_dict[f"input.query(rq{i})"] = binary_query_embeddings[i]
+    nn = " OR ".join(
+        [
+            f"({{targetHits:{target_hits_per_query_tensor}}}nearestNeighbor(embedding,rq{i}))"
+            for i in range(len(binary_query_embeddings))
+        ]
+    )
+    return nn, nn_query_dict
+
+
+def format_q_embs(q_embs: torch.Tensor) -> dict:
+    float_query_embedding = {k: v.tolist() for k, v in enumerate(q_embs)}
+    return float_query_embedding
+
+
+async def query_vespa_nearest_neighbor(
+    app: Vespa,
+    query: str,
+    q_emb: torch.Tensor,
+    target_hits_per_query_tensor: int = 20,
+    hits: int = 3,
+    timeout: str = "10s",
+    **kwargs,
+) -> dict:
+    # Hyperparameter for speed vs. accuracy
+    async with app.asyncio(connections=1, total_timeout=180) as session:
+        float_query_embedding = format_q_embs(q_emb)
+        binary_query_embeddings = float_to_binary_embedding(float_query_embedding)
+
+        # Mixed tensors for MaxSim calculations
+        query_tensors = {
+            "input.query(qtb)": binary_query_embeddings,
+            "input.query(qt)": float_query_embedding,
+        }
+        nn_string, nn_query_dict = create_nn_query_strings(
+            binary_query_embeddings, target_hits_per_query_tensor
+        )
+        query_tensors.update(nn_query_dict)
+        response: VespaQueryResponse = await session.query(
+            body={
+                **query_tensors,
+                "presentation.timing": True,
+                "yql": f"select id,title,text,url,image,page_number from pdf_page where {nn_string}",
+                "ranking.profile": "retrieval-and-rerank",
+                "timeout": timeout,
+                "hits": hits,
+                **kwargs,
+            },
+        )
+        assert response.is_successful(), response.json
+    return format_query_results(query, response)
+
+
+def is_special_token(token: str) -> bool:
+    # Pattern for tokens that start with '<', numbers, whitespace, or single characters
+    pattern = re.compile(r"^<.*$|^\d+$|^\s+$|^.$")
+    if pattern.match(token):
+        return True
+    return False
+
+
+async def get_result_from_query(
+    app: Vespa,
+    processor: ColPaliProcessor,
+    model: ColPali,
+    query: str,
+    nn=False,
+    gen_sim_map=False,
+):
+    # Get the query embeddings and token map
+    print(query)
+    q_embs, token_to_idx = get_query_embeddings_and_token_map(
+        processor, model, query, dummy_image
+    )
+    print(token_to_idx)
+    # Use the token map to choose a token randomly for now
+    # Dynamically select a token containing 'water'
+
+    if nn:
+        result = await query_vespa_nearest_neighbor(app, query, q_embs)
+    else:
+        result = await query_vespa_default(app, query, q_embs)
+    # Print score, title id and text of the results
+    for idx, child in enumerate(result["root"]["children"]):
+        print(
+            f"Result {idx+1}: {child['relevance']}, {child['fields']['title']}, {child['fields']['id']}"
+        )
+
+    if gen_sim_map:
+        for single_result in result["root"]["children"]:
+            img = single_result["fields"]["image"]
+            for token in token_to_idx:
+                if is_special_token(token):
+                    print(f"Skipping special token: {token}")
+                    continue
+                fig, ax = gen_similarity_map_new(
+                    processor,
+                    model,
+                    model.device,
+                    load_vit_config(model),
+                    query,
+                    q_embs,
+                    token_to_idx,
+                    token,
+                    img,
+                )
+                sim_map = base64.b64encode(fig.canvas.tostring_rgb()).decode("utf-8")
+                single_result["fields"][f"sim_map_{token}"] = sim_map
+    return result
+
+
+def get_result_dummy(query: str, nn: bool = False):
+    result = {}
+    result["timing"] = {}
+    result["timing"]["querytime"] = 0.23700000000000002
+    result["timing"]["summaryfetchtime"] = 0.001
+    result["timing"]["searchtime"] = 0.23900000000000002
+    result["root"] = {}
+    result["root"]["id"] = "toplevel"
+    result["root"]["relevance"] = 1
+    result["root"]["fields"] = {}
+    result["root"]["fields"]["totalCount"] = 59
+    result["root"]["coverage"] = {}
+    result["root"]["coverage"]["coverage"] = 100
+    result["root"]["coverage"]["documents"] = 155
+    result["root"]["coverage"]["full"] = True
+    result["root"]["coverage"]["nodes"] = 1
+    result["root"]["coverage"]["results"] = 1
+    result["root"]["coverage"]["resultsFull"] = 1
+    result["root"]["children"] = []
+    elt0 = {}
+    elt0["id"] = "index:colpalidemo_content/0/424c85e7dece761d226f060f"
+    elt0["relevance"] = 2354.050122871995
+    elt0["source"] = "colpalidemo_content"
+    elt0["fields"] = {}
+    elt0["fields"]["id"] = "a767cb1868be9a776cd56b768347b089"
+    elt0["fields"]["url"] = (
+        "https://static.conocophillips.com/files/resources/conocophillips-2023-sustainability-report.pdf"
+    )
+    elt0["fields"]["title"] = "ConocoPhillips 2023 Sustainability Report"
+    elt0["fields"]["page_number"] = 50
+    elt0["fields"]["image"] = "empty for now - is base64 encoded image"
+    result["root"]["children"].append(elt0)
+    elt1 = {}
+    elt1["id"] = "index:colpalidemo_content/0/b927c4979f0beaf0d7fab8e9"
+    elt1["relevance"] = 2313.7529950886965
+    elt1["source"] = "colpalidemo_content"
+    elt1["fields"] = {}
+    elt1["fields"]["id"] = "9f2fc0aa02c9561adfaa1451c875658f"
+    elt1["fields"]["url"] = (
+        "https://static.conocophillips.com/files/resources/conocophillips-2023-managing-climate-related-risks.pdf"
+    )
+    elt1["fields"]["title"] = "ConocoPhillips Managing Climate Related Risks"
+    elt1["fields"]["page_number"] = 44
+    elt1["fields"]["image"] = "empty for now - is base64 encoded image"
+    result["root"]["children"].append(elt1)
+    elt2 = {}
+    elt2["id"] = "index:colpalidemo_content/0/9632d72238829d6afefba6c9"
+    elt2["relevance"] = 2312.230182081461
+    elt2["source"] = "colpalidemo_content"
+    elt2["fields"] = {}
+    elt2["fields"]["id"] = "d638ded1ddcb446268b289b3f65430fd"
+    elt2["fields"]["url"] = (
+        "https://static.conocophillips.com/files/resources/24-0976-sustainability-highlights_nature.pdf"
+    )
+    elt2["fields"]["title"] = (
+        "ConocoPhillips Sustainability Highlights - Nature (24-0976)"
+    )
+    elt2["fields"]["page_number"] = 0
+    elt2["fields"]["image"] = "empty for now - is base64 encoded image"
+    result["root"]["children"].append(elt2)
+    return result
+
+
+if __name__ == "__main__":
+    model, processor = load_model()
+    vit_config = load_vit_config(model)
+    query = "How many percent of source water is fresh water?"
+    image_filepath = (
+        Path(__file__).parent.parent
+        / "static"
+        / "assets"
+        / "ConocoPhillips Sustainability Highlights - Nature (24-0976).png"
+    )
+    gen_similarity_map(
+        model, processor, model.device, vit_config, query=query, image=image_filepath
+    )
+    result = get_result_dummy("dummy query")
+    print(result)
+    print("Done")

backend/vespa_app.py

@@ -0,0 +1,23 @@
+import os
+from vespa.application import Vespa
+from dotenv import load_dotenv
+
+
+def get_vespa_app():
+    load_dotenv()
+    vespa_app_url = os.environ.get(
+        "VESPA_APP_URL"
+    )  # Ensure this is set to your Vespa app URL
+    vespa_cloud_secret_token = os.environ.get("VESPA_CLOUD_SECRET_TOKEN")
+
+    if not vespa_app_url or not vespa_cloud_secret_token:
+        raise ValueError(
+            "Please set the VESPA_APP_URL and VESPA_CLOUD_SECRET_TOKEN environment variables"
+        )
+    # Instantiate Vespa connection
+    vespa_app = Vespa(
+        url=vespa_app_url, vespa_cloud_secret_token=vespa_cloud_secret_token
+    )
+    vespa_app.wait_for_application_up()
+    print(f"Connected to Vespa at {vespa_app_url}")
+    return vespa_app

colpalidemo/schemas/pdf_page.sd

@@ -0,0 +1,198 @@
+schema pdf_page {
+    document pdf_page {
+        field id type string {
+            indexing: summary | index
+            match {
+                word
+            }
+        }
+        field url type string {
+            indexing: summary | index
+        }
+        field title type string {
+            indexing: summary | index
+            index: enable-bm25
+            match {
+                text
+            }
+        }
+        field page_number type int {
+            indexing: summary | attribute
+        }
+        field image type raw {
+            indexing: summary
+        }
+        field text type string {
+            indexing: summary | index
+            index: enable-bm25
+            match {
+                text
+            }
+        }
+        field embedding type tensor<int8>(patch{}, v[16]) {
+            indexing: attribute | index
+            attribute {
+                distance-metric: hamming
+            }
+            index {
+                hnsw {
+                    max-links-per-node: 32
+                    neighbors-to-explore-at-insert: 400
+                }
+            }
+        }
+    }
+    fieldset default {
+        fields: title, text
+    }
+    rank-profile default {
+        inputs {
+            query(qt) tensor<float>(querytoken{}, v[128])             
+        
+        }
+        function max_sim() {
+            expression {
+                
+                                    sum(
+                                        reduce(
+                                            sum(
+                                                query(qt) * unpack_bits(attribute(embedding)) , v
+                                            ),
+                                            max, patch
+                                        ),
+                                        querytoken
+                                    )
+                                
+            }
+        }
+        function bm25_score() {
+            expression {
+                bm25(title) + bm25(text)
+            }
+        }
+        first-phase {
+            expression {
+                bm25_score
+            }
+        }
+        second-phase {
+            rerank-count: 10
+            expression {
+                max_sim
+            }
+        }
+    }
+    rank-profile retrieval-and-rerank {
+        inputs {
+            query(rq0) tensor<int8>(v[16])             
+            query(rq1) tensor<int8>(v[16])             
+            query(rq2) tensor<int8>(v[16])             
+            query(rq3) tensor<int8>(v[16])             
+            query(rq4) tensor<int8>(v[16])             
+            query(rq5) tensor<int8>(v[16])             
+            query(rq6) tensor<int8>(v[16])             
+            query(rq7) tensor<int8>(v[16])             
+            query(rq8) tensor<int8>(v[16])             
+            query(rq9) tensor<int8>(v[16])             
+            query(rq10) tensor<int8>(v[16])             
+            query(rq11) tensor<int8>(v[16])             
+            query(rq12) tensor<int8>(v[16])             
+            query(rq13) tensor<int8>(v[16])             
+            query(rq14) tensor<int8>(v[16])             
+            query(rq15) tensor<int8>(v[16])             
+            query(rq16) tensor<int8>(v[16])             
+            query(rq17) tensor<int8>(v[16])             
+            query(rq18) tensor<int8>(v[16])             
+            query(rq19) tensor<int8>(v[16])             
+            query(rq20) tensor<int8>(v[16])             
+            query(rq21) tensor<int8>(v[16])             
+            query(rq22) tensor<int8>(v[16])             
+            query(rq23) tensor<int8>(v[16])             
+            query(rq24) tensor<int8>(v[16])             
+            query(rq25) tensor<int8>(v[16])             
+            query(rq26) tensor<int8>(v[16])             
+            query(rq27) tensor<int8>(v[16])             
+            query(rq28) tensor<int8>(v[16])             
+            query(rq29) tensor<int8>(v[16])             
+            query(rq30) tensor<int8>(v[16])             
+            query(rq31) tensor<int8>(v[16])             
+            query(rq32) tensor<int8>(v[16])             
+            query(rq33) tensor<int8>(v[16])             
+            query(rq34) tensor<int8>(v[16])             
+            query(rq35) tensor<int8>(v[16])             
+            query(rq36) tensor<int8>(v[16])             
+            query(rq37) tensor<int8>(v[16])             
+            query(rq38) tensor<int8>(v[16])             
+            query(rq39) tensor<int8>(v[16])             
+            query(rq40) tensor<int8>(v[16])             
+            query(rq41) tensor<int8>(v[16])             
+            query(rq42) tensor<int8>(v[16])             
+            query(rq43) tensor<int8>(v[16])             
+            query(rq44) tensor<int8>(v[16])             
+            query(rq45) tensor<int8>(v[16])             
+            query(rq46) tensor<int8>(v[16])             
+            query(rq47) tensor<int8>(v[16])             
+            query(rq48) tensor<int8>(v[16])             
+            query(rq49) tensor<int8>(v[16])             
+            query(rq50) tensor<int8>(v[16])             
+            query(rq51) tensor<int8>(v[16])             
+            query(rq52) tensor<int8>(v[16])             
+            query(rq53) tensor<int8>(v[16])             
+            query(rq54) tensor<int8>(v[16])             
+            query(rq55) tensor<int8>(v[16])             
+            query(rq56) tensor<int8>(v[16])             
+            query(rq57) tensor<int8>(v[16])             
+            query(rq58) tensor<int8>(v[16])             
+            query(rq59) tensor<int8>(v[16])             
+            query(rq60) tensor<int8>(v[16])             
+            query(rq61) tensor<int8>(v[16])             
+            query(rq62) tensor<int8>(v[16])             
+            query(rq63) tensor<int8>(v[16])             
+            query(qt) tensor<float>(querytoken{}, v[128])             
+            query(qtb) tensor<int8>(querytoken{}, v[16])             
+        
+        }
+        function max_sim() {
+            expression {
+                
+                                    sum(
+                                        reduce(
+                                            sum(
+                                                query(qt) * unpack_bits(attribute(embedding)) , v
+                                            ),
+                                            max, patch
+                                        ),
+                                        querytoken
+                                    )
+                                
+            }
+        }
+        function max_sim_binary() {
+            expression {
+                
+                                    sum(
+                                      reduce(
+                                        1/(1 + sum(
+                                            hamming(query(qtb), attribute(embedding)) ,v)
+                                        ),
+                                        max,
+                                        patch
+                                      ),
+                                      querytoken
+                                    )
+                                
+            }
+        }
+        first-phase {
+            expression {
+                max_sim_binary
+            }
+        }
+        second-phase {
+            rerank-count: 10
+            expression {
+                max_sim
+            }
+        }
+    }
+}

colpalidemo/search/query-profiles/default.xml

@@ -0,0 +1,2 @@
+<query-profile id="default" type="root">
+</query-profile>

colpalidemo/search/query-profiles/types/root.xml

@@ -0,0 +1,2 @@
+<query-profile-type id="root">
+</query-profile-type>

colpalidemo/services.xml

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<services version="1.0">
+    <container id="colpalidemo_container" version="1.0">
+        <search></search>
+        <document-api></document-api>
+        <document-processing></document-processing>
+        <clients>
+            <client id="mtls" permissions="read,write">
+                <certificate file="security/clients.pem"/>
+            </client>
+            <client id="token_write" permissions="read,write">
+                <token id="colpalidemo_write"/>
+            </client>
+            <client id="token_read" permissions="read">
+                <token id="colpalidemo_read"/>
+            </client>
+        </clients>
+    </container>
+    <content id="colpalidemo_content" version="1.0">
+        <redundancy>1</redundancy>
+        <documents>
+            <document type="pdf_page" mode="index"></document>
+        </documents>
+        <nodes>
+            <node distribution-key="0" hostalias="node1"></node>
+        </nodes>
+    </content>
+</services>

deploy_vespa_app.py

@@ -0,0 +1,204 @@
+#!/usr/bin/env python3
+
+import argparse
+from vespa.package import (
+    ApplicationPackage,
+    Field,
+    Schema,
+    Document,
+    HNSW,
+    RankProfile,
+    Function,
+    AuthClient,
+    Parameter,
+    FieldSet,
+    SecondPhaseRanking,
+)
+from vespa.deployment import VespaCloud
+import os
+
+
+def main():
+    parser = argparse.ArgumentParser(description="Deploy Vespa application")
+    parser.add_argument("--tenant_name", required=True, help="Vespa Cloud tenant name")
+    parser.add_argument(
+        "--vespa_application_name", required=True, help="Vespa application name"
+    )
+    parser.add_argument(
+        "--token_id_write", required=True, help="Vespa Cloud token ID for write access"
+    )
+    parser.add_argument(
+        "--token_id_read", required=True, help="Vespa Cloud token ID for read access"
+    )
+
+    args = parser.parse_args()
+    tenant_name = args.tenant_name
+    vespa_app_name = args.vespa_application_name
+    token_id_write = args.token_id_write
+    token_id_read = args.token_id_read
+
+    # Define the Vespa schema
+    colpali_schema = Schema(
+        name="pdf_page",
+        document=Document(
+            fields=[
+                Field(
+                    name="id",
+                    type="string",
+                    indexing=["summary", "index"],
+                    match=["word"],
+                ),
+                Field(name="url", type="string", indexing=["summary", "index"]),
+                Field(
+                    name="title",
+                    type="string",
+                    indexing=["summary", "index"],
+                    match=["text"],
+                    index="enable-bm25",
+                ),
+                Field(
+                    name="page_number", type="int", indexing=["summary", "attribute"]
+                ),
+                Field(name="image", type="raw", indexing=["summary"]),
+                Field(
+                    name="text",
+                    type="string",
+                    indexing=["summary", "index"],
+                    match=["text"],
+                    index="enable-bm25",
+                ),
+                Field(
+                    name="embedding",
+                    type="tensor<int8>(patch{}, v[16])",
+                    indexing=[
+                        "attribute",
+                        "index",
+                    ],  # adds HNSW index for candidate retrieval.
+                    ann=HNSW(
+                        distance_metric="hamming",
+                        max_links_per_node=32,
+                        neighbors_to_explore_at_insert=400,
+                    ),
+                ),
+            ]
+        ),
+        fieldsets=[
+            FieldSet(name="default", fields=["title", "url", "page_number", "text"]),
+            FieldSet(name="image", fields=["image"]),
+        ],
+    )
+
+    # Define rank profiles
+    colpali_profile = RankProfile(
+        name="default",
+        inputs=[("query(qt)", "tensor<float>(querytoken{}, v[128])")],
+        functions=[
+            Function(
+                name="max_sim",
+                expression="""
+                    sum(
+                        reduce(
+                            sum(
+                                query(qt) * unpack_bits(attribute(embedding)) , v
+                            ),
+                            max, patch
+                        ),
+                        querytoken
+                    )
+                """,
+            ),
+            Function(name="bm25_score", expression="bm25(title) + bm25(text)"),
+        ],
+        first_phase="bm25_score",
+        second_phase=SecondPhaseRanking(expression="max_sim", rerank_count=10),
+    )
+    colpali_schema.add_rank_profile(colpali_profile)
+
+    # Add retrieval-and-rerank rank profile
+    input_query_tensors = []
+    MAX_QUERY_TERMS = 64
+    for i in range(MAX_QUERY_TERMS):
+        input_query_tensors.append((f"query(rq{i})", "tensor<int8>(v[16])"))
+
+    input_query_tensors.append(("query(qt)", "tensor<float>(querytoken{}, v[128])"))
+    input_query_tensors.append(("query(qtb)", "tensor<int8>(querytoken{}, v[16])"))
+
+    colpali_retrieval_profile = RankProfile(
+        name="retrieval-and-rerank",
+        inputs=input_query_tensors,
+        functions=[
+            Function(
+                name="max_sim",
+                expression="""
+                    sum(
+                        reduce(
+                            sum(
+                                query(qt) * unpack_bits(attribute(embedding)) , v
+                            ),
+                            max, patch
+                        ),
+                        querytoken
+                    )
+                """,
+            ),
+            Function(
+                name="max_sim_binary",
+                expression="""
+                    sum(
+                      reduce(
+                        1/(1 + sum(
+                            hamming(query(qtb), attribute(embedding)) ,v)
+                        ),
+                        max,
+                        patch
+                      ),
+                      querytoken
+                    )
+                """,
+            ),
+        ],
+        first_phase="max_sim_binary",
+        second_phase=SecondPhaseRanking(expression="max_sim", rerank_count=10),
+    )
+    colpali_schema.add_rank_profile(colpali_retrieval_profile)
+
+    # Create the Vespa application package
+    vespa_application_package = ApplicationPackage(
+        name=vespa_app_name,
+        schema=[colpali_schema],
+        auth_clients=[
+            AuthClient(
+                id="mtls",  # Note that you still need to include the mtls client.
+                permissions=["read", "write"],
+                parameters=[Parameter("certificate", {"file": "security/clients.pem"})],
+            ),
+            AuthClient(
+                id="token_write",
+                permissions=["read", "write"],
+                parameters=[Parameter("token", {"id": token_id_write})],
+            ),
+            AuthClient(
+                id="token_read",
+                permissions=["read"],
+                parameters=[Parameter("token", {"id": token_id_read})],
+            ),
+        ],
+    )
+    vespa_team_api_key = os.getenv("VESPA_TEAM_API_KEY")
+    # Deploy the application to Vespa Cloud
+    vespa_cloud = VespaCloud(
+        tenant=tenant_name,
+        application=vespa_app_name,
+        key_content=vespa_team_api_key,
+        application_package=vespa_application_package,
+    )
+
+    app = vespa_cloud.deploy()
+
+    # Output the endpoint URL
+    endpoint_url = vespa_cloud.get_token_endpoint()
+    print(f"Application deployed. Token endpoint URL: {endpoint_url}")
+
+
+if __name__ == "__main__":
+    main()

feed_vespa.py

@@ -0,0 +1,207 @@
+#!/usr/bin/env python3
+
+import argparse
+import torch
+from torch.utils.data import DataLoader
+from tqdm import tqdm
+from io import BytesIO
+from typing import cast
+import os
+import json
+import hashlib
+
+from colpali_engine.models import ColPali, ColPaliProcessor
+from colpali_engine.utils.torch_utils import get_torch_device
+from vidore_benchmark.utils.image_utils import scale_image, get_base64_image
+import requests
+from pdf2image import convert_from_path
+from pypdf import PdfReader
+import numpy as np
+from vespa.application import Vespa
+from vespa.io import VespaResponse
+from dotenv import load_dotenv
+
+load_dotenv()
+
+
+def main():
+    parser = argparse.ArgumentParser(description="Feed data into Vespa application")
+    parser.add_argument(
+        "--application_name",
+        required=True,
+        default="colpalidemo",
+        help="Vespa application name",
+    )
+    parser.add_argument(
+        "--vespa_schema_name",
+        required=True,
+        default="pdf_page",
+        help="Vespa schema name",
+    )
+    args = parser.parse_args()
+
+    vespa_app_url = os.getenv("VESPA_APP_URL")
+    vespa_cloud_secret_token = os.getenv("VESPA_CLOUD_SECRET_TOKEN")
+    # Set application and schema names
+    application_name = args.application_name
+    schema_name = args.vespa_schema_name
+    # Instantiate Vespa connection using token
+    app = Vespa(url=vespa_app_url, vespa_cloud_secret_token=vespa_cloud_secret_token)
+    app.get_application_status()
+    model_name = "vidore/colpali-v1.2"
+
+    device = get_torch_device("auto")
+    print(f"Using device: {device}")
+
+    # Load the model
+    model = cast(
+        ColPali,
+        ColPali.from_pretrained(
+            model_name,
+            torch_dtype=torch.bfloat16 if torch.cuda.is_available() else torch.float32,
+            device_map=device,
+        ),
+    ).eval()
+
+    # Load the processor
+    processor = cast(ColPaliProcessor, ColPaliProcessor.from_pretrained(model_name))
+
+    # Define functions to work with PDFs
+    def download_pdf(url):
+        response = requests.get(url)
+        if response.status_code == 200:
+            return BytesIO(response.content)
+        else:
+            raise Exception(
+                f"Failed to download PDF: Status code {response.status_code}"
+            )
+
+    def get_pdf_images(pdf_url):
+        # Download the PDF
+        pdf_file = download_pdf(pdf_url)
+        # Save the PDF temporarily to disk (pdf2image requires a file path)
+        temp_file = "temp.pdf"
+        with open(temp_file, "wb") as f:
+            f.write(pdf_file.read())
+        reader = PdfReader(temp_file)
+        page_texts = []
+        for page_number in range(len(reader.pages)):
+            page = reader.pages[page_number]
+            text = page.extract_text()
+            page_texts.append(text)
+        images = convert_from_path(temp_file)
+        assert len(images) == len(page_texts)
+        return (images, page_texts)
+
+    # Define sample PDFs
+    sample_pdfs = [
+        {
+            "title": "ConocoPhillips Sustainability Highlights - Nature (24-0976)",
+            "url": "https://static.conocophillips.com/files/resources/24-0976-sustainability-highlights_nature.pdf",
+        },
+        {
+            "title": "ConocoPhillips Managing Climate Related Risks",
+            "url": "https://static.conocophillips.com/files/resources/conocophillips-2023-managing-climate-related-risks.pdf",
+        },
+        {
+            "title": "ConocoPhillips 2023 Sustainability Report",
+            "url": "https://static.conocophillips.com/files/resources/conocophillips-2023-sustainability-report.pdf",
+        },
+    ]
+
+    # Check if vespa_feed.json exists
+    if os.path.exists("vespa_feed.json"):
+        print("Loading vespa_feed from vespa_feed.json")
+        with open("vespa_feed.json", "r") as f:
+            vespa_feed_saved = json.load(f)
+        vespa_feed = []
+        for doc in vespa_feed_saved:
+            put_id = doc["put"]
+            fields = doc["fields"]
+            # Extract document_id from put_id
+            # Format: 'id:application_name:schema_name::document_id'
+            parts = put_id.split("::")
+            document_id = parts[1] if len(parts) > 1 else ""
+            page = {"id": document_id, "fields": fields}
+            vespa_feed.append(page)
+    else:
+        print("Generating vespa_feed")
+        # Process PDFs
+        for pdf in sample_pdfs:
+            page_images, page_texts = get_pdf_images(pdf["url"])
+            pdf["images"] = page_images
+            pdf["texts"] = page_texts
+
+        # Generate embeddings
+        for pdf in sample_pdfs:
+            page_embeddings = []
+            dataloader = DataLoader(
+                pdf["images"],
+                batch_size=2,
+                shuffle=False,
+                collate_fn=lambda x: processor.process_images(x),
+            )
+            for batch_doc in tqdm(dataloader):
+                with torch.no_grad():
+                    batch_doc = {k: v.to(model.device) for k, v in batch_doc.items()}
+                    embeddings_doc = model(**batch_doc)
+                    page_embeddings.extend(list(torch.unbind(embeddings_doc.to("cpu"))))
+            pdf["embeddings"] = page_embeddings
+
+        # Prepare Vespa feed
+        vespa_feed = []
+        for pdf in sample_pdfs:
+            url = pdf["url"]
+            title = pdf["title"]
+            for page_number, (page_text, embedding, image) in enumerate(
+                zip(pdf["texts"], pdf["embeddings"], pdf["images"])
+            ):
+                base_64_image = get_base64_image(
+                    scale_image(image, 640), add_url_prefix=False
+                )
+                embedding_dict = dict()
+                for idx, patch_embedding in enumerate(embedding):
+                    binary_vector = (
+                        np.packbits(np.where(patch_embedding > 0, 1, 0))
+                        .astype(np.int8)
+                        .tobytes()
+                        .hex()
+                    )
+                    embedding_dict[idx] = binary_vector
+                # id_hash should be md5 hash of url and page_number
+                id_hash = hashlib.md5(f"{url}_{page_number}".encode()).hexdigest()
+                page = {
+                    "id": id_hash,
+                    "fields": {
+                        "id": id_hash,
+                        "url": url,
+                        "title": title,
+                        "page_number": page_number,
+                        "image": base_64_image,
+                        "text": page_text,
+                        "embedding": embedding_dict,
+                    },
+                }
+                vespa_feed.append(page)
+
+        # Save vespa_feed to vespa_feed.json in the specified format
+        vespa_feed_to_save = []
+        for page in vespa_feed:
+            document_id = page["id"]
+            put_id = f"id:{application_name}:{schema_name}::{document_id}"
+            vespa_feed_to_save.append({"put": put_id, "fields": page["fields"]})
+        with open("vespa_feed.json", "w") as f:
+            json.dump(vespa_feed_to_save, f)
+
+    def callback(response: VespaResponse, id: str):
+        if not response.is_successful():
+            print(
+                f"Failed to feed document {id} with status code {response.status_code}: Reason {response.get_json()}"
+            )
+
+    # Feed data into Vespa
+    app.feed_iterable(vespa_feed, schema=schema_name, callback=callback)
+
+
+if __name__ == "__main__":
+    main()

frontend/app.py

@@ -0,0 +1,193 @@
+from urllib.parse import quote_plus
+
+from fasthtml.components import Div, H1, P, Img, H2, Form, Span
+from fasthtml.xtend import Script, A
+from lucide_fasthtml import Lucide
+from shad4fast import Button, Input, Badge
+
+
+def check_input_script():
+    return Script(
+        """
+        window.onload = function() {
+            const input = document.getElementById('search-input');
+            const button = document.querySelector('[data-button="search-button"]');
+            function checkInputValue() { button.disabled = input.value.trim() === ""; }
+            input.addEventListener('input', checkInputValue);
+            checkInputValue();
+        };
+        """
+    )
+
+
+def SearchBox(with_border=False, query_value=""):
+    grid_cls = "grid gap-2 items-center p-3 bg-muted/80 dark:bg-muted/40 w-full"
+
+    if with_border:
+        grid_cls = "grid gap-2 p-3 rounded-md border border-input bg-muted/80 dark:bg-muted/40 w-full ring-offset-background focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:border-input"
+
+    return Form(
+        Div(
+            Lucide(icon="search", cls="absolute left-2 top-2 text-muted-foreground"),
+            Input(
+                placeholder="Enter your search query...",
+                name="query",
+                value=query_value,
+                id="search-input",
+                cls="text-base pl-10 border-transparent ring-offset-transparent ring-0 focus-visible:ring-transparent",
+                style="font-size: 1rem",
+                autofocus=True,
+            ),
+            cls="relative",
+        ),
+        Div(
+            Span("controls", cls="text-muted-foreground"),
+            Button(
+                Lucide(icon="arrow-right", size="21"),
+                size="sm",
+                type="submit",
+                data_button="search-button",
+                disabled=True,
+            ),
+            cls="flex justify-between",
+        ),
+        check_input_script(),
+        action=f"/search?query={quote_plus(query_value)}",  # This takes the user to /search with the loading message
+        method="GET",
+        hx_get=f"/fetch_results?query={quote_plus(query_value)}",  # This fetches the results asynchronously
+        hx_trigger="load",  # Trigger this after the page loads
+        hx_target="#search-results",  # Update the search results div dynamically
+        hx_swap="outerHTML",  # Replace the search results div entirely
+        hx_indicator="#loading-indicator",  # Show the loading indicator while fetching results
+        cls=grid_cls,
+    )
+
+
+def SampleQueries():
+    sample_queries = [
+        "What is the future of energy storage?",
+        "What is sustainable energy?",
+        "How to reduce carbon emissions?",
+    ]
+
+    query_badges = []
+    for query in sample_queries:
+        query_badges.append(
+            A(
+                Badge(
+                    Div(
+                        Lucide(
+                            icon="text-search", size="18", cls="text-muted-foreground"
+                        ),
+                        Span(query, cls="text-base font-normal"),
+                        cls="flex gap-2 items-center",
+                    ),
+                    variant="outline",
+                    cls="text-base font-normal text-muted-foreground",
+                ),
+                href=f"/search?query={quote_plus(query)}",
+                cls="no-underline",
+            )
+        )
+
+    return Div(*query_badges, cls="grid gap-2 justify-items-center")
+
+
+def Hero():
+    return Div(
+        H1(
+            "Vespa.Ai + ColPali",
+            cls="text-5xl md:text-7xl font-bold tracking-wide md:tracking-wider bg-clip-text text-transparent bg-gradient-to-r from-black to-gray-700 dark:from-white dark:to-gray-300 animate-fade-in",
+        ),
+        P(
+            "Efficient Document Retrieval with Vision Language Models",
+            cls="text-lg md:text-2xl text-muted-foreground md:tracking-wide",
+        ),
+        cls="grid gap-5 text-center",
+    )
+
+
+def Home():
+    return Div(
+        Div(
+            Hero(),
+            SearchBox(with_border=True),
+            SampleQueries(),
+            cls="grid gap-8 -mt-[34vh]",
+        ),
+        cls="grid w-full h-full max-w-screen-md items-center gap-4 mx-auto",
+    )
+
+
+def Search(request, search_results=[]):
+    query_value = request.query_params.get("query", "").strip()
+
+    return Div(
+        Div(
+            SearchBox(
+                query_value=query_value
+            ),  # Pass the query value to pre-fill the SearchBox
+            Div(
+                LoadingMessage(),  # Show the loading message initially
+                id="search-results",  # This will be replaced by the search results
+            ),
+            cls="grid",
+        ),
+        cls="grid",
+    )
+
+
+def LoadingMessage():
+    return Div(
+        P("Loading... Please wait.", cls="text-base text-center"),
+        cls="p-10 text-center text-muted-foreground",
+        id="loading-indicator",
+    )
+
+
+def SearchResult(results=[]):
+    if not results:
+        return Div(
+            P(
+                "No results found for your query.",
+                cls="text-muted-foreground text-base text-center",
+            ),
+            cls="grid p-10",
+        )
+
+    # Otherwise, display the search results
+    result_items = []
+    for result in results:
+        fields = result["fields"]  # Extract the 'fields' part of each result
+        base64_image = (
+            f"data:image/jpeg;base64,{fields['image']}"  # Format base64 image
+        )
+        # Print the fields that start with 'sim_map'
+        for key, value in fields.items():
+            if key.startswith("sim_map"):
+                print(f"{key}")
+        result_items.append(
+            Div(
+                Div(
+                    Img(src=base64_image, alt=fields["title"], cls="max-w-full h-auto"),
+                    cls="bg-background px-3 py-5",
+                ),
+                Div(
+                    Div(
+                        H2(fields["title"], cls="text-xl font-semibold"),
+                        P(
+                            fields["text"], cls="text-muted-foreground"
+                        ),  # Use the URL as the description
+                        cls="text-sm grid gap-y-4",
+                    ),
+                    cls="bg-background px-3 py-5",
+                ),
+                cls="grid grid-cols-subgrid col-span-2",
+            )
+        )
+
+    return Div(
+        *result_items,
+        cls="grid grid-cols-2 gap-px bg-border",
+        id="search-results",  # This will be the target for HTMX updates
+    )

frontend/layout.py

@@ -0,0 +1,60 @@
+from fasthtml.components import Div, Img, Nav, Title, Body, Header, Main
+from fasthtml.xtend import A
+from lucide_fasthtml import Lucide
+from shad4fast import Button, Separator
+
+
+def Logo():
+    return Div(
+        Img(src='https://assets.vespa.ai/logos/vespa-logo-black.svg', alt='Vespa Logo', cls='h-full dark:hidden'),
+        Img(src='https://assets.vespa.ai/logos/vespa-logo-white.svg', alt='Vespa Logo Dark Mode',
+            cls='h-full hidden dark:block'),
+        cls='h-[27px]'
+    )
+
+
+def ThemeToggle(variant="ghost", cls=None, **kwargs):
+    return Button(
+        Lucide("sun", cls="dark:flex hidden"),
+        Lucide("moon", cls="dark:hidden"),
+        variant=variant,
+        size="icon",
+        cls=f"theme-toggle {cls}",
+        **kwargs,
+    )
+
+
+def Links():
+    return Nav(
+        A(
+            Button(Lucide(icon="github"), size="icon", variant="ghost"),
+            href="https://github.com/vespa-engine/vespa",
+            target="_blank",
+        ),
+        A(
+            Button(Lucide(icon="slack"), size="icon", variant="ghost"),
+            href="https://slack.vespa.ai",
+            target="_blank",
+        ),
+        Separator(orientation="vertical"),
+        ThemeToggle(),
+        cls='flex items-center space-x-3'
+    )
+
+
+def Layout(*c, **kwargs):
+    return (
+        Title('Visual Retrieval ColPali'),
+        Body(
+            Header(
+                A(Logo(), href="/"),
+                Links(),
+                cls='min-h-[55px] h-[55px] w-full flex items-center justify-between px-4'
+            ),
+            Main(
+                *c, **kwargs,
+                cls='flex-1 h-full'
+            ),
+            cls='h-full flex flex-col'
+        ),
+    )

globals.css

@@ -0,0 +1,157 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 240 10% 3.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 240 10% 3.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 240 10% 3.9%;
+        --primary: 240 5.9% 10%;
+        --primary-foreground: 0 0% 98%;
+        --secondary: 240 4.8% 95.9%;
+        --secondary-foreground: 240 5.9% 10%;
+        --muted: 240 4.8% 95.9%;
+        --muted-foreground: 240 3.8% 46.1%;
+        --accent: 240 4.8% 95.9%;
+        --accent-foreground: 240 5.9% 10%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 240 5.9% 90%;
+        --input: 240 5.9% 90%;
+        --ring: 240 5.9% 10%;
+        --radius: 0.5rem;
+        --chart-1: 12 76% 61%;
+        --chart-2: 173 58% 39%;
+        --chart-3: 197 37% 24%;
+        --chart-4: 43 74% 66%;
+        --chart-5: 27 87% 67%;
+    }
+
+    .dark {
+        --background: 240 10% 3.9%;
+        --foreground: 0 0% 98%;
+        --card: 240 10% 3.9%;
+        --card-foreground: 0 0% 98%;
+        --popover: 240 10% 3.9%;
+        --popover-foreground: 0 0% 98%;
+        --primary: 0 0% 98%;
+        --primary-foreground: 240 5.9% 10%;
+        --secondary: 240 3.7% 15.9%;
+        --secondary-foreground: 0 0% 98%;
+        --muted: 240 3.7% 15.9%;
+        --muted-foreground: 240 5% 64.9%;
+        --accent: 240 3.7% 15.9%;
+        --accent-foreground: 0 0% 98%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 240 3.7% 15.9%;
+        --input: 240 3.7% 15.9%;
+        --ring: 240 4.9% 83.9%;
+        --chart-1: 220 70% 50%;
+        --chart-2: 160 60% 45%;
+        --chart-3: 30 80% 55%;
+        --chart-4: 280 65% 60%;
+        --chart-5: 340 75% 55%;
+    }
+}
+
+@layer base {
+    :root:has(.no-bg-scroll) {
+        overflow: hidden;
+    }
+
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground antialiased min-h-screen;
+        font-feature-settings: "rlig" 1, "calt" 1;
+    }
+}
+
+@layer utilities {
+
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    .no-scrollbar::-webkit-scrollbar {
+        display: none;
+    }
+
+    /* Hide scrollbar for IE, Edge and Firefox */
+    .no-scrollbar {
+        -webkit-overflow-scrolling: touch;
+        -ms-overflow-style: none;
+        /* IE and Edge */
+        scrollbar-width: none;
+        /* Firefox */
+    }
+}
+
+@keyframes slideInFromTop {
+    from {
+        transform: translateY(-100%);
+    }
+
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes slideInFromBottom {
+    from {
+        transform: translateY(100%);
+    }
+
+    to {
+        transform: translateY(0);
+    }
+}
+
+.toast {
+    animation-duration: 0.2s;
+    animation-fill-mode: forwards;
+}
+
+@media (max-width: 640px) {
+    .toast {
+        animation-name: slideInFromTop;
+    }
+}
+
+@media (min-width: 641px) {
+    .toast {
+        animation-name: slideInFromBottom;
+    }
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes slide-up {
+    from {
+        transform: translateY(20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.animate-fade-in {
+    animation: fade-in 1s ease-out forwards;
+}
+
+.animate-slide-up {
+    animation: slide-up 1s ease-out forwards;
+}

hello.py

@@ -0,0 +1,17 @@
+from fasthtml.common import *
+from importlib.util import find_spec
+
+# Run find_spec for all the modules (imports will be removed by ruff if not used. This is just to check if the modules are available, and should be removed)ß
+for module in ["torch", "einops", "PIL", "vidore_benchmark", "colpali_engine"]:
+    spec = find_spec(module)
+    assert spec is not None, f"Module {module} not found"
+
+app, rt = fast_app()
+
+
+@rt("/")
+def get():
+    return Div(P("Hello World!"), hx_get="/change")
+
+
+serve()

icons.py

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

main.py

@@ -0,0 +1,152 @@
+import asyncio
+import json
+
+from fasthtml.common import *
+from shad4fast import *
+from vespa.application import Vespa
+
+from backend.colpali import load_model, get_result_from_query
+from backend.vespa_app import get_vespa_app
+from frontend.app import Home, Search, SearchResult, SearchBox
+from frontend.layout import Layout
+
+highlight_js_theme_link = Link(id="highlight-theme", rel="stylesheet", href="")
+highlight_js_theme = Script(src="/static/js/highlightjs-theme.js")
+highlight_js = HighlightJS(
+    langs=["python", "javascript", "java", "json", "xml"],
+    dark="github-dark",
+    light="github",
+)
+
+app, rt = fast_app(
+    htmlkw={"cls": "h-full"},
+    pico=False,
+    hdrs=(
+        ShadHead(tw_cdn=False, theme_handle=True),
+        highlight_js,
+        highlight_js_theme_link,
+        highlight_js_theme,
+    ),
+)
+vespa_app: Vespa = get_vespa_app()
+
+
+class ModelManager:
+    _instance = None
+    model = None
+    processor = None
+
+    @staticmethod
+    def get_instance():
+        if ModelManager._instance is None:
+            ModelManager._instance = ModelManager()
+            ModelManager._instance.initialize_model_and_processor()
+        return ModelManager._instance
+
+    def initialize_model_and_processor(self):
+        if self.model is None or self.processor is None:  # Ensure no reinitialization
+            self.model, self.processor = load_model()
+            if self.model is None or self.processor is None:
+                print("Failed to initialize model or processor at startup")
+            else:
+                print("Model and processor loaded at startup")
+
+
+@rt("/static/{filepath:path}")
+def serve_static(filepath: str):
+    return FileResponse(f"./static/{filepath}")
+
+
+@rt("/")
+def get():
+    return Layout(Home())
+
+
+@rt("/search")
+def get(request):
+    # Extract the 'query' parameter from the URL using query_params
+    query_value = request.query_params.get("query", "").strip()
+
+    # Always render the SearchBox first
+    if not query_value:
+        # Show SearchBox and a message for missing query
+        return Layout(
+            Div(
+                SearchBox(query_value=query_value),
+                Div(
+                    P(
+                        "No query provided. Please enter a query.",
+                        cls="text-center text-muted-foreground",
+                    ),
+                    cls="p-10",
+                ),
+                cls="grid",
+            )
+        )
+
+    # Show the loading message if a query is provided
+    return Layout(Search(request))  # Show SearchBox and Loading message initially
+
+
+@rt("/fetch_results")
+def get(request, query: str, nn: bool = True):
+    # Check if the request came from HTMX; if not, redirect to /search
+    if "hx-request" not in request.headers:
+        return RedirectResponse("/search")
+
+    # Extract the 'query' parameter from the URL
+
+    # Fetch model and processor
+    manager = ModelManager.get_instance()
+    model = manager.model
+    processor = manager.processor
+
+    # Fetch real search results from Vespa
+    result = asyncio.run(
+        get_result_from_query(
+            vespa_app,
+            processor=processor,
+            model=model,
+            query=query,
+            nn=nn,
+            gen_sim_map=True,
+        )
+    )
+
+    # Extract search results from the result payload
+    search_results = (
+        result["root"]["children"]
+        if "root" in result and "children" in result["root"]
+        else []
+    )
+
+    # Directly return the search results without the full page layout
+    return SearchResult(search_results)
+
+
+@rt("/app")
+def get():
+    return Layout(Div(P(f"Connected to Vespa at {vespa_app.url}"), cls="p-4"))
+
+
+@rt("/run_query")
+def get(query: str, nn: bool = False):
+    # dummy-function to avoid running the query every time
+    # result = get_result_dummy(query, nn)
+    # If we want to run real, uncomment the following lines
+    model, processor = get_model_and_processor()
+    result = asyncio.run(
+        get_result_from_query(
+            vespa_app, processor=processor, model=model, query=query, nn=nn
+        )
+    )
+    # model, processor = get_model_and_processor()
+    # result = asyncio.run(
+    #     get_result_from_query(vespa_app, processor=processor, model=model, query=query, nn=nn)
+    # )
+    return Layout(Div(H1("Result"), Pre(Code(json.dumps(result, indent=2))), cls="p-4"))
+
+
+if __name__ == "__main__":
+    # ModelManager.get_instance()  # Initialize once at startup
+    serve()

output.css

@@ -0,0 +1,2541 @@
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+/*
+! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
+*/
+
+html,
+:host {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-feature-settings: normal;
+  /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden] {
+  display: none;
+}
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 240 5.9% 10%;
+  --radius: 0.5rem;
+  --chart-1: 12 76% 61%;
+  --chart-2: 173 58% 39%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
+}
+
+.dark {
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 240 4.9% 83.9%;
+  --chart-1: 220 70% 50%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 340 75% 55%;
+}
+
+:root:has(.no-bg-scroll) {
+  overflow: hidden;
+}
+
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  min-height: 100vh;
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: "rlig" 1, "calt" 1;
+}
+
+.container {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 2rem;
+  padding-left: 2rem;
+}
+
+@media (min-width: 1400px) {
+  .container {
+    max-width: 1400px;
+  }
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.pointer-events-auto {
+  pointer-events: auto;
+}
+
+.static {
+  position: static;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.inset-0 {
+  inset: 0px;
+}
+
+.inset-x-0 {
+  left: 0px;
+  right: 0px;
+}
+
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
+
+.-bottom-12 {
+  bottom: -3rem;
+}
+
+.-left-12 {
+  left: -3rem;
+}
+
+.-right-12 {
+  right: -3rem;
+}
+
+.-top-12 {
+  top: -3rem;
+}
+
+.bottom-0 {
+  bottom: 0px;
+}
+
+.left-0 {
+  left: 0px;
+}
+
+.left-1\/2 {
+  left: 50%;
+}
+
+.left-2 {
+  left: 0.5rem;
+}
+
+.left-\[50\%\] {
+  left: 50%;
+}
+
+.right-0 {
+  right: 0px;
+}
+
+.right-2 {
+  right: 0.5rem;
+}
+
+.right-4 {
+  right: 1rem;
+}
+
+.top-0 {
+  top: 0px;
+}
+
+.top-1\/2 {
+  top: 50%;
+}
+
+.top-2 {
+  top: 0.5rem;
+}
+
+.top-4 {
+  top: 1rem;
+}
+
+.top-\[50\%\] {
+  top: 50%;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
+.z-\[100\] {
+  z-index: 100;
+}
+
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
+.-mx-1 {
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.-ml-4 {
+  margin-left: -1rem;
+}
+
+.-mt-4 {
+  margin-top: -1rem;
+}
+
+.-mt-\[34vh\] {
+  margin-top: -34vh;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.block {
+  display: block;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.table {
+  display: table;
+}
+
+.grid {
+  display: grid;
+}
+
+.contents {
+  display: contents;
+}
+
+.hidden {
+  display: none;
+}
+
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
+
+.size-4 {
+  width: 1rem;
+  height: 1rem;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-11 {
+  height: 2.75rem;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
+.h-2 {
+  height: 0.5rem;
+}
+
+.h-2\.5 {
+  height: 0.625rem;
+}
+
+.h-3\.5 {
+  height: 0.875rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-5 {
+  height: 1.25rem;
+}
+
+.h-6 {
+  height: 1.5rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.h-9 {
+  height: 2.25rem;
+}
+
+.h-\[1\.5px\] {
+  height: 1.5px;
+}
+
+.h-\[27px\] {
+  height: 27px;
+}
+
+.h-\[55px\] {
+  height: 55px;
+}
+
+.h-\[var\(--radix-select-trigger-height\)\] {
+  height: var(--radix-select-trigger-height);
+}
+
+.h-auto {
+  height: auto;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-px {
+  height: 1px;
+}
+
+.max-h-96 {
+  max-height: 24rem;
+}
+
+.max-h-screen {
+  max-height: 100vh;
+}
+
+.min-h-\[55px\] {
+  min-height: 55px;
+}
+
+.min-h-\[80px\] {
+  min-height: 80px;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.w-10 {
+  width: 2.5rem;
+}
+
+.w-11 {
+  width: 2.75rem;
+}
+
+.w-2\.5 {
+  width: 0.625rem;
+}
+
+.w-3\.5 {
+  width: 0.875rem;
+}
+
+.w-3\/4 {
+  width: 75%;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
+.w-5 {
+  width: 1.25rem;
+}
+
+.w-8 {
+  width: 2rem;
+}
+
+.w-\[1\.5px\] {
+  width: 1.5px;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.min-w-0 {
+  min-width: 0px;
+}
+
+.min-w-\[8rem\] {
+  min-width: 8rem;
+}
+
+.min-w-\[var\(--radix-select-trigger-width\)\] {
+  min-width: var(--radix-select-trigger-width);
+}
+
+.max-w-full {
+  max-width: 100%;
+}
+
+.max-w-lg {
+  max-width: 32rem;
+}
+
+.max-w-screen-md {
+  max-width: 768px;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.grow-0 {
+  flex-grow: 0;
+}
+
+.basis-full {
+  flex-basis: 100%;
+}
+
+.caption-bottom {
+  caption-side: bottom;
+}
+
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-x-\[-50\%\] {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-\[-50\%\] {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.rotate-90 {
+  --tw-rotate: 90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.cursor-default {
+  cursor: default;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.touch-none {
+  touch-action: none;
+}
+
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.resize {
+  resize: both;
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-cols-subgrid {
+  grid-template-columns: subgrid;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-items-center {
+  justify-items: center;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.gap-5 {
+  gap: 1.25rem;
+}
+
+.gap-8 {
+  gap: 2rem;
+}
+
+.gap-px {
+  gap: 1px;
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.gap-y-4 {
+  row-gap: 1rem;
+}
+
+.space-x-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
+}
+
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
+.self-stretch {
+  align-self: stretch;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.\!rounded-full {
+  border-radius: 9999px !important;
+}
+
+.rounded-\[inherit\] {
+  border-radius: inherit;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-lg {
+  border-radius: var(--radius);
+}
+
+.rounded-md {
+  border-radius: calc(var(--radius) - 2px);
+}
+
+.rounded-sm {
+  border-radius: calc(var(--radius) - 4px);
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.border-b {
+  border-bottom-width: 1px;
+}
+
+.border-l {
+  border-left-width: 1px;
+}
+
+.border-r {
+  border-right-width: 1px;
+}
+
+.border-t {
+  border-top-width: 1px;
+}
+
+.border-destructive {
+  border-color: hsl(var(--destructive));
+}
+
+.border-destructive\/50 {
+  border-color: hsl(var(--destructive) / 0.5);
+}
+
+.border-input {
+  border-color: hsl(var(--input));
+}
+
+.border-primary {
+  border-color: hsl(var(--primary));
+}
+
+.border-transparent {
+  border-color: transparent;
+}
+
+.border-l-transparent {
+  border-left-color: transparent;
+}
+
+.border-t-transparent {
+  border-top-color: transparent;
+}
+
+.bg-background {
+  background-color: hsl(var(--background));
+}
+
+.bg-black\/80 {
+  background-color: rgb(0 0 0 / 0.8);
+}
+
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
+.bg-border {
+  background-color: hsl(var(--border));
+}
+
+.bg-card {
+  background-color: hsl(var(--card));
+}
+
+.bg-destructive {
+  background-color: hsl(var(--destructive));
+}
+
+.bg-input {
+  background-color: hsl(var(--input));
+}
+
+.bg-muted {
+  background-color: hsl(var(--muted));
+}
+
+.bg-muted\/50 {
+  background-color: hsl(var(--muted) / 0.5);
+}
+
+.bg-muted\/80 {
+  background-color: hsl(var(--muted) / 0.8);
+}
+
+.bg-popover {
+  background-color: hsl(var(--popover));
+}
+
+.bg-primary {
+  background-color: hsl(var(--primary));
+}
+
+.bg-red-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
+}
+
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
+.bg-secondary {
+  background-color: hsl(var(--secondary));
+}
+
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
+.from-black {
+  --tw-gradient-from: #000 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.to-gray-700 {
+  --tw-gradient-to: #374151 var(--tw-gradient-to-position);
+}
+
+.bg-clip-text {
+  -webkit-background-clip: text;
+          background-clip: text;
+}
+
+.fill-current {
+  fill: currentColor;
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-16 {
+  padding: 4rem;
+}
+
+.p-3 {
+  padding: 0.75rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
+.p-\[1px\] {
+  padding: 1px;
+}
+
+.p-10 {
+  padding: 2.5rem;
+}
+
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.py-5 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
+.pl-10 {
+  padding-left: 2.5rem;
+}
+
+.pl-4 {
+  padding-left: 1rem;
+}
+
+.pl-8 {
+  padding-left: 2rem;
+}
+
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
+.pr-8 {
+  padding-right: 2rem;
+}
+
+.pt-0 {
+  padding-top: 0px;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.align-middle {
+  vertical-align: middle;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
+.leading-none {
+  line-height: 1;
+}
+
+.tracking-tight {
+  letter-spacing: -0.025em;
+}
+
+.tracking-wide {
+  letter-spacing: 0.025em;
+}
+
+.text-card-foreground {
+  color: hsl(var(--card-foreground));
+}
+
+.text-current {
+  color: currentColor;
+}
+
+.text-destructive {
+  color: hsl(var(--destructive));
+}
+
+.text-destructive-foreground {
+  color: hsl(var(--destructive-foreground));
+}
+
+.text-foreground {
+  color: hsl(var(--foreground));
+}
+
+.text-foreground\/50 {
+  color: hsl(var(--foreground) / 0.5);
+}
+
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.text-muted-foreground {
+  color: hsl(var(--muted-foreground));
+}
+
+.text-popover-foreground {
+  color: hsl(var(--popover-foreground));
+}
+
+.text-primary {
+  color: hsl(var(--primary));
+}
+
+.text-primary-foreground {
+  color: hsl(var(--primary-foreground));
+}
+
+.text-secondary-foreground {
+  color: hsl(var(--secondary-foreground));
+}
+
+.text-transparent {
+  color: transparent;
+}
+
+.underline {
+  text-decoration-line: underline;
+}
+
+.no-underline {
+  text-decoration-line: none;
+}
+
+.underline-offset-4 {
+  text-underline-offset: 4px;
+}
+
+.antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.opacity-70 {
+  opacity: 0.7;
+}
+
+.opacity-90 {
+  opacity: 0.9;
+}
+
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.outline {
+  outline-style: solid;
+}
+
+.ring {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-0 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-offset-background {
+  --tw-ring-offset-color: hsl(var(--background));
+}
+
+.ring-offset-transparent {
+  --tw-ring-offset-color: transparent;
+}
+
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-200 {
+  transition-duration: 200ms;
+}
+
+.duration-300 {
+  transition-duration: 300ms;
+}
+
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ease-out {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+@keyframes enter {
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
+  }
+}
+
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
+  }
+}
+
+.animate-in {
+  animation-name: enter;
+  animation-duration: 150ms;
+  --tw-enter-opacity: initial;
+  --tw-enter-scale: initial;
+  --tw-enter-rotate: initial;
+  --tw-enter-translate-x: initial;
+  --tw-enter-translate-y: initial;
+}
+
+.animate-out {
+  animation-name: exit;
+  animation-duration: 150ms;
+  --tw-exit-opacity: initial;
+  --tw-exit-scale: initial;
+  --tw-exit-rotate: initial;
+  --tw-exit-translate-x: initial;
+  --tw-exit-translate-y: initial;
+}
+
+.fade-in {
+  --tw-enter-opacity: 0;
+}
+
+.fade-out {
+  --tw-exit-opacity: 0;
+}
+
+.zoom-in {
+  --tw-enter-scale: 0;
+}
+
+.zoom-out {
+  --tw-exit-scale: 0;
+}
+
+.spin-in {
+  --tw-enter-rotate: 30deg;
+}
+
+.spin-out {
+  --tw-exit-rotate: 30deg;
+}
+
+.slide-in-from-bottom {
+  --tw-enter-translate-y: 100%;
+}
+
+.slide-in-from-left {
+  --tw-enter-translate-x: -100%;
+}
+
+.slide-in-from-right {
+  --tw-enter-translate-x: 100%;
+}
+
+.slide-in-from-top {
+  --tw-enter-translate-y: -100%;
+}
+
+.slide-out-to-bottom {
+  --tw-exit-translate-y: 100%;
+}
+
+.slide-out-to-left {
+  --tw-exit-translate-x: -100%;
+}
+
+.slide-out-to-right {
+  --tw-exit-translate-x: 100%;
+}
+
+.slide-out-to-top {
+  --tw-exit-translate-y: -100%;
+}
+
+.duration-200 {
+  animation-duration: 200ms;
+}
+
+.duration-300 {
+  animation-duration: 300ms;
+}
+
+.ease-in-out {
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ease-out {
+  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+.running {
+  animation-play-state: running;
+}
+
+.paused {
+  animation-play-state: paused;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+
+.no-scrollbar {
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+
+@keyframes slideInFromTop {
+  from {
+    transform: translateY(-100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInFromBottom {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+.toast {
+  animation-duration: 0.2s;
+  animation-fill-mode: forwards;
+}
+
+@media (max-width: 640px) {
+  .toast {
+    animation-name: slideInFromTop;
+  }
+}
+
+@media (min-width: 641px) {
+  .toast {
+    animation-name: slideInFromBottom;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.animate-fade-in {
+  animation: fade-in 1s ease-out forwards;
+}
+
+.animate-slide-up {
+  animation: slide-up 1s ease-out forwards;
+}
+
+:root:has(.data-\[state\=open\]\:no-bg-scroll[data-state="open"]) {
+  overflow: hidden;
+}
+
+:root:has(.group[data-state="open"] .group-data-\[state\=open\]\:no-bg-scroll) {
+  overflow: hidden;
+}
+
+.file\:border-0::file-selector-button {
+  border-width: 0px;
+}
+
+.file\:bg-transparent::file-selector-button {
+  background-color: transparent;
+}
+
+.file\:text-sm::file-selector-button {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.file\:font-medium::file-selector-button {
+  font-weight: 500;
+}
+
+.placeholder\:text-muted-foreground::-moz-placeholder {
+  color: hsl(var(--muted-foreground));
+}
+
+.placeholder\:text-muted-foreground::placeholder {
+  color: hsl(var(--muted-foreground));
+}
+
+.focus-within\:border-input:focus-within {
+  border-color: hsl(var(--input));
+}
+
+.focus-within\:outline-none:focus-within {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus-within\:ring-2:focus-within {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus-within\:ring-ring:focus-within {
+  --tw-ring-color: hsl(var(--ring));
+}
+
+.focus-within\:ring-offset-2:focus-within {
+  --tw-ring-offset-width: 2px;
+}
+
+.hover\:border-white:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
+.hover\:border-\[text-muted-foreground\]:hover {
+  border-color: text-muted-foreground;
+}
+
+.hover\:bg-accent:hover {
+  background-color: hsl(var(--accent));
+}
+
+.hover\:bg-destructive\/80:hover {
+  background-color: hsl(var(--destructive) / 0.8);
+}
+
+.hover\:bg-destructive\/90:hover {
+  background-color: hsl(var(--destructive) / 0.9);
+}
+
+.hover\:bg-muted\/50:hover {
+  background-color: hsl(var(--muted) / 0.5);
+}
+
+.hover\:bg-primary\/80:hover {
+  background-color: hsl(var(--primary) / 0.8);
+}
+
+.hover\:bg-primary\/90:hover {
+  background-color: hsl(var(--primary) / 0.9);
+}
+
+.hover\:bg-secondary\/80:hover {
+  background-color: hsl(var(--secondary) / 0.8);
+}
+
+.hover\:bg-secondary:hover {
+  background-color: hsl(var(--secondary));
+}
+
+.hover\:text-accent-foreground:hover {
+  color: hsl(var(--accent-foreground));
+}
+
+.hover\:text-foreground:hover {
+  color: hsl(var(--foreground));
+}
+
+.hover\:text-primary-foreground:hover {
+  color: hsl(var(--primary-foreground));
+}
+
+.hover\:text-muted-foreground:hover {
+  color: hsl(var(--muted-foreground));
+}
+
+.hover\:underline:hover {
+  text-decoration-line: underline;
+}
+
+.hover\:opacity-100:hover {
+  opacity: 1;
+}
+
+.focus\:bg-accent:focus {
+  background-color: hsl(var(--accent));
+}
+
+.focus\:text-accent-foreground:focus {
+  color: hsl(var(--accent-foreground));
+}
+
+.focus\:opacity-100:focus {
+  opacity: 1;
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-ring:focus {
+  --tw-ring-color: hsl(var(--ring));
+}
+
+.focus\:ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
+
+.focus-visible\:outline-none:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus-visible\:ring-2:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus-visible\:ring-ring:focus-visible {
+  --tw-ring-color: hsl(var(--ring));
+}
+
+.focus-visible\:ring-transparent:focus-visible {
+  --tw-ring-color: transparent;
+}
+
+.focus-visible\:ring-offset-2:focus-visible {
+  --tw-ring-offset-width: 2px;
+}
+
+.active\:ring:active {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.disabled\:pointer-events-none:disabled {
+  pointer-events: none;
+}
+
+.disabled\:cursor-not-allowed:disabled {
+  cursor: not-allowed;
+}
+
+.disabled\:opacity-50:disabled {
+  opacity: 0.5;
+}
+
+.group:hover .group-hover\:opacity-100 {
+  opacity: 1;
+}
+
+.group.destructive .group-\[\.destructive\]\:text-red-300 {
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity));
+}
+
+.group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover {
+  --tw-text-opacity: 1;
+  color: rgb(254 242 242 / var(--tw-text-opacity));
+}
+
+.group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
+}
+
+.group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus {
+  --tw-ring-offset-color: #dc2626;
+}
+
+.peer:checked ~ .peer-checked\:bg-primary {
+  background-color: hsl(var(--primary));
+}
+
+.peer:checked ~ .peer-checked\:text-primary-foreground {
+  color: hsl(var(--primary-foreground));
+}
+
+.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+.peer:disabled ~ .peer-disabled\:opacity-50 {
+  opacity: 0.5;
+}
+
+.peer:disabled ~ .peer-disabled\:opacity-70 {
+  opacity: 0.7;
+}
+
+.data-\[disabled\]\:pointer-events-none[data-disabled] {
+  pointer-events: none;
+}
+
+.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
+  --tw-translate-y: 0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
+  --tw-translate-x: -0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.data-\[side\=right\]\:translate-x-1[data-side="right"] {
+  --tw-translate-x: 0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
+  --tw-translate-y: -0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.data-\[state\=active\]\:bg-background[data-state="active"] {
+  background-color: hsl(var(--background));
+}
+
+.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
+  background-color: hsl(var(--muted));
+}
+
+.data-\[state\=active\]\:text-foreground[data-state="active"] {
+  color: hsl(var(--foreground));
+}
+
+.data-\[disabled\]\:opacity-50[data-disabled] {
+  opacity: 0.5;
+}
+
+.data-\[state\=active\]\:shadow-sm[data-state="active"] {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.data-\[state\=open\]\:animate-in[data-state="open"] {
+  animation-name: enter;
+  animation-duration: 150ms;
+  --tw-enter-opacity: initial;
+  --tw-enter-scale: initial;
+  --tw-enter-rotate: initial;
+  --tw-enter-translate-x: initial;
+  --tw-enter-translate-y: initial;
+}
+
+.data-\[state\=closed\]\:animate-out[data-state="closed"] {
+  animation-name: exit;
+  animation-duration: 150ms;
+  --tw-exit-opacity: initial;
+  --tw-exit-scale: initial;
+  --tw-exit-rotate: initial;
+  --tw-exit-translate-x: initial;
+  --tw-exit-translate-y: initial;
+}
+
+.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
+  --tw-exit-opacity: 0;
+}
+
+.data-\[state\=open\]\:fade-in-0[data-state="open"] {
+  --tw-enter-opacity: 0;
+}
+
+.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
+  --tw-exit-scale: .95;
+}
+
+.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
+  --tw-enter-scale: .95;
+}
+
+.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
+  --tw-enter-translate-y: -0.5rem;
+}
+
+.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
+  --tw-enter-translate-x: 0.5rem;
+}
+
+.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
+  --tw-enter-translate-x: -0.5rem;
+}
+
+.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
+  --tw-enter-translate-y: 0.5rem;
+}
+
+.group[data-checked="true"] .group-data-\[checked\=true\]\:flex {
+  display: flex;
+}
+
+.group[data-state="checked"] .group-data-\[state\=checked\]\:flex {
+  display: flex;
+}
+
+.group[data-state="open"] .group-data-\[state\=open\]\:bg-accent {
+  background-color: hsl(var(--accent));
+}
+
+.group[data-state="open"] .group-data-\[state\=open\]\:text-muted-foreground {
+  color: hsl(var(--muted-foreground));
+}
+
+.group[data-state="closed"] .group-data-\[state\=closed\]\:duration-300 {
+  transition-duration: 300ms;
+}
+
+.group[data-state="open"] .group-data-\[state\=open\]\:duration-500 {
+  transition-duration: 500ms;
+}
+
+.group[data-state="open"] .group-data-\[state\=open\]\:animate-in {
+  animation-name: enter;
+  animation-duration: 150ms;
+  --tw-enter-opacity: initial;
+  --tw-enter-scale: initial;
+  --tw-enter-rotate: initial;
+  --tw-enter-translate-x: initial;
+  --tw-enter-translate-y: initial;
+}
+
+.group[data-state="closed"] .group-data-\[state\=closed\]\:animate-out {
+  animation-name: exit;
+  animation-duration: 150ms;
+  --tw-exit-opacity: initial;
+  --tw-exit-scale: initial;
+  --tw-exit-rotate: initial;
+  --tw-exit-translate-x: initial;
+  --tw-exit-translate-y: initial;
+}
+
+.group[data-state="closed"] .group-data-\[state\=closed\]\:fade-out-0 {
+  --tw-exit-opacity: 0;
+}
+
+.group[data-state="open"] .group-data-\[state\=open\]\:fade-in-0 {
+  --tw-enter-opacity: 0;
+}
+
+.group[data-state="closed"] .group-data-\[state\=closed\]\:zoom-out-95 {
+  --tw-exit-scale: .95;
+}
+
+.group[data-state="open"] .group-data-\[state\=open\]\:zoom-in-95 {
+  --tw-enter-scale: .95;
+}
+
+.group[data-state="closed"] .group-data-\[state\=closed\]\:slide-out-to-bottom {
+  --tw-exit-translate-y: 100%;
+}
+
+.group[data-state="closed"] .group-data-\[state\=closed\]\:slide-out-to-left {
+  --tw-exit-translate-x: -100%;
+}
+
+.group[data-state="closed"] .group-data-\[state\=closed\]\:slide-out-to-left-1\/2 {
+  --tw-exit-translate-x: -50%;
+}
+
+.group[data-state="closed"] .group-data-\[state\=closed\]\:slide-out-to-right {
+  --tw-exit-translate-x: 100%;
+}
+
+.group[data-state="closed"] .group-data-\[state\=closed\]\:slide-out-to-top {
+  --tw-exit-translate-y: -100%;
+}
+
+.group[data-state="closed"] .group-data-\[state\=closed\]\:slide-out-to-top-\[48\%\] {
+  --tw-exit-translate-y: -48%;
+}
+
+.group[data-state="open"] .group-data-\[state\=open\]\:slide-in-from-bottom {
+  --tw-enter-translate-y: 100%;
+}
+
+.group[data-state="open"] .group-data-\[state\=open\]\:slide-in-from-left {
+  --tw-enter-translate-x: -100%;
+}
+
+.group[data-state="open"] .group-data-\[state\=open\]\:slide-in-from-left-1\/2 {
+  --tw-enter-translate-x: -50%;
+}
+
+.group[data-state="open"] .group-data-\[state\=open\]\:slide-in-from-right {
+  --tw-enter-translate-x: 100%;
+}
+
+.group[data-state="open"] .group-data-\[state\=open\]\:slide-in-from-top {
+  --tw-enter-translate-y: -100%;
+}
+
+.group[data-state="open"] .group-data-\[state\=open\]\:slide-in-from-top-\[48\%\] {
+  --tw-enter-translate-y: -48%;
+}
+
+.group[data-state="closed"] .group-data-\[state\=closed\]\:duration-300 {
+  animation-duration: 300ms;
+}
+
+.group[data-state="open"] .group-data-\[state\=open\]\:duration-500 {
+  animation-duration: 500ms;
+}
+
+@media (min-width: 640px) {
+  .sm\:bottom-0 {
+    bottom: 0px;
+  }
+
+  .sm\:right-0 {
+    right: 0px;
+  }
+
+  .sm\:top-auto {
+    top: auto;
+  }
+
+  .sm\:flex {
+    display: flex;
+  }
+
+  .sm\:max-w-sm {
+    max-width: 24rem;
+  }
+
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+
+  .sm\:flex-col {
+    flex-direction: column;
+  }
+
+  .sm\:justify-end {
+    justify-content: flex-end;
+  }
+
+  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .sm\:rounded-lg {
+    border-radius: var(--radius);
+  }
+
+  .sm\:text-left {
+    text-align: left;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:max-w-\[420px\] {
+    max-width: 420px;
+  }
+
+  .md\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .md\:text-7xl {
+    font-size: 4.5rem;
+    line-height: 1;
+  }
+
+  .md\:tracking-wide {
+    letter-spacing: 0.025em;
+  }
+
+  .md\:tracking-wider {
+    letter-spacing: 0.05em;
+  }
+}
+
+.dark\:block:where(.dark, .dark *) {
+  display: block;
+}
+
+.dark\:flex:where(.dark, .dark *) {
+  display: flex;
+}
+
+.dark\:hidden:where(.dark, .dark *) {
+  display: none;
+}
+
+.dark\:border-destructive:where(.dark, .dark *) {
+  border-color: hsl(var(--destructive));
+}
+
+.dark\:bg-muted\/40:where(.dark, .dark *) {
+  background-color: hsl(var(--muted) / 0.4);
+}
+
+.dark\:from-white:where(.dark, .dark *) {
+  --tw-gradient-from: #fff var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.dark\:to-gray-300:where(.dark, .dark *) {
+  --tw-gradient-to: #d1d5db var(--tw-gradient-to-position);
+}
+
+.dark\:hover\:border-black:hover:where(.dark, .dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
+.hover\:dark\:border-black:where(.dark, .dark *):hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
+.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
+  padding-right: 0px;
+}
+
+.\[\&\>span\]\:line-clamp-1>span {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+.\[\&\>span\]\:translate-x-0>span {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.peer:checked ~ .peer-checked\:\[\&\>span\]\:flex>span {
+  display: flex;
+}
+
+.peer:checked ~ .peer-checked\:\[\&\>span\]\:translate-x-5>span {
+  --tw-translate-x: 1.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
+  --tw-translate-y: -3px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.\[\&\>svg\]\:absolute>svg {
+  position: absolute;
+}
+
+.\[\&\>svg\]\:left-4>svg {
+  left: 1rem;
+}
+
+.\[\&\>svg\]\:top-4>svg {
+  top: 1rem;
+}
+
+.\[\&\>svg\]\:text-destructive>svg {
+  color: hsl(var(--destructive));
+}
+
+.\[\&\>svg\]\:text-foreground>svg {
+  color: hsl(var(--foreground));
+}
+
+.\[\&\>svg\~\*\]\:pl-7>svg~* {
+  padding-left: 1.75rem;
+}
+
+.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
+  border-bottom-width: 0px;
+}
+
+.\[\&_p\]\:leading-relaxed p {
+  line-height: 1.625;
+}
+
+.\[\&_tr\:last-child\]\:border-0 tr:last-child {
+  border-width: 0px;
+}
+
+.\[\&_tr\]\:border-b tr {
+  border-bottom-width: 1px;
+}

pyproject.toml

@@ -0,0 +1,29 @@
+[project]
+name = "visual-retrieval-colpali"
+version = "0.1.0"
+description = "Visual retrieval with ColPali"
+readme = "README.md"
+requires-python = ">=3.10"
+license = { text = "Apache-2.0" }
+dependencies = [
+    "python-fasthtml",
+    "huggingface-hub",
+    "pyvespa@git+https://github.com/vespa-engine/pyvespa",
+    "vespacli",
+    "torch",
+    "vidore-benchmark[interpretability]>=4.0.0,<5.0.0",
+    "colpali-engine",
+    "einops",
+    "pypdf",
+    "setuptools",
+    "python-dotenv",
+    "shad4fast>=1.2.1",
+]
+
+# dev-dependencies
+[project.optional-dependencies]
+dev = [
+    "ruff",
+    "python-dotenv",
+    "huggingface_hub[cli]"
+]

query_vespa.py

@@ -0,0 +1,193 @@
+#!/usr/bin/env python3
+
+import os
+import torch
+from torch.utils.data import DataLoader
+from PIL import Image
+import numpy as np
+from typing import cast
+import asyncio
+
+from colpali_engine.models import ColPali, ColPaliProcessor
+from colpali_engine.utils.torch_utils import get_torch_device
+from vespa.application import Vespa
+from vespa.io import VespaQueryResponse
+from dotenv import load_dotenv
+from pathlib import Path
+
+MAX_QUERY_TERMS = 64
+SAVEDIR = Path(__file__) / "output" / "images"
+load_dotenv()
+
+
+def process_queries(processor, queries, image):
+    inputs = processor(
+        images=[image] * len(queries), text=queries, return_tensors="pt", padding=True
+    )
+    return inputs
+
+
+def display_query_results(query, response, hits=5):
+    query_time = response.json.get("timing", {}).get("searchtime", -1)
+    query_time = round(query_time, 2)
+    count = response.json.get("root", {}).get("fields", {}).get("totalCount", 0)
+    result_text = f"Query text: '{query}', query time {query_time}s, count={count}, top results:\n"
+
+    for i, hit in enumerate(response.hits[:hits]):
+        title = hit["fields"]["title"]
+        url = hit["fields"]["url"]
+        page = hit["fields"]["page_number"]
+        image = hit["fields"]["image"]
+        _id = hit["id"]
+        score = hit["relevance"]
+
+        result_text += f"\nPDF Result {i + 1}\n"
+        result_text += f"Title: {title}, page {page+1} with score {score:.2f}\n"
+        result_text += f"URL: {url}\n"
+        result_text += f"ID: {_id}\n"
+        # Optionally, save or display the image
+        # img_data = base64.b64decode(image)
+        # img_path = SAVEDIR / f"{title}.png"
+        # with open(f"{img_path}", "wb") as f:
+        #     f.write(img_data)
+    print(result_text)
+
+
+async def query_vespa_default(app, queries, qs):
+    async with app.asyncio(connections=1, total_timeout=120) as session:
+        for idx, query in enumerate(queries):
+            query_embedding = {k: v.tolist() for k, v in enumerate(qs[idx])}
+            response: VespaQueryResponse = await session.query(
+                yql="select documentid,title,url,image,page_number from pdf_page where userInput(@userQuery)",
+                ranking="default",
+                userQuery=query,
+                timeout=120,
+                hits=3,
+                body={"input.query(qt)": query_embedding, "presentation.timing": True},
+            )
+            assert response.is_successful()
+            display_query_results(query, response)
+
+
+async def query_vespa_nearest_neighbor(app, queries, qs):
+    # Using nearestNeighbor for retrieval
+    target_hits_per_query_tensor = (
+        20  # this is a hyper parameter that can be tuned for speed versus accuracy
+    )
+    async with app.asyncio(connections=1, total_timeout=180) as session:
+        for idx, query in enumerate(queries):
+            float_query_embedding = {k: v.tolist() for k, v in enumerate(qs[idx])}
+            binary_query_embeddings = dict()
+            for k, v in float_query_embedding.items():
+                binary_vector = (
+                    np.packbits(np.where(np.array(v) > 0, 1, 0))
+                    .astype(np.int8)
+                    .tolist()
+                )
+                binary_query_embeddings[k] = binary_vector
+                if len(binary_query_embeddings) >= MAX_QUERY_TERMS:
+                    print(
+                        f"Warning: Query has more than {MAX_QUERY_TERMS} terms. Truncating."
+                    )
+                    break
+
+            # The mixed tensors used in MaxSim calculations
+            # We use both binary and float representations
+            query_tensors = {
+                "input.query(qtb)": binary_query_embeddings,
+                "input.query(qt)": float_query_embedding,
+            }
+            # The query tensors used in the nearest neighbor calculations
+            for i in range(0, len(binary_query_embeddings)):
+                query_tensors[f"input.query(rq{i})"] = binary_query_embeddings[i]
+            nn = []
+            for i in range(0, len(binary_query_embeddings)):
+                nn.append(
+                    f"({{targetHits:{target_hits_per_query_tensor}}}nearestNeighbor(embedding,rq{i}))"
+                )
+            # We use an OR operator to combine the nearest neighbor operator
+            nn = " OR ".join(nn)
+            response: VespaQueryResponse = await session.query(
+                body={
+                    **query_tensors,
+                    "presentation.timing": True,
+                    "yql": f"select documentid, title, url, image, page_number from pdf_page where {nn}",
+                    "ranking.profile": "retrieval-and-rerank",
+                    "timeout": 120,
+                    "hits": 3,
+                },
+            )
+            assert response.is_successful(), response.json
+            display_query_results(query, response)
+
+
+def main():
+    vespa_app_url = os.environ.get(
+        "VESPA_APP_URL"
+    )  # Ensure this is set to your Vespa app URL
+    vespa_cloud_secret_token = os.environ.get("VESPA_CLOUD_SECRET_TOKEN")
+    if not vespa_app_url or not vespa_cloud_secret_token:
+        raise ValueError(
+            "Please set the VESPA_APP_URL and VESPA_CLOUD_SECRET_TOKEN environment variables"
+        )
+    # Instantiate Vespa connection
+    app = Vespa(url=vespa_app_url, vespa_cloud_secret_token=vespa_cloud_secret_token)
+    status_resp = app.get_application_status()
+    if status_resp.status_code != 200:
+        print(f"Failed to connect to Vespa at {vespa_app_url}")
+        return
+    else:
+        print(f"Connected to Vespa at {vespa_app_url}")
+    # Load the model
+    device = get_torch_device("auto")
+    print(f"Using device: {device}")
+
+    model_name = "vidore/colpali-v1.2"
+    processor_name = "google/paligemma-3b-mix-448"
+
+    model = cast(
+        ColPali,
+        ColPali.from_pretrained(
+            model_name,
+            torch_dtype=torch.bfloat16 if torch.cuda.is_available() else torch.float32,
+            device_map=device,
+        ),
+    ).eval()
+
+    processor = cast(ColPaliProcessor, ColPaliProcessor.from_pretrained(processor_name))
+
+    # Create dummy image
+    dummy_image = Image.new("RGB", (448, 448), (255, 255, 255))
+
+    # Define queries
+    queries = [
+        "Percentage of non-fresh water as source?",
+        "Policies related to nature risk?",
+        "How much of produced water is recycled?",
+    ]
+
+    # Obtain query embeddings
+    dataloader = DataLoader(
+        queries,
+        batch_size=1,
+        shuffle=False,
+        collate_fn=lambda x: process_queries(processor, x, dummy_image),
+    )
+    qs = []
+    for batch_query in dataloader:
+        with torch.no_grad():
+            batch_query = {k: v.to(model.device) for k, v in batch_query.items()}
+            embeddings_query = model(**batch_query)
+            qs.extend(list(torch.unbind(embeddings_query.to("cpu"))))
+
+    # Perform queries using default rank profile
+    print("Performing queries using default rank profile:")
+    asyncio.run(query_vespa_default(app, queries, qs))
+
+    # Perform queries using nearestNeighbor
+    print("Performing queries using nearestNeighbor:")
+    asyncio.run(query_vespa_nearest_neighbor(app, queries, qs))
+
+
+if __name__ == "__main__":
+    main()

static/js/highlightjs-theme.js

@@ -0,0 +1,23 @@
+(function () {
+    function getPreferredTheme() {
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            return 'dark';
+        }
+        return 'light';
+    }
+
+    function syncHighlightTheme() {
+        const link = document.getElementById('highlight-theme');
+        const preferredTheme = getPreferredTheme();
+        link.href = preferredTheme === 'dark' ?
+            'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/github-dark.min.css' :
+            'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/github.min.css';
+    }
+
+    // Apply the correct theme immediately
+    syncHighlightTheme();
+
+    // Observe changes in the 'dark' class on the <html> element
+    const observer = new MutationObserver(syncHighlightTheme);
+    observer.observe(document.documentElement, {attributes: true, attributeFilter: ['class']});
+})();

tailwind.config.js

@@ -0,0 +1,243 @@
+function filterDefault(values) {
+    return Object.fromEntries(
+        Object.entries(values).filter(([key]) => key !== "DEFAULT"),
+    );
+}
+
+/** @type {import('tailwindcss').Config} */
+export default {
+    darkMode: ["selector"],
+    content: [
+        "./**/*.py",
+        "./.venv/lib/python3.12/site-packages/shad4fast/**/*.{py,js}",
+    ],
+    theme: {
+        container: {
+            center: true,
+            padding: "2rem",
+            screens: {
+                "2xl": "1400px",
+            },
+        },
+        extend: {
+            animation: {
+                "accordion-down": "accordion-down 0.2s ease-out",
+                "accordion-up": "accordion-up 0.2s ease-out",
+            },
+            animationDelay: ({theme}) => ({
+                ...theme("transitionDelay"),
+            }),
+            animationDuration: ({theme}) => ({
+                0: "0ms",
+                ...theme("transitionDuration"),
+            }),
+            animationTimingFunction: ({theme}) => ({
+                ...theme("transitionTimingFunction"),
+            }),
+            animationFillMode: {
+                none: "none",
+                forwards: "forwards",
+                backwards: "backwards",
+                both: "both",
+            },
+            animationDirection: {
+                normal: "normal",
+                reverse: "reverse",
+                alternate: "alternate",
+                "alternate-reverse": "alternate-reverse",
+            },
+            animationOpacity: ({theme}) => ({
+                DEFAULT: 0,
+                ...theme("opacity"),
+            }),
+            animationTranslate: ({theme}) => ({
+                DEFAULT: "100%",
+                ...theme("translate"),
+            }),
+            animationScale: ({theme}) => ({
+                DEFAULT: 0,
+                ...theme("scale"),
+            }),
+            animationRotate: ({theme}) => ({
+                DEFAULT: "30deg",
+                ...theme("rotate"),
+            }),
+            animationRepeat: {
+                0: "0",
+                1: "1",
+                infinite: "infinite",
+            },
+            keyframes: {
+                enter: {
+                    from: {
+                        opacity: "var(--tw-enter-opacity, 1)",
+                        transform:
+                            "translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))",
+                    },
+                },
+                exit: {
+                    to: {
+                        opacity: "var(--tw-exit-opacity, 1)",
+                        transform:
+                            "translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))",
+                    },
+                },
+            },
+            colors: {
+                border: "hsl(var(--border))",
+                input: "hsl(var(--input))",
+                ring: "hsl(var(--ring))",
+                background: "hsl(var(--background))",
+                foreground: "hsl(var(--foreground))",
+                primary: {
+                    DEFAULT: "hsl(var(--primary))",
+                    foreground: "hsl(var(--primary-foreground))",
+                },
+                secondary: {
+                    DEFAULT: "hsl(var(--secondary))",
+                    foreground: "hsl(var(--secondary-foreground))",
+                },
+                destructive: {
+                    DEFAULT: "hsl(var(--destructive))",
+                    foreground: "hsl(var(--destructive-foreground))",
+                },
+                muted: {
+                    DEFAULT: "hsl(var(--muted))",
+                    foreground: "hsl(var(--muted-foreground))",
+                },
+                accent: {
+                    DEFAULT: "hsl(var(--accent))",
+                    foreground: "hsl(var(--accent-foreground))",
+                },
+                popover: {
+                    DEFAULT: "hsl(var(--popover))",
+                    foreground: "hsl(var(--popover-foreground))",
+                },
+                card: {
+                    DEFAULT: "hsl(var(--card))",
+                    foreground: "hsl(var(--card-foreground))",
+                },
+            },
+            borderRadius: {
+                lg: `var(--radius)`,
+                md: `calc(var(--radius) - 2px)`,
+                sm: "calc(var(--radius) - 4px)",
+            },
+        },
+    },
+    plugins: [
+        function ({addUtilities, matchUtilities, theme}) {
+            addUtilities({
+                "@keyframes enter": theme("keyframes.enter"),
+                "@keyframes exit": theme("keyframes.exit"),
+                ".animate-in": {
+                    animationName: "enter",
+                    animationDuration: theme("animationDuration.DEFAULT"),
+                    "--tw-enter-opacity": "initial",
+                    "--tw-enter-scale": "initial",
+                    "--tw-enter-rotate": "initial",
+                    "--tw-enter-translate-x": "initial",
+                    "--tw-enter-translate-y": "initial",
+                },
+                ".animate-out": {
+                    animationName: "exit",
+                    animationDuration: theme("animationDuration.DEFAULT"),
+                    "--tw-exit-opacity": "initial",
+                    "--tw-exit-scale": "initial",
+                    "--tw-exit-rotate": "initial",
+                    "--tw-exit-translate-x": "initial",
+                    "--tw-exit-translate-y": "initial",
+                },
+            });
+
+            matchUtilities(
+                {
+                    "fade-in": (value) => ({"--tw-enter-opacity": value}),
+                    "fade-out": (value) => ({"--tw-exit-opacity": value}),
+                },
+                {values: theme("animationOpacity")},
+            );
+
+            matchUtilities(
+                {
+                    "zoom-in": (value) => ({"--tw-enter-scale": value}),
+                    "zoom-out": (value) => ({"--tw-exit-scale": value}),
+                },
+                {values: theme("animationScale")},
+            );
+
+            matchUtilities(
+                {
+                    "spin-in": (value) => ({"--tw-enter-rotate": value}),
+                    "spin-out": (value) => ({"--tw-exit-rotate": value}),
+                },
+                {values: theme("animationRotate")},
+            );
+
+            matchUtilities(
+                {
+                    "slide-in-from-top": (value) => ({
+                        "--tw-enter-translate-y": `-${value}`,
+                    }),
+                    "slide-in-from-bottom": (value) => ({
+                        "--tw-enter-translate-y": value,
+                    }),
+                    "slide-in-from-left": (value) => ({
+                        "--tw-enter-translate-x": `-${value}`,
+                    }),
+                    "slide-in-from-right": (value) => ({
+                        "--tw-enter-translate-x": value,
+                    }),
+                    "slide-out-to-top": (value) => ({
+                        "--tw-exit-translate-y": `-${value}`,
+                    }),
+                    "slide-out-to-bottom": (value) => ({
+                        "--tw-exit-translate-y": value,
+                    }),
+                    "slide-out-to-left": (value) => ({
+                        "--tw-exit-translate-x": `-${value}`,
+                    }),
+                    "slide-out-to-right": (value) => ({
+                        "--tw-exit-translate-x": value,
+                    }),
+                },
+                {values: theme("animationTranslate")},
+            );
+
+            matchUtilities(
+                {duration: (value) => ({animationDuration: value})},
+                {values: filterDefault(theme("animationDuration"))},
+            );
+
+            matchUtilities(
+                {delay: (value) => ({animationDelay: value})},
+                {values: theme("animationDelay")},
+            );
+
+            matchUtilities(
+                {ease: (value) => ({animationTimingFunction: value})},
+                {values: filterDefault(theme("animationTimingFunction"))},
+            );
+
+            addUtilities({
+                ".running": {animationPlayState: "running"},
+                ".paused": {animationPlayState: "paused"},
+            });
+
+            matchUtilities(
+                {"fill-mode": (value) => ({animationFillMode: value})},
+                {values: theme("animationFillMode")},
+            );
+
+            matchUtilities(
+                {direction: (value) => ({animationDirection: value})},
+                {values: theme("animationDirection")},
+            );
+
+            matchUtilities(
+                {repeat: (value) => ({animationIterationCount: value})},
+                {values: theme("animationRepeat")},
+            );
+        },
+    ],
+};

tailwindcss

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:327703a4646081906e11d116ff4e8e43076466c3d269282bbe612555b9fe0c58
+size 47351504