working on AI Tube search engine

.env

@@ -8,8 +8,6 @@ NEXT_PUBLIC_AI_TUBE_OAUTH_CLIENT_ID="35c3efbc-d51f-4763-b5ea-3e149c6158e5"
 ADMIN_HUGGING_FACE_API_TOKEN=""
 ADMIN_HUGGING_FACE_USERNAME=""
 
-AI_TUBE_ROBOT_API="https://jbilcke-hf-ai-tube-robot.hf.space"
-
 UPSTASH_REDIS_REST_URL=""
 UPSTASH_REDIS_REST_TOKEN=""
 

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@huggingface/hub": "0.12.3-oauth",
         "@huggingface/inference": "^2.6.4",
+        "@jcoreio/async-throttle": "^1.6.0",
         "@photo-sphere-viewer/core": "^5.5.1",
         "@photo-sphere-viewer/video-plugin": "^5.5.1",
         "@radix-ui/react-accordion": "^1.1.2",
@@ -30,6 +31,7 @@
         "@radix-ui/react-toast": "^1.1.4",
         "@radix-ui/react-tooltip": "^1.0.6",
         "@react-spring/web": "^9.7.3",
+        "@types/lodash.debounce": "^4.0.9",
         "@types/node": "20.4.2",
         "@types/react": "18.2.15",
         "@types/react-dom": "18.2.7",
@@ -45,9 +47,12 @@
         "date-fns": "^2.30.0",
         "eslint": "8.45.0",
         "eslint-config-next": "13.4.10",
+        "fastest-levenshtein": "^1.0.16",
         "hash-wasm": "^4.11.0",
+        "lodash.debounce": "^4.0.8",
         "lucide-react": "^0.260.0",
         "markdown-yaml-metadata-parser": "^3.0.0",
+        "minisearch": "^6.3.0",
         "next": "^14.1.0",
         "photo-sphere-viewer-lensflare-plugin": "^2.0.1",
         "pick": "^0.0.1",
@@ -982,6 +987,14 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/@jcoreio/async-throttle": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@jcoreio/async-throttle/-/async-throttle-1.6.0.tgz",
+      "integrity": "sha512-0efaXmn498OKPti0tG1GGCPdQwnfHecBGyJZ9eJzZf779WEDbAURGAFh4NWgbuTHU53KSMA2fwJcn6WqlOVRJA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -2602,6 +2615,19 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.202",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
+      "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ=="
+    },
+    "node_modules/@types/lodash.debounce": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.debounce/-/lodash.debounce-4.0.9.tgz",
+      "integrity": "sha512-Ma5JcgTREwpLRwMM+XwBR7DaWe96nC38uCBDFKZWbNKD+osjVzdpnUSwBcqCptrp16sSOLBAUb50Car5I0TCsQ==",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.4.2",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.2.tgz",
@@ -4860,6 +4886,14 @@
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
     },
+    "node_modules/fastest-levenshtein": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+      "engines": {
+        "node": ">= 4.9.1"
+      }
+    },
     "node_modules/fastparse": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
@@ -6087,6 +6121,11 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/minisearch": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/minisearch/-/minisearch-6.3.0.tgz",
+      "integrity": "sha512-ihFnidEeU8iXzcVHy74dhkxh/dn8Dc08ERl0xwoMMGqp4+LvRSCgicb+zGqWthVokQKvCSxITlh3P08OzdTYCQ=="
+    },
     "node_modules/mkdirp-classic": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@huggingface/hub": "0.12.3-oauth",
     "@huggingface/inference": "^2.6.4",
+    "@jcoreio/async-throttle": "^1.6.0",
     "@photo-sphere-viewer/core": "^5.5.1",
     "@photo-sphere-viewer/video-plugin": "^5.5.1",
     "@radix-ui/react-accordion": "^1.1.2",
@@ -31,12 +32,13 @@
     "@radix-ui/react-toast": "^1.1.4",
     "@radix-ui/react-tooltip": "^1.0.6",
     "@react-spring/web": "^9.7.3",
+    "@types/lodash.debounce": "^4.0.9",
     "@types/node": "20.4.2",
     "@types/react": "18.2.15",
     "@types/react-dom": "18.2.7",
     "@types/uuid": "^9.0.2",
-    "@upstash/redis": "^1.28.3",
     "@upstash/query": "^0.0.2",
+    "@upstash/redis": "^1.28.3",
     "alchemy-sdk": "^3.1.2",
     "autoprefixer": "10.4.14",
     "class-variance-authority": "^0.6.1",
@@ -46,9 +48,12 @@
     "date-fns": "^2.30.0",
     "eslint": "8.45.0",
     "eslint-config-next": "13.4.10",
+    "fastest-levenshtein": "^1.0.16",
     "hash-wasm": "^4.11.0",
+    "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.260.0",
     "markdown-yaml-metadata-parser": "^3.0.0",
+    "minisearch": "^6.3.0",
     "next": "^14.1.0",
     "photo-sphere-viewer-lensflare-plugin": "^2.0.1",
     "pick": "^0.0.1",

src/app/interface/search-input/index.tsx

@@ -0,0 +1,144 @@
+import { useState, useTransition } from "react"
+import Link from "next/link"
+// import throttle from "@jcoreio/async-throttle"
+import debounce from "lodash.debounce"
+import { GoSearch } from "react-icons/go"
+
+import { useStore } from "@/app/state/useStore"
+import { cn } from "@/lib/utils"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { getVideos } from "@/app/server/actions/ai-tube-hf/getVideos"
+
+export function SearchInput() {
+  const [_pending, startTransition] = useTransition()
+
+  const setSearchAutocompleteQuery = useStore(s => s.setSearchAutocompleteQuery)
+  const showAutocompleteBox = useStore(s => s.showAutocompleteBox)
+  const setShowAutocompleteBox = useStore(s => s.setShowAutocompleteBox)
+  
+  const searchAutocompleteResults = useStore(s => s.searchAutocompleteResults)
+  const setSearchAutocompleteResults = useStore(s => s.setSearchAutocompleteResults)
+
+  const setSearchQuery = useStore(s => s.setSearchQuery)
+
+  const [searchDraft, setSearchDraft] = useState("")
+
+  // called when pressing enter or clicking on search
+  const debouncedSearch = debounce((query: string) => {
+    startTransition(async () => {
+      console.log(`searching for "${query}"..`)
+
+      const videos = await getVideos({
+        query,
+        sortBy: "match",
+        maxVideos: 8,
+        neverThrow: true,
+        renewCache: false, // bit of optimization
+      })
+
+      console.log(`got ${videos.length} results!`)
+      setSearchAutocompleteResults(videos)
+
+      // TODO: only close the show autocomplete box if we found something
+      // setShowAutocompleteBox(false)
+    })
+  }, 1000)
+
+  // called when pressing enter or clicking on search
+  const handleSearch = () => {
+    setSearchQuery(searchDraft)
+    setShowAutocompleteBox(true)
+    debouncedSearch(searchDraft)
+  }
+
+  return (
+    <div className="flex flex-row flex-grow w-[380px] lg:w-[600px]">
+
+      <div className="flex flex-row w-full"
+        onClick={() => {
+          handleSearch()
+        }}>
+        <Input
+          placeholder="Search"
+          className={cn(
+            `bg-neutral-900 text-neutral-200 dark:bg-neutral-900 dark:text-neutral-200`,
+            `rounded-l-full rounded-r-none`,
+            `border-neutral-700 dark:border-neutral-700 border-r-0`,
+    
+          )}
+          // disabled={atLeastOnePanelIsBusy}
+          onFocus={() => {
+            handleSearch()
+          }}
+          onBlur={() => {
+            setShowAutocompleteBox(false)
+          }}
+          onChange={(e) => {
+            setSearchDraft(e.target.value)
+            handleSearch()
+          }}
+          onKeyDown={({ key }) => {
+            if (key === 'Enter') {
+              handleSearch()
+            }
+          }}
+          value={searchDraft}
+        />
+        <Button
+        className={cn(
+          `rounded-l-none rounded-r-full border border-neutral-700 dark:border-neutral-700`,
+          `cursor-pointer`,
+          `transition-all duration-200 ease-in-out`,
+          `text-neutral-200 dark:text-neutral-200 bg-neutral-800 dark:bg-neutral-800 hover:bg-neutral-700 disabled:bg-neutral-900`
+          )}
+          onClick={() => {
+            handleSearch()
+            // console.log("submit")
+            // setShowAutocompleteBox(false)
+            // setSearchDraft("")
+          }}
+        disabled={false}
+      >
+        <GoSearch className="w-6 h-6" />
+      </Button>
+    </div>
+    <div
+      className={cn(
+        `absolute z-50 ml-1`,
+
+        // please keep this in sync with the parent
+        `w-[320px] lg:w-[540px]`,
+
+        `text-neutral-200 dark:text-neutral-200 bg-neutral-900 dark:bg-neutral-900`,
+        `border border-neutral-800 dark:border-neutral-800`,
+        `rounded-xl shadow-2xl`,
+        `flex flex-col p-2 space-y-1`,
+        
+        `transition-all duration-200 ease-in-out`,
+        showAutocompleteBox
+          ? `opacity-100 scale-100 mt-11`
+          : `opacity-0 scale-95 mt-6`
+      )}
+    >
+      {searchAutocompleteResults.length === 0 ? <div>No results found.</div> : null}
+        {searchAutocompleteResults.map(media => (
+          <Link key={media.id} href={`/watch?v=${media.id}`}>
+            <div
+              className={cn(
+                `dark:hover:bg-neutral-800 hover:bg-neutral-800`,
+                `text-sm`,
+                `px-3 py-2`,
+                `rounded-xl`
+              )}
+
+            >
+            
+              {media.label}
+          </div>
+          </Link>
+        ))}
+    </div>
+  </div>
+  )
+}

src/app/interface/top-header/index.tsx

@@ -1,7 +1,8 @@
-import { useEffect, useTransition } from 'react'
+import { useEffect, useState, useTransition } from 'react'
 
 import { Pathway_Gothic_One } from 'next/font/google'
 import { PiPopcornBold } from "react-icons/pi"
+import { GoSearch } from "react-icons/go"
 
 const pathway = Pathway_Gothic_One({
   weight: "400",
@@ -14,6 +15,9 @@ import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
 import { getTags } from '@/app/server/actions/ai-tube-hf/getTags'
 import Link from 'next/link'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { SearchInput } from '../search-input'
 
 export function TopHeader() {
   const [_pending, startTransition] = useTransition()
@@ -33,6 +37,17 @@ export function TopHeader() {
   const currentTags = useStore(s => s.currentTags)
   const setCurrentTags = useStore(s => s.setCurrentTags)
 
+  const setSearchAutocompleteQuery = useStore(s => s.setSearchAutocompleteQuery)
+  const searchAutocompleteResults = useStore(s => s.searchAutocompleteResults)
+
+  const setSearchQuery = useStore(s => s.setSearchQuery)
+
+  const [searchDraft, setSearchDraft] = useState("")
+  useEffect(() => {
+    const searchQuery = searchDraft.trim().toLowerCase()
+    setSearchQuery(searchQuery)
+  }, [searchDraft])
+
   const isNormalSize = headerMode === "normal"
 
 
@@ -118,9 +133,13 @@ export function TopHeader() {
           `px-4 py-2 w-max-64`,
           `text-neutral-400 text-2xs sm:text-xs lg:text-sm italic`
         )}>
-         Note: AI Tube is still in beta (and this text will be replaced by a search box)</div>
-        <div className={cn()}>
-          &nbsp; {/* more buttons? unused for now */}
+          <SearchInput />
+        </div>
+        <div className={cn("w-32 xl:w-42")}>
+          <span>
+            &nbsp;
+            {/* reserved for future use */}
+          </span>
         </div>
       </div>
       {

src/app/server/actions/ai-tube-hf/getVideos.ts

@@ -1,5 +1,8 @@
 "use server"
 
+// import { distance } from "fastest-levenshtein"
+import MiniSearch from "minisearch"
+
 import { VideoInfo } from "@/types/general"
 
 import { getVideoIndex } from "./getVideoIndex"
@@ -11,13 +14,18 @@ const HARD_LIMIT = 100
 
 // this just return ALL videos on the platform
 export async function getVideos({
+  query = "",
   mandatoryTags = [],
   niceToHaveTags = [],
   sortBy = "date",
   ignoreVideoIds = [],
   maxVideos = HARD_LIMIT,
   neverThrow = false,
+  renewCache = true,
 }: {
+  // optional search query
+  query?: string
+
   // the videos MUST include those tags
   mandatoryTags?: string[]
 
@@ -25,7 +33,10 @@ export async function getVideos({
   // but it isn't a hard limit - TODO: use some semantic search here?
   niceToHaveTags?: string[]
 
-  sortBy?: "random" | "date"
+  sortBy?:
+    | "random" // for the home
+    | "date" // most recent first
+    | "match" // how close we are from the query
 
   // ignore some ids - this is used to not show the same videos again
   // eg. videos already watched, or disliked etc
@@ -34,13 +45,15 @@ export async function getVideos({
   maxVideos?: number
 
   neverThrow?: boolean
+
+  renewCache?: boolean
 }): Promise<VideoInfo[]> {
   try {
     // the index is gonna grow more and more,
     // but in the future we will use some DB eg. Prisma or sqlite
     const published = await getVideoIndex({
       status: "published",
-      renewCache: true
+      renewCache,
     })
 
     let allPotentiallyValidVideos = Object.values(published)
@@ -53,8 +66,32 @@ export async function getVideos({
       allPotentiallyValidVideos = allPotentiallyValidVideos.filter(video => !ignoreVideoIds.includes(video.id))
     }
 
-    if (sortBy === "date") {
-      allPotentiallyValidVideos.sort(((a, b) => b.updatedAt.localeCompare(a.updatedAt)))
+    const q = query.trim().toLowerCase()
+
+    if (sortBy === "match") {
+      // now obviously we are going to migrate to a database search instead,
+      // maybe a bit of vector search too,
+      // but let's say that for now this is good enough
+      let miniSearch = new MiniSearch({
+        fields: ['label', 'description', 'tags'], // fields to index for full-text search
+        storeFields: ['id'] // fields to return with search results
+      })
+      
+      miniSearch.addAll(allPotentiallyValidVideos)
+      
+      // mini search has plenty of options, see:
+      // https://www.npmjs.com/package/minisearch
+      const results = miniSearch.search(query, {
+        prefix: true, // "moto" will match "motorcycle"
+        fuzzy: 0.2,
+        // to search within a specific category
+        // filter: (result) => result.category === 'fiction'
+      })
+
+      allPotentiallyValidVideos = allPotentiallyValidVideos.filter(v => results.some(r => r.id === v.id))
+
+    } if (sortBy === "date") {
+      allPotentiallyValidVideos.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))
     } else {
       allPotentiallyValidVideos.sort(() => Math.random() - 0.5)
     }

src/app/server/actions/ai-tube-robot/README.md

@@ -1,3 +0,0 @@
-# server/actions/ai-tube-robot
-
-API client for the AI Tube Robot

src/app/server/actions/ai-tube-robot/updateQueue.ts

@@ -1,42 +0,0 @@
-"use server"
-
-import { ChannelInfo, UpdateQueueResponse } from "@/types/general"
-
-import { aiTubeRobotApi } from "../config"
-
-export async function updateQueue({
-  channel,
-  apiKey,
-}: {
-  channel?: ChannelInfo
-  apiKey: string
-}): Promise<number> {
-  if (!apiKey) {
-    throw new Error(`the apiKey is required`)
-  }
-
-  const res = await fetch(`${aiTubeRobotApi}/update-queue`, {
-    method: "POST",
-    headers: {
-      Accept: "application/json",
-      "Content-Type": "application/json",
-      // Authorization: `Bearer ${apiToken}`,
-     },
-    body: JSON.stringify({
-      apiKey,
-      channel
-    }),
-    cache: 'no-store',
-    // we can also use this (see https://vercel.com/blog/vercel-cache-api-nextjs-cache)
-    // next: { revalidate: 1 }
-  })
-
-  if (res.status !== 200) {
-    // This will activate the closest `error.js` Error Boundary
-    throw new Error('Failed to fetch data')
-  }
-  
-  const response = (await res.json()) as UpdateQueueResponse
-  // console.log("response:", response)
-  return response.nbUpdated
-}

src/app/server/actions/config.ts

@@ -6,8 +6,6 @@ export const adminUsername = `${process.env.ADMIN_HUGGING_FACE_USERNAME || ""}`
 
 export const adminCredentials: Credentials = { accessToken: adminApiKey }
 
-export const aiTubeRobotApi = `${process.env.AI_TUBE_ROBOT_API || ""}`
-
 export const redisUrl = `${process.env.UPSTASH_REDIS_REST_URL || ""}`
 export const redisToken = `${process.env.UPSTASH_REDIS_REST_TOKEN || ""}`
 

src/app/server/actions/redis.ts

@@ -1,4 +1,5 @@
 import { Redis } from "@upstash/redis"
+import { Query } from "@upstash/query"
 
 import { redisToken, redisUrl } from "./config"
 
@@ -7,3 +8,11 @@ export const redis = new Redis({
   token: redisToken
 })
 
+/*
+const q = new Redis({
+  url: redisUrl,
+  token: redisToken,
+  automaticDeserialization: false, // redis query needs it to false?
+})
+*/
+

src/app/state/useStore.ts

@@ -19,6 +19,21 @@ export const useStore = create<{
 
   setPathname: (pathname: string) => void
 
+  searchQuery: string
+  setSearchQuery: (searchQuery?: string) => void
+
+  showAutocompleteBox: boolean
+  setShowAutocompleteBox: (showAutocompleteBox: boolean) => void
+
+  searchAutocompleteQuery: string
+  setSearchAutocompleteQuery: (searchAutocompleteQuery?: string) => void
+
+  searchAutocompleteResults: VideoInfo[]
+  setSearchAutocompleteResults: (searchAutocompleteResults: VideoInfo[]) => void
+
+  searchResults: VideoInfo[]
+  setSearchResults: (searchResults: VideoInfo[]) => void
+
   currentUser?: UserInfo
   setCurrentUser: (currentUser?: UserInfo) => void
 
@@ -102,12 +117,37 @@ export const useStore = create<{
     set({ view: routes[pathname] || "not_found" })
   },
 
+  searchAutocompleteQuery: "",
+  setSearchAutocompleteQuery: (searchAutocompleteQuery?: string) => {
+    set({ searchAutocompleteQuery })
+  },
+
+  showAutocompleteBox: false,
+  setShowAutocompleteBox: (showAutocompleteBox: boolean) => {
+    set({ showAutocompleteBox })
+  },
+
+  searchAutocompleteResults: [] as VideoInfo[],
+  setSearchAutocompleteResults: (searchAutocompleteResults: VideoInfo[]) => {
+    set({ searchAutocompleteResults })
+  },
+
+  searchQuery: "",
+  setSearchQuery: (searchQuery?: string) => {
+    set({ searchQuery })
+  },
+
+  searchResults: [] as VideoInfo[],
+  setSearchResults: (searchResults: VideoInfo[]) => {
+    set({ searchResults })
+  },
+
   currentUser: undefined,
   setCurrentUser: (currentUser?: UserInfo) => {
     set({ currentUser })
   },
   
-  headerMode: "normal",
+  headerMode: "normal" as InterfaceHeaderMode,
   setHeaderMode: (headerMode: InterfaceHeaderMode) => {
     set({ headerMode })
   },

src/components/ui/popover.tsx

@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border border-neutral-200 bg-white p-4 text-neutral-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+        "z-50 w-72 rounded-md border border-stone-200 bg-white p-4 text-stone-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-stone-800 dark:bg-stone-950 dark:text-stone-50",
         className
       )}
       {...props}