Sync from https://github.com/felladrin/MiniSearch

.dockerignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+

.editorconfig

@@ -0,0 +1,7 @@
+[*]
+charset = utf-8
+insert_final_newline = true
+end_of_line = lf
+indent_style = space
+indent_size = 2
+max_line_length = 80

.env.example

@@ -0,0 +1,33 @@
+# A comma-separated list of access keys. Example: `ACCESS_KEYS="ABC123,JUD71F,HUWE3"`. Leave blank for unrestricted access.
+ACCESS_KEYS=""
+
+# The timeout in hours for access key validation. Set to 0 to require validation on every page load.
+ACCESS_KEY_TIMEOUT_HOURS="24"
+
+# The default model ID for WebLLM with F16 shaders.
+WEBLLM_DEFAULT_F16_MODEL_ID="Qwen2.5-0.5B-Instruct-q4f16_1-MLC"
+
+# The default model ID for WebLLM with F32 shaders.
+WEBLLM_DEFAULT_F32_MODEL_ID="Qwen2.5-0.5B-Instruct-q4f32_1-MLC"
+
+# The default model ID for Wllama.
+WLLAMA_DEFAULT_MODEL_ID="qwen-2.5-0.5b"
+
+# The base URL for the internal OpenAI compatible API. Example: `INTERNAL_OPENAI_COMPATIBLE_API_BASE_URL="https://api.openai.com/v1"`. Leave blank to disable internal OpenAI compatible API.
+INTERNAL_OPENAI_COMPATIBLE_API_BASE_URL=""
+
+# The access key for the internal OpenAI compatible API.
+INTERNAL_OPENAI_COMPATIBLE_API_KEY=""
+
+# The model for the internal OpenAI compatible API.
+INTERNAL_OPENAI_COMPATIBLE_API_MODEL=""
+
+# The name of the internal OpenAI compatible API, displayed in the UI.
+INTERNAL_OPENAI_COMPATIBLE_API_NAME="Internal API"
+
+# The type of inference to use by default. The possible values are:
+# "browser" -> In the browser (Private)
+# "openai" -> Remote Server (API)
+# "horde" -> AI Horde (Pre-configured)
+# "internal" -> $INTERNAL_OPENAI_COMPATIBLE_API_NAME
+DEFAULT_INFERENCE_TYPE="browser"

.github/workflows/ai-review.yml

@@ -0,0 +1,129 @@
+name: Review Pull Request with AI
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+    branches: ["main"]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  ai-review:
+    if: ${{ !contains(github.event.pull_request.labels.*.name, 'skip-ai-review') }}
+    continue-on-error: true
+    runs-on: ubuntu-latest
+    name: AI Review
+    permissions:
+      pull-requests: write
+      contents: read
+    timeout-minutes: 30
+    env:
+      OPENROUTER_MODEL: deepseek/deepseek-chat
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Create temporary directory
+        run: mkdir -p /tmp/pr_review
+
+      - name: Process PR description
+        id: process_pr
+        run: |
+          PR_BODY_ESCAPED=$(cat << 'EOF'
+          ${{ github.event.pull_request.body }}
+          EOF
+          )
+          PROCESSED_BODY=$(echo "$PR_BODY_ESCAPED" | sed -E 's/\[(.*?)\]\(.*?\)/\1/g')
+          echo "$PROCESSED_BODY" > /tmp/pr_review/processed_body.txt
+
+      - name: Fetch branches and output the diff
+        run: |
+          git fetch origin main:main
+          git fetch origin pull/${{ github.event.pull_request.number }}/head:pr-branch
+          git diff main..pr-branch > /tmp/pr_review/diff.txt
+
+      - name: Prepare review request
+        id: prepare_request
+        run: |
+          PR_TITLE=$(echo "${{ github.event.pull_request.title }}" | sed 's/[()]/\\&/g')
+          DIFF_CONTENT=$(cat /tmp/pr_review/diff.txt)
+          PROCESSED_BODY=$(cat /tmp/pr_review/processed_body.txt)
+
+          jq -n \
+            --arg model "$OPENROUTER_MODEL" \
+            --arg system "You are an experienced developer reviewing a Pull Request. You focus only on what matters and provide concise, actionable feedback.
+
+          Review Context:
+          Repository Name: \"${{ github.event.repository.name }}\"
+          Repository Description: \"${{ github.event.repository.description }}\"
+          Branch: \"${{ github.event.pull_request.head.ref }}\"
+          PR Title: \"$PR_TITLE\"
+
+          Guidelines:
+          1. Only comment on issues that:
+            - Could cause bugs or security issues
+            - Significantly impact performance
+            - Make the code harder to maintain
+            - Violate critical best practices
+
+          2. For each issue:
+            - Point to the specific line/file
+            - Explain why it's a problem
+            - Suggest a concrete fix
+            
+          3. Praise exceptional solutions briefly, only if truly innovative
+
+          4. Skip commenting on:
+            - Minor style issues
+            - Obvious changes
+            - Working code that could be marginally improved
+            - Things that are just personal preference
+
+          Remember:
+          Less is more. If the code is good and working, just say so, with a short message." \
+            --arg user "This is the description of the pull request:
+          \`\`\`markdown
+          $PROCESSED_BODY
+          \`\`\`
+
+          And here is the diff of the changes, for you to review:
+          \`\`\`diff
+          $DIFF_CONTENT
+          \`\`\`" \
+            '{
+              "model": $model,
+              "messages": [
+                {"role": "system", "content": $system},
+                {"role": "user", "content": $user}
+              ]
+            }' > /tmp/pr_review/request.json
+
+      - name: Get AI Review
+        id: ai_review
+        run: |
+          RESPONSE=$(curl -s https://openrouter.ai/api/v1/chat/completions \
+            -H "Content-Type: application/json" \
+            -H "Authorization: Bearer ${{ secrets.OPENROUTER_API_KEY }}" \
+            -d @/tmp/pr_review/request.json)
+
+          echo "### Review" > /tmp/pr_review/response.txt
+          echo "" >> /tmp/pr_review/response.txt
+          echo "$RESPONSE" | jq -r '.choices[0].message.content' >> /tmp/pr_review/response.txt
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v3
+        id: find_comment
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-author: "github-actions[bot]"
+          body-includes: "### Review"
+
+      - name: Post or Update PR Review
+        uses: peter-evans/create-or-update-comment@v4
+        with:
+          comment-id: ${{ steps.find_comment.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body-path: /tmp/pr_review/response.txt
+          edit-mode: replace

.github/workflows/deploy.yml

@@ -0,0 +1,54 @@
+name: Deploy
+
+on:
+  workflow_dispatch:
+
+jobs:
+  build-and-push-image:
+    name: Publish Docker image to GitHub Packages
+    runs-on: ubuntu-latest
+    env:
+      REGISTRY: ghcr.io
+      IMAGE_NAME: ${{ github.repository }}
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          platforms: linux/amd64,linux/arm64
+
+  sync-to-hf:
+    name: Sync to HuggingFace Spaces
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          lfs: true
+      - uses: JacobLinCool/huggingface-sync@v1
+        with:
+          github: ${{ secrets.GITHUB_TOKEN }}
+          user: ${{ vars.HF_SPACE_OWNER }}
+          space: ${{ vars.HF_SPACE_NAME }}
+          token: ${{ secrets.HF_TOKEN }}
+          configuration: "hf-space-config.yml"

.github/workflows/on-pull-request-to-main.yml

@@ -0,0 +1,9 @@
+name: On Pull Request To Main
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+    branches: ["main"]
+jobs:
+  test-lint-ping:
+    if: ${{ !contains(github.event.pull_request.labels.*.name, 'skip-test-lint-ping') }}
+    uses: ./.github/workflows/reusable-test-lint-ping.yml

.github/workflows/on-push-to-main.yml

@@ -0,0 +1,7 @@
+name: On Push To Main
+on:
+  push:
+    branches: ["main"]
+jobs:
+  test-lint-ping:
+    uses: ./.github/workflows/reusable-test-lint-ping.yml

.github/workflows/reusable-test-lint-ping.yml

@@ -0,0 +1,25 @@
+on:
+  workflow_call:
+jobs:
+  check-code-quality:
+    name: Check Code Quality
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "npm"
+      - run: npm ci --ignore-scripts
+      - run: npm test
+      - run: npm run lint
+  check-docker-container:
+    needs: [check-code-quality]
+    name: Check Docker Container
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: docker compose -f docker-compose.production.yml up -d
+      - name: Check if main page is available
+        run: until curl -s -o /dev/null -w "%{http_code}" localhost:7860 | grep 200; do sleep 1; done
+      - run: docker compose -f docker-compose.production.yml down

.github/workflows/update-searxng-docker-image.yml

@@ -0,0 +1,44 @@
+name: Update SearXNG Docker Image
+
+on:
+  schedule:
+    - cron: "0 14 * * *"
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  update-searxng-image:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Get latest SearXNG image tag
+        id: get_latest_tag
+        run: |
+          LATEST_TAG=$(curl -s "https://hub.docker.com/v2/repositories/searxng/searxng/tags/?page_size=3&ordering=last_updated" | jq -r '.results[] | select(.name != "latest-build-cache" and .name != "latest") | .name' | head -n 1)
+          echo "LATEST_TAG=${LATEST_TAG}" >> $GITHUB_OUTPUT
+
+      - name: Update Dockerfile
+        run: |
+          sed -i 's|FROM searxng/searxng:.*|FROM searxng/searxng:${{ steps.get_latest_tag.outputs.LATEST_TAG }}|' Dockerfile
+
+      - name: Check for changes
+        id: git_status
+        run: |
+          git diff --exit-code || echo "changes=true" >> $GITHUB_OUTPUT
+
+      - name: Commit and push if changed
+        if: steps.git_status.outputs.changes == 'true'
+        run: |
+          git config --local user.email "github-actions[bot]@users.noreply.github.com"
+          git config --local user.name "github-actions[bot]"
+          git add Dockerfile
+          git commit -m "Update SearXNG Docker image to tag ${{ steps.get_latest_tag.outputs.LATEST_TAG }}"
+          git push
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,7 @@
+node_modules
+.DS_Store
+/client/dist
+/server/models
+.vscode
+/vite-build-stats.html
+.env

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps = true

Dockerfile

@@ -0,0 +1,107 @@
+# Build llama.cpp in a separate stage
+FROM alpine:3.21 AS llama-builder
+
+# Install build dependencies
+RUN apk add --update \
+  build-base \
+  cmake \
+  ccache \
+  git
+
+# Build llama.cpp server and collect libraries
+RUN cd /tmp && \
+  git clone https://github.com/ggerganov/llama.cpp.git --depth=1 && \
+  cd llama.cpp && \
+  cmake -B build -DGGML_NATIVE=OFF && \
+  cmake --build build --config Release -j --target llama-server && \
+  mkdir -p /usr/local/lib/llama && \
+  find build -type f \( -name "libllama.so" -o -name "libggml.so" -o -name "libggml-base.so" -o -name "libggml-cpu.so" \) -exec cp {} /usr/local/lib/llama/ \;
+
+# Use the SearXNG image as the base for final image
+FROM searxng/searxng:2025.2.9-a1e2b2546
+
+# Set the default port to 7860 if not provided
+ENV PORT=7860
+
+# Expose the port specified by the PORT environment variable
+EXPOSE $PORT
+
+# Install necessary packages using Alpine's package manager
+RUN apk add --update \
+  nodejs \
+  npm \
+  git \
+  build-base
+
+# Copy llama.cpp artifacts from builder
+COPY --from=llama-builder /tmp/llama.cpp/build/bin/llama-server /usr/local/bin/
+COPY --from=llama-builder /usr/local/lib/llama/* /usr/local/lib/
+RUN ldconfig /usr/local/lib
+
+# Set the SearXNG settings folder path
+ARG SEARXNG_SETTINGS_FOLDER=/etc/searxng
+
+# Modify SearXNG configuration:
+# 1. Change output format from HTML to JSON
+# 2. Remove user switching in the entrypoint script
+# 3. Create and set permissions for the settings folder
+RUN sed -i 's/- html/- json/' /usr/local/searxng/searx/settings.yml \
+  && sed -i 's/su-exec searxng:searxng //' /usr/local/searxng/dockerfiles/docker-entrypoint.sh \
+  && mkdir -p ${SEARXNG_SETTINGS_FOLDER}  \
+  && chmod 777 ${SEARXNG_SETTINGS_FOLDER}
+
+# Set up user and directory structure
+ARG USERNAME=user
+ARG HOME_DIR=/home/${USERNAME}
+ARG APP_DIR=${HOME_DIR}/app
+
+# Create a non-root user and set up the application directory
+RUN adduser -D -u 1000 ${USERNAME} \
+  && mkdir -p ${APP_DIR} \
+  && chown -R ${USERNAME}:${USERNAME} ${HOME_DIR}
+
+# Switch to the non-root user
+USER ${USERNAME}
+
+# Set the working directory to the application directory
+WORKDIR ${APP_DIR}
+
+# Define environment variables that can be passed to the container during build.
+# This approach allows for dynamic configuration without relying on a `.env` file,
+# which might not be suitable for all deployment scenarios.
+ARG ACCESS_KEYS
+ARG ACCESS_KEY_TIMEOUT_HOURS
+ARG WEBLLM_DEFAULT_F16_MODEL_ID
+ARG WEBLLM_DEFAULT_F32_MODEL_ID
+ARG WLLAMA_DEFAULT_MODEL_ID
+ARG INTERNAL_OPENAI_COMPATIBLE_API_BASE_URL
+ARG INTERNAL_OPENAI_COMPATIBLE_API_KEY
+ARG INTERNAL_OPENAI_COMPATIBLE_API_MODEL
+ARG INTERNAL_OPENAI_COMPATIBLE_API_NAME
+ARG DEFAULT_INFERENCE_TYPE
+ARG HOST
+ARG HMR_PORT
+ARG ALLOWED_HOSTS
+
+# Copy package.json, package-lock.json, and .npmrc files
+COPY --chown=${USERNAME}:${USERNAME} ./package.json ./package.json
+COPY --chown=${USERNAME}:${USERNAME} ./package-lock.json ./package-lock.json
+COPY --chown=${USERNAME}:${USERNAME} ./.npmrc ./.npmrc
+
+# Install Node.js dependencies
+RUN npm ci
+
+# Copy the rest of the application files
+COPY --chown=${USERNAME}:${USERNAME} . .
+
+# Configure Git to treat the app directory as safe
+RUN git config --global --add safe.directory ${APP_DIR}
+
+# Build the application
+RUN npm run build
+
+# Set the entrypoint to use a shell
+ENTRYPOINT [ "/bin/sh", "-c" ]
+
+# Run SearXNG in the background and start the Node.js application using PM2
+CMD [ "(/usr/local/searxng/dockerfiles/docker-entrypoint.sh -f > /dev/null 2>&1) & (npx pm2 start ecosystem.config.cjs && npx pm2 logs production-server)" ]

README.md

@@ -0,0 +1,139 @@
+---
+title: MiniSearch
+emoji: 👌🔍
+colorFrom: yellow
+colorTo: yellow
+sdk: docker
+short_description: Minimalist web-searching app with browser-based AI assistant
+pinned: true
+custom_headers:
+  cross-origin-embedder-policy: require-corp
+  cross-origin-opener-policy: same-origin
+  cross-origin-resource-policy: cross-origin
+---
+
+# MiniSearch
+
+A minimalist web-searching app with an AI assistant that runs directly from your browser.
+
+Live demo: https://felladrin-minisearch.hf.space
+
+## Screenshot
+
+![MiniSearch Screenshot](https://github.com/user-attachments/assets/f8d72a8e-a725-42e9-9358-e6ebade2acb2)
+
+## Features
+
+- **Privacy-focused**: [No tracking, no ads, no data collection](https://docs.searxng.org/own-instance.html#how-does-searxng-protect-privacy)
+- **Easy to use**: Minimalist yet intuitive interface for all users
+- **Cross-platform**: Models run inside the browser, both on desktop and mobile
+- **Integrated**: Search from the browser address bar by setting it as the default search engine
+- **Efficient**: Models are loaded and cached only when needed
+- **Customizable**: Tweakable settings for search results and text generation
+- **Open-source**: [The code is available for inspection and contribution at GitHub](https://github.com/felladrin/MiniSearch)
+
+## Prerequisites
+
+- [Docker](https://docs.docker.com/get-docker/)
+
+## Getting started
+
+Here are the easiest ways to get started with MiniSearch. Pick the one that suits you best.
+
+**Option 1** - Use [MiniSearch's Docker Image](https://github.com/felladrin/MiniSearch/pkgs/container/minisearch) by running in your terminal:
+
+```bash
+docker run -p 7860:7860 ghcr.io/felladrin/minisearch:main
+```
+
+**Option 2** - Add MiniSearch's Docker Image to your existing Docker Compose file:
+
+```yaml
+services:
+  minisearch:
+    image: ghcr.io/felladrin/minisearch:main
+    ports:
+      - "7860:7860"
+```
+
+**Option 3** - Build from source by [downloading the repository files](https://github.com/felladrin/MiniSearch/archive/refs/heads/main.zip) and running:
+
+```bash
+docker compose -f docker-compose.production.yml up --build
+```
+
+Once the container is running, open http://localhost:7860 in your browser and start searching!
+
+## Frequently asked questions
+
+<details>
+  <summary>How do I search via the browser's address bar?</summary>
+  <p>
+    You can set MiniSearch as your browser's address-bar search engine using the pattern <code>http://localhost:7860/?q=%s</code>, in which your search term replaces <code>%s</code>.
+  </p>
+</details>
+
+<details>
+  <summary>How do I search via Raycast?</summary>
+  <p>
+    You can add <a href="https://ray.so/quicklinks/shared?quicklinks=%7B%22link%22:%22https:%5C/%5C/felladrin-minisearch.hf.space%5C/?q%3D%7BQuery%7D%22,%22name%22:%22MiniSearch%22%7D" target="_blank">this Quicklink</a> to Raycast, so typing your query will open MiniSearch with the search results. You can also edit it to point to your own domain.
+  </p>
+  <img width="744" alt="image" src="https://github.com/user-attachments/assets/521dca22-c77b-42de-8cc8-9feb06f9a97e">
+</details>
+
+<details>
+  <summary>Can I use custom models via OpenAI-Compatible API?</summary>
+  <p>
+    Yes! For this, open the Menu and change the "AI Processing Location" to <code>Remote server (API)</code>. Then configure the Base URL, and optionally set an API Key and a Model to use.
+  </p>
+</details>
+
+<details>
+  <summary>How do I restrict the access to my MiniSearch instance via password?</summary>
+  <p>
+    Create a <code>.env</code> file and set a value for <code>ACCESS_KEYS</code>. Then reset the MiniSearch docker container.
+  </p>
+  <p>
+    For example, if you to set the password to <code>PepperoniPizza</code>, then this is what you should add to your <code>.env</code>:<br/>
+    <code>ACCESS_KEYS="PepperoniPizza"</code>
+  </p>
+  <p>
+    You can find more examples in the <code>.env.example</code> file.
+  </p>
+</details>
+
+<details>
+  <summary>I want to serve MiniSearch to other users, allowing them to use my own OpenAI-Compatible API key, but without revealing it to them. Is it possible?</summary>
+  <p>Yes! In MiniSearch, we call this text-generation feature "Internal OpenAI-Compatible API". To use this it:</p>
+  <ol>
+    <li>Set up your OpenAI-Compatible API endpoint by configuring the following environment variables in your <code>.env</code> file:
+      <ul>
+        <li><code>INTERNAL_OPENAI_COMPATIBLE_API_BASE_URL</code>: The base URL for your API</li>
+        <li><code>INTERNAL_OPENAI_COMPATIBLE_API_KEY</code>: Your API access key</li>
+        <li><code>INTERNAL_OPENAI_COMPATIBLE_API_MODEL</code>: The model to use</li>
+        <li><code>INTERNAL_OPENAI_COMPATIBLE_API_NAME</code>: The name to display in the UI</li>
+      </ul>
+    </li>
+    <li>Restart MiniSearch server.</li>
+    <li>In the MiniSearch menu, select the new option (named as per your <code>INTERNAL_OPENAI_COMPATIBLE_API_NAME</code> setting) from the "AI Processing Location" dropdown.</li>
+  </ol>
+</details>
+
+<details>
+  <summary>How can I contribute to the development of this tool?</summary>
+  <p>Fork this repository and clone it. Then, start the development server by running the following command:</p>
+  <p><code>docker compose up</code></p>
+  <p>Make your changes, push them to your fork, and open a pull request! All contributions are welcome!</p>
+</details>
+
+<details>
+  <summary>Why is MiniSearch built upon SearXNG's Docker Image and using a single image instead of composing it from multiple services?</summary>
+  <p>There are a few reasons for this:</p>
+  <ul>
+    <li>MiniSearch utilizes SearXNG as its meta-search engine.</li>
+    <li>Manual installation of SearXNG is not trivial, so we use the docker image they provide, which has everything set up.</li>
+    <li>SearXNG only provides a Docker Image based on Alpine Linux.</li>
+    <li>The user of the image needs to be customized in a specific way to run on HuggingFace Spaces, where MiniSearch's demo runs.</li>
+    <li>HuggingFace only accepts a single docker image. It doesn't run docker compose or multiple images, unfortunately.</li>
+  </ul>
+</details>

biome.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "ignore": []
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  }
+}

client/components/AiResponse/AiModelDownloadAllowanceContent.tsx

@@ -0,0 +1,62 @@
+import { Alert, Button, Group, Text } from "@mantine/core";
+import { IconCheck, IconInfoCircle, IconX } from "@tabler/icons-react";
+import { usePubSub } from "create-pubsub/react";
+import { useState } from "react";
+import { addLogEntry } from "../../modules/logEntries";
+import { settingsPubSub } from "../../modules/pubSub";
+
+export default function AiModelDownloadAllowanceContent() {
+  const [settings, setSettings] = usePubSub(settingsPubSub);
+  const [hasDeniedDownload, setDeniedDownload] = useState(false);
+
+  const handleAccept = () => {
+    setSettings({
+      ...settings,
+      allowAiModelDownload: true,
+    });
+    addLogEntry("User allowed the AI model download");
+  };
+
+  const handleDecline = () => {
+    setDeniedDownload(true);
+    addLogEntry("User denied the AI model download");
+  };
+
+  return hasDeniedDownload ? null : (
+    <Alert
+      variant="light"
+      color="blue"
+      title="Allow AI model download?"
+      icon={<IconInfoCircle />}
+    >
+      <Text size="sm" mb="md">
+        To obtain AI responses, a language model needs to be downloaded to your
+        browser. Enabling this option lets the app store it and load it
+        instantly on subsequent uses.
+      </Text>
+      <Text size="sm" mb="md">
+        Please note that the download size ranges from 100 MB to 4 GB, depending
+        on the model you select in the Menu, so it's best to avoid using mobile
+        data for this.
+      </Text>
+      <Group justify="flex-end" mt="md">
+        <Button
+          variant="subtle"
+          color="gray"
+          leftSection={<IconX size="1rem" />}
+          onClick={handleDecline}
+          size="xs"
+        >
+          Not now
+        </Button>
+        <Button
+          leftSection={<IconCheck size="1rem" />}
+          onClick={handleAccept}
+          size="xs"
+        >
+          Allow download
+        </Button>
+      </Group>
+    </Alert>
+  );
+}

client/components/AiResponse/AiResponseContent.tsx

@@ -0,0 +1,209 @@
+import {
+  ActionIcon,
+  Alert,
+  Badge,
+  Box,
+  Card,
+  Group,
+  ScrollArea,
+  Text,
+  Tooltip,
+} from "@mantine/core";
+import {
+  IconArrowsMaximize,
+  IconArrowsMinimize,
+  IconHandStop,
+  IconInfoCircle,
+  IconRefresh,
+  IconVolume2,
+} from "@tabler/icons-react";
+import type { PublishFunction } from "create-pubsub";
+import { usePubSub } from "create-pubsub/react";
+import { type ReactNode, Suspense, lazy, useMemo, useState } from "react";
+import { addLogEntry } from "../../modules/logEntries";
+import { settingsPubSub } from "../../modules/pubSub";
+import { searchAndRespond } from "../../modules/textGeneration";
+
+const FormattedMarkdown = lazy(() => import("./FormattedMarkdown"));
+const CopyIconButton = lazy(() => import("./CopyIconButton"));
+
+export default function AiResponseContent({
+  textGenerationState,
+  response,
+  setTextGenerationState,
+}: {
+  textGenerationState: string;
+  response: string;
+  setTextGenerationState: PublishFunction<
+    | "failed"
+    | "awaitingSearchResults"
+    | "preparingToGenerate"
+    | "idle"
+    | "loadingModel"
+    | "generating"
+    | "interrupted"
+    | "completed"
+  >;
+}) {
+  const [settings, setSettings] = usePubSub(settingsPubSub);
+  const [isSpeaking, setIsSpeaking] = useState(false);
+
+  const ConditionalScrollArea = useMemo(
+    () =>
+      ({ children }: { children: ReactNode }) => {
+        return settings.enableAiResponseScrolling ? (
+          <ScrollArea.Autosize mah={300} type="auto" offsetScrollbars>
+            {children}
+          </ScrollArea.Autosize>
+        ) : (
+          <Box>{children}</Box>
+        );
+      },
+    [settings.enableAiResponseScrolling],
+  );
+
+  function speakResponse(text: string) {
+    if (isSpeaking) {
+      self.speechSynthesis.cancel();
+      setIsSpeaking(false);
+      return;
+    }
+
+    const prepareTextForSpeech = (textToClean: string) => {
+      const withoutLinks = textToClean.replace(/\[([^\]]+)\]\([^)]+\)/g, "");
+      const withoutMarkdown = withoutLinks.replace(/[#*`_~\[\]]/g, "");
+      return withoutMarkdown;
+    };
+
+    const utterance = new SpeechSynthesisUtterance(prepareTextForSpeech(text));
+
+    const voices = self.speechSynthesis.getVoices();
+
+    if (voices.length > 0 && settings.selectedVoiceId) {
+      const voice = voices.find(
+        (voice) => voice.voiceURI === settings.selectedVoiceId,
+      );
+
+      if (voice) {
+        utterance.voice = voice;
+        utterance.lang = voice.lang;
+      }
+    }
+
+    utterance.onerror = () => {
+      addLogEntry("Failed to speak response");
+      setIsSpeaking(false);
+    };
+
+    utterance.onend = () => setIsSpeaking(false);
+
+    setIsSpeaking(true);
+    self.speechSynthesis.speak(utterance);
+  }
+
+  return (
+    <Card withBorder shadow="sm" radius="md">
+      <Card.Section withBorder inheritPadding py="xs">
+        <Group justify="space-between">
+          <Group gap="xs" align="center">
+            <Text fw={500}>
+              {textGenerationState === "generating"
+                ? "Generating AI Response..."
+                : "AI Response"}
+            </Text>
+            {textGenerationState === "interrupted" && (
+              <Badge variant="light" color="yellow" size="xs">
+                Interrupted
+              </Badge>
+            )}
+          </Group>
+          <Group gap="xs" align="center">
+            {textGenerationState === "generating" ? (
+              <Tooltip label="Interrupt generation">
+                <ActionIcon
+                  onClick={() => setTextGenerationState("interrupted")}
+                  variant="subtle"
+                  color="gray"
+                >
+                  <IconHandStop size={16} />
+                </ActionIcon>
+              </Tooltip>
+            ) : (
+              <Tooltip label="Regenerate response">
+                <ActionIcon
+                  onClick={() => searchAndRespond()}
+                  variant="subtle"
+                  color="gray"
+                >
+                  <IconRefresh size={16} />
+                </ActionIcon>
+              </Tooltip>
+            )}
+            <Tooltip
+              label={isSpeaking ? "Stop speaking" : "Listen to response"}
+            >
+              <ActionIcon
+                onClick={() => speakResponse(response)}
+                variant="subtle"
+                color={isSpeaking ? "blue" : "gray"}
+              >
+                <IconVolume2 size={16} />
+              </ActionIcon>
+            </Tooltip>
+            {settings.enableAiResponseScrolling ? (
+              <Tooltip label="Show full response without scroll bar">
+                <ActionIcon
+                  onClick={() => {
+                    setSettings({
+                      ...settings,
+                      enableAiResponseScrolling: false,
+                    });
+                  }}
+                  variant="subtle"
+                  color="gray"
+                >
+                  <IconArrowsMaximize size={16} />
+                </ActionIcon>
+              </Tooltip>
+            ) : (
+              <Tooltip label="Enable scroll bar">
+                <ActionIcon
+                  onClick={() => {
+                    setSettings({
+                      ...settings,
+                      enableAiResponseScrolling: true,
+                    });
+                  }}
+                  variant="subtle"
+                  color="gray"
+                >
+                  <IconArrowsMinimize size={16} />
+                </ActionIcon>
+              </Tooltip>
+            )}
+            <Suspense>
+              <CopyIconButton value={response} tooltipLabel="Copy response" />
+            </Suspense>
+          </Group>
+        </Group>
+      </Card.Section>
+      <Card.Section withBorder>
+        <ConditionalScrollArea>
+          <Suspense>
+            <FormattedMarkdown>{response}</FormattedMarkdown>
+          </Suspense>
+        </ConditionalScrollArea>
+        {textGenerationState === "failed" && (
+          <Alert
+            variant="light"
+            color="yellow"
+            title="Failed to generate response"
+            icon={<IconInfoCircle />}
+          >
+            Could not generate response. Please try refreshing the page.
+          </Alert>
+        )}
+      </Card.Section>
+    </Card>
+  );
+}

client/components/AiResponse/AiResponseSection.tsx

@@ -0,0 +1,105 @@
+import { usePubSub } from "create-pubsub/react";
+import { Suspense, lazy, useMemo } from "react";
+import {
+  modelLoadingProgressPubSub,
+  modelSizeInMegabytesPubSub,
+  queryPubSub,
+  responsePubSub,
+  settingsPubSub,
+  textGenerationStatePubSub,
+} from "../../modules/pubSub";
+
+const AiResponseContent = lazy(() => import("./AiResponseContent"));
+const PreparingContent = lazy(() => import("./PreparingContent"));
+const LoadingModelContent = lazy(() => import("./LoadingModelContent"));
+const ChatInterface = lazy(() => import("./ChatInterface"));
+const AiModelDownloadAllowanceContent = lazy(
+  () => import("./AiModelDownloadAllowanceContent"),
+);
+
+export default function AiResponseSection() {
+  const [query] = usePubSub(queryPubSub);
+  const [response] = usePubSub(responsePubSub);
+  const [textGenerationState, setTextGenerationState] = usePubSub(
+    textGenerationStatePubSub,
+  );
+  const [modelLoadingProgress] = usePubSub(modelLoadingProgressPubSub);
+  const [settings] = usePubSub(settingsPubSub);
+  const [modelSizeInMegabytes] = usePubSub(modelSizeInMegabytesPubSub);
+
+  return useMemo(() => {
+    if (!settings.enableAiResponse || textGenerationState === "idle") {
+      return null;
+    }
+
+    const generatingStates = [
+      "generating",
+      "interrupted",
+      "completed",
+      "failed",
+    ];
+    if (generatingStates.includes(textGenerationState)) {
+      return (
+        <>
+          <Suspense>
+            <AiResponseContent
+              textGenerationState={textGenerationState}
+              response={response}
+              setTextGenerationState={setTextGenerationState}
+            />
+          </Suspense>
+          {textGenerationState === "completed" && (
+            <Suspense>
+              <ChatInterface initialQuery={query} initialResponse={response} />
+            </Suspense>
+          )}
+        </>
+      );
+    }
+
+    if (textGenerationState === "loadingModel") {
+      return (
+        <Suspense>
+          <LoadingModelContent
+            modelLoadingProgress={modelLoadingProgress}
+            modelSizeInMegabytes={modelSizeInMegabytes}
+          />
+        </Suspense>
+      );
+    }
+
+    if (textGenerationState === "preparingToGenerate") {
+      return (
+        <Suspense>
+          <PreparingContent textGenerationState={textGenerationState} />
+        </Suspense>
+      );
+    }
+
+    if (textGenerationState === "awaitingSearchResults") {
+      return (
+        <Suspense>
+          <PreparingContent textGenerationState={textGenerationState} />
+        </Suspense>
+      );
+    }
+
+    if (textGenerationState === "awaitingModelDownloadAllowance") {
+      return (
+        <Suspense>
+          <AiModelDownloadAllowanceContent />
+        </Suspense>
+      );
+    }
+
+    return null;
+  }, [
+    settings.enableAiResponse,
+    textGenerationState,
+    response,
+    query,
+    modelLoadingProgress,
+    modelSizeInMegabytes,
+    setTextGenerationState,
+  ]);
+}

client/components/AiResponse/ChatInterface.tsx

@@ -0,0 +1,186 @@
+import {
+  Button,
+  Card,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  Textarea,
+} from "@mantine/core";
+import { IconSend } from "@tabler/icons-react";
+import { usePubSub } from "create-pubsub/react";
+import type { ChatMessage } from "gpt-tokenizer/GptEncoding";
+import {
+  type KeyboardEvent,
+  Suspense,
+  lazy,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { handleEnterKeyDown } from "../../modules/keyboard";
+import { addLogEntry } from "../../modules/logEntries";
+import { settingsPubSub } from "../../modules/pubSub";
+import { generateChatResponse } from "../../modules/textGeneration";
+
+const FormattedMarkdown = lazy(() => import("./FormattedMarkdown"));
+const CopyIconButton = lazy(() => import("./CopyIconButton"));
+
+export default function ChatInterface({
+  initialQuery,
+  initialResponse,
+}: {
+  initialQuery: string;
+  initialResponse: string;
+}) {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [input, setInput] = useState("");
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [streamedResponse, setStreamedResponse] = useState("");
+  const latestResponseRef = useRef("");
+  const [settings] = usePubSub(settingsPubSub);
+
+  useEffect(() => {
+    setMessages([
+      { role: "user", content: initialQuery },
+      { role: "assistant", content: initialResponse },
+    ]);
+  }, [initialQuery, initialResponse]);
+
+  const handleSend = async () => {
+    if (input.trim() === "" || isGenerating) return;
+
+    const newMessages: ChatMessage[] = [
+      ...messages,
+      { role: "user", content: input },
+    ];
+    setMessages(newMessages);
+    setInput("");
+    setIsGenerating(true);
+    setStreamedResponse("");
+    latestResponseRef.current = "";
+
+    try {
+      addLogEntry("User sent a follow-up question");
+      await generateChatResponse(newMessages, (partialResponse) => {
+        setStreamedResponse(partialResponse);
+        latestResponseRef.current = partialResponse;
+      });
+      setMessages((prevMessages) => [
+        ...prevMessages,
+        { role: "assistant", content: latestResponseRef.current },
+      ]);
+      addLogEntry("AI responded to follow-up question");
+    } catch (error) {
+      addLogEntry(`Error generating chat response: ${error}`);
+      setMessages((prevMessages) => [
+        ...prevMessages,
+        {
+          role: "assistant",
+          content: "Sorry, I encountered an error while generating a response.",
+        },
+      ]);
+    } finally {
+      setIsGenerating(false);
+      setStreamedResponse("");
+    }
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    handleEnterKeyDown(event, settings, handleSend);
+  };
+
+  const getChatContent = () => {
+    return messages
+      .slice(2)
+      .map(
+        (msg, index) =>
+          `${index + 1}. ${msg.role?.toUpperCase()}\n\n${msg.content}`,
+      )
+      .join("\n\n");
+  };
+
+  return (
+    <Card withBorder shadow="sm" radius="md">
+      <Card.Section withBorder inheritPadding py="xs">
+        <Group justify="space-between">
+          <Text fw={500}>Follow-up questions</Text>
+          {messages.length > 2 && (
+            <Suspense>
+              <CopyIconButton
+                value={getChatContent()}
+                tooltipLabel="Copy conversation"
+              />
+            </Suspense>
+          )}
+        </Group>
+      </Card.Section>
+      <Stack gap="md" pt="md">
+        {messages.slice(2).length > 0 && (
+          <Stack gap="md">
+            {messages.slice(2).map((message, index) => (
+              <Paper
+                key={`${message.role}-${index}`}
+                shadow="xs"
+                radius="xl"
+                p="sm"
+                maw="90%"
+                style={{
+                  alignSelf:
+                    message.role === "user" ? "flex-end" : "flex-start",
+                }}
+              >
+                <Suspense>
+                  <FormattedMarkdown>{message.content}</FormattedMarkdown>
+                </Suspense>
+              </Paper>
+            ))}
+            {isGenerating && streamedResponse.length > 0 && (
+              <Paper
+                shadow="xs"
+                radius="xl"
+                p="sm"
+                maw="90%"
+                style={{ alignSelf: "flex-start" }}
+              >
+                <Suspense>
+                  <FormattedMarkdown>{streamedResponse}</FormattedMarkdown>
+                </Suspense>
+              </Paper>
+            )}
+          </Stack>
+        )}
+        <Group align="flex-end" style={{ position: "relative" }}>
+          <Textarea
+            placeholder="Anything else you would like to know?"
+            value={input}
+            onChange={(event) => setInput(event.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+            autosize
+            minRows={1}
+            maxRows={4}
+            style={{ flexGrow: 1, paddingRight: "50px" }}
+            disabled={isGenerating}
+          />
+          <Button
+            size="sm"
+            variant="default"
+            onClick={handleSend}
+            loading={isGenerating}
+            style={{
+              height: "100%",
+              position: "absolute",
+              right: 0,
+              top: 0,
+              bottom: 0,
+              borderTopLeftRadius: 0,
+              borderBottomLeftRadius: 0,
+            }}
+          >
+            <IconSend size={16} />
+          </Button>
+        </Group>
+      </Stack>
+    </Card>
+  );
+}

client/components/AiResponse/CopyIconButton.tsx

@@ -0,0 +1,32 @@
+import { ActionIcon, CopyButton, Tooltip } from "@mantine/core";
+import { IconCheck, IconCopy } from "@tabler/icons-react";
+
+interface CopyIconButtonProps {
+  value: string;
+  tooltipLabel?: string;
+}
+
+export default function CopyIconButton({
+  value,
+  tooltipLabel = "Copy",
+}: CopyIconButtonProps) {
+  return (
+    <CopyButton value={value} timeout={2000}>
+      {({ copied, copy }) => (
+        <Tooltip
+          label={copied ? "Copied" : tooltipLabel}
+          withArrow
+          position="right"
+        >
+          <ActionIcon
+            color={copied ? "teal" : "gray"}
+            variant="subtle"
+            onClick={copy}
+          >
+            {copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
+          </ActionIcon>
+        </Tooltip>
+      )}
+    </CopyButton>
+  );
+}

client/components/AiResponse/FormattedMarkdown.tsx

@@ -0,0 +1,118 @@
+import { Box, TypographyStylesProvider, useMantineTheme } from "@mantine/core";
+import React from "react";
+import Markdown from "react-markdown";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import syntaxHighlighterStyle from "react-syntax-highlighter/dist/esm/styles/prism/one-dark";
+import rehypeExternalLinks from "rehype-external-links";
+import remarkGfm from "remark-gfm";
+import CopyIconButton from "./CopyIconButton";
+
+interface FormattedMarkdownProps {
+  children: string;
+  className?: string;
+  enableCopy?: boolean;
+}
+
+const FormattedMarkdown: React.FC<FormattedMarkdownProps> = ({
+  children,
+  className = "",
+  enableCopy = true,
+}) => {
+  const theme = useMantineTheme();
+
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <TypographyStylesProvider p="md">
+      <Box className={className}>
+        <Markdown
+          remarkPlugins={[remarkGfm]}
+          rehypePlugins={[
+            [
+              rehypeExternalLinks,
+              { target: "_blank", rel: ["nofollow", "noopener", "noreferrer"] },
+            ],
+          ]}
+          components={{
+            li(props) {
+              const { children } = props;
+              const processedChildren = React.Children.map(
+                children,
+                (child) => {
+                  if (React.isValidElement(child) && child.type === "p") {
+                    return (child.props as { children: React.ReactNode })
+                      .children;
+                  }
+                  return child;
+                },
+              );
+              return <li>{processedChildren}</li>;
+            },
+            pre(props) {
+              return <>{props.children}</>;
+            },
+            code(props) {
+              const { children, className, node, ref, ...rest } = props;
+              void node;
+              const languageMatch = /language-(\w+)/.exec(className || "");
+              const codeContent = children?.toString().replace(/\n$/, "") ?? "";
+
+              if (languageMatch) {
+                return (
+                  <Box
+                    style={{
+                      position: "relative",
+                      marginBottom: theme.spacing.md,
+                    }}
+                  >
+                    {enableCopy && (
+                      <Box
+                        style={{
+                          position: "absolute",
+                          top: theme.spacing.xs,
+                          right: theme.spacing.xs,
+                          zIndex: 2,
+                        }}
+                      >
+                        <CopyIconButton value={codeContent} />
+                      </Box>
+                    )}
+                    <SyntaxHighlighter
+                      {...rest}
+                      ref={ref as never}
+                      language={languageMatch[1]}
+                      style={syntaxHighlighterStyle}
+                    >
+                      {codeContent}
+                    </SyntaxHighlighter>
+                  </Box>
+                );
+              }
+
+              return (
+                <code
+                  {...rest}
+                  className={className}
+                  style={{
+                    backgroundColor: theme.colors.gray[8],
+                    padding: "0.2em 0.4em",
+                    borderRadius: theme.radius.sm,
+                    fontSize: "0.9em",
+                  }}
+                >
+                  {children}
+                </code>
+              );
+            },
+          }}
+        >
+          {children}
+        </Markdown>
+      </Box>
+    </TypographyStylesProvider>
+  );
+};
+
+export default FormattedMarkdown;

client/components/AiResponse/LoadingModelContent.tsx

@@ -0,0 +1,40 @@
+import { Card, Group, Progress, Stack, Text } from "@mantine/core";
+
+export default function LoadingModelContent({
+  modelLoadingProgress,
+  modelSizeInMegabytes,
+}: {
+  modelLoadingProgress: number;
+  modelSizeInMegabytes: number;
+}) {
+  const isLoadingStarting = modelLoadingProgress === 0;
+  const isLoadingComplete = modelLoadingProgress === 100;
+  const percent =
+    isLoadingComplete || isLoadingStarting ? 100 : modelLoadingProgress;
+  const strokeColor = percent === 100 ? "#52c41a" : "#3385ff";
+  const downloadedSize = (modelSizeInMegabytes * modelLoadingProgress) / 100;
+  const sizeText = `${downloadedSize.toFixed(0)} MB / ${modelSizeInMegabytes.toFixed(0)} MB`;
+
+  return (
+    <Card withBorder shadow="sm" radius="md">
+      <Card.Section withBorder inheritPadding py="xs">
+        <Text fw={500}>Loading AI...</Text>
+      </Card.Section>
+      <Card.Section withBorder inheritPadding py="md">
+        <Stack gap="xs">
+          <Progress color={strokeColor} value={percent} animated />
+          {!isLoadingStarting && (
+            <Group justify="space-between">
+              <Text size="sm" c="dimmed">
+                {sizeText}
+              </Text>
+              <Text size="sm" c="dimmed">
+                {percent.toFixed(1)}%
+              </Text>
+            </Group>
+          )}
+        </Stack>
+      </Card.Section>
+    </Card>
+  );
+}

client/components/AiResponse/PreparingContent.tsx

@@ -0,0 +1,33 @@
+import { Card, Skeleton, Stack, Text } from "@mantine/core";
+
+export default function PreparingContent({
+  textGenerationState,
+}: {
+  textGenerationState: string;
+}) {
+  const getStateText = () => {
+    if (textGenerationState === "awaitingSearchResults") {
+      return "Awaiting search results...";
+    }
+    if (textGenerationState === "preparingToGenerate") {
+      return "Preparing AI response...";
+    }
+    return null;
+  };
+
+  return (
+    <Card withBorder shadow="sm" radius="md">
+      <Card.Section withBorder inheritPadding py="xs">
+        <Text fw={500}>{getStateText()}</Text>
+      </Card.Section>
+      <Card.Section withBorder inheritPadding py="md">
+        <Stack>
+          <Skeleton height={8} radius="xl" />
+          <Skeleton height={8} width="70%" radius="xl" />
+          <Skeleton height={8} radius="xl" />
+          <Skeleton height={8} width="43%" radius="xl" />
+        </Stack>
+      </Card.Section>
+    </Card>
+  );
+}

client/components/AiResponse/WebLlmModelSelect.tsx

@@ -0,0 +1,81 @@
+import { type ComboboxItem, Select } from "@mantine/core";
+import { prebuiltAppConfig } from "@mlc-ai/web-llm";
+import { useCallback, useEffect, useState } from "react";
+import { isF16Supported } from "../../modules/webGpu";
+
+export default function WebLlmModelSelect({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const [webGpuModels] = useState<ComboboxItem[]>(() => {
+    const models = prebuiltAppConfig.model_list
+      .filter((model) => {
+        const isSmall = isSmallModel(model);
+        const suffix = getModelSuffix(isF16Supported, isSmall);
+        return model.model_id.endsWith(suffix);
+      })
+      .sort((a, b) => (a.vram_required_MB ?? 0) - (b.vram_required_MB ?? 0))
+      .map((model) => {
+        const modelSizeInMegabytes =
+          Math.round(model.vram_required_MB ?? 0) || "N/A";
+        const isSmall = isSmallModel(model);
+        const suffix = getModelSuffix(isF16Supported, isSmall);
+        const modelName = model.model_id.replace(suffix, "");
+
+        return {
+          label: `${modelSizeInMegabytes} MB • ${modelName}`,
+          value: model.model_id,
+        };
+      });
+
+    return models;
+  });
+
+  useEffect(() => {
+    const isCurrentModelValid = webGpuModels.some(
+      (model) => model.value === value,
+    );
+
+    if (!isCurrentModelValid && webGpuModels.length > 0) {
+      onChange(webGpuModels[0].value);
+    }
+  }, [onChange, webGpuModels, value]);
+
+  const handleChange = useCallback(
+    (value: string | null) => {
+      if (value) onChange(value);
+    },
+    [onChange],
+  );
+
+  return (
+    <Select
+      value={value}
+      onChange={handleChange}
+      label="AI Model"
+      description="Select the model to use for AI responses."
+      data={webGpuModels}
+      allowDeselect={false}
+      searchable
+    />
+  );
+}
+
+type ModelConfig = (typeof prebuiltAppConfig.model_list)[number];
+
+const smallModels = ["SmolLM2-135M", "SmolLM2-360M"] as const;
+
+function isSmallModel(model: ModelConfig) {
+  return smallModels.some((smallModel) =>
+    model.model_id.startsWith(smallModel),
+  );
+}
+
+function getModelSuffix(isF16: boolean, isSmall: boolean) {
+  if (isSmall) return isF16 ? "-q0f16-MLC" : "-q0f32-MLC";
+
+  return isF16 ? "-q4f16_1-MLC" : "-q4f32_1-MLC";
+}

client/components/AiResponse/WllamaModelSelect.tsx

@@ -0,0 +1,42 @@
+import { type ComboboxItem, Select } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { wllamaModels } from "../../modules/wllama";
+
+export default function WllamaModelSelect({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const [wllamaModelOptions] = useState<ComboboxItem[]>(
+    Object.entries(wllamaModels)
+      .sort(([, a], [, b]) => a.fileSizeInMegabytes - b.fileSizeInMegabytes)
+      .map(([value, { label, fileSizeInMegabytes }]) => ({
+        label: `${fileSizeInMegabytes} MB • ${label}`,
+        value,
+      })),
+  );
+
+  useEffect(() => {
+    const isCurrentModelValid = wllamaModelOptions.some(
+      (model) => model.value === value,
+    );
+
+    if (!isCurrentModelValid && wllamaModelOptions.length > 0) {
+      onChange(wllamaModelOptions[0].value);
+    }
+  }, [onChange, wllamaModelOptions, value]);
+
+  return (
+    <Select
+      value={value}
+      onChange={(value) => value && onChange(value)}
+      label="AI Model"
+      description="Select the model to use for AI responses."
+      data={wllamaModelOptions}
+      allowDeselect={false}
+      searchable
+    />
+  );
+}

client/components/App/App.tsx

@@ -0,0 +1,94 @@
+import { MantineProvider } from "@mantine/core";
+import { Route, Switch } from "wouter";
+import "@mantine/core/styles.css";
+import { Notifications } from "@mantine/notifications";
+import { usePubSub } from "create-pubsub/react";
+import { lazy, useEffect, useState } from "react";
+import { addLogEntry } from "../../modules/logEntries";
+import { settingsPubSub } from "../../modules/pubSub";
+import { defaultSettings } from "../../modules/settings";
+import "@mantine/notifications/styles.css";
+import { verifyStoredAccessKey } from "../../modules/accessKey";
+
+const MainPage = lazy(() => import("../Pages/Main/MainPage"));
+const AccessPage = lazy(() => import("../Pages/AccessPage"));
+
+export function App() {
+  useInitializeSettings();
+  const { hasValidatedAccessKey, isCheckingStoredKey, setValidatedAccessKey } =
+    useAccessKeyValidation();
+
+  if (isCheckingStoredKey) {
+    return null;
+  }
+
+  return (
+    <MantineProvider defaultColorScheme="dark">
+      <Notifications />
+      <Switch>
+        <Route path="/">
+          {VITE_ACCESS_KEYS_ENABLED && !hasValidatedAccessKey ? (
+            <AccessPage onAccessKeyValid={() => setValidatedAccessKey(true)} />
+          ) : (
+            <MainPage />
+          )}
+        </Route>
+      </Switch>
+    </MantineProvider>
+  );
+}
+
+/**
+ * A custom React hook that initializes the application settings.
+ *
+ * @returns The initialized settings object.
+ *
+ * @remarks
+ * This hook uses the `usePubSub` hook to access and update the settings state.
+ * It initializes the settings by merging the default settings with any existing settings.
+ * The initialization is performed once when the component mounts.
+ */
+function useInitializeSettings() {
+  const [settings, setSettings] = usePubSub(settingsPubSub);
+  const [settingsInitialized, setSettingsInitialized] = useState(false);
+
+  useEffect(() => {
+    if (settingsInitialized) return;
+
+    setSettings({ ...defaultSettings, ...settings });
+
+    setSettingsInitialized(true);
+
+    addLogEntry("Settings initialized");
+  }, [settings, setSettings, settingsInitialized]);
+
+  return settings;
+}
+
+/**
+ * A custom React hook that validates the stored access key on mount.
+ *
+ * @returns An object containing the validation state and loading state
+ */
+function useAccessKeyValidation() {
+  const [hasValidatedAccessKey, setValidatedAccessKey] = useState(false);
+  const [isCheckingStoredKey, setCheckingStoredKey] = useState(true);
+
+  useEffect(() => {
+    async function checkStoredAccessKey() {
+      if (VITE_ACCESS_KEYS_ENABLED) {
+        const isValid = await verifyStoredAccessKey();
+        if (isValid) setValidatedAccessKey(true);
+      }
+      setCheckingStoredKey(false);
+    }
+
+    checkStoredAccessKey();
+  }, []);
+
+  return {
+    hasValidatedAccessKey,
+    isCheckingStoredKey,
+    setValidatedAccessKey,
+  };
+}

client/components/Logs/LogsModal.tsx

@@ -0,0 +1,101 @@
+import {
+  Alert,
+  Button,
+  Center,
+  Group,
+  Modal,
+  Pagination,
+  Table,
+} from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
+import { usePubSub } from "create-pubsub/react";
+import { useCallback, useMemo, useState } from "react";
+import { logEntriesPubSub } from "../../modules/logEntries";
+
+export default function LogsModal({
+  opened,
+  onClose,
+}: {
+  opened: boolean;
+  onClose: () => void;
+}) {
+  const [logEntries] = usePubSub(logEntriesPubSub);
+
+  const [page, setPage] = useState(1);
+
+  const logEntriesPerPage = 5;
+
+  const logEntriesFromCurrentPage = useMemo(
+    () =>
+      logEntries.slice(
+        (page - 1) * logEntriesPerPage,
+        page * logEntriesPerPage,
+      ),
+    [logEntries, page],
+  );
+
+  const downloadLogsAsJson = useCallback(() => {
+    const jsonString = JSON.stringify(logEntries, null, 2);
+    const blob = new Blob([jsonString], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "logs.json";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }, [logEntries]);
+
+  return (
+    <Modal opened={opened} onClose={onClose} size="xl" title="Logs">
+      <Alert variant="light" color="blue" icon={<IconInfoCircle />} mb="md">
+        <Group justify="space-between" align="center">
+          <span>
+            This information is stored solely in your browser for personal use.
+            It isn't sent automatically and is retained for debugging purposes
+            should you need to{" "}
+            <a
+              href="https://github.com/felladrin/MiniSearch/issues/new?labels=bug&template=bug_report.yml"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              report a bug
+            </a>
+            .
+          </span>
+          <Button onClick={downloadLogsAsJson} size="xs" data-autofocus>
+            Download Logs
+          </Button>
+        </Group>
+      </Alert>
+      <Table striped highlightOnHover withTableBorder>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Time</Table.Th>
+            <Table.Th>Message</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {logEntriesFromCurrentPage.map((entry, index) => (
+            <Table.Tr key={`${entry.timestamp}-${index}`}>
+              <Table.Td>
+                {new Date(entry.timestamp).toLocaleTimeString()}
+              </Table.Td>
+              <Table.Td>{entry.message}</Table.Td>
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+      <Center>
+        <Pagination
+          total={Math.ceil(logEntries.length / logEntriesPerPage)}
+          value={page}
+          onChange={setPage}
+          size="sm"
+          mt="md"
+        />
+      </Center>
+    </Modal>
+  );
+}

client/components/Logs/ShowLogsButton.tsx

@@ -0,0 +1,42 @@
+import { Button, Center, Loader, Stack, Text } from "@mantine/core";
+import { Suspense, lazy, useState } from "react";
+import { addLogEntry } from "../../modules/logEntries";
+
+const LogsModal = lazy(() => import("./LogsModal"));
+
+export default function ShowLogsButton() {
+  const [isLogsModalOpen, setLogsModalOpen] = useState(false);
+
+  const handleShowLogsButtonClick = () => {
+    addLogEntry("User opened the logs modal");
+    setLogsModalOpen(true);
+  };
+
+  const handleCloseLogsButtonClick = () => {
+    addLogEntry("User closed the logs modal");
+    setLogsModalOpen(false);
+  };
+
+  return (
+    <Stack gap="xs">
+      <Suspense
+        fallback={
+          <Center>
+            <Loader color="gray" type="bars" />
+          </Center>
+        }
+      >
+        <Button size="sm" onClick={handleShowLogsButtonClick} variant="default">
+          Show logs
+        </Button>
+        <Text size="xs" c="dimmed">
+          View session logs for debugging.
+        </Text>
+        <LogsModal
+          opened={isLogsModalOpen}
+          onClose={handleCloseLogsButtonClick}
+        />
+      </Suspense>
+    </Stack>
+  );
+}

client/components/Pages/AccessPage.tsx

@@ -0,0 +1,61 @@
+import { Button, Container, Stack, TextInput, Title } from "@mantine/core";
+import { type FormEvent, useState } from "react";
+import { validateAccessKey } from "../../modules/accessKey";
+import { addLogEntry } from "../../modules/logEntries";
+
+export default function AccessPage({
+  onAccessKeyValid,
+}: {
+  onAccessKeyValid: () => void;
+}) {
+  const [accessKey, setAccessKey] = useState("");
+  const [error, setError] = useState("");
+
+  const handleSubmit = async (formEvent: FormEvent<HTMLFormElement>) => {
+    formEvent.preventDefault();
+    setError("");
+    try {
+      const isValid = await validateAccessKey(accessKey);
+      if (isValid) {
+        addLogEntry("Valid access key entered");
+        onAccessKeyValid();
+      } else {
+        setError("Invalid access key");
+        addLogEntry("Invalid access key attempt");
+      }
+    } catch (error) {
+      setError("Error validating access key");
+      addLogEntry(`Error validating access key: ${error}`);
+    }
+  };
+
+  return (
+    <Container size="xs">
+      <Stack p="lg" mih="100vh" justify="center">
+        <Title order={2} ta="center">
+          Access Restricted
+        </Title>
+        <form onSubmit={handleSubmit}>
+          <Stack gap="xs">
+            <TextInput
+              value={accessKey}
+              onChange={({ target }) => setAccessKey(target.value)}
+              placeholder="Enter your access key to continue"
+              required
+              autoFocus
+              error={error}
+              styles={{
+                input: {
+                  textAlign: "center",
+                },
+              }}
+            />
+            <Button size="xs" type="submit">
+              Submit
+            </Button>
+          </Stack>
+        </form>
+      </Stack>
+    </Container>
+  );
+}

client/components/Pages/Main/MainPage.tsx

@@ -0,0 +1,60 @@
+import { Center, Container, Loader, Stack } from "@mantine/core";
+import { usePubSub } from "create-pubsub/react";
+import { Suspense } from "react";
+import { lazy } from "react";
+import {
+  imageSearchStatePubSub,
+  queryPubSub,
+  textGenerationStatePubSub,
+  textSearchStatePubSub,
+} from "../../../modules/pubSub";
+
+const AiResponseSection = lazy(
+  () => import("../../AiResponse/AiResponseSection"),
+);
+const SearchResultsSection = lazy(
+  () => import("../../Search/Results/SearchResultsSection"),
+);
+const MenuButton = lazy(() => import("./Menu/MenuButton"));
+const SearchForm = lazy(() => import("../../Search/Form/SearchForm"));
+
+export default function MainPage() {
+  const [query, updateQuery] = usePubSub(queryPubSub);
+  const [textSearchState] = usePubSub(textSearchStatePubSub);
+  const [imageSearchState] = usePubSub(imageSearchStatePubSub);
+  const [textGenerationState] = usePubSub(textGenerationStatePubSub);
+
+  return (
+    <Container>
+      <Stack
+        py="md"
+        mih="100vh"
+        justify={query.length === 0 ? "center" : undefined}
+      >
+        <Suspense
+          fallback={
+            <Center>
+              <Loader type="bars" />
+            </Center>
+          }
+        >
+          <SearchForm
+            query={query}
+            updateQuery={updateQuery}
+            additionalButtons={<MenuButton />}
+          />
+        </Suspense>
+        {textGenerationState !== "idle" && (
+          <Suspense>
+            <AiResponseSection />
+          </Suspense>
+        )}
+        {(textSearchState !== "idle" || imageSearchState !== "idle") && (
+          <Suspense>
+            <SearchResultsSection />
+          </Suspense>
+        )}
+      </Stack>
+    </Container>
+  );
+}

client/components/Pages/Main/Menu/AISettings/components/AIParameterSlider.tsx

@@ -0,0 +1,17 @@
+import { Slider, Stack, Text } from "@mantine/core";
+import type { AIParameterSliderProps } from "../types";
+
+export const AIParameterSlider = ({
+  label,
+  description,
+  defaultValue,
+  ...props
+}: AIParameterSliderProps) => (
+  <Stack gap="xs" mb="md">
+    <Text size="sm">{label}</Text>
+    <Text size="xs" c="dimmed">
+      {description} Defaults to {defaultValue}.
+    </Text>
+    <Slider {...props} />
+  </Stack>
+);

client/components/Pages/Main/Menu/AISettings/components/BrowserSettings.tsx

@@ -0,0 +1,60 @@
+import { NumberInput, Skeleton, Switch } from "@mantine/core";
+import type { UseFormReturnType } from "@mantine/form";
+import { Suspense, lazy } from "react";
+import type { defaultSettings } from "../../../../../../modules/settings";
+
+const WebLlmModelSelect = lazy(
+  () => import("../../../../../../components/AiResponse/WebLlmModelSelect"),
+);
+const WllamaModelSelect = lazy(
+  () => import("../../../../../../components/AiResponse/WllamaModelSelect"),
+);
+
+interface BrowserSettingsProps {
+  form: UseFormReturnType<typeof defaultSettings>;
+  isWebGPUAvailable: boolean;
+}
+
+export const BrowserSettings = ({
+  form,
+  isWebGPUAvailable,
+}: BrowserSettingsProps) => (
+  <>
+    {isWebGPUAvailable && (
+      <Switch
+        label="WebGPU"
+        {...form.getInputProps("enableWebGpu", { type: "checkbox" })}
+        labelPosition="left"
+        description="Enable or disable WebGPU usage. When disabled, the app will use the CPU instead."
+      />
+    )}
+
+    {isWebGPUAvailable && form.values.enableWebGpu ? (
+      <Suspense fallback={<Skeleton height={50} />}>
+        <WebLlmModelSelect
+          value={form.values.webLlmModelId}
+          onChange={(value: string) =>
+            form.setFieldValue("webLlmModelId", value)
+          }
+        />
+      </Suspense>
+    ) : (
+      <>
+        <Suspense fallback={<Skeleton height={50} />}>
+          <WllamaModelSelect
+            value={form.values.wllamaModelId}
+            onChange={(value: string) =>
+              form.setFieldValue("wllamaModelId", value)
+            }
+          />
+        </Suspense>
+        <NumberInput
+          label="CPU threads to use"
+          description="Number of threads to use for the AI model. Lower values will use less CPU but may take longer to respond. A value that is too high may cause the app to hang."
+          min={1}
+          {...form.getInputProps("cpuThreads")}
+        />
+      </>
+    )}
+  </>
+);

client/components/Pages/Main/Menu/AISettings/components/HordeSettings.tsx

@@ -0,0 +1,44 @@
+import { Select, TextInput } from "@mantine/core";
+import type { UseFormReturnType } from "@mantine/form";
+import type { defaultSettings } from "../../../../../../modules/settings";
+import { aiHordeDefaultApiKey } from "../../../../../../modules/textGenerationWithHorde";
+import type { HordeUserInfo, ModelOption } from "../types";
+
+interface HordeSettingsProps {
+  form: UseFormReturnType<typeof defaultSettings>;
+  hordeUserInfo: HordeUserInfo | null;
+  hordeModels: ModelOption[];
+}
+
+export const HordeSettings = ({
+  form,
+  hordeUserInfo,
+  hordeModels,
+}: HordeSettingsProps) => (
+  <>
+    <TextInput
+      label="API Key"
+      description={
+        hordeUserInfo
+          ? `Logged in as ${
+              hordeUserInfo.username
+            } (${hordeUserInfo.kudos.toLocaleString()} kudos)`
+          : "By default, it's set to '0000000000', for anonymous access. However, anonymous accounts have the lowest priority when there's too many concurrent requests."
+      }
+      type="password"
+      {...form.getInputProps("hordeApiKey")}
+    />
+    {form.values.hordeApiKey.length > 0 &&
+      form.values.hordeApiKey !== aiHordeDefaultApiKey && (
+        <Select
+          label="Model"
+          description="Optional. When not selected, AI Horde will automatically choose an available model."
+          placeholder="Auto-selected"
+          data={hordeModels}
+          {...form.getInputProps("hordeModel")}
+          searchable
+          clearable
+        />
+      )}
+  </>
+);

client/components/Pages/Main/Menu/AISettings/components/OpenAISettings.tsx

@@ -0,0 +1,57 @@
+import { Group, Select, Text, TextInput } from "@mantine/core";
+import type { UseFormReturnType } from "@mantine/form";
+import { IconInfoCircle } from "@tabler/icons-react";
+import type { defaultSettings } from "../../../../../../modules/settings";
+import type { ModelOption } from "../types";
+
+interface OpenAISettingsProps {
+  form: UseFormReturnType<typeof defaultSettings>;
+  openAiModels: ModelOption[];
+  useTextInput: boolean;
+}
+
+export const OpenAISettings = ({
+  form,
+  openAiModels,
+  useTextInput,
+}: OpenAISettingsProps) => (
+  <>
+    <TextInput
+      {...form.getInputProps("openAiApiBaseUrl")}
+      label="API Base URL"
+      placeholder="http://localhost:11434/v1"
+      required
+    />
+    <Group gap="xs">
+      <IconInfoCircle size={16} />
+      <Text size="xs" c="dimmed" flex={1}>
+        You may need to add{" "}
+        <em>{`${self.location.protocol}//${self.location.hostname}`}</em> to the
+        list of allowed network origins in your API server settings.
+      </Text>
+    </Group>
+    <TextInput
+      {...form.getInputProps("openAiApiKey")}
+      label="API Key"
+      type="password"
+      description="Optional, as local API servers usually do not require it."
+    />
+    {useTextInput ? (
+      <TextInput
+        {...form.getInputProps("openAiApiModel")}
+        label="API Model"
+        description="Enter the model identifier"
+      />
+    ) : (
+      <Select
+        {...form.getInputProps("openAiApiModel")}
+        label="API Model"
+        data={openAiModels}
+        description="Optional, as some API servers don't provide a model list."
+        allowDeselect={false}
+        disabled={openAiModels.length === 0}
+        searchable
+      />
+    )}
+  </>
+);

client/components/Pages/Main/Menu/AISettings/components/SystemPromptInput.tsx

@@ -0,0 +1,98 @@
+import { Text, Textarea } from "@mantine/core";
+import type { UseFormReturnType } from "@mantine/form";
+import { defaultSettings } from "../../../../../../modules/settings";
+
+interface SystemPromptInputProps {
+  form: UseFormReturnType<typeof defaultSettings>;
+}
+
+export const SystemPromptInput = ({ form }: SystemPromptInputProps) => {
+  const isUsingCustomInstructions =
+    form.values.systemPrompt !== defaultSettings.systemPrompt;
+
+  const handleRestoreDefaultInstructions = () => {
+    form.setFieldValue("systemPrompt", defaultSettings.systemPrompt);
+  };
+
+  return (
+    <Textarea
+      label="Instructions for AI"
+      descriptionProps={{ component: "div" }}
+      description={
+        <>
+          <span>
+            Customize instructions for the AI to tailor its responses.
+          </span>
+          <br />
+          <span>For example:</span>
+          <ul>
+            <li>
+              Specify preferences
+              <ul>
+                <li>
+                  <em>"use simple language"</em>
+                </li>
+                <li>
+                  <em>"provide step-by-step explanations"</em>
+                </li>
+              </ul>
+            </li>
+            <li>
+              Set a response style
+              <ul>
+                <li>
+                  <em>"answer in a friendly tone"</em>
+                </li>
+                <li>
+                  <em>"write your response in Spanish"</em>
+                </li>
+              </ul>
+            </li>
+            <li>
+              Provide context about the audience
+              <ul>
+                <li>
+                  <em>"you're talking to a high school student"</em>
+                </li>
+                <li>
+                  <em>
+                    "consider that your audience is composed of professionals in
+                    the field of graphic design"
+                  </em>
+                </li>
+              </ul>
+            </li>
+          </ul>
+          <span>
+            The special tag <em>{"{{searchResults}}"}</em> will be replaced with
+            the search results, while <em>{"{{dateTime}}"}</em> will be replaced
+            with the current date and time.
+          </span>
+          {isUsingCustomInstructions && (
+            <>
+              <br />
+              <br />
+              <span>
+                Currently, you're using custom instructions. If you ever need to
+                restore the default instructions, you can do so by clicking
+              </span>{" "}
+              <Text
+                component="span"
+                size="xs"
+                c="blue"
+                style={{ cursor: "pointer" }}
+                onClick={handleRestoreDefaultInstructions}
+              >
+                here
+              </Text>
+              <span>.</span>
+            </>
+          )}
+        </>
+      }
+      autosize
+      maxRows={10}
+      {...form.getInputProps("systemPrompt")}
+    />
+  );
+};

client/components/Pages/Main/Menu/AISettings/hooks/useHordeModels.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+import { addLogEntry } from "../../../../../../modules/logEntries";
+import type { defaultSettings } from "../../../../../../modules/settings";
+import { fetchHordeModels } from "../../../../../../modules/textGenerationWithHorde";
+import type { ModelOption } from "../types";
+
+type Settings = typeof defaultSettings;
+
+export const useHordeModels = (settings: Settings) => {
+  const [hordeModels, setHordeModels] = useState<ModelOption[]>([]);
+
+  useEffect(() => {
+    async function fetchAvailableHordeModels() {
+      try {
+        const models = await fetchHordeModels();
+        const formattedModels = models.map((model) => ({
+          label: model.name,
+          value: model.name,
+        }));
+        setHordeModels(formattedModels);
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : String(error);
+        addLogEntry(`Error fetching AI Horde models: ${errorMessage}`);
+        setHordeModels([]);
+      }
+    }
+
+    if (settings.inferenceType === "horde") {
+      fetchAvailableHordeModels();
+    }
+  }, [settings.inferenceType]);
+
+  return hordeModels;
+};

client/components/Pages/Main/Menu/AISettings/hooks/useHordeUserInfo.ts

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+import { addLogEntry } from "../../../../../../modules/logEntries";
+import type { defaultSettings } from "../../../../../../modules/settings";
+import {
+  aiHordeDefaultApiKey,
+  fetchHordeUserInfo,
+} from "../../../../../../modules/textGenerationWithHorde";
+import type { HordeUserInfo } from "../types";
+
+type Settings = typeof defaultSettings;
+
+export const useHordeUserInfo = (settings: Settings) => {
+  const [hordeUserInfo, setHordeUserInfo] = useState<HordeUserInfo | null>(
+    null,
+  );
+
+  useEffect(() => {
+    async function fetchUserInfo() {
+      try {
+        if (
+          settings.hordeApiKey &&
+          settings.hordeApiKey !== aiHordeDefaultApiKey
+        ) {
+          const userInfo = await fetchHordeUserInfo(settings.hordeApiKey);
+          setHordeUserInfo(userInfo);
+        } else {
+          setHordeUserInfo(null);
+        }
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : String(error);
+        addLogEntry(`Error fetching AI Horde user info: ${errorMessage}`);
+        setHordeUserInfo(null);
+      }
+    }
+
+    if (settings.inferenceType === "horde") {
+      fetchUserInfo();
+    }
+  }, [settings.inferenceType, settings.hordeApiKey]);
+
+  return hordeUserInfo;
+};

client/components/Pages/Main/Menu/AISettings/hooks/useOpenAiModels.ts

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+import { addLogEntry } from "../../../../../../modules/logEntries";
+import type { defaultSettings } from "../../../../../../modules/settings";
+import type { ModelOption } from "../types";
+
+type Settings = typeof defaultSettings;
+
+export const useOpenAiModels = (settings: Settings) => {
+  const [openAiModels, setOpenAiModels] = useState<ModelOption[]>([]);
+  const [useTextInput, setUseTextInput] = useState(false);
+
+  useEffect(() => {
+    async function fetchOpenAiModels() {
+      try {
+        const response = await fetch(`${settings.openAiApiBaseUrl}/models`, {
+          headers: {
+            Authorization: `Bearer ${settings.openAiApiKey}`,
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`Failed to fetch models: ${response.statusText}`);
+        }
+
+        const data = await response.json();
+        const models = data.data.map((model: { id: string }) => ({
+          label: model.id,
+          value: model.id,
+        }));
+
+        setOpenAiModels(models);
+        setUseTextInput(!Array.isArray(models) || models.length === 0);
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : String(error);
+        addLogEntry(`Error fetching OpenAI models: ${errorMessage}`);
+        setOpenAiModels([]);
+        setUseTextInput(true);
+      }
+    }
+
+    if (settings.inferenceType === "openai" && settings.openAiApiBaseUrl) {
+      fetchOpenAiModels();
+    }
+  }, [
+    settings.inferenceType,
+    settings.openAiApiBaseUrl,
+    settings.openAiApiKey,
+  ]);
+
+  return { openAiModels, useTextInput };
+};

client/components/Pages/Main/Menu/AISettings/index.tsx

@@ -0,0 +1,128 @@
+import { Select, Stack, Switch } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { usePubSub } from "create-pubsub/react";
+import { settingsPubSub } from "../../../../../modules/pubSub";
+import {
+  defaultSettings,
+  inferenceTypes,
+} from "../../../../../modules/settings";
+import { isWebGPUAvailable } from "../../../../../modules/webGpu";
+import { AIParameterSlider } from "./components/AIParameterSlider";
+import { BrowserSettings } from "./components/BrowserSettings";
+import { HordeSettings } from "./components/HordeSettings";
+import { OpenAISettings } from "./components/OpenAISettings";
+import { SystemPromptInput } from "./components/SystemPromptInput";
+import { useHordeModels } from "./hooks/useHordeModels";
+import { useHordeUserInfo } from "./hooks/useHordeUserInfo";
+import { useOpenAiModels } from "./hooks/useOpenAiModels";
+import { penaltySliderMarks } from "./types";
+
+export default function AISettingsForm() {
+  const [settings, setSettings] = usePubSub(settingsPubSub);
+  const { openAiModels, useTextInput } = useOpenAiModels(settings);
+  const hordeModels = useHordeModels(settings);
+  const hordeUserInfo = useHordeUserInfo(settings);
+
+  const form = useForm({
+    initialValues: settings,
+    onValuesChange: setSettings,
+  });
+
+  return (
+    <Stack gap="md">
+      <Switch
+        label="AI Response"
+        {...form.getInputProps("enableAiResponse", { type: "checkbox" })}
+        labelPosition="left"
+        description="Enable or disable AI-generated responses to your queries. When disabled, you'll only see web search results."
+      />
+
+      {form.values.enableAiResponse && (
+        <>
+          <Select
+            {...form.getInputProps("inferenceType")}
+            label="AI Processing Location"
+            data={inferenceTypes}
+            allowDeselect={false}
+          />
+
+          {form.values.inferenceType === "openai" && (
+            <OpenAISettings
+              form={form}
+              openAiModels={openAiModels}
+              useTextInput={useTextInput}
+            />
+          )}
+
+          {form.values.inferenceType === "horde" && (
+            <HordeSettings
+              form={form}
+              hordeUserInfo={hordeUserInfo}
+              hordeModels={hordeModels}
+            />
+          )}
+
+          {form.values.inferenceType === "browser" && (
+            <BrowserSettings
+              form={form}
+              isWebGPUAvailable={isWebGPUAvailable}
+            />
+          )}
+
+          <SystemPromptInput form={form} />
+
+          <AIParameterSlider
+            label="Temperature"
+            description="Controls randomness in responses. Lower values make responses more focused and deterministic, while higher values make them more creative and diverse."
+            defaultValue={defaultSettings.inferenceTemperature}
+            {...form.getInputProps("inferenceTemperature")}
+            min={0}
+            max={2}
+            step={0.01}
+            marks={[
+              { value: 0, label: "0" },
+              { value: 1, label: "1" },
+              { value: 2, label: "2" },
+            ]}
+          />
+
+          <AIParameterSlider
+            label="Top P"
+            description="Controls diversity by limiting cumulative probability of tokens. Lower values make responses more focused, while higher values allow more variety."
+            defaultValue={defaultSettings.inferenceTopP}
+            {...form.getInputProps("inferenceTopP")}
+            min={0}
+            max={1}
+            step={0.01}
+            marks={Array.from({ length: 3 }, (_, index) => ({
+              value: index / 2,
+              label: (index / 2).toString(),
+            }))}
+          />
+
+          <AIParameterSlider
+            label="Frequency Penalty"
+            description="Reduces repetition by penalizing tokens based on their frequency. Higher values decrease the likelihood of repeating the same information."
+            defaultValue={defaultSettings.inferenceFrequencyPenalty}
+            {...form.getInputProps("inferenceFrequencyPenalty")}
+            min={-2.0}
+            max={2.0}
+            step={0.01}
+            marks={penaltySliderMarks}
+          />
+
+          <AIParameterSlider
+            label="Presence Penalty"
+            description="Encourages new topics by penalizing tokens that have appeared. Higher values increase the model's likelihood to talk about new topics."
+            defaultValue={defaultSettings.inferencePresencePenalty}
+            {...form.getInputProps("inferencePresencePenalty")}
+            min={-2.0}
+            max={2.0}
+            step={0.01}
+            marks={penaltySliderMarks}
+          />
+        </>
+      )}
+    </Stack>
+  );
+}

client/components/Pages/Main/Menu/AISettings/types.ts

@@ -0,0 +1,28 @@
+import type { UseFormReturnType } from "@mantine/form";
+import type { defaultSettings } from "../../../../../modules/settings";
+
+export interface ModelOption {
+  label: string;
+  value: string;
+}
+
+export interface HordeUserInfo {
+  username: string;
+  kudos: number;
+}
+
+export interface AISettingsFormProps {
+  form: UseFormReturnType<typeof defaultSettings>;
+}
+
+export interface AIParameterSliderProps extends Record<string, unknown> {
+  label: string;
+  description: string;
+  defaultValue: number;
+}
+
+export const penaltySliderMarks = [
+  { value: -2.0, label: "-2.0" },
+  { value: 0.0, label: "0" },
+  { value: 2.0, label: "2.0" },
+];

client/components/Pages/Main/Menu/AISettingsForm.tsx

@@ -0,0 +1,492 @@
+import {
+  Group,
+  NumberInput,
+  Select,
+  Skeleton,
+  Slider,
+  Stack,
+  Switch,
+  Text,
+  TextInput,
+  Textarea,
+} from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { IconInfoCircle } from "@tabler/icons-react";
+import { usePubSub } from "create-pubsub/react";
+import { Suspense, lazy, useEffect, useState } from "react";
+import { addLogEntry } from "../../../../modules/logEntries";
+import { settingsPubSub } from "../../../../modules/pubSub";
+import { defaultSettings, inferenceTypes } from "../../../../modules/settings";
+import {
+  aiHordeDefaultApiKey,
+  fetchHordeModels,
+  fetchHordeUserInfo,
+} from "../../../../modules/textGenerationWithHorde";
+import { isWebGPUAvailable } from "../../../../modules/webGpu";
+
+const WebLlmModelSelect = lazy(
+  () => import("../../../AiResponse/WebLlmModelSelect"),
+);
+const WllamaModelSelect = lazy(
+  () => import("../../../AiResponse/WllamaModelSelect"),
+);
+
+const penaltySliderMarks = [
+  { value: -2.0, label: "-2.0" },
+  { value: 0.0, label: "0" },
+  { value: 2.0, label: "2.0" },
+];
+
+export default function AISettingsForm() {
+  const [settings, setSettings] = usePubSub(settingsPubSub);
+  const [hordeUserInfo, setHordeUserInfo] = useState<{
+    username: string;
+    kudos: number;
+  } | null>(null);
+  const [openAiModels, setOpenAiModels] = useState<
+    {
+      label: string;
+      value: string;
+    }[]
+  >([]);
+  const [hordeModels, setHordeModels] = useState<
+    {
+      label: string;
+      value: string;
+    }[]
+  >([]);
+  const [useTextInput, setUseTextInput] = useState(false);
+
+  const form = useForm({
+    initialValues: settings,
+    onValuesChange: setSettings,
+  });
+
+  useEffect(() => {
+    async function fetchOpenAiModels() {
+      try {
+        const response = await fetch(`${settings.openAiApiBaseUrl}/models`, {
+          headers: {
+            Authorization: `Bearer ${settings.openAiApiKey}`,
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`Failed to fetch models: ${response.statusText}`);
+        }
+
+        const data = await response.json();
+        const models = data.data.map((model: { id: string }) => ({
+          label: model.id,
+          value: model.id,
+        }));
+
+        setOpenAiModels(models);
+        const hasNoModelsDefined =
+          !Array.isArray(models) || models.length === 0;
+        setUseTextInput(hasNoModelsDefined);
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : String(error);
+        addLogEntry(`Error fetching OpenAI models: ${errorMessage}`);
+        setOpenAiModels([]);
+        setUseTextInput(true);
+      }
+    }
+
+    if (settings.inferenceType === "openai" && settings.openAiApiBaseUrl) {
+      fetchOpenAiModels();
+    }
+  }, [
+    settings.inferenceType,
+    settings.openAiApiBaseUrl,
+    settings.openAiApiKey,
+  ]);
+
+  useEffect(() => {
+    async function fetchAvailableHordeModels() {
+      try {
+        const models = await fetchHordeModels();
+        const formattedModels = models.map((model) => ({
+          label: model.name,
+          value: model.name,
+        }));
+        setHordeModels(formattedModels);
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : String(error);
+        addLogEntry(`Error fetching AI Horde models: ${errorMessage}`);
+        setHordeModels([]);
+      }
+    }
+
+    if (settings.inferenceType === "horde") {
+      fetchAvailableHordeModels();
+    }
+  }, [settings.inferenceType]);
+
+  useEffect(() => {
+    async function fetchUserInfo() {
+      try {
+        if (
+          settings.hordeApiKey &&
+          settings.hordeApiKey !== aiHordeDefaultApiKey
+        ) {
+          const userInfo = await fetchHordeUserInfo(settings.hordeApiKey);
+          setHordeUserInfo(userInfo);
+        } else {
+          setHordeUserInfo(null);
+        }
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : String(error);
+        addLogEntry(`Error fetching AI Horde user info: ${errorMessage}`);
+        setHordeUserInfo(null);
+      }
+    }
+
+    if (settings.inferenceType === "horde") {
+      fetchUserInfo();
+    }
+  }, [settings.inferenceType, settings.hordeApiKey]);
+
+  useEffect(() => {
+    if (openAiModels.length > 0) {
+      const hasNoModelSelected = !form.values.openAiApiModel;
+      const isModelInvalid = !openAiModels.find(
+        (model) => model.value === form.values.openAiApiModel,
+      );
+
+      if (hasNoModelSelected || isModelInvalid) {
+        form.setFieldValue("openAiApiModel", openAiModels[0].value);
+      }
+    }
+  }, [openAiModels, form.setFieldValue, form.values.openAiApiModel]);
+
+  const isUsingCustomInstructions =
+    form.values.systemPrompt !== defaultSettings.systemPrompt;
+
+  const handleRestoreDefaultInstructions = () => {
+    form.setFieldValue("systemPrompt", defaultSettings.systemPrompt);
+  };
+
+  return (
+    <Stack gap="md">
+      <Switch
+        label="AI Response"
+        {...form.getInputProps("enableAiResponse", {
+          type: "checkbox",
+        })}
+        labelPosition="left"
+        description="Enable or disable AI-generated responses to your queries. When disabled, you'll only see web search results."
+      />
+
+      {form.values.enableAiResponse && (
+        <>
+          <Stack gap="xs" mb="md">
+            <Text size="sm">Search results to consider</Text>
+            <Text size="xs" c="dimmed">
+              Determines the number of search results to consider when
+              generating AI responses. A higher value may enhance accuracy, but
+              it will also increase response time.
+            </Text>
+            <Slider
+              {...form.getInputProps("searchResultsToConsider")}
+              min={0}
+              max={6}
+              marks={Array.from({ length: 7 }, (_, index) => ({
+                value: index,
+                label: index.toString(),
+              }))}
+            />
+          </Stack>
+
+          <Select
+            {...form.getInputProps("inferenceType")}
+            label="AI Processing Location"
+            data={inferenceTypes}
+            allowDeselect={false}
+          />
+
+          {form.values.inferenceType === "openai" && (
+            <>
+              <TextInput
+                {...form.getInputProps("openAiApiBaseUrl")}
+                label="API Base URL"
+                placeholder="http://localhost:11434/v1"
+                required
+              />
+              <Group gap="xs">
+                <IconInfoCircle size={16} />
+                <Text size="xs" c="dimmed" flex={1}>
+                  You may need to add{" "}
+                  <em>
+                    {`${self.location.protocol}//${self.location.hostname}`}
+                  </em>{" "}
+                  to the list of allowed network origins in your API server
+                  settings.
+                </Text>
+              </Group>
+              <TextInput
+                {...form.getInputProps("openAiApiKey")}
+                label="API Key"
+                type="password"
+                description="Optional, as local API servers usually do not require it."
+              />
+              {useTextInput ? (
+                <TextInput
+                  {...form.getInputProps("openAiApiModel")}
+                  label="API Model"
+                  description="Enter the model identifier"
+                />
+              ) : (
+                <Select
+                  {...form.getInputProps("openAiApiModel")}
+                  label="API Model"
+                  data={openAiModels}
+                  description="Optional, as some API servers don't provide a model list."
+                  allowDeselect={false}
+                  disabled={openAiModels.length === 0}
+                  searchable
+                />
+              )}
+            </>
+          )}
+
+          {form.values.inferenceType === "horde" && (
+            <>
+              <TextInput
+                label="API Key"
+                description={
+                  hordeUserInfo
+                    ? `Logged in as ${
+                        hordeUserInfo.username
+                      } (${hordeUserInfo.kudos.toLocaleString()} kudos)`
+                    : "By default, it's set to '0000000000', for anonymous access. However, anonymous accounts have the lowest priority when there's too many concurrent requests."
+                }
+                type="password"
+                {...form.getInputProps("hordeApiKey")}
+              />
+              {form.values.hordeApiKey.length > 0 &&
+                form.values.hordeApiKey !== aiHordeDefaultApiKey && (
+                  <Select
+                    label="Model"
+                    description="Optional. When not selected, AI Horde will automatically choose an available model."
+                    placeholder="Auto-selected"
+                    data={hordeModels}
+                    {...form.getInputProps("hordeModel")}
+                    searchable
+                    clearable
+                  />
+                )}
+            </>
+          )}
+
+          {form.values.inferenceType === "browser" && (
+            <>
+              {isWebGPUAvailable && (
+                <Switch
+                  label="WebGPU"
+                  {...form.getInputProps("enableWebGpu", {
+                    type: "checkbox",
+                  })}
+                  labelPosition="left"
+                  description="Enable or disable WebGPU usage. When disabled, the app will use the CPU instead."
+                />
+              )}
+
+              {isWebGPUAvailable && form.values.enableWebGpu ? (
+                <Suspense fallback={<Skeleton height={50} />}>
+                  <WebLlmModelSelect
+                    value={form.values.webLlmModelId}
+                    onChange={(value) =>
+                      form.setFieldValue("webLlmModelId", value)
+                    }
+                  />
+                </Suspense>
+              ) : (
+                <>
+                  <Suspense fallback={<Skeleton height={50} />}>
+                    <WllamaModelSelect
+                      value={form.values.wllamaModelId}
+                      onChange={(value) =>
+                        form.setFieldValue("wllamaModelId", value)
+                      }
+                    />
+                  </Suspense>
+                  <NumberInput
+                    label="CPU threads to use"
+                    description={
+                      <span>
+                        Number of threads to use for the AI model. Lower values
+                        will use less CPU but may take longer to respond. A
+                        value that is too high may cause the app to hang.
+                      </span>
+                    }
+                    min={1}
+                    {...form.getInputProps("cpuThreads")}
+                  />
+                </>
+              )}
+            </>
+          )}
+
+          <Textarea
+            label="Instructions for AI"
+            descriptionProps={{ component: "div" }}
+            description={
+              <>
+                <span>
+                  Customize instructions for the AI to tailor its responses.
+                </span>
+                <br />
+                <span>For example:</span>
+                <ul>
+                  <li>
+                    Specify preferences
+                    <ul>
+                      <li>
+                        <em>"use simple language"</em>
+                      </li>
+                      <li>
+                        <em>"provide step-by-step explanations"</em>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    Set a response style
+                    <ul>
+                      <li>
+                        <em>"answer in a friendly tone"</em>
+                      </li>
+                      <li>
+                        <em>"write your response in Spanish"</em>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    Provide context about the audience
+                    <ul>
+                      <li>
+                        <em>"you're talking to a high school student"</em>
+                      </li>
+                      <li>
+                        <em>
+                          "consider that your audience is composed of
+                          professionals in the field of graphic design"
+                        </em>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+                <span>
+                  The special tag <em>{"{{searchResults}}"}</em> will be
+                  replaced with the search results, while{" "}
+                  <em>{"{{dateTime}}"}</em> will be replaced with the current
+                  date and time.
+                </span>
+                {isUsingCustomInstructions && (
+                  <>
+                    <br />
+                    <br />
+                    <span>
+                      Currently, you're using custom instructions. If you ever
+                      need to restore the default instructions, you can do so by
+                      clicking
+                    </span>{" "}
+                    <Text
+                      component="span"
+                      size="xs"
+                      c="blue"
+                      style={{ cursor: "pointer" }}
+                      onClick={handleRestoreDefaultInstructions}
+                    >
+                      here
+                    </Text>
+                    <span>.</span>
+                  </>
+                )}
+              </>
+            }
+            autosize
+            maxRows={10}
+            {...form.getInputProps("systemPrompt")}
+          />
+
+          <Stack gap="xs" mb="md">
+            <Text size="sm">Temperature</Text>
+            <Text size="xs" c="dimmed">
+              Controls randomness in responses. Lower values make responses more
+              focused and deterministic, while higher values make them more
+              creative and diverse. Defaults to{" "}
+              {defaultSettings.inferenceTemperature}.
+            </Text>
+            <Slider
+              {...form.getInputProps("inferenceTemperature")}
+              min={0}
+              max={2}
+              step={0.01}
+              marks={[
+                { value: 0, label: "0" },
+                { value: 1, label: "1" },
+                { value: 2, label: "2" },
+              ]}
+            />
+          </Stack>
+
+          <Stack gap="xs" mb="md">
+            <Text size="sm">Top P</Text>
+            <Text size="xs" c="dimmed">
+              Controls diversity by limiting cumulative probability of tokens.
+              Lower values make responses more focused, while higher values
+              allow more variety. Defaults to {defaultSettings.inferenceTopP}.
+            </Text>
+            <Slider
+              {...form.getInputProps("inferenceTopP")}
+              min={0}
+              max={1}
+              step={0.01}
+              marks={Array.from({ length: 3 }, (_, index) => ({
+                value: index / 2,
+                label: (index / 2).toString(),
+              }))}
+            />
+          </Stack>
+
+          <Stack gap="xs" mb="md">
+            <Text size="sm">Frequency Penalty</Text>
+            <Text size="xs" c="dimmed">
+              Reduces repetition by penalizing tokens based on their frequency.
+              Higher values decrease the likelihood of repeating the same
+              information. Defaults to{" "}
+              {defaultSettings.inferenceFrequencyPenalty}.
+            </Text>
+            <Slider
+              {...form.getInputProps("inferenceFrequencyPenalty")}
+              min={-2.0}
+              max={2.0}
+              step={0.01}
+              marks={penaltySliderMarks}
+            />
+          </Stack>
+
+          <Stack gap="xs" mb="md">
+            <Text size="sm">Presence Penalty</Text>
+            <Text size="xs" c="dimmed">
+              Encourages new topics by penalizing tokens that have appeared.
+              Higher values increase the model's likelihood to talk about new
+              topics. Defaults to {defaultSettings.inferencePresencePenalty}.
+            </Text>
+            <Slider
+              {...form.getInputProps("inferencePresencePenalty")}
+              min={-2.0}
+              max={2.0}
+              step={0.01}
+              marks={penaltySliderMarks}
+            />
+          </Stack>
+        </>
+      )}
+    </Stack>
+  );
+}

client/components/Pages/Main/Menu/ActionsForm.tsx

@@ -0,0 +1,18 @@
+import { Stack } from "@mantine/core";
+import { Suspense, lazy } from "react";
+
+const ClearDataButton = lazy(() => import("./ClearDataButton"));
+const ShowLogsButton = lazy(() => import("../../../Logs/ShowLogsButton"));
+
+export default function ActionsForm() {
+  return (
+    <Stack gap="lg">
+      <Suspense>
+        <ClearDataButton />
+      </Suspense>
+      <Suspense>
+        <ShowLogsButton />
+      </Suspense>
+    </Stack>
+  );
+}

client/components/Pages/Main/Menu/ClearDataButton.tsx

@@ -0,0 +1,63 @@
+import { Button, Stack, Text } from "@mantine/core";
+import { useState } from "react";
+import { useLocation } from "wouter";
+import { addLogEntry } from "../../../../modules/logEntries";
+
+export default function ClearDataButton() {
+  const [isClearingData, setIsClearingData] = useState(false);
+  const [hasClearedData, setHasClearedData] = useState(false);
+  const [, navigate] = useLocation();
+
+  const handleClearDataButtonClick = async () => {
+    const sureToDelete = self.confirm(
+      "Are you sure you want to reset the settings and delete all files in cache?",
+    );
+
+    if (!sureToDelete) return;
+
+    addLogEntry("User initiated data clearing");
+
+    setIsClearingData(true);
+
+    self.localStorage.clear();
+
+    for (const cacheName of await self.caches.keys()) {
+      await self.caches.delete(cacheName);
+    }
+
+    for (const databaseInfo of await self.indexedDB.databases()) {
+      if (databaseInfo.name) self.indexedDB.deleteDatabase(databaseInfo.name);
+    }
+
+    const { clearWllamaCache } = await import("../../../../modules/wllama");
+
+    await clearWllamaCache();
+
+    setIsClearingData(false);
+
+    setHasClearedData(true);
+
+    addLogEntry("All data cleared successfully");
+
+    navigate("/", { replace: true });
+
+    self.location.reload();
+  };
+
+  return (
+    <Stack gap="xs">
+      <Button
+        onClick={handleClearDataButtonClick}
+        variant="default"
+        loading={isClearingData}
+        loaderProps={{ type: "bars" }}
+        disabled={hasClearedData}
+      >
+        {hasClearedData ? "Data cleared" : "Clear all data"}
+      </Button>
+      <Text size="xs" c="dimmed">
+        Reset settings and delete all files in cache to free up space.
+      </Text>
+    </Stack>
+  );
+}

client/components/Pages/Main/Menu/InterfaceSettingsForm.tsx

@@ -0,0 +1,45 @@
+import {
+  Stack,
+  Switch,
+  useComputedColorScheme,
+  useMantineColorScheme,
+} from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { usePubSub } from "create-pubsub/react";
+import { settingsPubSub } from "../../../../modules/pubSub";
+
+export default function InterfaceSettingsForm() {
+  const [settings, setSettings] = usePubSub(settingsPubSub);
+  const form = useForm({
+    initialValues: settings,
+    onValuesChange: setSettings,
+  });
+  const { setColorScheme } = useMantineColorScheme();
+  const computedColorScheme = useComputedColorScheme("light");
+
+  const toggleColorScheme = () => {
+    setColorScheme(computedColorScheme === "dark" ? "light" : "dark");
+  };
+
+  return (
+    <Stack gap="md">
+      <Switch
+        label="Dark Mode"
+        checked={computedColorScheme === "dark"}
+        onChange={toggleColorScheme}
+        labelPosition="left"
+        description="Enable or disable the dark color scheme."
+        styles={{ labelWrapper: { width: "100%" } }}
+      />
+
+      <Switch
+        {...form.getInputProps("enterToSubmit", {
+          type: "checkbox",
+        })}
+        label="Enter to Submit"
+        labelPosition="left"
+        description="Enable or disable using Enter key to submit the search query. When disabled, you'll need to click the Search button or use Shift+Enter to submit."
+      />
+    </Stack>
+  );
+}

client/components/Pages/Main/Menu/MenuButton.tsx

@@ -0,0 +1,53 @@
+import { Button } from "@mantine/core";
+import { Suspense, lazy, useCallback, useEffect, useState } from "react";
+import { addLogEntry } from "../../../../modules/logEntries";
+
+const MenuDrawer = lazy(() => import("./MenuDrawer"));
+
+export default function MenuButton() {
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
+  const [isDrawerLoaded, setDrawerLoaded] = useState(false);
+
+  const openDrawer = useCallback(() => {
+    setDrawerOpen(true);
+    addLogEntry("User opened the menu");
+  }, []);
+
+  const closeDrawer = useCallback(() => {
+    setDrawerOpen(false);
+    addLogEntry("User closed the menu");
+  }, []);
+
+  const handleDrawerLoad = useCallback(() => {
+    if (!isDrawerLoaded) {
+      addLogEntry("Menu drawer loaded");
+      setDrawerLoaded(true);
+    }
+  }, [isDrawerLoaded]);
+
+  return (
+    <>
+      <Button
+        size="xs"
+        onClick={openDrawer}
+        variant="default"
+        loading={isDrawerOpen && !isDrawerLoaded}
+      >
+        Menu
+      </Button>
+      {(isDrawerOpen || isDrawerLoaded) && (
+        <Suspense fallback={<SuspenseListener onUnload={handleDrawerLoad} />}>
+          <MenuDrawer onClose={closeDrawer} opened={isDrawerOpen} />
+        </Suspense>
+      )}
+    </>
+  );
+}
+
+function SuspenseListener({ onUnload }: { onUnload: () => void }) {
+  useEffect(() => {
+    return () => onUnload();
+  }, [onUnload]);
+
+  return null;
+}

client/components/Pages/Main/Menu/MenuDrawer.tsx

@@ -0,0 +1,116 @@
+import {
+  Accordion,
+  ActionIcon,
+  Center,
+  Drawer,
+  type DrawerProps,
+  FocusTrap,
+  Group,
+  HoverCard,
+  Stack,
+} from "@mantine/core";
+import { IconBrandGithub } from "@tabler/icons-react";
+import prettyMilliseconds from "pretty-ms";
+import { Suspense, lazy } from "react";
+import { repository } from "../../../../../package.json";
+import { appName, appVersion } from "../../../../modules/appInfo";
+import { addLogEntry } from "../../../../modules/logEntries";
+
+const AISettingsForm = lazy(() => import("./AISettingsForm"));
+const SearchSettingsForm = lazy(() => import("./SearchSettingsForm"));
+const InterfaceSettingsForm = lazy(() => import("./InterfaceSettingsForm"));
+const ActionsForm = lazy(() => import("./ActionsForm"));
+const VoiceSettingsForm = lazy(() => import("./VoiceSettingsForm"));
+
+export default function MenuDrawer(drawerProps: DrawerProps) {
+  return (
+    <Drawer
+      {...drawerProps}
+      position="right"
+      size="md"
+      title={
+        <Group gap="xs">
+          <ActionIcon
+            variant="subtle"
+            component="a"
+            color="var(--mantine-color-text)"
+            href={repository.url}
+            target="_blank"
+            onClick={() => addLogEntry("User clicked the GitHub link")}
+          >
+            <IconBrandGithub size={16} />
+          </ActionIcon>
+          <HoverCard shadow="md" withArrow>
+            <HoverCard.Target>
+              <Center>{appName}</Center>
+            </HoverCard.Target>
+            <HoverCard.Dropdown>
+              <Stack gap="xs">
+                <Center>{appName}</Center>
+                <Center>{`v${appVersion}`}</Center>
+                <Center>
+                  Released{" "}
+                  {prettyMilliseconds(
+                    new Date().getTime() -
+                      new Date(VITE_BUILD_DATE_TIME).getTime(),
+                    {
+                      compact: true,
+                      verbose: true,
+                    },
+                  )}{" "}
+                  ago
+                </Center>
+              </Stack>
+            </HoverCard.Dropdown>
+          </HoverCard>
+        </Group>
+      }
+    >
+      <FocusTrap.InitialFocus />
+      <Drawer.Body>
+        <Accordion variant="separated" multiple>
+          <Accordion.Item value="aiSettings">
+            <Accordion.Control>AI Settings</Accordion.Control>
+            <Accordion.Panel>
+              <Suspense>
+                <AISettingsForm />
+              </Suspense>
+            </Accordion.Panel>
+          </Accordion.Item>
+          <Accordion.Item value="searchSettings">
+            <Accordion.Control>Search Settings</Accordion.Control>
+            <Accordion.Panel>
+              <Suspense>
+                <SearchSettingsForm />
+              </Suspense>
+            </Accordion.Panel>
+          </Accordion.Item>
+          <Accordion.Item value="interfaceSettings">
+            <Accordion.Control>Interface Settings</Accordion.Control>
+            <Accordion.Panel>
+              <Suspense>
+                <InterfaceSettingsForm />
+              </Suspense>
+            </Accordion.Panel>
+          </Accordion.Item>
+          <Accordion.Item value="voiceSettings">
+            <Accordion.Control>Voice Settings</Accordion.Control>
+            <Accordion.Panel>
+              <Suspense>
+                <VoiceSettingsForm />
+              </Suspense>
+            </Accordion.Panel>
+          </Accordion.Item>
+          <Accordion.Item value="actions">
+            <Accordion.Control>Actions</Accordion.Control>
+            <Accordion.Panel>
+              <Suspense>
+                <ActionsForm />
+              </Suspense>
+            </Accordion.Panel>
+          </Accordion.Item>
+        </Accordion>
+      </Drawer.Body>
+    </Drawer>
+  );
+}

client/components/Pages/Main/Menu/SearchSettingsForm.tsx

@@ -0,0 +1,52 @@
+import { Slider, Stack, Switch, Text } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { usePubSub } from "create-pubsub/react";
+import { settingsPubSub } from "../../../../modules/pubSub";
+
+export default function SearchSettingsForm() {
+  const [settings, setSettings] = usePubSub(settingsPubSub);
+  const form = useForm({
+    initialValues: settings,
+    onValuesChange: setSettings,
+  });
+
+  return (
+    <Stack gap="md">
+      <Stack gap="xs" mb="md">
+        <Text size="sm">Search Results Limit</Text>
+        <Text size="xs" c="dimmed">
+          Maximum number of search results to fetch. A higher value provides
+          more results but may increase search time.
+        </Text>
+        <Slider
+          {...form.getInputProps("searchResultsLimit")}
+          min={5}
+          max={30}
+          step={5}
+          marks={[5, 10, 15, 20, 25, 30].map((value) => ({
+            value,
+            label: value.toString(),
+          }))}
+        />
+      </Stack>
+
+      <Switch
+        {...form.getInputProps("enableTextSearch", {
+          type: "checkbox",
+        })}
+        label="Text Search"
+        labelPosition="left"
+        description="Enable or disable text search results. When enabled, relevant web pages will be displayed in the search results."
+      />
+
+      <Switch
+        {...form.getInputProps("enableImageSearch", {
+          type: "checkbox",
+        })}
+        label="Image Search"
+        labelPosition="left"
+        description="Enable or disable image search results. When enabled, relevant images will be displayed alongside web search results."
+      />
+    </Stack>
+  );
+}

client/components/Pages/Main/Menu/VoiceSettingsForm.tsx

@@ -0,0 +1,72 @@
+import { Select, Stack, Text } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import getUnicodeFlagIcon from "country-flag-icons/unicode";
+import { usePubSub } from "create-pubsub/react";
+import { useCallback, useEffect, useState } from "react";
+import { settingsPubSub } from "../../../../modules/pubSub";
+
+export default function VoiceSettingsForm() {
+  const [settings, setSettings] = usePubSub(settingsPubSub);
+  const [voices, setVoices] = useState<{ value: string; label: string }[]>([]);
+
+  const getCountryFlag = useCallback((langCode: string) => {
+    try {
+      const country = langCode.split("-")[1];
+
+      if (country.length !== 2) throw new Error("Invalid country code");
+
+      return getUnicodeFlagIcon(country);
+    } catch {
+      return "🌐";
+    }
+  }, []);
+
+  const form = useForm({
+    initialValues: settings,
+    onValuesChange: setSettings,
+  });
+
+  useEffect(() => {
+    const updateVoices = () => {
+      const availableVoices = self.speechSynthesis.getVoices();
+      const uniqueVoices = Array.from(
+        new Map(
+          availableVoices.map((voice) => [voice.voiceURI, voice]),
+        ).values(),
+      );
+      const voiceOptions = uniqueVoices
+        .sort((a, b) => a.lang.localeCompare(b.lang))
+        .map((voice) => ({
+          value: voice.voiceURI,
+          label: `${getCountryFlag(voice.lang)} ${voice.name} • ${voice.lang}`,
+        }));
+      setVoices(voiceOptions);
+    };
+
+    updateVoices();
+
+    self.speechSynthesis.onvoiceschanged = updateVoices;
+
+    return () => {
+      self.speechSynthesis.onvoiceschanged = null;
+    };
+  }, [getCountryFlag]);
+
+  return (
+    <Stack gap="xs">
+      <Text size="sm">Voice Selection</Text>
+      <Text size="xs" c="dimmed">
+        Choose the voice to use when reading AI responses aloud.
+      </Text>
+      <Select
+        {...form.getInputProps("selectedVoiceId")}
+        data={voices}
+        searchable
+        nothingFoundMessage="No voices found"
+        placeholder="Auto-detected"
+        allowDeselect={true}
+        clearable
+      />
+    </Stack>
+  );
+}

client/components/Search/Form/SearchForm.tsx

@@ -0,0 +1,131 @@
+import { Button, Group, Stack, Textarea } from "@mantine/core";
+import { usePubSub } from "create-pubsub/react";
+import {
+  type ChangeEvent,
+  type KeyboardEvent,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { useLocation } from "wouter";
+import { handleEnterKeyDown } from "../../../modules/keyboard";
+import { addLogEntry } from "../../../modules/logEntries";
+import { postMessageToParentWindow } from "../../../modules/parentWindow";
+import { settingsPubSub } from "../../../modules/pubSub";
+import { getRandomQuerySuggestion } from "../../../modules/querySuggestions";
+import { sleepUntilIdle } from "../../../modules/sleep";
+import { searchAndRespond } from "../../../modules/textGeneration";
+
+export default function SearchForm({
+  query,
+  updateQuery,
+  additionalButtons,
+}: {
+  query: string;
+  updateQuery: (query: string) => void;
+  additionalButtons?: ReactNode;
+}) {
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const [textAreaValue, setTextAreaValue] = useState(query);
+  const defaultSuggestedQuery = "Anything you need!";
+  const [suggestedQuery, setSuggestedQuery] = useState(defaultSuggestedQuery);
+  const [, navigate] = useLocation();
+  const [settings] = usePubSub(settingsPubSub);
+
+  const handleMount = useCallback(async () => {
+    await sleepUntilIdle();
+    searchAndRespond();
+  }, []);
+
+  const handleInitialSuggestion = useCallback(async () => {
+    const suggestion = await getRandomQuerySuggestion();
+    setSuggestedQuery(suggestion);
+  }, []);
+
+  useEffect(() => {
+    handleMount();
+    handleInitialSuggestion();
+  }, [handleMount, handleInitialSuggestion]);
+
+  const handleInputChange = async (event: ChangeEvent<HTMLTextAreaElement>) => {
+    const text = event.target.value;
+
+    setTextAreaValue(text);
+
+    if (text.length === 0) {
+      setSuggestedQuery(await getRandomQuerySuggestion());
+    }
+  };
+
+  const handleClearButtonClick = async () => {
+    setSuggestedQuery(await getRandomQuerySuggestion());
+    setTextAreaValue("");
+    textAreaRef.current?.focus();
+    addLogEntry("User cleaned the search query field");
+  };
+
+  const startSearching = useCallback(() => {
+    const queryToEncode =
+      textAreaValue.trim().length >= 1 ? textAreaValue : suggestedQuery;
+
+    setTextAreaValue(queryToEncode);
+
+    const queryString = `q=${encodeURIComponent(queryToEncode)}`;
+
+    postMessageToParentWindow({ queryString, hash: "" });
+
+    navigate(`/?${queryString}`, { replace: true });
+
+    updateQuery(queryToEncode);
+
+    searchAndRespond();
+
+    addLogEntry(
+      `User submitted a search with ${queryToEncode.length} characters length`,
+    );
+  }, [textAreaValue, suggestedQuery, updateQuery, navigate]);
+
+  const handleSubmit = (event: { preventDefault: () => void }) => {
+    event.preventDefault();
+    startSearching();
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    handleEnterKeyDown(event, settings, () => handleSubmit(event));
+  };
+
+  return (
+    <form onSubmit={handleSubmit} style={{ width: "100%" }}>
+      <Stack gap="xs">
+        <Textarea
+          value={textAreaValue}
+          placeholder={suggestedQuery}
+          ref={textAreaRef}
+          onKeyDown={handleKeyDown}
+          onChange={handleInputChange}
+          autosize
+          minRows={1}
+          maxRows={8}
+          autoFocus
+        />
+        <Group gap="xs">
+          {textAreaValue.length >= 1 ? (
+            <Button
+              size="xs"
+              onClick={handleClearButtonClick}
+              variant="default"
+            >
+              Clear
+            </Button>
+          ) : null}
+          <Button size="xs" type="submit" variant="default" flex={1}>
+            Search
+          </Button>
+          {additionalButtons}
+        </Group>
+      </Stack>
+    </form>
+  );
+}

client/components/Search/Results/Graphical/ImageResultsList.tsx

@@ -0,0 +1,122 @@
+import { Carousel } from "@mantine/carousel";
+import { Button, Group, Stack, Text, Transition, rem } from "@mantine/core";
+import { useEffect, useState } from "react";
+import type { ImageSearchResult } from "../../../../modules/types";
+import "@mantine/carousel/styles.css";
+import Lightbox from "yet-another-react-lightbox";
+import Captions from "yet-another-react-lightbox/plugins/captions";
+import "yet-another-react-lightbox/styles.css";
+import "yet-another-react-lightbox/plugins/captions.css";
+import { addLogEntry } from "../../../../modules/logEntries";
+import { getHostname } from "../../../../modules/stringFormatters";
+
+export default function ImageResultsList({
+  imageResults,
+}: {
+  imageResults: ImageSearchResult[];
+}) {
+  const [isLightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
+  const [canStartTransition, setCanStartTransition] = useState(false);
+
+  useEffect(() => {
+    setCanStartTransition(true);
+  }, []);
+
+  const handleImageClick = (index: number) => {
+    setLightboxIndex(index);
+    setLightboxOpen(true);
+  };
+
+  const imageStyle = {
+    objectFit: "cover",
+    height: rem(180),
+    width: rem(240),
+    borderRadius: rem(4),
+    border: `${rem(2)} solid var(--mantine-color-default-border)`,
+    cursor: "zoom-in",
+  } as const;
+
+  return (
+    <>
+      <Carousel slideSize="0" slideGap="xs" align="start" dragFree loop>
+        {imageResults.map(([title, sourceUrl, thumbnailUrl], index) => (
+          <Transition
+            key={`${title}-${sourceUrl}-${thumbnailUrl}`}
+            mounted={canStartTransition}
+            transition="fade"
+            timingFunction="ease"
+            enterDelay={index * 250}
+            duration={1500}
+          >
+            {(styles) => (
+              <Carousel.Slide style={styles}>
+                <img
+                  alt={title}
+                  src={thumbnailUrl}
+                  loading="lazy"
+                  onClick={() => handleImageClick(index)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      handleImageClick(index);
+                    }
+                  }}
+                  style={imageStyle}
+                />
+              </Carousel.Slide>
+            )}
+          </Transition>
+        ))}
+      </Carousel>
+      <Lightbox
+        open={isLightboxOpen}
+        close={() => setLightboxOpen(false)}
+        plugins={[Captions]}
+        index={lightboxIndex}
+        slides={imageResults.map(([title, url, thumbnailUrl, sourceUrl]) => ({
+          src: thumbnailUrl,
+          alt: title,
+          description: (
+            <Stack align="center" gap="md">
+              {title && (
+                <Text component="cite" ta="center">
+                  {title}
+                </Text>
+              )}
+              <Group align="center" justify="center" gap="xs">
+                <Button
+                  variant="subtle"
+                  component="a"
+                  size="xs"
+                  href={sourceUrl}
+                  target="_blank"
+                  title="Click to see the image in full size"
+                  rel="noopener noreferrer"
+                  onClick={() => {
+                    addLogEntry("User visited an image result in full size");
+                  }}
+                >
+                  View in full resolution
+                </Button>
+                <Button
+                  variant="subtle"
+                  component="a"
+                  href={url}
+                  target="_blank"
+                  size="xs"
+                  title="Click to visit the page where the image was found"
+                  rel="noopener noreferrer"
+                  onClick={() => {
+                    addLogEntry("User visited an image result source");
+                  }}
+                >
+                  Visit {getHostname(url)}
+                </Button>
+              </Group>
+            </Stack>
+          ),
+        }))}
+      />
+    </>
+  );
+}