/ChatVox

"Chat With Any Video" project in 24 hours, challenge myself to complete in @Supabase's AI Hackathon.

Primary LanguageTypeScriptGNU General Public License v3.0GPL-3.0

ChatVox - "Chat With Any Video"

based on Supabase's Next.js OpenAI Doc Search Starter

ChatVox Cover Image

ChatVox · Chat With Any Video: This project takes the YouTube/Podcast link you enter or the local Video/Audio file (WIP) you upload on the page, then you can chat with the video, just like ChatGPT! 🤩

Talking to a video is essentially talking to this person, It meant "chat with wisdom" 🤣

I'm updating AI Hackathon on Twitter in real-time, This is the showcase of the whole process. https://twitter.com/Jimmy_JingLv/status/1647483720608415744?s=20

The technology behind it is to process them to use as the custom context within OpenAI Text Completion prompts and LangChain to handle the document searching and Q&A answering.

Deploy

Deploy this starter to Vercel. The Supabase integration will automatically set the required environment variables and configure your Database Schema. All you have to do is set your OPENAI_API_KEY and you're ready to go!

Deploy with Vercel

Technical Details

Building your own custom ChatGPT involves four steps:

  1. [👷 Build time] Pre-process the knowledge base (your .mdx files in your pages folder).
  2. [👷 Build time] Store embeddings in Postgres with pgvector.
  3. [🏃 Runtime] Perform vector similarity search to find the content that's relevant to the question.
  4. [🏃 Runtime] Inject content into OpenAI GPT-3 text completion prompt and stream response to the client.

👷 Build time

Step 1. and 2. happen at build time, e.g. when Vercel builds your Next.js app. During this time the generate-embeddings script is being executed which performs the following tasks:

sequenceDiagram
    participant Vercel
    participant DB (pgvector)
    participant OpenAI (API)
    loop 1. Pre-process the knowledge base
        Vercel->>Vercel: Chunk .mdx pages into sections
        loop 2. Create & store embeddings
            Vercel->>OpenAI (API): create embedding for page section
            OpenAI (API)->>Vercel: embedding vector(1536)
            Vercel->>DB (pgvector): store embedding for page section
        end
    end
Loading

In addition to storing the embeddings, this script generates a checksum for each of your .mdx files and stores this in another database table to make sure the embeddings are only regenerated when the file has changed.

🏃 Runtime

Step 3. and 4. happen at runtime, anytime the user submits a question. When this happens, the following sequence of tasks is performed:

sequenceDiagram
    participant Client
    participant Edge Function
    participant DB (pgvector)
    participant OpenAI (API)
    Client->>Edge Function: { query: lorem ispum }
    critical 3. Perform vector similarity search
        Edge Function->>OpenAI (API): create embedding for query
        OpenAI (API)->>Edge Function: embedding vector(1536)
        Edge Function->>DB (pgvector): vector similarity search
        DB (pgvector)->>Edge Function: relevant docs content
    end
    critical 4. Inject content into prompt
        Edge Function->>OpenAI (API): completion request prompt: query + relevant docs content
        OpenAI (API)-->>Client: text/event-stream: completions response
    end
Loading

The relevant files for this are the SearchDialog (Client) component and the vector-search (Edge Function).

The initialization of the database, including the setup of the pgvector extension is stored in the supabase/migrations folder which is automatically applied to your local Postgres instance when running supabase start.

Local Development

Configuration

  • cp .env.example .env
  • Set your OPENAI_API_KEY in the newly created .env file.

Start Supabase

Make sure you have Docker installed and running locally. Then run

supabase start

Start the Next.js App

In a new terminal window, run

pnpm dev

Deploy

Deploy this starter to Vercel. The Supabase integration will automatically set the required environment variables and configure your Database Schema. All you have to do is set your OPENAI_API_KEY and you're ready to go!

Deploy with Vercel

Learn More

Video: How I Built Supabase’s OpenAI Doc Search