showing multiple cached answers

wjohnsto · wjohnsto · commit b3d4df4aeb63 · 2024-01-18T12:55:45.000-08:00
diff --git a/app/src/app/api/search/route.ts b/app/src/app/api/search/route.ts
@@ -7,5 +7,5 @@ export async function GET(request: NextRequest) {
     const response = await fetch(`${SEARCH_API}${request.nextUrl.search}`);
     const data = await response.json();
 
-    return Response.json({ ...data });
+    return Response.json(data);
 }
diff --git a/app/src/app/page.tsx b/app/src/app/page.tsx
@@ -6,18 +6,24 @@ import VideoList, { type VideoDocument } from '@/components/VideoList';
 import Modal from '@/components/Modal';
 import UploadButton from '@/components/UploadButton';
 import VideoForm from '@/components/VideoForm';
-import Markdown from '@/components/Markdown';
 import SettingsIcon from '@/components/SettingsIcon';
 import SettingsMenu from '@/components/SettingsMenu';
+import Accordion from '@/components/Accordion';
+import CircularProgress from '@/components/CircularProgress';
+import Markdown from '@/components/Markdown';
 
 interface VideoSearchResult {
   videos: VideoDocument[];
   answer: string;
+  question: string;
+  isOriginal?: boolean;
 }
 
 export default function Home() {
-  const [results, setResults] = useState<VideoSearchResult>();
+  const [results, setResults] = useState<VideoSearchResult[]>();
+  const [isSearching, setIsSearching] = useState(false);
   const [showModal, setShowModal] = useState(false);
+  const [currentQuestion, setCurrentQuestion] = useState<string>('');
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [selectedOption, setSelectedOption] = useState('OpenAI');
 
@@ -32,14 +38,22 @@ export default function Home() {
     setShowModal(false);
   };
 
-  const handleSearch = async (question: string) => {
+  const handleSearch = async (question: string, useCache?: boolean) => {
     // Replace with your API call
-    setResults(undefined);
-    const response = await fetch(
-      `/api/search?api=${selectedOption.toLowerCase()}&question=${question}`,
-    );
-    const data: VideoSearchResult = await response.json();
+    setCurrentQuestion(question);
+    let url = `/api/search?api=${selectedOption.toLowerCase()}&question=${question}`;
+
+    if (useCache === false) {
+      url = `${url}&useCache=false`;
+    } else {
+      setResults(undefined);
+    }
+
+    setIsSearching(true);
+    const response = await fetch(url);
+    const data: VideoSearchResult[] = await response.json();
     setResults(data);
+    setIsSearching(false);
   };
 
   const handleToggleSettings = () => {
@@ -52,6 +66,12 @@ export default function Home() {
     setSelectedOption(event.target.value);
   };
 
+  const haveResults = Array.isArray(results) && results.length > 0;
+  const haveOriginal =
+    haveResults &&
+    typeof results[0].isOriginal !== 'undefined' &&
+    results[0].isOriginal;
+
   return (
     <>
       <main className="flex min-h-screen flex-col items-center justify-between p-24">
@@ -60,11 +80,50 @@ export default function Home() {
             Ask me about Redis
           </h1>
           <QuestionForm onSubmit={handleSearch} />
-          {typeof results !== 'undefined' && (
-            <div className="py-4">
-              <Markdown markdown={results?.answer ?? ''} />
-              <h2>To learn more, check out these videos:</h2>
-              <VideoList videos={results?.videos ?? []} />
+          {Array.isArray(results) && !haveResults && !isSearching && (
+            <p className="mt-4">No results found. Try another question.</p>
+          )}
+          {!haveOriginal && (
+            <>
+              <h2 className="text-xl font-bold mb-2 mt-4">
+                Your question has already been asked in a different way, here
+                are some possible answers:
+              </h2>
+              <p>
+                If none of the answers below are useful, we can always generate
+                a unique response for you.
+              </p>
+              <button
+                className="mt-2 bg-blue-500 text-white p-2 rounded"
+                onClick={() => {
+                  if (isSearching) {
+                    return;
+                  }
+
+                  void handleSearch(currentQuestion, false);
+                }}>
+                {isSearching
+? (
+                  <CircularProgress />
+                )
+: (
+                  <span>Generate unique response</span>
+                )}
+              </button>
+              <div className="mt-4">
+                <Accordion items={results ?? []} />
+              </div>
+            </>
+          )}
+          {haveOriginal && (
+            <div className="mt-4 rounded-md shadow-lg bg-white">
+              <div className="p-4">
+                <Markdown markdown={results[0].answer} />
+                <h2 className="text-xl font-bold my-4">
+                  To learn more, check out these videos:
+                </h2>
+                <VideoList videos={results[0].videos} />
+              </div>
             </div>
           )}
         </div>
diff --git a/app/src/components/Accordion.tsx b/app/src/components/Accordion.tsx
@@ -0,0 +1,53 @@
+// components/Accordion.jsx
+
+import React, { useState } from 'react';
+import VideoList, { type VideoDocument } from './VideoList';
+import Markdown from './Markdown';
+
+interface AccordionItemProps {
+  question: string;
+  children: React.ReactNode;
+}
+
+function AccordionItem({ question, children }: AccordionItemProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="border-b border-gray-200">
+      <button
+        className="py-2 px-4 w-full text-left text-black font-semibold text-lg shadow-md"
+        onClick={() => {
+          setIsOpen(!isOpen);
+        }}>
+        {question}
+      </button>
+      {isOpen && <div className="p-4 bg-white">{children}</div>}
+    </div>
+  );
+}
+
+export interface AccordionProps {
+  items: Array<{
+    question: string;
+    answer: string;
+    videos: VideoDocument[];
+  }>;
+}
+
+function Accordion({ items }: AccordionProps) {
+  return (
+    <div className="bg-blue-100 rounded-md shadow-lg">
+      {items.map((item, index) => (
+        <AccordionItem key={index} question={item.question}>
+          <Markdown markdown={item.answer} />
+          <h2 className="text-xl font-bold my-4">
+            To learn more, check out these videos:
+          </h2>
+          <VideoList videos={item.videos} />
+        </AccordionItem>
+      ))}
+    </div>
+  );
+}
+
+export default Accordion;
diff --git a/services/video-search/src/api/prompt.ts b/services/video-search/src/api/prompt.ts
@@ -18,6 +18,8 @@ import { type ApiConfig } from './index.js';
 export type AnswerDocument = Document<{
     videos: VideoDocument[];
     answer: string;
+    question?: string;
+    isOriginal?: boolean;
 }>;
 
 export interface Prompt {
diff --git a/services/video-search/src/api/search.ts b/services/video-search/src/api/search.ts
@@ -3,19 +3,28 @@ import log from '../log.js';
 import config from '../config.js';
 import { type RedisVectorStore } from 'langchain/vectorstores/redis';
 import { type ApiConfig } from './index.js';
-import { type Prompt } from './prompt.js';
+import { type AnswerDocument, type Prompt } from './prompt.js';
 
 export interface SearchConfig extends Pick<ApiConfig, 'prefix'> {
     vectorStore: RedisVectorStore;
     answerVectorStore: RedisVectorStore;
     prompt: Prompt;
 }
 
+export interface VideoSearchOptions {
+    useCache?: boolean;
+}
+
 export interface Search {
     searchVideos: (
         question: string,
+        options?: VideoSearchOptions,
     ) => Promise<
-        Record<string, any> | { videos: VideoDocument[]; answer: string }
+        Array<{
+            videos: VideoDocument[];
+            answer: string;
+            isOriginal?: boolean | undefined;
+        }>
     >;
 }
 
@@ -56,41 +65,68 @@ export default function initialize({
         /**
          * Scores will be between 0 and 1, where 0 is most accurate and 1 is least accurate
          */
-        const [result] = await answerVectorStore.similaritySearchWithScore(
+        let results = (await answerVectorStore.similaritySearchWithScore(
             question,
-            1,
-        );
+            config.searches.KNN,
+        )) as Array<[AnswerDocument, number]>;
 
-        if (Array.isArray(result) && result.length > 0) {
-            log.debug(`Found closest answer with score: ${String(result[1])}`, {
-                location: `${prefix}.search.getAnswer`,
-                score: result[1],
-            });
+        if (Array.isArray(results) && results.length > 0) {
+            // Filter out results with too high similarity score
+            results = results.filter(
+                (result) => result[1] <= config.searches.maxSimilarityScore,
+            );
 
-            if (result[1] < config.searches.maxSimilarityScore) {
-                log.debug(`Found answer to question ${question}`, {
-                    location: `${prefix}.search.getAnswer`,
-                });
+            const inaccurateResults = results.filter(
+                (result) => result[1] > config.searches.maxSimilarityScore,
+            );
 
-                return result[0].metadata;
+            if (
+                Array.isArray(inaccurateResults) &&
+                inaccurateResults.length > 0
+            ) {
+                log.debug(
+                    `Rejected ${inaccurateResults.length} similar answers that have a score > ${config.searches.maxSimilarityScore}`,
+                    {
+                        location: `${prefix}.search.getAnswer`,
+                        scores: inaccurateResults.map((result) => result[1]),
+                    },
+                );
             }
+        }
+
+        if (Array.isArray(results) && results.length > 0) {
+            log.debug(
+                `Accepted ${results.length} similar answers that have a score <= ${config.searches.maxSimilarityScore}`,
+                {
+                    location: `${prefix}.search.getAnswer`,
+                    scores: results.map((result) => result[1]),
+                },
+            );
 
-            log.debug(`Score too low for question ${question}`, {
-                location: `${prefix}.search.getAnswer`,
-                score: result[1],
+            return results.map((result) => {
+                return {
+                    ...result[0].metadata,
+                    question: result[0].pageContent,
+                    isOriginal: false,
+                };
             });
         }
     }
 
-    async function searchVideos(question: string) {
+    async function searchVideos(
+        question: string,
+        { useCache = config.searches.answerCache }: VideoSearchOptions = {},
+    ) {
         log.debug(`Original question: ${question}`, {
             location: `${prefix}.search.search`,
         });
 
-        const existingAnswer = await checkAnswerCache(question);
+        if (useCache) {
+            const existingAnswer = await checkAnswerCache(question);
 
-        if (typeof existingAnswer !== 'undefined') {
-            return existingAnswer;
+            if (typeof existingAnswer !== 'undefined') {
+                return existingAnswer;
+            }
         }
 
         const semanticQuestion = await prompt.getSemanticQuestion(question);
@@ -115,14 +151,19 @@ export default function initialize({
             location: `${prefix}.search.search`,
         });
 
-        // TODO: modify the prompt to ask both questions
         const answerDocument = await prompt.answerQuestion(question, videos);
 
         if (config.searches.answerCache) {
             await answerVectorStore.addDocuments([answerDocument]);
         }
 
-        return answerDocument.metadata;
+        return [
+            {
+                ...answerDocument.metadata,
+                question: answerDocument.pageContent,
+                isOriginal: true,
+            },
+        ];
     }
 
     return {
diff --git a/services/video-search/src/router.ts b/services/video-search/src/router.ts
@@ -3,6 +3,7 @@ import getApi from './api/index.js';
 import * as transcripts from './transcripts/index.js';
 import log from './log.js';
 import { client } from './db.js';
+import { type VideoSearchOptions } from './api/search.js';
 
 const router = express.Router();
 
@@ -42,27 +43,40 @@ router.post('/videos', async (req, res) => {
 });
 
 router.get('/videos/search', async (req, res) => {
-    const { question, api: useApi } = req.query as {
+    const {
+        question,
+        api: useApi,
+        useCache,
+    } = req.query as {
         question: string;
         api: 'google' | 'openai';
+        useCache?: 'true' | 'false';
     };
 
-    console.log(req.url);
-
     try {
         log.debug(`Searching videos using ${useApi}`, {
             question,
             location: 'router.videos.search',
         });
         const api = getApi(useApi);
-        const results = await api.search.searchVideos(question);
+        const searchOptions: VideoSearchOptions = {};
+
+        if (typeof useCache === 'string') {
+            if (useCache.toLowerCase() === 'true') {
+                searchOptions.useCache = true;
+            } else if (useCache.toLowerCase() === 'false') {
+                searchOptions.useCache = false;
+            }
+        }
+
+        const results = await api.search.searchVideos(question, searchOptions);
 
         log.info('Results found for question', {
             question,
             location: 'router.videos.search',
         });
 
-        res.status(200).json({ ...results });
+        res.status(200).json(results);
     } catch (e) {
         log.error('Unexpected error in /videos/search', {
             error: {

Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,5 @@ export async function GET(request: NextRequest) {`
`7`	`7`	const response = await fetch(`${SEARCH_API}${request.nextUrl.search}`);
`8`	`8`	`const data = await response.json();`
`9`	`9`
`10`		`- return Response.json({ ...data });`
	`10`	`+ return Response.json(data);`
`11`	`11`	`}`