Upload 39 files

.dockerignore

@@ -0,0 +1,27 @@
+# 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?
+
+# Folder for testing Transformer.js models locally
+/public/models

.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

.github/workflows/check-docker-container.yml

@@ -0,0 +1,16 @@
+name: Check Docker Container
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+jobs:
+  docker:
+    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/code-quality.yml

@@ -0,0 +1,18 @@
+name: Code Quality
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "npm"
+      - run: npm ci
+      - run: npm run lint

.github/workflows/huggingface-sync.yml

@@ -0,0 +1,22 @@
+name: Sync to Hugging Face Spaces
+on:
+  push:
+    branches:
+      - main
+jobs:
+  sync:
+    name: Sync
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+        with:
+          lfs: true
+      - name: Sync to Hugging Face Spaces
+        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/publish-docker-image.yml

@@ -0,0 +1,37 @@
+name: Publish Docker image to GitHub Packages
+
+on:
+  push:
+    branches: ["main"]
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Log in to the Container registry
+        uses: docker/login-action@7840e6ddd4a9223910798f6a315544257fccd96e
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@2ee3d3070bb41b40bf7305d15233321e12c1dc5c
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+      - name: Build and push Docker image
+        uses: docker/build-push-action@729f7f49266dec5e72fe7339273d3f7e65abacd7
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+client/dist
+.DS_Store

.npmrc

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

Dockerfile

@@ -0,0 +1,22 @@
+FROM searxng/searxng:2024.4.29-e45a7cc06
+ENV PORT ${PORT:-7860}
+EXPOSE ${PORT}
+RUN apk add --update \
+  nodejs \
+  npm \
+  git
+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 /etc/searxng \
+  && chmod 777 /etc/searxng
+ARG USERNAME=user
+RUN adduser -D -u 1000 ${USERNAME} \
+  && mkdir -p /home/${USERNAME}/app \
+  && chown -R ${USERNAME}:${USERNAME} /home/${USERNAME}
+USER user
+WORKDIR /home/${USERNAME}/app 
+COPY --chown=${USERNAME}:${USERNAME} . .
+RUN npm ci \
+  && npm run build
+ENTRYPOINT [ "/bin/sh", "-c" ]
+CMD [ "/usr/local/searxng/dockerfiles/docker-entrypoint.sh -f & npm start -- --host" ]

client/components/App.tsx

@@ -0,0 +1,51 @@
+import { usePubSub } from "create-pubsub/react";
+import {
+  promptPubSub,
+  responsePubSub,
+  searchResultsPubSub,
+  urlsDescriptionsPubSub,
+} from "../modules/pubSub";
+import { SearchForm } from "./SearchForm";
+import { Toaster } from "react-hot-toast";
+import Markdown from "markdown-to-jsx";
+import { getDisableAiResponseSetting } from "../modules/pubSub";
+import { SearchResultsList } from "./SearchResultsList";
+import { useEffect } from "react";
+import { prepareTextGeneration } from "../modules/textGeneration";
+
+export function App() {
+  const [query, updateQuery] = usePubSub(promptPubSub);
+  const [response] = usePubSub(responsePubSub);
+  const [searchResults] = usePubSub(searchResultsPubSub);
+  const [urlsDescriptions] = usePubSub(urlsDescriptionsPubSub);
+
+  useEffect(() => {
+    prepareTextGeneration();
+  }, []);
+
+  return (
+    <>
+      <SearchForm query={query} updateQuery={updateQuery} />
+      {!getDisableAiResponseSetting() && response.length > 0 && (
+        <div
+          style={{
+            backgroundColor: "var(--background)",
+            borderRadius: "6px",
+            padding: "10px 25px",
+          }}
+        >
+          <Markdown>{response}</Markdown>
+        </div>
+      )}
+      {searchResults.length > 0 && (
+        <div>
+          <SearchResultsList
+            searchResults={searchResults}
+            urlsDescriptions={urlsDescriptions}
+          />
+        </div>
+      )}
+      <Toaster />
+    </>
+  );
+}

client/components/SearchForm.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useRef, FormEvent, useState, useCallback } from "react";
+import TextareaAutosize from "react-textarea-autosize";
+import { getRandomQuerySuggestion } from "../modules/querySuggestions";
+import { SettingsButton } from "./SettingsButton";
+
+export function SearchForm({
+  query,
+  updateQuery,
+}: {
+  query: string;
+  updateQuery: (query: string) => void;
+}) {
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const windowInnerHeight = useWindowInnerHeight();
+  const [suggestedQuery, setSuggestedQuery] = useState("");
+
+  useEffect(() => {
+    getRandomQuerySuggestion().then((querySuggestion) => {
+      setSuggestedQuery(querySuggestion);
+    });
+  }, []);
+
+  const handleInputChange = async (
+    event: React.ChangeEvent<HTMLTextAreaElement>,
+  ) => {
+    const userQueryIsBlank = event.target.value.length === 0;
+    const suggestedQueryIsBlank = suggestedQuery.length === 0;
+
+    if (userQueryIsBlank && suggestedQueryIsBlank) {
+      setSuggestedQuery(await getRandomQuerySuggestion());
+    } else if (!userQueryIsBlank && !suggestedQueryIsBlank) {
+      setSuggestedQuery("");
+    }
+  };
+
+  const startSearching = useCallback(() => {
+    let queryToEncode = suggestedQuery;
+
+    if (textAreaRef.current && textAreaRef.current.value.trim().length > 0) {
+      queryToEncode = textAreaRef.current.value;
+    }
+
+    self.history.pushState(
+      null,
+      "",
+      `/?q=${encodeURIComponent(queryToEncode)}`,
+    );
+
+    updateQuery(queryToEncode);
+
+    location.reload();
+  }, [suggestedQuery, updateQuery]);
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    startSearching();
+  };
+
+  useEffect(() => {
+    const keyboardEventHandler = (event: KeyboardEvent) => {
+      if (event.code === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        startSearching();
+      }
+    };
+    const textArea = textAreaRef.current;
+    textArea?.addEventListener("keypress", keyboardEventHandler);
+    return () => {
+      textArea?.removeEventListener("keypress", keyboardEventHandler);
+    };
+  }, [startSearching]);
+
+  return (
+    <div
+      style={
+        query.length === 0
+          ? {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              height: windowInnerHeight * 0.8,
+            }
+          : undefined
+      }
+    >
+      <form onSubmit={handleSubmit} style={{ width: "100%" }}>
+        <TextareaAutosize
+          defaultValue={query}
+          placeholder={suggestedQuery}
+          ref={textAreaRef}
+          onChange={handleInputChange}
+          autoFocus
+          minRows={1}
+          maxRows={6}
+        />
+        <div style={{ display: "flex", width: "100%" }}>
+          <button type="submit" style={{ width: "100%", fontSize: "small" }}>
+            Search
+          </button>
+          <SettingsButton />
+        </div>
+      </form>
+    </div>
+  );
+}
+
+function useWindowInnerHeight() {
+  const [windowInnerHeight, setWindowInnerHeight] = useState(self.innerHeight);
+
+  useEffect(() => {
+    const handleResize = () => setWindowInnerHeight(self.innerHeight);
+
+    self.addEventListener("resize", handleResize);
+
+    return () => self.removeEventListener("resize", handleResize);
+  }, []);
+
+  return windowInnerHeight;
+}

client/components/SearchResultsList.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useState } from "react";
+import { SearchResults } from "../modules/search";
+import { Tooltip } from "react-tooltip";
+import Markdown from "markdown-to-jsx";
+
+export function SearchResultsList({
+  searchResults,
+  urlsDescriptions,
+}: {
+  searchResults: SearchResults;
+  urlsDescriptions: Record<string, string>;
+}) {
+  const [windowWidth, setWindowWidth] = useState(self.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(self.innerWidth);
+    };
+
+    self.addEventListener("resize", handleResize);
+
+    return () => {
+      self.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  const shouldDisplayDomainBelowTitle = windowWidth < 720;
+
+  return (
+    <ul>
+      {searchResults.map(([title, snippet, url], index) => (
+        <li key={url}>
+          <Tooltip
+            id={`search-result-${index}`}
+            place="top-start"
+            variant="info"
+            opacity="1"
+            style={{ width: "75vw", maxWidth: "600px" }}
+          >
+            {snippet}
+            <br />
+            <br />
+            {url}
+          </Tooltip>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              gap: shouldDisplayDomainBelowTitle ? 0 : "1rem",
+              flexDirection: shouldDisplayDomainBelowTitle ? "column" : "row",
+            }}
+          >
+            <a
+              href={url}
+              data-tooltip-id={`search-result-${index}`}
+              target="_blank"
+            >
+              {title}
+            </a>
+            <a href={url} target="_blank">
+              <cite
+                style={{
+                  fontSize: "small",
+                  color: "gray",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {new URL(url).hostname.replace("www.", "")}
+              </cite>
+            </a>
+          </div>
+          {urlsDescriptions[url] && (
+            <blockquote>
+              <Markdown>{urlsDescriptions[url]}</Markdown>
+            </blockquote>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}

client/components/SettingsButton.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { SettingsForm } from "./SettingsForm";
+import { toast } from "react-hot-toast";
+
+export function SettingsButton() {
+  const [isToastOpen, setToastOpen] = useState(false);
+
+  const toastId = "settings-toast";
+
+  const openToast = () => {
+    setToastOpen(true);
+
+    toast(
+      <div>
+        <SettingsForm />
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            marginTop: "8px",
+          }}
+        >
+          <button style={{ fontSize: "small" }} onClick={closeToast}>
+            Done
+          </button>
+        </div>
+      </div>,
+      {
+        id: toastId,
+        duration: Infinity,
+        position: "bottom-center",
+        style: {
+          borderRadius: "10px",
+          background: "var(--background)",
+          color: "var(--text-main)",
+        },
+      },
+    );
+  };
+
+  const closeToast = () => {
+    setToastOpen(false);
+    toast.dismiss(toastId);
+  };
+
+  return (
+    <button
+      style={{ fontSize: "small", marginRight: 0 }}
+      onClick={(event) => {
+        event.preventDefault();
+        isToastOpen ? closeToast() : openToast();
+      }}
+    >
+      Settings
+    </button>
+  );
+}

client/components/SettingsForm.tsx

@@ -0,0 +1,109 @@
+import { usePubSub } from "create-pubsub/react";
+import {
+  disableAiResponseSettingPubSub,
+  summarizeLinksSettingPubSub,
+  useLargerModelSettingPubSub,
+  disableWebGpuUsageSettingPubSub,
+} from "../modules/pubSub";
+import { Tooltip } from "react-tooltip";
+import { isWebGPUAvailable } from "../modules/webGpu";
+import type { ChangeEventHandler } from "react";
+
+export function SettingsForm() {
+  const [disableAiResponse, setDisableAiResponse] = usePubSub(
+    disableAiResponseSettingPubSub,
+  );
+  const [summarizeLinks, setSummarizeLinks] = usePubSub(
+    summarizeLinksSettingPubSub,
+  );
+  const [useLargerModel, setUseLargerModel] = usePubSub(
+    useLargerModelSettingPubSub,
+  );
+  const [disableWebGpuUsage, setDisableWebGpuUsage] = usePubSub(
+    disableWebGpuUsageSettingPubSub,
+  );
+
+  return (
+    <div>
+      <div
+        style={{
+          textAlign: "center",
+          fontSize: "16px",
+          fontWeight: "bolder",
+          margin: "10px",
+        }}
+      >
+        Settings
+      </div>
+      <div>
+        <SettingCheckbox
+          label="Use a larger AI model"
+          checked={useLargerModel}
+          onChange={(event) => setUseLargerModel(event.target.checked)}
+          tooltipId="use-large-model-setting-tooltip"
+          tooltipContent="Generates better responses, but takes longer to load"
+        />
+      </div>
+      <div>
+        <SettingCheckbox
+          label="Summarize links"
+          checked={summarizeLinks}
+          onChange={(event) => setSummarizeLinks(event.target.checked)}
+          tooltipId="summarize-links-setting-tooltip"
+          tooltipContent="Provides a short overview for each of the links from the web search results"
+        />
+      </div>
+      {isWebGPUAvailable && (
+        <div>
+          <SettingCheckbox
+            label="Disable WebGPU usage"
+            checked={disableWebGpuUsage}
+            onChange={(event) => setDisableWebGpuUsage(event.target.checked)}
+            tooltipId="use-large-model-setting-tooltip"
+            tooltipContent="Disables the WebGPU and run smaller AI models only using the CPU"
+          />
+        </div>
+      )}
+      <div>
+        <SettingCheckbox
+          label="Disable AI response"
+          checked={disableAiResponse}
+          onChange={(event) => setDisableAiResponse(event.target.checked)}
+          tooltipId="disable-ai-setting-tooltip"
+          tooltipContent="Disables the AI response, in case you only want to see the links from the web search results"
+        />
+      </div>
+    </div>
+  );
+}
+
+function SettingCheckbox(props: {
+  label: string;
+  checked?: boolean;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  tooltipId?: string;
+  tooltipContent?: string;
+}) {
+  return (
+    <>
+      <Tooltip
+        id={props.tooltipId}
+        place="top-start"
+        variant="info"
+        opacity="1"
+        style={{ maxWidth: "90vw" }}
+      />
+      <label
+        data-tooltip-id={props.tooltipId}
+        data-tooltip-content={props.tooltipContent}
+      >
+        <input
+          type="checkbox"
+          checked={props.checked}
+          onChange={props.onChange}
+        />
+        {props.label}
+      </label>
+    </>
+  );
+}

client/index.css

@@ -0,0 +1,21 @@
+@import url("../node_modules/water.css/out/water.css");
+@import url("../node_modules/inter-ui/inter.css");
+@import url("../node_modules/inter-ui/inter-variable.css");
+@import url("../node_modules/react-tooltip/dist/react-tooltip.css");
+
+:root,
+html,
+body {
+  font-family: Inter, sans-serif;
+  font-feature-settings:
+    "liga" 1,
+    "calt" 1;
+}
+
+@supports (font-variation-settings: normal) {
+  :root,
+  html,
+  body {
+    font-family: InterVariable, sans-serif;
+  }
+}

client/index.html

@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no"
+    />
+    <meta
+      name="description"
+      content="Minimalist web-searching app with an AI assistant that is always available and runs directly from your browser."
+    />
+    <meta itemprop="name" content="MiniSearch" />
+    <meta
+      itemprop="description"
+      content="Minimalist web-searching app with an AI assistant that is always available and runs directly from your browser."
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="MiniSearch" />
+    <meta
+      property="og:description"
+      content="Minimalist web-searching app with an AI assistant that is always available and runs directly from your browser."
+    />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content="MiniSearch" />
+    <meta
+      name="twitter:description"
+      content="Minimalist web-searching app with an AI assistant that is always available and runs directly from your browser."
+    />
+    <title>MiniSearch</title>
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔍</text></svg>"
+    />
+    <link rel="stylesheet" href="./index.css" />
+  </head>
+  <body>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

client/index.tsx

@@ -0,0 +1,6 @@
+import { createRoot } from "react-dom/client";
+import { App } from "./components/App";
+
+createRoot(document.body.appendChild(document.createElement("div"))).render(
+  <App />,
+);

client/modules/mobileDetection.ts

@@ -0,0 +1,4 @@
+import MobileDetect from "mobile-detect";
+
+export const isRunningOnMobile =
+  new MobileDetect(self.navigator.userAgent).mobile() !== null;

client/modules/pubSub.ts

@@ -0,0 +1,71 @@
+import { createPubSub } from "create-pubsub";
+import { SearchResults } from "./search";
+
+function createLocalStoragePubSub<T>(localStorageKey: string, defaultValue: T) {
+  const localStorageValue = localStorage.getItem(localStorageKey);
+  const localStoragePubSub = createPubSub(
+    localStorageValue ? (JSON.parse(localStorageValue) as T) : defaultValue,
+  );
+
+  const [, onValueChange] = localStoragePubSub;
+
+  onValueChange((value) =>
+    localStorage.setItem(localStorageKey, JSON.stringify(value)),
+  );
+
+  return localStoragePubSub;
+}
+
+export const disableAiResponseSettingPubSub = createLocalStoragePubSub(
+  "disableAiResponse",
+  false,
+);
+
+export const [, , getDisableAiResponseSetting] = disableAiResponseSettingPubSub;
+
+export const summarizeLinksSettingPubSub = createLocalStoragePubSub(
+  "summarizeLinks",
+  false,
+);
+
+export const [, , getSummarizeLinksSetting] = summarizeLinksSettingPubSub;
+
+export const useLargerModelSettingPubSub = createLocalStoragePubSub(
+  "useLargerModel",
+  false,
+);
+
+export const [, , getUseLargerModelSetting] = useLargerModelSettingPubSub;
+
+export const disableWebGpuUsageSettingPubSub = createLocalStoragePubSub(
+  "disableWebGpuUsage",
+  false,
+);
+
+export const [, , getDisableWebGpuUsageSetting] =
+  disableWebGpuUsageSettingPubSub;
+
+export const querySuggestionsPubSub = createLocalStoragePubSub<string[]>(
+  "querySuggestions",
+  [],
+);
+
+export const [updateQuerySuggestions, , getQuerySuggestions] =
+  querySuggestionsPubSub;
+
+export const promptPubSub = createPubSub("");
+
+export const [updatePrompt] = promptPubSub;
+
+export const responsePubSub = createPubSub("");
+
+export const [updateResponse] = responsePubSub;
+
+export const searchResultsPubSub = createPubSub<SearchResults>([]);
+
+export const [updateSearchResults, , getSearchResults] = searchResultsPubSub;
+
+export const urlsDescriptionsPubSub = createPubSub<Record<string, string>>({});
+
+export const [updateUrlsDescriptions, , getUrlsDescriptions] =
+  urlsDescriptionsPubSub;

client/modules/querySuggestions.ts

@@ -0,0 +1,28 @@
+import { getQuerySuggestions, updateQuerySuggestions } from "./pubSub";
+
+export async function getRandomQuerySuggestion() {
+  if (getQuerySuggestions().length === 0) await refillQuerySuggestions(25);
+
+  const querySuggestions = getQuerySuggestions();
+
+  const randomQuerySuggestion = querySuggestions.pop() as string;
+
+  updateQuerySuggestions(querySuggestions);
+
+  return randomQuerySuggestion;
+}
+
+async function refillQuerySuggestions(limit?: number) {
+  const querySuggestionsFileUrl = new URL(
+    "/query-suggestions.json",
+    self.location.origin,
+  );
+
+  const fetchResponse = await fetch(querySuggestionsFileUrl.toString());
+
+  const querySuggestionsList: string[] = await fetchResponse.json();
+
+  updateQuerySuggestions(
+    querySuggestionsList.sort(() => Math.random() - 0.5).slice(0, limit),
+  );
+}

client/modules/ratchet.ts

@@ -0,0 +1,37 @@
+import {
+  Model,
+  Quantization,
+  default as initialize,
+} from "@ratchet-ml/ratchet-web";
+import ratchetWasmUrl from "@ratchet-ml/ratchet-web/ratchet-web_bg.wasm?url";
+
+let model: Model | undefined;
+
+export async function initializeRatchet(
+  handleLoadingProgress: (loadingProgressPercentage: number) => void,
+) {
+  await initialize(ratchetWasmUrl);
+
+  model = await Model.load(
+    { Phi: "phi3" },
+    Quantization.Q8_0,
+    handleLoadingProgress,
+  );
+}
+
+export async function runCompletion(
+  prompt: string,
+  callback: (completionChunk: string) => void,
+) {
+  if (!model) throw new Error("Ratchet is not initialized.");
+
+  await model.run({ prompt, callback });
+}
+
+export async function exitRatchet() {
+  if (!model) throw new Error("Ratchet is not initialized.");
+
+  model.free();
+
+  model = undefined;
+}

client/modules/search.ts

@@ -0,0 +1,28 @@
+import { convert as convertHtmlToPlainText } from "html-to-text";
+
+export type SearchResults = [title: string, snippet: string, url: string][];
+
+export async function search(query: string, limit?: number) {
+  const searchUrl = new URL("/search", self.location.origin);
+
+  searchUrl.searchParams.set("q", query);
+  searchUrl.searchParams.set("token", VITE_SEARCH_TOKEN);
+
+  if (limit && limit > 0) {
+    searchUrl.searchParams.set("limit", limit.toString());
+  }
+
+  const response = await fetch(searchUrl.toString());
+
+  if (!response.ok) return [];
+
+  const searchResults = (await response.json()) as SearchResults;
+
+  const cleanedSearchResults = searchResults.map(([title, snippet, url]) => [
+    convertHtmlToPlainText(title, { wordwrap: false }),
+    convertHtmlToPlainText(snippet, { wordwrap: false }),
+    url,
+  ]) as SearchResults;
+
+  return cleanedSearchResults;
+}

client/modules/textGeneration.ts

@@ -0,0 +1,526 @@
+import { isWebGPUAvailable } from "./webGpu";
+import {
+  updatePrompt,
+  updateSearchResults,
+  getDisableAiResponseSetting,
+  getSummarizeLinksSetting,
+  getUseLargerModelSetting,
+  updateResponse,
+  getSearchResults,
+  updateUrlsDescriptions,
+  getUrlsDescriptions,
+  getDisableWebGpuUsageSetting,
+} from "./pubSub";
+import { SearchResults, search } from "./search";
+import { query, debug } from "./urlParams";
+import toast from "react-hot-toast";
+import { isRunningOnMobile } from "./mobileDetection";
+
+export async function prepareTextGeneration() {
+  if (query === null) return;
+
+  document.title = query;
+
+  updatePrompt(query);
+
+  updateLoadingToast("Searching the web...");
+
+  let searchResults = await search(
+    query.length > 2000 ? (await getKeywords(query, 20)).join(" ") : query,
+    30,
+  );
+
+  if (searchResults.length === 0) {
+    const queryKeywords = await getKeywords(query, 10);
+
+    searchResults = await search(queryKeywords.join(" "), 30);
+  }
+
+  if (searchResults.length === 0) {
+    toast(
+      "It looks like your current search did not return any results. Try refining your search by adding more keywords or rephrasing your query.",
+      {
+        position: "bottom-center",
+        duration: 10000,
+        icon: "💡",
+      },
+    );
+  }
+
+  updateSearchResults(searchResults);
+
+  updateUrlsDescriptions(
+    searchResults.reduce(
+      (acc, [, snippet, url]) => ({ ...acc, [url]: snippet }),
+      {},
+    ),
+  );
+
+  dismissLoadingToast();
+
+  if (getDisableAiResponseSetting() && !getSummarizeLinksSetting()) return;
+
+  if (debug) console.time("Response Generation Time");
+
+  updateLoadingToast("Loading AI model...");
+
+  try {
+    try {
+      if (!isWebGPUAvailable) throw Error("WebGPU is not available.");
+
+      if (getDisableWebGpuUsageSetting()) throw Error("WebGPU is disabled.");
+
+      if (getUseLargerModelSetting()) {
+        try {
+          await generateTextWithWebLlm();
+        } catch (error) {
+          await generateTextWithRatchet();
+        }
+      } else {
+        try {
+          await generateTextWithRatchet();
+        } catch (error) {
+          await generateTextWithWebLlm();
+        }
+      }
+    } catch (error) {
+      await generateTextWithWllama();
+    }
+  } catch (error) {
+    console.error("Error while generating response with wllama:", error);
+
+    toast.error(
+      "Could not generate response. The browser may be out of memory. Please close this tab and run this search again in a new one.",
+      { duration: 10000 },
+    );
+  } finally {
+    dismissLoadingToast();
+  }
+
+  if (debug) {
+    console.timeEnd("Response Generation Time");
+  }
+}
+
+function updateLoadingToast(text: string) {
+  toast.loading(text, {
+    id: "text-generation-loading-toast",
+    position: "bottom-center",
+  });
+}
+
+function dismissLoadingToast() {
+  toast.dismiss("text-generation-loading-toast");
+}
+
+async function generateTextWithWebLlm() {
+  const { CreateWebWorkerEngine, CreateEngine, hasModelInCache } = await import(
+    "@mlc-ai/web-llm"
+  );
+
+  const availableModels = {
+    Llama: "Llama-3-8B-Instruct-q4f16_1",
+    Mistral: "Mistral-7B-Instruct-v0.2-q4f16_1",
+    Gemma: "gemma-2b-it-q4f16_1",
+    Phi: "Phi2-q4f16_1",
+    TinyLlama: "TinyLlama-1.1B-Chat-v0.4-q0f16",
+  };
+
+  const selectedModel = getUseLargerModelSetting()
+    ? availableModels.Llama
+    : availableModels.Gemma;
+
+  const isModelCached = await hasModelInCache(selectedModel);
+
+  let initProgressCallback:
+    | import("@mlc-ai/web-llm").InitProgressCallback
+    | undefined;
+
+  if (isModelCached) {
+    updateLoadingToast("Generating response...");
+  } else {
+    initProgressCallback = (report) => {
+      updateLoadingToast(
+        `Loading: ${report.text.replaceAll("[", "(").replaceAll("]", ")")}`,
+      );
+    };
+  }
+
+  const engine = Worker
+    ? await CreateWebWorkerEngine(
+        new Worker(new URL("./webLlmWorker.ts", import.meta.url), {
+          type: "module",
+        }),
+        selectedModel,
+        { initProgressCallback },
+      )
+    : await CreateEngine(selectedModel, { initProgressCallback });
+
+  if (!getDisableAiResponseSetting()) {
+    updateLoadingToast("Generating response...");
+
+    const completion = await engine.chat.completions.create({
+      stream: true,
+      messages: [{ role: "user", content: getMainPrompt() }],
+      max_gen_len: 768,
+    });
+
+    let streamedMessage = "";
+
+    for await (const chunk of completion) {
+      const deltaContent = chunk.choices[0].delta.content;
+
+      if (deltaContent) streamedMessage += deltaContent;
+
+      updateResponse(streamedMessage);
+    }
+  }
+
+  await engine.resetChat();
+
+  if (getSummarizeLinksSetting()) {
+    updateLoadingToast("Summarizing links...");
+
+    for (const [title, snippet, url] of getSearchResults()) {
+      const completion = await engine.chat.completions.create({
+        stream: true,
+        messages: [
+          {
+            role: "user",
+            content: await getLinkSummarizationPrompt([title, snippet, url]),
+          },
+        ],
+        max_gen_len: 768,
+      });
+
+      let streamedMessage = "";
+
+      for await (const chunk of completion) {
+        const deltaContent = chunk.choices[0].delta.content;
+
+        if (deltaContent) streamedMessage += deltaContent;
+
+        updateUrlsDescriptions({
+          ...getUrlsDescriptions(),
+          [url]: streamedMessage,
+        });
+      }
+
+      await engine.resetChat();
+    }
+  }
+
+  if (debug) {
+    console.info(await engine.runtimeStatsText());
+  }
+
+  engine.unload();
+}
+
+async function generateTextWithWllama() {
+  const { initializeWllama, runCompletion, exitWllama } = await import(
+    "./wllama"
+  );
+
+  const commonSamplingConfig: import("@wllama/wllama").SamplingConfig = {
+    temp: 0.35,
+    dynatemp_range: 0.25,
+    top_k: 0,
+    top_p: 1,
+    min_p: 0.05,
+    tfs_z: 0.95,
+    typical_p: 0.85,
+    penalty_freq: 0.5,
+    penalty_repeat: 1.176,
+    penalty_last_n: -1,
+    mirostat: 2,
+    mirostat_tau: 3.5,
+  };
+
+  const availableModels: {
+    [key in
+      | "mobileDefault"
+      | "mobileLarger"
+      | "desktopDefault"
+      | "desktopLarger"]: {
+      url: string;
+      userPrefix: string;
+      assistantPrefix: string;
+      messageSuffix: string;
+      sampling: import("@wllama/wllama").SamplingConfig;
+    };
+  } = {
+    mobileDefault: {
+      url: "https://huggingface.co/Felladrin/gguf-vicuna-160m/resolve/main/vicuna-160m.Q8_0.gguf",
+      userPrefix: "USER:\n",
+      assistantPrefix: "ASSISTANT:\n",
+      messageSuffix: "</s>\n",
+      sampling: commonSamplingConfig,
+    },
+    mobileLarger: {
+      url: "https://huggingface.co/Felladrin/gguf-zephyr-220m-dpo-full/resolve/main/zephyr-220m-dpo-full.Q8_0.gguf",
+      userPrefix: "<|user|>\n",
+      assistantPrefix: "<|assistant|>\n",
+      messageSuffix: "</s>\n",
+      sampling: commonSamplingConfig,
+    },
+    desktopDefault: {
+      url: "https://huggingface.co/Felladrin/gguf-TinyLlama-1.1B-1T-OpenOrca/resolve/main/tinyllama-1.1b-1t-openorca.Q8_0.gguf",
+      userPrefix: "<|im_start|>user\n",
+      assistantPrefix: "<|im_start|>assistant\n",
+      messageSuffix: "<|im_end|>\n",
+      sampling: commonSamplingConfig,
+    },
+    desktopLarger: {
+      url: "https://huggingface.co/Felladrin/gguf-stablelm-2-1_6b-chat/resolve/main/stablelm-2-1_6b-chat.Q8_0.gguf",
+      userPrefix: "<|im_start|>user\n",
+      assistantPrefix: "<|im_start|>assistant\n",
+      messageSuffix: "<|im_end|>\n",
+      sampling: commonSamplingConfig,
+    },
+  };
+
+  const defaultModel = isRunningOnMobile
+    ? availableModels.mobileDefault
+    : availableModels.desktopDefault;
+
+  const largerModel = isRunningOnMobile
+    ? availableModels.mobileLarger
+    : availableModels.desktopLarger;
+
+  const selectedModel = getUseLargerModelSetting() ? largerModel : defaultModel;
+
+  await initializeWllama({
+    modelUrl: selectedModel.url,
+    modelConfig: {
+      n_ctx: 2048,
+    },
+  });
+
+  if (!getDisableAiResponseSetting()) {
+    const prompt = [
+      selectedModel.userPrefix,
+      "Hello!",
+      selectedModel.messageSuffix,
+      selectedModel.assistantPrefix,
+      "Hi! How can I help you?",
+      selectedModel.messageSuffix,
+      selectedModel.userPrefix,
+      ["Take a look at this info:", getFormattedSearchResults(5)].join("\n\n"),
+      selectedModel.messageSuffix,
+      selectedModel.assistantPrefix,
+      "Alright!",
+      selectedModel.messageSuffix,
+      selectedModel.userPrefix,
+      "Now I'm going to write my question, and if this info is useful you can use them in your answer. Ready?",
+      selectedModel.messageSuffix,
+      selectedModel.assistantPrefix,
+      "I'm ready to answer!",
+      selectedModel.messageSuffix,
+      selectedModel.userPrefix,
+      query,
+      selectedModel.messageSuffix,
+      selectedModel.assistantPrefix,
+    ].join("");
+
+    if (!query) throw Error("Query is empty.");
+
+    updateLoadingToast("Generating response...");
+
+    const completion = await runCompletion({
+      prompt,
+      nPredict: 768,
+      sampling: selectedModel.sampling,
+      onNewToken: (_token, _piece, currentText) => {
+        updateResponse(currentText);
+      },
+    });
+
+    updateResponse(completion);
+  }
+
+  if (getSummarizeLinksSetting()) {
+    updateLoadingToast("Summarizing links...");
+
+    for (const [title, snippet, url] of getSearchResults()) {
+      const prompt = [
+        selectedModel.userPrefix,
+        "Hello!",
+        selectedModel.messageSuffix,
+        selectedModel.assistantPrefix,
+        "Hi! How can I help you?",
+        selectedModel.messageSuffix,
+        selectedModel.userPrefix,
+        ["Context:", `${title}: ${snippet}`].join("\n"),
+        "\n",
+        ["Question:", "What is this text about?"].join("\n"),
+        selectedModel.messageSuffix,
+        selectedModel.assistantPrefix,
+        ["Answer:", "This text is about"].join("\n"),
+      ].join("");
+
+      const completion = await runCompletion({
+        prompt,
+        nPredict: 128,
+        sampling: selectedModel.sampling,
+        onNewToken: (_token, _piece, currentText) => {
+          updateUrlsDescriptions({
+            ...getUrlsDescriptions(),
+            [url]: `This link is about ${currentText}`,
+          });
+        },
+      });
+
+      updateUrlsDescriptions({
+        ...getUrlsDescriptions(),
+        [url]: `This link is about ${completion}`,
+      });
+    }
+  }
+
+  await exitWllama();
+}
+
+async function generateTextWithRatchet() {
+  const { initializeRatchet, runCompletion, exitRatchet } = await import(
+    "./ratchet"
+  );
+
+  await initializeRatchet((loadingProgressPercentage) =>
+    updateLoadingToast(`Loading: ${Math.floor(loadingProgressPercentage)}%`),
+  );
+
+  if (!getDisableAiResponseSetting()) {
+    if (!query) throw Error("Query is empty.");
+
+    updateLoadingToast("Generating response...");
+
+    let response = "";
+
+    await runCompletion(getMainPrompt(), (completionChunk) => {
+      response += completionChunk;
+      updateResponse(response);
+    });
+
+    if (!endsWithASign(response)) {
+      response += ".";
+      updateResponse(response);
+    }
+  }
+
+  if (getSummarizeLinksSetting()) {
+    updateLoadingToast("Summarizing links...");
+
+    for (const [title, snippet, url] of getSearchResults()) {
+      let response = "";
+
+      await runCompletion(
+        await getLinkSummarizationPrompt([title, snippet, url]),
+        (completionChunk) => {
+          response += completionChunk;
+          updateUrlsDescriptions({
+            ...getUrlsDescriptions(),
+            [url]: response,
+          });
+        },
+      );
+
+      if (!endsWithASign(response)) {
+        response += ".";
+        updateUrlsDescriptions({
+          ...getUrlsDescriptions(),
+          [url]: response,
+        });
+      }
+    }
+  }
+
+  await exitRatchet();
+}
+
+async function fetchPageContent(
+  url: string,
+  options?: {
+    maxLength?: number;
+  },
+) {
+  const response = await fetch(`https://r.jina.ai/${url}`);
+
+  if (!response) {
+    throw new Error("No response from server");
+  } else if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+
+  const text = await response.text();
+
+  return text.trim().substring(0, options?.maxLength);
+}
+
+function endsWithASign(text: string) {
+  return text.endsWith(".") || text.endsWith("!") || text.endsWith("?");
+}
+
+function getMainPrompt() {
+  return [
+    "Provide a concise response to the request below.",
+    "If the information from the Web Search Results below is useful, you can use it to complement your response. Otherwise, ignore it.",
+    "",
+    "Web Search Results:",
+    "",
+    getFormattedSearchResults(5),
+    "",
+    "Request:",
+    "",
+    query,
+  ].join("\n");
+}
+
+async function getLinkSummarizationPrompt([
+  title,
+  snippet,
+  url,
+]: SearchResults[0]) {
+  let prompt = "";
+
+  try {
+    const pageContent = await fetchPageContent(url, { maxLength: 2500 });
+
+    prompt = [
+      `The context below is related to a link found when searching for "${query}":`,
+      "",
+      "[BEGIN OF CONTEXT]",
+      `Snippet: ${snippet}`,
+      "",
+      pageContent,
+      "[END OF CONTEXT]",
+      "",
+      "Now, tell me: What is this link about and how is it related to the search?",
+      "",
+      "Note: Don't cite the link in your response. Just write a few sentences to indicate if it's worth visiting.",
+    ].join("\n");
+  } catch (error) {
+    prompt = [
+      `When searching for "${query}", this link was found: [${title}](${url} "${snippet}")`,
+      "",
+      "Now, tell me: What is this link about and how is it related to the search?",
+      "",
+      "Note: Don't cite the link in your response. Just write a few sentences to indicate if it's worth visiting.",
+    ].join("\n");
+  }
+
+  return prompt;
+}
+
+function getFormattedSearchResults(limit?: number) {
+  return getSearchResults()
+    .slice(0, limit)
+    .map(([title, snippet, url]) => `${title}\n${url}\n${snippet}`)
+    .join("\n\n");
+}
+
+async function getKeywords(text: string, limit?: number) {
+  return (await import("keyword-extractor")).default
+    .extract(text, { language: "english" })
+    .slice(0, limit);
+}

client/modules/urlParams.ts

@@ -0,0 +1,4 @@
+const urlParams = new URLSearchParams(self.location.search);
+export const debug = urlParams.has("debug");
+export const beta = urlParams.has("beta");
+export const query = urlParams.get("q");

client/modules/webGpu.ts

@@ -0,0 +1,17 @@
+export let isWebGPUAvailable = "gpu" in navigator;
+
+if (isWebGPUAvailable) {
+  try {
+    const adapter = await (
+      navigator as unknown as {
+        gpu: { requestAdapter: () => Promise<never> };
+      }
+    ).gpu.requestAdapter();
+    if (!adapter) {
+      throw Error("Couldn't request WebGPU adapter.");
+    }
+    isWebGPUAvailable = true;
+  } catch (error) {
+    isWebGPUAvailable = false;
+  }
+}

client/modules/webLlmWorker.ts

@@ -0,0 +1,7 @@
+import { EngineWorkerHandler, Engine } from "@mlc-ai/web-llm";
+
+const engine = new Engine();
+const handler = new EngineWorkerHandler(engine);
+self.onmessage = (msg: MessageEvent) => {
+  handler.onmessage(msg);
+};

client/modules/wllama.ts

@@ -0,0 +1,53 @@
+import {
+  LoadModelConfig,
+  SamplingConfig,
+  Wllama,
+  AssetsPathConfig,
+} from "@wllama/wllama";
+import singleThreadWllamaJsUrl from "@wllama/wllama/esm/single-thread/wllama.js?url";
+import singleThreadWllamaWasmUrl from "@wllama/wllama/esm/single-thread/wllama.wasm?url";
+import multiThreadWllamaJsUrl from "@wllama/wllama/esm/multi-thread/wllama.js?url";
+import multiThreadWllamaWasmUrl from "@wllama/wllama/esm/multi-thread/wllama.wasm?url";
+import multiThreadWllamaWorkerMjsUrl from "@wllama/wllama/esm/multi-thread/wllama.worker.mjs?url";
+
+let wllama: Wllama | undefined;
+
+export async function initializeWllama(config: {
+  modelUrl: string;
+  modelConfig?: LoadModelConfig;
+}) {
+  const wllamaConfigPaths: AssetsPathConfig = {
+    "single-thread/wllama.js": singleThreadWllamaJsUrl,
+    "single-thread/wllama.wasm": singleThreadWllamaWasmUrl,
+    "multi-thread/wllama.js": multiThreadWllamaJsUrl,
+    "multi-thread/wllama.wasm": multiThreadWllamaWasmUrl,
+    "multi-thread/wllama.worker.mjs": multiThreadWllamaWorkerMjsUrl,
+  };
+
+  wllama = new Wllama(wllamaConfigPaths);
+
+  return wllama.loadModelFromUrl(config.modelUrl, config.modelConfig ?? {});
+}
+
+export async function runCompletion(config: {
+  prompt: string;
+  nPredict?: number;
+  sampling?: SamplingConfig;
+  onNewToken: (token: number, piece: Uint8Array, currentText: string) => void;
+}) {
+  if (!wllama) throw new Error("Wllama is not initialized.");
+
+  return wllama.createCompletion(config.prompt, {
+    nPredict: config.nPredict,
+    sampling: config.sampling,
+    onNewToken: config.onNewToken,
+  });
+}
+
+export async function exitWllama() {
+  if (!wllama) throw new Error("Wllama is not initialized.");
+
+  await wllama.exit();
+
+  wllama = undefined;
+}

client/public/query-suggestions.json

@@ -0,0 +1,168 @@
+[
+  "What's the distance between Earth and the Moon?",
+  "Is there life on Mars?",
+  "What is the speed of light?",
+  "Can I improve my memory without medication?",
+  "What's the psychology behind color preference in marketing?",
+  "Is it possible to learn multiple languages simultaneously?",
+  "How can I grow taller as an adult?",
+  "Explain quantum computing like I'm five",
+  "What are some sustainable fashion brands?",
+  "What's the connection between music and mental health?",
+  "Can meditation reduce stress and anxiety?",
+  "Are there any DIY tricks for cleaning oven stains?",
+  "How to make a good cup of coffee?",
+  "How do I train for a marathon without joining a gym?",
+  "What are some responsible travel tips?",
+  "How does a solar eclipse occur?",
+  "Do we burn calories while sleeping?",
+  "What are the best books to improve coding skills?",
+  "How can I improve my public speaking anxiety?",
+  "Can you recommend a good online course for digital art?",
+  "How do plants communicate with each other?",
+  "Can you explain the concept of time dilation in special relativity?",
+  "What are some tips for improving indoor air quality?",
+  "What are some vegan-friendly sources of protein?",
+  "How do I organize a small closet efficiently?",
+  "What is the life cycle of a butterfly?",
+  "Alternatives to an alarm clock",
+  "How to make a good first impression?",
+  "Are there any apps that can improve my sleep quality?",
+  "What's the difference between mindfulness and meditation?",
+  "Can practicing gratitude increase happiness?",
+  "How do I troubleshoot a slow internet connection?",
+  "What is the origin of the phrase \"break a leg\" in theater?",
+  "How can I improve my golf swing without a coach?",
+  "Can you recommend a good podcast on personal finance?",
+  "The history of the internet",
+  "What's the best way to care for aloe vera plant?",
+  "How does the brain create new memories?",
+  "Can meditation help with anxiety?",
+  "What are some eco-friendly alternatives to plastic wrap?",
+  "How do I maintain a healthy work-life balance?",
+  "What's the difference between a vegan and vegetarian diet?",
+  "Can listening to classical music help improve concentration?",
+  "How can I lose weight without exercising?",
+  "What's the significance of the Mayan calendar?",
+  "Can you explain the science behind dreams?",
+  "How do I build a successful online community?",
+  "What are some low-carb dinner options for vegetarians?",
+  "How do you properly care for a pet hamster?",
+  "Is it possible to grow crops in space?",
+  "How does the human body process caffeine?",
+  "Are there any benefits of taking cold showers first thing in the morning?",
+  "What are some creative ways to use old books?",
+  "Can you recommend a good online course for learning photography?",
+  "How do I manage stress during a busy work schedule?",
+  "What's the history behind the Olympic Games?",
+  "How does exercise affect mental health?",
+  "What are some healthy breakfast options on the go?",
+  "Are there any apps to track your daily water intake?",
+  "How do I start a vegetable garden on my small balcony?",
+  "Can you explain the concept of a black hole?",
+  "How can I improve my typing speed without lessons?",
+  "How do plants respond to different temperatures?",
+  "Can you recommend a good podcast series on artificial intelligence?",
+  "What's the difference between a comet and an asteroid?",
+  "Is it possible to train for a marathon without running long distances in the beginning?",
+  "What are some eco-friendly alternatives to plastic containers?",
+  "Can you suggest a good meditation technique for beginners?",
+  "How can I improve my public speaking without fear?",
+  "What's the science behind laughter and its health benefits?",
+  "How to make a mobile app?",
+  "Tips for a healthier lifestyle",
+  "Can you recommend a good online platform to learn graphic design?",
+  "How do I maintain good posture while working from home?",
+  "Are there any apps for tracking daily exercise routines?",
+  "What's the difference between a power nap and a regular sleep?",
+  "Can you explain the concept of blockchain technology?",
+  "What are the benefits of learning a new language?",
+  "How do I stay motivated to learn a new skill?",
+  "What are some tips for reducing screen time before bed?",
+  "Are there any apps to help with time management?",
+  "Can you recommend a good online course for learning Spanish?",
+  "How do I start a small business?",
+  "Is it possible to grow vegetables in a small apartment without a balcony?",
+  "How can I improve my singing voice at home?",
+  "What are the health benefits of yoga?",
+  "How to start a successful blog",
+  "What's the difference between a crocodile and an alligator?",
+  "Can you explain the concept of virtual reality technology?",
+  "What are some tips for dealing with a difficult team member at work?",
+  "Are there any apps to help learn new programming languages?",
+  "List of healthy snacks for work",
+  "Writing a resume that stands out",
+  "Elaborate on the concept of the butterfly effect",
+  "Getting started with investing in the stock market",
+  "How to make a good first impression in a job interview",
+  "How do we know all the money the government is getting from bank settlements is going back to the people?",
+  "What are good and bad sides of manual and automatic drive gear?",
+  "How do muscles grow?",
+  "What are some tips for improving my sleep quality?",
+  "Why, when intoxicated, does it feel like everything is spinning when you close your eyes but stops spinning when you open them?",
+  "Why are some fish bones edible, and others are not?",
+  "What is different in the brain chemistry that distinguishes thinking about moving my arm and moving it?",
+  "Why are the things that taste the best bad for us?",
+  "Why do you see weird colors when you press your eyes?",
+  "What classifies an island as an island? Aren't all continents etc essentially large islands?",
+  "Why do some people like getting drunk?",
+  "What happens when a \"too-big-to-fail\" bank goes bankrupt?",
+  "Why does a beer on tap almost always taste better than it does from a bottle?",
+  "Is it possible to build up an immunity to poisons both naturally occurring and man-made?",
+  "How do devices know the amount of charge left in a battery?",
+  "Why are my muscles sore after jumping in cold water?",
+  "Why do we like watching the same TV show or movie over and over again?",
+  "Why did The Beatles break up?",
+  "Why do phones not require cooling vents but other small appliances do?",
+  "If the inside of my microwave is made of metal, why is it bad to put metallic objects in it?",
+  "Why do we lack the instincts our ancestors had? (e.g. telling you which foods are poisonous)",
+  "How does bug spray work?",
+  "Why is it when you rewind VHS tapes they lose their quality over time?",
+  "If the ozone layer is made up of O3, why are we not producing some of it ourselves and pumping more of it into the atmosphere to fix the problem faster?",
+  "Is it possible to be a 'person without a country'?",
+  "How do the grooves on a record/LP recreate the sound of a full orchestra?",
+  "Why doesn't it rain salt water?",
+  "What is a MAC Address?",
+  "What happens to your brain when you space out?",
+  "Where do bugs go in the wintertime?",
+  "Why can't water catch on fire?",
+  "Besides being catchy, why do songs get stuck in our heads?",
+  "How does Wi-Fi on an airplane work?",
+  "How does honey never expire?",
+  "Why do certain people faint or feel weak at the sight of blood?",
+  "How do CD players read CDs?",
+  "Why do you sink in quicksand?",
+  "Why do we gasp when we're surprised/scared?",
+  "Why do things turn darker as they burn?",
+  "What exactly is torque?",
+  "Why is there a demand for high frames per second in video games, but it's ok for movies to stick to 24 FPS? Is there a visible difference between the two mediums?",
+  "Why is IP tracing so inaccurate?",
+  "Why is it hard to breathe when the water temperature is ice-cold in the shower?",
+  "Could children be taught to be ambidextrous?",
+  "How do barcodes work? Are they all different?",
+  "Why do our voices sound so different than what we think they sound like?",
+  "Why turbulence on an airplane, even the bigger bumps, aren't something to worry about while flying on an airplane?",
+  "How does the rule of three work?",
+  "How do passports work?",
+  "What's the difference between a carbohydrate and a hydrocarbon?",
+  "How does Google Maps suggest the same quicker route to everyone?",
+  "Why do we get bored?",
+  "How does movement in VR work?",
+  "Why is it easier to wash dishes with hot water?",
+  "Why does cabin pressure change during a flight?",
+  "In economics, how does inflation work?",
+  "Why do some countries require renunciation of previous citizenship if you obtain a new one?",
+  "How to turn an extra Wireless Router into a Wireless Extender?",
+  "Why do we tear up when we yawn?",
+  "How do radio waves transmit data?",
+  "How does transposition work in music?",
+  "Do we have enough food to feed everyone in the world?",
+  "If thousands of letters are in the Chinese alphabet, how can they have computer keyboards? How do they type?",
+  "How is snow formed?",
+  "How do film actors do two films at once?",
+  "Why do we forget most of our dreams after waking up?",
+  "Why is it so hard to artificially replenish the ozone layer?",
+  "Why are colossal (e.g. Godzilla) things depicted as moving so slowly?",
+  "What is the purpose of the spirals painted on airplane engines?",
+  "How do gas masks work?"
+]

client/types.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+declare const VITE_SEARCH_TOKEN: string;

docker-compose.production.yml

@@ -0,0 +1,11 @@
+services:
+  production-server:
+    environment:
+      - HOST=${HOST:-0.0.0.0}
+      - PORT=${PORT:-7860}
+      - BASIC_SSL=${BASIC_SSL:-false}
+    ports:
+      - "${PORT:-7860}:7860"
+    build:
+      dockerfile: Dockerfile
+      context: .

docker-compose.yml

@@ -0,0 +1,19 @@
+services:
+  development-server:
+    environment:
+      - HOST=${HOST:-0.0.0.0}
+      - PORT=${PORT:-7860}
+      - BASIC_SSL=${BASIC_SSL:-false}
+      - HMR_PORT=${HMR_PORT:-7861}
+    ports:
+      - "${PORT:-7860}:7860"
+      - "${HMR_PORT:-7861}:7861"
+    build:
+      dockerfile: Dockerfile
+      context: .
+    volumes:
+      - .:/home/user/app/
+    command:
+      [
+        "/usr/local/searxng/dockerfiles/docker-entrypoint.sh -f & npm install && npm run dev",
+      ]

eslint.config.js

@@ -0,0 +1,10 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import pluginTs from "typescript-eslint";
+
+export default [
+  { ignores: ["client/dist"] },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...pluginTs.configs.recommended,
+];

hf-space-config.yml

@@ -0,0 +1,12 @@
+title: MiniSearch
+emoji: 👌🔍
+colorFrom: yellow
+colorTo: yellow
+sdk: docker
+header: mini
+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

package.json

@@ -0,0 +1,52 @@
+{
+  "name": "mini-search",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "license": "Apache-2.0",
+  "scripts": {
+    "start": "vite preview",
+    "build": "tsc && vite build",
+    "dev": "vite",
+    "lint": "prettier --check . && eslint --fix client",
+    "format": "prettier --write ."
+  },
+  "dependencies": {
+    "@energetic-ai/core": "^0.2.0",
+    "@energetic-ai/embeddings": "^0.2.0",
+    "@energetic-ai/model-embeddings-en": "^0.2.0",
+    "@mlc-ai/web-llm": "0.2.35",
+    "@ratchet-ml/ratchet-web": "^0.4.0",
+    "@wllama/wllama": "^1.4.2",
+    "create-pubsub": "^1.6.3",
+    "html-to-text": "^9.0.5",
+    "inter-ui": "^4.0.2",
+    "keyword-extractor": "^0.0.28",
+    "markdown-to-jsx": "^7.3.2",
+    "mobile-detect": "^1.4.5",
+    "node-fetch": "^3.3.2",
+    "prettier": "^3.0.3",
+    "rate-limiter-flexible": "^5.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
+    "react-textarea-autosize": "^8.5.3",
+    "react-tooltip": "^5.21.6",
+    "temp-dir": "^3.0.0",
+    "water.css": "^2.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.0.0",
+    "@types/html-to-text": "^9.0.4",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-basic-ssl": "^1.1.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^9.0.0",
+    "globals": "^15.0.0",
+    "typescript": "^5.0.2",
+    "typescript-eslint": "^7.6.0",
+    "vite": "^5.2.9"
+  }
+}

renovate.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["local>felladrin/.github:renovate-config"]
+}

tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["client"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,311 @@
+import { PreviewServer, ViteDevServer, defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import basicSSL from "@vitejs/plugin-basic-ssl";
+import fetch from "node-fetch";
+import { RateLimiterMemory } from "rate-limiter-flexible";
+import { writeFileSync, readFileSync, existsSync } from "node:fs";
+import temporaryDirectory from "temp-dir";
+import path from "node:path";
+import {
+  initModel,
+  distance as calculateSimilarity,
+  EmbeddingsModel,
+} from "@energetic-ai/embeddings";
+import { modelSource as embeddingModel } from "@energetic-ai/model-embeddings-en";
+
+const serverStartTime = new Date().getTime();
+let searchesSinceLastRestart = 0;
+
+export default defineConfig(({ command }) => {
+  if (command === "build") regenerateSearchToken();
+
+  return {
+    root: "./client",
+    define: {
+      VITE_SEARCH_TOKEN: JSON.stringify(getSearchToken()),
+    },
+    server: {
+      host: process.env.HOST,
+      port: process.env.PORT ? Number(process.env.PORT) : undefined,
+      hmr: {
+        port: process.env.HMR_PORT ? Number(process.env.HMR_PORT) : undefined,
+      },
+    },
+    preview: {
+      host: process.env.HOST,
+      port: process.env.PORT ? Number(process.env.PORT) : undefined,
+    },
+    build: {
+      target: "esnext",
+    },
+    plugins: [
+      process.env.BASIC_SSL === "true" ? basicSSL() : undefined,
+      react(),
+      {
+        name: "configure-server-cross-origin-isolation",
+        configureServer: crossOriginServerHook,
+        configurePreviewServer: crossOriginServerHook,
+      },
+      {
+        name: "configure-server-search-endpoint",
+        configureServer: searchEndpointServerHook,
+        configurePreviewServer: searchEndpointServerHook,
+      },
+      {
+        name: "configure-server-status-endpoint",
+        configureServer: statusEndpointServerHook,
+        configurePreviewServer: statusEndpointServerHook,
+      },
+      {
+        name: "configure-server-cache",
+        configurePreviewServer: cacheServerHook,
+      },
+    ],
+  };
+});
+
+function crossOriginServerHook<T extends ViteDevServer | PreviewServer>(
+  server: T,
+) {
+  server.middlewares.use((_, response, next) => {
+    /** Server headers for cross origin isolation, which enable clients to use `SharedArrayBuffer` on the Browser. */
+    const crossOriginIsolationHeaders: { key: string; value: string }[] = [
+      {
+        key: "Cross-Origin-Embedder-Policy",
+        value: "require-corp",
+      },
+      {
+        key: "Cross-Origin-Opener-Policy",
+        value: "same-origin",
+      },
+      {
+        key: "Cross-Origin-Resource-Policy",
+        value: "cross-origin",
+      },
+    ];
+
+    crossOriginIsolationHeaders.forEach(({ key, value }) => {
+      response.setHeader(key, value);
+    });
+
+    next();
+  });
+}
+
+function statusEndpointServerHook<T extends ViteDevServer | PreviewServer>(
+  server: T,
+) {
+  server.middlewares.use(async (request, response, next) => {
+    if (!request.url.startsWith("/status")) return next();
+
+    const secondsSinceLastRestart = Math.floor(
+      (new Date().getTime() - serverStartTime) / 1000,
+    );
+
+    response.end(
+      JSON.stringify({
+        secondsSinceLastRestart,
+        searchesSinceLastRestart,
+        searchesPerSecond: searchesSinceLastRestart / secondsSinceLastRestart,
+      }),
+    );
+  });
+}
+
+function searchEndpointServerHook<T extends ViteDevServer | PreviewServer>(
+  server: T,
+) {
+  const rateLimiter = new RateLimiterMemory({
+    points: 2,
+    duration: 10,
+  });
+
+  server.middlewares.use(async (request, response, next) => {
+    if (!request.url.startsWith("/search")) return next();
+
+    const { searchParams } = new URL(
+      request.url,
+      `http://${request.headers.host}`,
+    );
+
+    const token = searchParams.get("token");
+
+    if (!token || token !== getSearchToken()) {
+      response.statusCode = 401;
+      response.end("Unauthorized.");
+      return;
+    }
+
+    const query = searchParams.get("q");
+
+    if (!query) {
+      response.statusCode = 400;
+      response.end("Missing the query parameter.");
+      return;
+    }
+
+    const limitParam = searchParams.get("limit");
+
+    const limit =
+      limitParam && Number(limitParam) > 0 ? Number(limitParam) : undefined;
+
+    try {
+      const remoteAddress = (
+        (request.headers["x-forwarded-for"] as string) ||
+        request.socket.remoteAddress ||
+        "unknown"
+      )
+        .split(",")[0]
+        .trim();
+
+      await rateLimiter.consume(remoteAddress);
+    } catch (error) {
+      response.statusCode = 429;
+      response.end("Too many requests.");
+      return;
+    }
+
+    const searchResults = await fetchSearXNG(query, limit);
+
+    searchesSinceLastRestart++;
+
+    if (searchResults.length === 0) {
+      response.end(JSON.stringify([]));
+      return;
+    }
+
+    try {
+      response.end(
+        JSON.stringify(await rankSearchResults(query, searchResults)),
+      );
+    } catch (error) {
+      console.error("Error ranking search results:", error);
+      response.end(JSON.stringify(searchResults));
+    }
+  });
+}
+
+function cacheServerHook<T extends ViteDevServer | PreviewServer>(server: T) {
+  server.middlewares.use(async (request, response, next) => {
+    if (
+      request.url === "/" ||
+      request.url.startsWith("/?") ||
+      request.url.endsWith(".html")
+    ) {
+      response.setHeader("Cache-Control", "no-cache");
+    } else {
+      response.setHeader("Cache-Control", "public, max-age=86400");
+    }
+
+    next();
+  });
+}
+
+async function fetchSearXNG(query: string, limit?: number) {
+  try {
+    const url = new URL("http://127.0.0.1:8080/search");
+
+    url.search = new URLSearchParams({
+      q: query,
+      language: "auto",
+      safesearch: "0",
+      format: "json",
+    }).toString();
+
+    const response = await fetch(url);
+
+    let { results } = (await response.json()) as {
+      results: { url: string; title: string; content: string }[];
+    };
+
+    const searchResults: [title: string, content: string, url: string][] = [];
+
+    if (results) {
+      if (limit && limit > 0) {
+        results = results.slice(0, limit);
+      }
+
+      const uniqueUrls = new Set<string>();
+
+      for (const result of results) {
+        if (!result.content || uniqueUrls.has(result.url)) continue;
+
+        const stripHtmlTags = (str: string) => str.replace(/<[^>]*>?/gm, "");
+
+        const content = stripHtmlTags(result.content).trim();
+
+        if (content === "") continue;
+
+        const title = stripHtmlTags(result.title);
+
+        const url = result.url;
+
+        searchResults.push([title, content, url]);
+
+        uniqueUrls.add(url);
+      }
+    }
+
+    return searchResults;
+  } catch (e) {
+    console.error(e);
+    return [];
+  }
+}
+
+function getSearchTokenFilePath() {
+  return path.resolve(temporaryDirectory, "minisearch-token");
+}
+
+function regenerateSearchToken() {
+  const newToken = Math.random().toString(36).substring(2);
+  writeFileSync(getSearchTokenFilePath(), newToken);
+}
+
+function getSearchToken() {
+  if (!existsSync(getSearchTokenFilePath())) regenerateSearchToken();
+  return readFileSync(getSearchTokenFilePath(), "utf8");
+}
+
+let embeddingModelInstance: EmbeddingsModel | undefined;
+
+async function getSimilarityScores(query: string, documents: string[]) {
+  if (!embeddingModelInstance) {
+    embeddingModelInstance = await initModel(embeddingModel);
+  }
+
+  const [queryEmbedding] = await embeddingModelInstance.embed([query]);
+
+  const documentsEmbeddings = await embeddingModelInstance.embed(documents);
+
+  return documentsEmbeddings.map((documentEmbedding) =>
+    calculateSimilarity(queryEmbedding, documentEmbedding),
+  );
+}
+
+async function rankSearchResults(
+  query: string,
+  searchResults: [title: string, content: string, url: string][],
+) {
+  const scores = await getSimilarityScores(
+    query.toLocaleLowerCase(),
+    searchResults.map(([title, snippet, url]) =>
+      `${title}\n${url}\n${snippet}`.toLocaleLowerCase(),
+    ),
+  );
+
+  const searchResultToScoreMap: Map<(typeof searchResults)[0], number> =
+    new Map();
+
+  scores.map((score, index) =>
+    searchResultToScoreMap.set(searchResults[index], score ?? 0),
+  );
+
+  return searchResults
+    .slice()
+    .sort(
+      (a, b) =>
+        (searchResultToScoreMap.get(b) ?? 0) -
+        (searchResultToScoreMap.get(a) ?? 0),
+    );
+}