init

.gitignore

@@ -0,0 +1 @@
+node_modules

Dockerfile

@@ -0,0 +1,61 @@
+FROM node:18 AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci --legacy-peer-deps; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Uncomment the following lines if you want to use a secret at buildtime, 
+# for example to access your private npm packages
+# RUN --mount=type=secret,id=HF_EXAMPLE_SECRET,mode=0444,required=true \
+#     $(cat /run/secrets/HF_EXAMPLE_SECRET)
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+# RUN yarn build
+
+# If you use yarn, comment out this line and use the line above
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+CMD ["npm", "run", "start"]

README copy.md

@@ -0,0 +1,14 @@
+# edge-chat
+
+Simple demo using transformers.js embeddings, a simple vector store and PDF text extraction with Web Workers. No file data is stored on the server.
+
+![](./screenshot.png)
+
+
+## Key files:
+
+### embeddingsWorker.js
+
+### FileLoader.tsx
+
+### Home.tsx

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,36 @@
+module.exports = {
+    webpack: (config, { isServer }) => {
+      if (!isServer) {
+        // Web Worker configuration
+        config.module.rules.push({
+          test: /\.worker\.js$/,
+          loader: 'worker-loader',
+          options: {
+            publicPath: '/_next/static/worker/',
+            filename: 'static/worker/[hash].worker.js',
+          },
+        });
+  
+        // Configuration for .node files
+        config.module.rules.push({
+          test: /\.node$/,
+          loader: 'node-loader',
+        });
+  
+        // Resolve aliases to prevent bundling certain server-side modules in client-side code
+        config.resolve.alias = {
+          ...config.resolve.alias,
+          // Mock sharp module
+          "sharp$": false,
+          // Mock onnxruntime-node module
+          "onnxruntime-node$": false,
+        };
+      }
+
+      config.resolve.alias.canvas = false
+      config.resolve.alias.encoding = false
+      
+      return config;
+    },
+  };
+  

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "edge-chat",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 4000",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@xenova/transformers": "^2.14.0",
+    "ai": "^2.2.31",
+    "critters": "^0.0.20",
+    "next": "14.0.3",
+    "openai": "^4.24.7",
+    "pdfjs-dist": "^3.7.107",
+    "react": "^18",
+    "react-dom": "^18",
+    "worker-loader": "^3.0.8"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.4",
+    "node-loader": "^2.0.0",
+    "typescript": "^5"
+  }
+}

src/app/api/chat/route.ts

@@ -0,0 +1,45 @@
+import OpenAI from 'openai';
+import { OpenAIStream, StreamingTextResponse } from 'ai';
+
+const openai = new OpenAI({
+    apiKey: process.env.OPENAI_API_KEY,
+});
+
+export const runtime = 'edge';
+
+export async function POST(req: Request) {
+    const { messages, data } = await req.json();
+    const vectorStoreResultsString = data.vectorStoreResults;
+
+    const previousMessages = messages.slice(0, -1).map((message: any) => {
+        return message.role === "user" ? `User: ${message.content}\n` : `Assistant: ${message.content}\n`;
+    }).join("");
+    const lastMessage = messages[messages.length - 1]?.content || 'No message found';
+
+    const response = await openai.chat.completions.create({
+        model: "gpt-3.5-turbo-1106",
+        stream: true,
+        messages: [
+          {
+            role: "system",
+            content:
+              "Use the following pieces of context (or previous conversaton if needed) to answer the users question in markdown format.",
+          },
+          {
+            role: "user",
+            content: `Use the following pieces of context (or previous conversaton if needed) to answer the users question in markdown format. \nIf you don't know the answer, just say that you don't know, don't try to make up an answer.
+            \n----------------\n
+            PREVIOUS CONVERSATION:
+            ${previousMessages}
+            \n----------------\n
+            CONTEXT:
+            ${vectorStoreResultsString}
+            USER INPUT: ${lastMessage}`,
+          },
+        ],
+    });
+
+    const stream = OpenAIStream(response);
+    return new StreamingTextResponse(stream);
+}
+  

src/app/globals.css

@@ -0,0 +1,107 @@
+:root {
+  --max-width: 1100px;
+  --border-radius: 12px;
+  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
+    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
+    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+
+  --primary-glow: conic-gradient(
+    from 180deg at 50% 50%,
+    #16abff33 0deg,
+    #0885ff33 55deg,
+    #54d6ff33 120deg,
+    #0071ff33 160deg,
+    transparent 360deg
+  );
+  --secondary-glow: radial-gradient(
+    rgba(255, 255, 255, 1),
+    rgba(255, 255, 255, 0)
+  );
+
+  --tile-start-rgb: 239, 245, 249;
+  --tile-end-rgb: 228, 232, 233;
+  --tile-border: conic-gradient(
+    #00000080,
+    #00000040,
+    #00000030,
+    #00000020,
+    #00000010,
+    #00000010,
+    #00000080
+  );
+
+  --callout-rgb: 238, 240, 241;
+  --callout-border-rgb: 172, 175, 176;
+  --card-rgb: 180, 185, 188;
+  --card-border-rgb: 131, 134, 135;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+
+    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+    --secondary-glow: linear-gradient(
+      to bottom right,
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0.3)
+    );
+
+    --tile-start-rgb: 2, 13, 46;
+    --tile-end-rgb: 2, 5, 19;
+    --tile-border: conic-gradient(
+      #ffffff80,
+      #ffffff40,
+      #ffffff30,
+      #ffffff20,
+      #ffffff10,
+      #ffffff10,
+      #ffffff80
+    );
+
+    --callout-rgb: 20, 20, 20;
+    --callout-border-rgb: 108, 108, 108;
+    --card-rgb: 100, 100, 100;
+    --card-border-rgb: 200, 200, 200;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}

src/app/home.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { FormEvent, useEffect, useRef, useState } from 'react';
+import { FileLoader } from '../components/FileLoader';
+import styles from './page.module.css';
+import { useChat } from 'ai/react';
+
+const Home: React.FC = () => {
+  // eslint-disable-next-line no-unused-vars
+  const [isWorkerLoading, setIsWorkerLoading] = useState(false);
+  const [searchInProgress, setSearchInProgress] = useState(false);
+  const [searchIsLoading, setIsLoading] = useState(false);
+  const [fileText, setFileText] = useState<string>('');
+  const embeddingsWorkerRef = useRef<Worker | null>(null);
+  const { isLoading, messages, input, handleInputChange, handleSubmit } = useChat();
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+  
+    const EmbeddingsWorker = require('worker-loader!../components/embeddingsWorker.js').default;
+    embeddingsWorkerRef.current = new EmbeddingsWorker();
+  
+    return () => {
+      embeddingsWorkerRef.current?.terminate();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (fileText && embeddingsWorkerRef.current) {
+      embeddingsWorkerRef.current.postMessage({
+        action: 'addDocumentsToStore',
+        documents: [fileText]
+      });
+    }
+  }, [fileText]);
+
+  const handleSearch = () => {
+        return new Promise((resolve) => {
+            const handleMessage = (event: any) => {
+                if (event.data.action === 'searchResults') {
+                    embeddingsWorkerRef.current?.removeEventListener('message', handleMessage);
+                    setSearchInProgress(false);
+                    resolve(event.data.results);
+                }
+            };
+
+            embeddingsWorkerRef.current?.addEventListener('message', handleMessage);
+            embeddingsWorkerRef.current?.postMessage({
+                action: 'searchSimilarDocuments',
+                query: input,
+                topK: 5
+            });
+        });
+  };
+
+  const modifiedHandleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+
+        if (input.trim() === '' || searchInProgress) {
+            return; // Prevent empty submissions or when a search is already in progress
+        }
+
+        setSearchInProgress(true);
+
+        try {
+            const results = await handleSearch();
+            const serializedResults = JSON.stringify(results);
+
+            const chatRequestOptions = {
+                data: { vectorStoreResults: serializedResults },
+            };
+        
+            handleSubmit(e, chatRequestOptions);
+        } catch (error) {
+            console.error('Error during search:', error);
+            setSearchInProgress(false);
+        }
+  };
+
+  return (
+    <main className={styles.main}>
+      <div className={styles.description}>
+        <p>
+          Upload a PDF to start the analysis.
+        </p>
+        <FileLoader setFileText={setFileText} />
+      </div>
+
+      {fileText && (
+        <div className={styles.center}>
+          <p>Processed Text Complete</p>
+        </div>
+      )}
+
+      {isLoading || searchIsLoading && (
+        <div className={styles.spinner}>
+            <div>...</div>
+        </div>
+      )}
+
+      <div className={styles.chatContainer}>
+        <div className={styles.messagesContainer}>
+          {messages.map(m => (
+            <div key={m.id} className={m.role === 'user' ? styles.userMessage : styles.aiMessage}>
+              <span className={styles.messageRole}>{m.role === 'user' ? 'You: ' : 'AI: '}</span>
+              <span className={styles.messageContent}>{m.content}</span>
+            </div>
+          ))}
+        </div>
+
+        <form onSubmit={modifiedHandleSubmit} className={styles.chatForm}>
+          <input
+            className={styles.chatInput}
+            value={input}
+            onChange={handleInputChange}
+            placeholder="Say something..."
+          />
+          <button type="submit" className={styles.sendButton}>Send</button>
+        </form>
+      </div>
+
+    </main>
+  );
+}
+
+export default Home;

src/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  )
+}

src/app/page.module.css

@@ -0,0 +1,361 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start; /* changed from space-between to start to ensure content is at the top */
+  align-items: center;
+  padding: 4%; /* reduced from 6rem and changed to a percentage */
+  min-height: 100vh;
+  width: 100%; /* ensure it takes full width */
+}
+
+@media (max-width: 768px) {
+  .main {
+    padding: 2%; /* even less padding on small screens */
+  }
+}
+
+.description {
+  display: inherit;
+  justify-content: inherit;
+  align-items: inherit;
+  font-size: 0.85rem;
+  max-width: var(--max-width);
+  z-index: 2;
+  font-family: var(--font-mono);
+}
+
+.description a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.description p {
+  position: relative;
+  margin: 1.5rem;
+  padding: 1rem;
+  background-color: rgba(var(--callout-rgb), 0.5);
+  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
+  border-radius: var(--border-radius);
+}
+
+.code {
+  font-weight: 700;
+  font-family: var(--font-mono);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(25%, auto));
+  max-width: 100%;
+  width: var(--max-width);
+}
+
+.card {
+  padding: 1rem 1.2rem;
+  border-radius: var(--border-radius);
+  background: rgba(var(--card-rgb), 0);
+  border: 1px solid rgba(var(--card-border-rgb), 0);
+  transition: background 200ms, border 200ms;
+}
+
+.card span {
+  display: inline-block;
+  transition: transform 200ms;
+}
+
+.card h2 {
+  font-weight: 600;
+  margin-bottom: 0.7rem;
+}
+
+.card p {
+  margin: 0;
+  opacity: 0.6;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  max-width: 30ch;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding: 4rem 0;
+}
+
+.center::before {
+  background: var(--secondary-glow);
+  border-radius: 50%;
+  width: 480px;
+  height: 360px;
+  margin-left: -400px;
+}
+
+.center::after {
+  background: var(--primary-glow);
+  width: 240px;
+  height: 180px;
+  z-index: -1;
+}
+
+.center::before,
+.center::after {
+  content: '';
+  left: 50%;
+  position: absolute;
+  filter: blur(45px);
+  transform: translateZ(0);
+}
+
+.logo {
+  position: relative;
+}
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+  .card:hover {
+    background: rgba(var(--card-rgb), 0.1);
+    border: 1px solid rgba(var(--card-border-rgb), 0.15);
+  }
+
+  .card:hover span {
+    transform: translateX(4px);
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .card:hover span {
+    transform: none;
+  }
+}
+
+/* Mobile */
+@media (max-width: 700px) {
+  .content {
+    padding: 4rem;
+  }
+
+  .grid {
+    grid-template-columns: 1fr;
+    margin-bottom: 120px;
+    max-width: 320px;
+    text-align: center;
+  }
+
+  .card {
+    padding: 1rem 2.5rem;
+  }
+
+  .card h2 {
+    margin-bottom: 0.5rem;
+  }
+
+  .center {
+    padding: 8rem 0 6rem;
+  }
+
+  .center::before {
+    transform: none;
+    height: 300px;
+  }
+
+  .description {
+    font-size: 0.8rem;
+  }
+
+  .description a {
+    padding: 1rem;
+  }
+
+  .description p,
+  .description div {
+    display: flex;
+    justify-content: center;
+    position: fixed;
+    width: 100%;
+  }
+
+  .description p {
+    align-items: center;
+    inset: 0 0 auto;
+    padding: 2rem 1rem 1.4rem;
+    border-radius: 0;
+    border: none;
+    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
+    background: linear-gradient(
+      to bottom,
+      rgba(var(--background-start-rgb), 1),
+      rgba(var(--callout-rgb), 0.5)
+    );
+    background-clip: padding-box;
+    backdrop-filter: blur(24px);
+  }
+
+  .description div {
+    align-items: flex-end;
+    pointer-events: none;
+    inset: auto 0 0;
+    padding: 2rem;
+    height: 200px;
+    background: linear-gradient(
+      to bottom,
+      transparent 0%,
+      rgb(var(--background-end-rgb)) 40%
+    );
+    z-index: 1;
+  }
+}
+
+/* Tablet and Smaller Desktop */
+@media (min-width: 701px) and (max-width: 1120px) {
+  .grid {
+    grid-template-columns: repeat(2, 50%);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .vercelLogo {
+    filter: invert(1);
+  }
+
+  .logo {
+    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+
+.spinner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* Add more styles as needed */
+}
+
+.spinner div {
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.chatContainer {
+  display: flex;
+  flex-direction: column;
+  width: 90%; /* Responsive width */
+  margin-bottom: 2px;
+  margin-top: 100px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  background-color: white;
+  min-height: 60vh; /* Minimum height */
+  max-height: 80vh; /* Maximum height relative to the viewport */
+  overflow: hidden; /* Hide overflow */
+}
+
+.messagesContainer {
+  flex-grow: 1; /* Take up available space */
+  overflow-y: auto; /* Make only this part scrollable */
+  padding: 10px;
+  background-color: #f9f9f9;
+}
+
+.userMessage, .aiMessage {
+  margin: 5px 0;
+}
+
+.userMessage {
+  text-align: right;
+}
+
+.aiMessage {
+  text-align: left;
+}
+
+.messageRole {
+  font-weight: bold;
+}
+
+.messageContent {
+  display: block;
+  margin-top: 2px;
+}
+
+.chatForm {
+  display: flex;
+  padding: 10px;
+  background-color: white; /* Light background for form */
+  border-top: 1px solid #ddd;
+}
+
+.chatInput {
+  flex-grow: 1;
+  padding: 10px;
+  margin-right: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: white; /* Light background for input */
+  color: black; /* Dark text for input */
+}
+
+.sendButton {
+  padding: 10px 20px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.sendButton:hover {
+  background-color: #45a049;
+}
+
+/* Dark mode styles */
+@media (prefers-color-scheme: dark) {
+  .chatContainer {
+    background-color: black; /* Dark background for dark mode */
+    color: white; /* Light text for dark mode */
+  }
+
+  .messagesContainer {
+    background-color: #333; /* Darker shade for the message container */
+  }
+
+  .chatForm {
+    background-color: #222; /* Darker background for form in dark mode */
+    border-top: 1px solid #555; /* Darker border for form */
+  }
+
+  .chatInput {
+    background-color: #222; /* Darker input field */
+    color: white; /* Light text for input field */
+    border: 1px solid #555; /* Darker border for input */
+  }
+
+  .sendButton {
+    background-color: #555; /* Darker button color */
+    color: white; /* Light text for button */
+  }
+
+  .sendButton:hover {
+    background-color: #666; /* Slightly lighter on hover */
+  }
+
+  /* Add more dark mode specific styles as needed */
+}

src/app/page.tsx

@@ -0,0 +1,7 @@
+import Home from './home'
+
+const ParentComponent = () => {
+  return <Home />;
+};
+
+export default ParentComponent;

src/components/FileEmbedder.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+interface FileEmbedderProps {
+    onFileSelect: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+  
+const FileEmbedder: React.FC<FileEmbedderProps> = ({ onFileSelect }) => {
+    return (
+      <input type="file" accept=".pdf, text/plain" onChange={onFileSelect} />
+    );
+}
+  
+export default FileEmbedder;
+  

src/components/FileLoader.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+// @ts-ignore
+import * as PDFJS from 'pdfjs-dist/build/pdf';
+import FileEmbedder from './FileEmbedder';
+
+PDFJS.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
+
+interface FileLoaderProps {
+  setFileText: (text: string) => void;
+}
+
+export const FileLoader: React.FC<FileLoaderProps> = ({ setFileText }) => {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+
+  // Handle file processing
+  useEffect(() => {
+    const processPDF = async (file: File) => {
+      try {
+        const fileData = new Uint8Array(await file.arrayBuffer());
+        const pdf = await PDFJS.getDocument({ data: fileData }).promise;
+        const maxPages = pdf.numPages;
+        const pageTexts = [];
+
+        for (let pageNo = 1; pageNo <= maxPages; pageNo++) {
+          const page = await pdf.getPage(pageNo);
+          const tokenizedText = await page.getTextContent();
+          // @ts-ignore
+          const pageText = tokenizedText.items.map(token => token.str).join(' ');
+          pageTexts.push(pageText);
+        }
+
+        const documentText = pageTexts.join(' ');
+        setFileText(documentText);
+      } catch (error) {
+        console.error('PDF processing error:', error);
+      }
+    };
+
+    if (selectedFile && selectedFile.type === "application/pdf") {
+      processPDF(selectedFile);
+    }
+  }, [selectedFile, setFileText]);
+
+  // Handle file selection
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      setSelectedFile(event.target.files[0]);
+    }
+  };
+
+  return (
+    <div>
+      <FileEmbedder onFileSelect={handleFileChange} />
+      {/* Optionally display some status or progress indicator */}
+    </div>
+  );
+};

src/components/embeddingsWorker.js

@@ -0,0 +1,100 @@
+import { pipeline } from "@xenova/transformers";
+
+const CHUNK_SIZE = 1000;
+
+export class SimpleVectorStore {
+  constructor() {
+      this.documents = [];
+      this.embeddings = [];
+  }
+
+  addDocument(embedding, document) {
+    this.embeddings.push(embedding);
+    this.documents.push(document);
+  }
+
+
+  async similaritySearch(queryEmbedding, topK) {
+      let scores = this.embeddings.map((emb, index) => ({
+          score: cosineSimilarity(emb, queryEmbedding),
+          index: index
+      }));
+
+      scores.sort((a, b) => b.score - a.score);
+
+      return scores.slice(0, topK).map(score => ({
+          document: this.documents[score.index],
+          score: score.score
+      }));
+  }
+}
+
+export function cosineSimilarity(vecA, vecB) {
+  const dotProduct = vecA.reduce((acc, val, i) => acc + val * vecB[i], 0);
+  const magA = Math.sqrt(vecA.reduce((acc, val) => acc + val * val, 0));
+  const magB = Math.sqrt(vecB.reduce((acc, val) => acc + val * val, 0));
+  return dotProduct / (magA * magB);
+}
+
+class EmbeddingsWorker {
+  constructor(modelName = "Xenova/all-MiniLM-L6-v2") {
+      this.modelName = modelName;
+      this.client = null;
+      this.vectorStore = new SimpleVectorStore();
+  }
+
+  async loadClient() {
+      if (!this.client) {
+          this.client = await pipeline("feature-extraction", this.modelName);
+      }
+  }
+
+  async _embed(texts) {
+      await this.loadClient();
+      const embedResults = await Promise.all(
+          texts.map(async (text) => {
+              const response = await this.client(text, {
+                  pooling: "mean", 
+                  normalize: true 
+              });
+              return response.data;
+          })
+      );
+      return embedResults;
+  }
+
+  async addDocumentsToStore(docs, chunkSize = 1000) {
+    for (const doc of docs) {
+      const chunks = this.chunkText(doc, chunkSize);
+      const embeddings = await this._embed(chunks);
+      embeddings.forEach((embedding, index) => {
+        this.vectorStore.addDocument(embedding, chunks[index]);
+      });
+    }
+  }
+
+  chunkText(text, size) {
+    const chunks = [];
+    for (let i = 0; i < text.length; i += size) {
+      chunks.push(text.substring(i, i + size));
+    }
+    return chunks;
+  }
+
+  async searchSimilarDocuments(query, topK) {
+    const queryEmbedding = await this._embed([query]);
+    return this.vectorStore.similaritySearch(queryEmbedding[0], topK);
+  }
+}
+
+const worker = new EmbeddingsWorker();
+
+self.addEventListener('message', async (event) => {
+  if (event.data.action === 'addDocumentsToStore') {
+    await worker.addDocumentsToStore(event.data.documents, CHUNK_SIZE);
+    self.postMessage({ action: 'documentsAdded' });
+  } else if (event.data.action === 'searchSimilarDocuments') {
+    const results = await worker.searchSimilarDocuments(event.data.query, event.data.topK);
+    self.postMessage({ action: 'searchResults', results });
+  }
+});

src/components/embeddingsWorker.spec.mjs

@@ -0,0 +1,107 @@
+import { pipeline } from "@xenova/transformers";
+
+export class SimpleVectorStore {
+  constructor() {
+      this.documents = [];
+      this.embeddings = [];
+  }
+
+  addDocument(embedding, document) {
+      this.embeddings.push(embedding);
+      this.documents.push(document);
+  }
+
+  async similaritySearch(queryEmbedding, topK) {
+      let scores = this.embeddings.map((emb, index) => ({
+          score: cosineSimilarity(emb, queryEmbedding),
+          index: index
+      }));
+
+      // these are empty?
+      console.log('similaritySearch', queryEmbedding, scores, this.embeddings);
+
+      scores.sort((a, b) => b.score - a.score);
+
+      return scores.slice(0, topK).map(score => ({
+          document: this.documents[score.index],
+          score: score.score
+      }));
+  }
+}
+
+export function cosineSimilarity(vecA, vecB) {
+  console.log('cosineSimilarity', vecA, vecB);
+  const dotProduct = vecA.reduce((acc, val, i) => acc + val * vecB[i], 0);
+  const magA = Math.sqrt(vecA.reduce((acc, val) => acc + val * val, 0));
+  const magB = Math.sqrt(vecB.reduce((acc, val) => acc + val * val, 0));
+  return dotProduct / (magA * magB);
+}
+
+class EmbeddingsWorker {
+  constructor(modelName = "Xenova/all-MiniLM-L6-v2") {
+      this.modelName = modelName;
+      this.client = null;
+      this.vectorStore = new SimpleVectorStore();
+  }
+
+  async loadClient() {
+      if (!this.client) {
+          this.client = await pipeline("embeddings", this.modelName);
+      }
+  }
+
+  async _embed(texts) {
+      await this.loadClient();
+      return Promise.all(
+          texts.map(async (text) => {
+              const response = await this.client(text, {
+                  pooling: "mean", 
+                  normalize: true 
+              });
+              return response.data;
+          })
+      );
+      console.log("Embeddings: ", embeddings); // Debugging: Check embeddings
+  }
+
+  async addDocumentsToStore(docs) {
+      const embeddings = await this._embed(docs);
+      embeddings.forEach((embedding, index) => {
+          console.log(embedding, index);
+          this.vectorStore.addDocument(embedding, docs[index]);
+      });
+  }
+
+  async searchSimilarDocuments(query, topK) {
+      const queryEmbedding = await this._embed([query]);
+      console.log(queryEmbedding);
+      return this.vectorStore.similaritySearch(queryEmbedding[0], topK);
+  }
+}
+
+function testVectorStore() {
+    const store = new SimpleVectorStore();
+
+    // Mock embeddings (simple vectors for testing)
+    const mockEmbeddings = [
+        [1, 0, 0],
+        [0, 1, 0],
+        [0, 0, 1]
+    ];
+
+    // Add mock embeddings to the store
+    mockEmbeddings.forEach((emb, index) => {
+        store.addDocument(emb, `Document ${index + 1}`);
+    });
+
+    // Test cosine similarity directly
+    const cosSimTest = cosineSimilarity([1, 0, 0], [0, 1, 0]);
+    console.log('Cosine Similarity Test:', cosSimTest); // Should be 0 for orthogonal vectors
+
+    // Perform a similarity search
+    const results = store.similaritySearch([1, 0, 0], 2);
+    console.log('Similarity Search Results:', results);
+}
+
+// Run the test function
+testVectorStore();

tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}