From 8398676af7d5729b11f7241cf93056317772123a Mon Sep 17 00:00:00 2001
From: heronalps <heronalps@gmail.com>
Date: Sat, 16 Nov 2024 15:38:08 -0800
Subject: [PATCH] adding arize phoenix

---
 apps/web/pages/brainbite_original.tsx | 488 ++++++++++++++++++++++++++
 apps/web/server/arize-trace.ts        |  31 ++
 prompts.tsx                           | 167 +++++++++
 3 files changed, 686 insertions(+)
 create mode 100644 apps/web/pages/brainbite_original.tsx
 create mode 100644 apps/web/server/arize-trace.ts
 create mode 100644 prompts.tsx

diff --git a/apps/web/pages/brainbite_original.tsx b/apps/web/pages/brainbite_original.tsx
new file mode 100644
index 0000000..fea45ce
--- /dev/null
+++ b/apps/web/pages/brainbite_original.tsx
@@ -0,0 +1,488 @@
+
+"use client"
+
+import { Loading } from "@/components/ui/loading";
+import { z } from "zod";
+import React, { useState, useEffect, useRef, useCallback, use } from "react";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  type CarouselApi,
+  CarouselPrevious,
+  CarouselNext,
+} from "@/components/ui/carousel";
+import { event } from '@/lib/telemetry-client';
+import { LearnCarouselItem } from "@/types/LearnCarouselItem";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import MarkdownRender from "@/components/markdown-render"
+import Image from "next/image";
+import { WebSearchImage } from "@/types/WebSearchImage";
+import { toast } from "@/components/ui/use-toast";
+import { useMakeCopilotReadable } from "@copilotkit/react-core";
+import { LuSearch } from "react-icons/lu";
+import { Button } from "@/components/ui/button";
+import { modals } from "@/components/modal-manager";
+
+type BoookRecommendation = {
+  userLearningGuide: string;
+  bookRecommendations?: string[];
+  keyPointsOfBooks?: string[];
+  bookImages?: {
+    [key: string]: WebSearchImage;
+  };
+};
+
+export default function LearnPage() {
+  const [carouselItems, setCarouselItems] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [recommendedBooks, setRecommendedBooks] = useState<BoookRecommendation>({});
+
+  const getCopilotrecommendedBooksContext = () => {
+    return {
+      userLearningGuide: recommendedBooks?.userLearningGuide || "",
+      bookRecommendations: recommendedBooks?.bookRecommendations || [],
+      keyPointsOfBooks: recommendedBooks?.keyPointsOfBooks || [],
+    } || {};
+  }
+  useMakeCopilotReadable("Recommended Books for user based on input: " + JSON.stringify(getCopilotrecommendedBooksContext()));
+  const getCopilotCarouselContext = () => {
+    return {
+      learningContentSlides: carouselItems.map((item: {
+        title: string;
+        content: string;
+      }) => item.content).join(", "),
+    } || {};
+  }
+  useMakeCopilotReadable("Recommended learning lesson based on input: " + JSON.stringify(getCopilotCarouselContext()));
+
+  const fetchRecommendedBooks = async (input: {
+    query: string;
+    answers: Record<string, string>;
+  }) => {
+    setIsLoading(true);
+    toast({
+      title: "Fetching recommended books",
+      duration: 3000,
+    })
+    try {
+      const response = await fetch(`/api/get-recommended-books`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(input),
+      });
+      if (!response.ok) {
+        throw new Error('Failed to fetch carousel items');
+      }
+      const data = await response.json();
+      setRecommendedBooks(data.response);
+    } catch (error) {
+      console.error('Failed to fetch carousel items:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const fetchCarouselItems = async (input: {
+    query: string;
+    answers: Record<string, string>;
+  }) => {
+    setIsLoading(true);
+    try {
+      toast({
+        title: "Loading book details content...",
+        duration: 3000,
+      })
+      const response = await fetch(`/api/build-lesson`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(input),
+      });
+      if (!response.ok) {
+        throw new Error('Failed to fetch carousel items');
+      }
+      const data = await response.json();
+      setCarouselItems(data.response);
+    } catch (error) {
+      console.error('Failed to fetch carousel items:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return <>
+    <main className="flex flex-col items-center">
+      <div className="w-full max-w-xl">
+        <SearchBar
+          isLoading={isLoading}
+          onSubmit={(data) => {
+            console.log('submit', data);
+            if (!isLoading) {
+              event('fetchcarouselitems', {
+                label: 'learn',
+                value: JSON.stringify(data),
+                category: 'learn',
+              });
+              void fetchCarouselItems(data);
+            }
+          }}
+          onBookSubmit={(data) => {
+            console.log('submit', data);
+            if (!isLoading) {
+              event('fetchRecommendedBooks', {
+                label: 'learn',
+                value: JSON.stringify(data),
+                category: 'learn',
+              });
+              void fetchRecommendedBooks(data);
+            }
+          }}
+        />
+        <BookRecommendationSection
+          isLoading={isLoading}
+          onBookClick={(book) => {
+            console.log('clicked book:', book);
+            if (!isLoading) {
+              event('fetchcarouselitems', {
+                label: 'learn',
+                value: book,
+                category: 'learn',
+              });
+              void fetchCarouselItems({
+                query: `${book} book`,
+                answers: {}
+              });
+            }
+          }}
+          bookRecommendations={recommendedBooks} />
+        <LearnCarousel carouselItems={carouselItems} />
+      </div>
+    </main>
+  </>
+}
+
+export const BookRecommendationSection = ({
+  bookRecommendations,
+  onBookClick,
+  isLoading,
+}: {
+  bookRecommendations?: BoookRecommendation
+  onBookClick: (book: string) => void;
+  isLoading?: boolean;
+}) => {
+  return (
+    <section>
+      <div className="grid grid-cols-3 gap-4">
+        {bookRecommendations?.bookRecommendations?.length && bookRecommendations.bookRecommendations.map((book) => (
+          <div
+            key={book}
+            className="flex flex-col items-center cursor-pointer hover:opacity-75"
+            onClick={() => {
+              if (isLoading) return;
+              onBookClick(book)
+            }}>
+            <Image
+              src={bookRecommendations?.bookImages?.[book]?.contentUrl || "https://via.placeholder.com/150"}
+              alt={`Cover of ${book}`}
+              width={bookRecommendations?.bookImages?.[book]?.width || 150}
+              height={bookRecommendations?.bookImages?.[book]?.height || 150}
+              className="transition-opacity duration-300 ease-in-out"
+            />
+            {/* <h3>{book}</h3> */}
+          </div>
+        ))}
+      </div>
+      {bookRecommendations?.userLearningGuide && <Card className="mt-4">
+        <CardHeader className="mt-8 text-2xl font-semibold tracking-tight scroll-m-20">
+          Your Learning Guide
+        </CardHeader>
+        <CardContent className="">
+          {bookRecommendations?.userLearningGuide}
+        </CardContent>
+      </Card>}
+      {bookRecommendations?.keyPointsOfBooks?.length && <Card className="mt-5">
+        <CardHeader className="mt-8 text-2xl font-semibold tracking-tight scroll-m-20">
+          Personalized Key Learning Points
+        </CardHeader>
+        <CardContent className="">
+          {bookRecommendations?.keyPointsOfBooks?.slice(0, 3)?.map((point, index) => (
+            <p key={index}>{point}</p>
+          ))}
+        </CardContent>
+      </Card>}
+    </section>
+  );
+}
+
+
+export const LearnCarousel = ({
+  carouselItems,
+}: {
+  carouselItems: LearnCarouselItem[];
+}) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const [audioCache, setAudioCache] = useState<Map<number, HTMLAudioElement>>(new Map());
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const [autoplay, setAutoplay] = useState(false);
+
+  const handleAudioEnd = useCallback(() => {
+    if (autoplay && api) {
+      api.scrollNext();
+    }
+  }, [autoplay, api]);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    setCurrent(api.selectedScrollSnap() + 1);
+
+    api.on("select", () => {
+      if (audioRef.current && !audioRef.current.paused) {
+        audioRef.current.pause();
+        audioRef.current.currentTime = 0;
+      }
+      setCurrent(api.selectedScrollSnap() + 1);
+    });
+  }, [api]);
+
+  useEffect(() => {
+    if (!autoplay) {
+      if (audioRef.current && !audioRef.current.paused) {
+        audioRef.current.pause();
+        audioRef.current.currentTime = 0;
+      }
+      return;
+    }
+
+    const speakCurrentItem = async () => {
+      const currentItemText = carouselItems[current - 1]?.full_slide_content || carouselItems[current - 1]?.content;
+      if (!currentItemText) return;
+
+      if (audioCache.has(current - 1)) {
+        const cachedAudio = audioCache.get(current - 1);
+        audioRef.current = cachedAudio;
+        audioRef.current.onended = handleAudioEnd;
+        audioRef.current.play().catch(e => console.error("Error playing audio:", e));
+      } else {
+        const endpoint = `/api/tts`;
+        const data = { input: currentItemText };
+        const response = await fetch(endpoint, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(data)
+        });
+
+        const audioBlob = await response.blob();
+        const audioUrl = URL.createObjectURL(audioBlob);
+        const audioEl = new Audio(audioUrl);
+        audioEl.onended = handleAudioEnd;
+        setAudioCache(new Map(audioCache.set(current - 1, audioEl)));
+        audioRef.current = audioEl;
+        audioRef.current.play().catch(e => console.error("Error playing audio:", e));
+      }
+    };
+
+    if (autoplay) {
+      speakCurrentItem();
+    }
+  }, [current, carouselItems, audioCache, autoplay, handleAudioEnd]);
+
+  const toggleAutoplay = () => {
+    setAutoplay(!autoplay);
+  };
+
+  return carouselItems.length > 0 ? (
+    <>
+      <div className="flex flex-col items-center">
+        {current === 1 && (
+          <button onClick={toggleAutoplay} className="px-4 py-2 mb-4 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
+            {autoplay ? "Stop Autoplay" : "Start Autoplay"}
+          </button>
+        )}
+        {current > 1 && autoplay && (
+          <div className="flex mb-4 space-x-2">
+            <button onClick={() => {
+              if (audioRef.current && !audioRef.current.paused) {
+                audioRef.current.pause();
+                audioRef.current.currentTime = 0;
+              }
+              api?.scrollTo(0);
+            }} className="px-4 py-2 font-bold text-white bg-red-500 rounded hover:bg-red-700">
+              Stop
+            </button>
+            <button onClick={() => api?.scrollTo(0)} className="px-4 py-2 font-bold text-white bg-yellow-500 rounded hover:bg-yellow-700">
+              Reset
+            </button>
+          </div>
+        )}
+        <Carousel
+          setApi={setApi} className="w-full max-w-xs">
+          <CarouselContent>
+            {carouselItems.map((item, index) => (
+              <CarouselItem key={item.id}>
+                <LearnCarouselContent item={item} />
+                {index === current - 1 && audioRef.current && (
+                  <audio controls src={audioRef.current.src} className="mt-2" />
+                )}
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+        <div className="py-2 text-sm text-center text-muted-foreground">
+          Slide {current} of {carouselItems?.length || 0}
+        </div>
+      </div>
+    </>
+  ) : null;
+};
+
+const LearnCarouselContent = ({
+  item
+}: {
+  item: LearnCarouselItem
+}) => {
+  return <Card>
+    <CardContent className="aspect-square">
+      <h2 className="pb-2 mt-4 text-3xl font-semibold tracking-tight border-b transition-colors scroll-m-20">
+        {item.title}
+      </h2>
+      {/* <p className="leading-7 [&:not(:first-child)]:mt-6">
+      {item.content}
+    </p> */}
+      {/* @ts-ignore */}
+      <MarkdownRender>
+        {item.content || ""}
+      </MarkdownRender>
+      {
+        item.mainImage && (<Image
+          src={item.mainImage?.contentUrl || "/placeholder.jpg"}
+          alt={item.mainImage?.name || item.title}
+          width={item.mainImage?.width || 400}
+          height={item.mainImage?.height || 300}
+          className="object-cover rounded-lg"
+        />)
+      }
+    </CardContent>
+    <MarkdownRender>
+      {item.full_slide_content || ""}
+    </MarkdownRender>
+  </Card>
+}
+
+function SearchBar({
+  onSubmit,
+  onBookSubmit,
+  isLoading,
+}: {
+  onSubmit: (data: any) => void;
+  onBookSubmit: (data: any) => void;
+  isLoading: boolean;
+}) {
+  const [query, setQuery] = useState('');
+  const [extraQuestions, setExtraQuestions] = useState([]);
+  const [answers, setAnswers] = useState({});
+  useMakeCopilotReadable("User input: " + JSON.stringify({ query, answers }));
+
+  const handleQuerySubmit = async (e: any) => {
+    e.preventDefault();
+    const response = await fetch(`/api/get-recommended-question?query=${encodeURIComponent(query)}`);
+    if (response.ok) {
+      const data = await response.json();
+      setExtraQuestions(data.response || []);
+    }
+  };
+
+  const handleAnswerChange = (question, answer) => {
+    setAnswers(prev => ({ ...prev, [question]: answer }));
+  };
+
+  const handleSubmitAll = (e: any) => {
+    e.preventDefault();
+    // onSubmit({
+    //   query,
+    //   answers,
+    // });
+    onBookSubmit({
+      query,
+      answers,
+    });
+  };
+
+  return (
+    <div className="flex flex-col justify-center items-center p-4 min-h-screen">
+      <main className="w-full max-w-3xl">
+        <form onSubmit={handleQuerySubmit} className="mb-8">
+          <h1 className="mb-6 text-4xl font-bold">Get Personalized Learning Content from Books</h1>
+          <div className="flex overflow-hidden items-center text-gray-900 bg-white rounded shadow-lg">
+            <input type="text" value={query} onChange={(e) => setQuery(e.target.value)} className="px-4 py-2 w-full" placeholder="What do you want to learn about?" />
+            <button
+              disabled={isLoading}
+              type="submit" className="flex justify-center items-center px-4 border-l">
+              {
+                isLoading ? <Loading /> : <LuSearch />
+              }
+
+            </button>
+          </div>
+          <Button
+            type="button"
+            variant={'link'}
+            className="pl-0 text-xs text-gray-500 underline flex-start"
+            onClick={() => {
+              modals.openConfirmModal({
+                children: (<>
+                  <div style={{
+                    position: 'relative',
+                    paddingTop: '62.5%'
+                  }}>
+                    <iframe
+                      src="https://player.vimeo.com/video/926740918?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479"
+                      allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
+                      style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
+                      title="BrainBite Hackathon Demo" />
+                  </div>
+                </>),
+                labels: {
+                  confirm: "Ok",
+                  cancel: "Cancel",
+                },
+              })
+            }}
+          >
+            How it works?
+          </Button>
+        </form>
+        <section id='extraQuestion'>
+          {extraQuestions.length > 0 && (
+            <div className="p-6 bg-gray-800 rounded-lg shadow-lg">
+              <h2 className="mb-4 text-lg font-semibold">Please provide more information:</h2>
+              {extraQuestions.map((question, index) => (
+                <div key={index} className="mb-4">
+                  <label className="block mb-2">{question}</label>
+                  <input type="text" value={answers[question] || ''} onChange={(e) => handleAnswerChange(question, e.target.value)} className="px-4 py-2 w-full bg-gray-700 rounded" />
+                </div>
+              ))}
+              <button
+                disabled={isLoading}
+                onClick={handleSubmitAll} className="px-4 py-2 mt-4 text-white bg-blue-500 rounded">
+                {
+                  isLoading ? <Loading /> : "Submit All"
+                }
+              </button>
+            </div>
+          )}
+        </section>
+      </main>
+    </div>
+  );
+}
diff --git a/apps/web/server/arize-trace.ts b/apps/web/server/arize-trace.ts
new file mode 100644
index 0000000..b14aa34
--- /dev/null
+++ b/apps/web/server/arize-trace.ts
@@ -0,0 +1,31 @@
+import { NodeSDK } from '@opentelemetry/sdk-node';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { Resource } from '@opentelemetry/resources';
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
+import { PhoenixSDK } from '@arizeai/phoenix-otel';
+
+const PHOENIX_API_KEY = 'YOUR_PHOENIX_API_KEY';
+
+const sdk = new NodeSDK({
+  resource: new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: 'your-service-name',
+  }),
+  traceExporter: new OTLPTraceExporter({
+    url: 'https://app.phoenix.arize.com/v1/traces',
+    headers: {
+      'api_key': PHOENIX_API_KEY,
+    },
+  }),
+});
+
+sdk.start();
+
+// Register Phoenix SDK
+PhoenixSDK.register();
+
+process.on('SIGTERM', () => {
+  sdk.shutdown()
+    .then(() => console.log('Tracing terminated'))
+    .catch((error) => console.log('Error terminating tracing', error))
+    .finally(() => process.exit(0));
+});
\ No newline at end of file
diff --git a/prompts.tsx b/prompts.tsx
new file mode 100644
index 0000000..12f078d
--- /dev/null
+++ b/prompts.tsx
@@ -0,0 +1,167 @@
+
+
+//Introduction quiz to determine experience level
+let introPrompt = `Based on the user's provided topic and experience level, generate a short quiz to assess their familiarity with the topic. 
+The quiz should help identify areas where the user needs further exposure and study.
+
+Output the quiz in JSON format, as follows:
+json
+{
+  "question": "How familiar are you with [Topic]?",
+  "options": [
+    { "option": "I have never encountered [Topic] before.", "value": 1 },
+    { "option": "I have some basic knowledge of [Topic].", "value": 2 },
+    { "option": "I understand the fundamentals of [Topic].", "value": 3 },
+    { "option": "I can apply [Topic] in simple scenarios.", "value": 4 },
+    { "option": "I am comfortable with [Topic] and can work with it in projects.", "value": 5 },
+    { "option": "I consider myself advanced in [Topic] and can handle complex tasks.", "value": 6 }
+  ]
+}`
+
+
+//Gathering topics for user to learn
+let topicsPrompt = ```Generate a structured learning plan based on the following instructions:
+
+1. **Analyze Quiz Data and Performance**:
+   - Process the user's quiz data, including responses, scores, and areas of weakness.
+   - Identify specific concepts or topics where the user showed gaps or less confidence, or should learn more.
+2. **Generate Tailored Learning Resources**:
+   - For each identified weak area, create a personalized list of topics, each with a short description of its importance or relevance.
+
+3. **Generate Sub-topics with Materials**:
+   - Break down each topic into sub-topics, and include study materials or resources for each sub-topic.
+   - Ensure the resources address the user's weak areas and follow a logical progression, starting with prerequisites and foundational topics before advancing to more complex concepts.
+
+4. **Organize Chronologically**:
+   - Arrange topics, sub-topics, and materials in a clear chronological order.
+   - Ensure all prerequisites are covered before dependent topics.
+   - Verify that each topic builds logically on the previous one to create a coherent and structured learning path.
+
+5. **Output Format**:
+   - Provide the data as a JSON object designed for use in a Mermaid diagram.
+   - Structure the JSON elements to ensure easy extraction and direct integration into a Mermaid diagram for learning visualization.
+
+**Output Example**:
+json
+{
+  "topics": [
+    {
+      "name": "Topic 1",
+      "description": "Short description of Topic 1",
+      "sub_topics": [
+        {
+          "name": "Sub-topic 1.1",
+          "materials": ["Resource 1", "Resource 2"]
+        },
+        {
+          "name": "Sub-topic 1.2",
+          "materials": ["Resource 3"]
+        }
+      ]
+    },
+    {
+      "name": "Topic 2",
+      "description": "Short description of Topic 2",
+      "sub_topics": [
+        {
+          "name": "Sub-topic 2.1",
+          "materials": ["Resource 4"]
+        }
+      ]
+    }
+  ]
+}```;
+
+
+// pop quiz for each node 
+let popQuizPrompt = ```Generate a quiz based on the current topic and its sub-topics, considering the user's previous quiz performance.
+Ensure all key concepts are covered to reinforce understanding.
+
+**Expected Input:**
+- Previous quiz performances: {topic1: score, topic2: score, ...}
+- Current node topic and sub-topics with associated study materials.
+
+**Expected Output:**
+The quiz should be formatted in JSON as follows:
+json
+{
+  "question": "Question about the topic",
+  "options": [
+    { "option": "Option 1", "value": 1 },
+    { "option": "Option 2", "value": 2 },
+    { "option": "Option 3", "value": 3 },
+    { "option": "Option 4", "value": 4 }
+  ]
+}```
+
+
+let mermaid_system_prompt = `
+You are tasked with generating Markdown code to create mind maps in Mermaid. 
+You will take a list of topics and subtopics provided to you and return a well-structured Markdown block containing the Mermaid syntax to represent these topics visually.
+
+### Instructions:
+1. The mind map must have a clear hierarchical structure, with a root node and nested branches.
+2. Indentation and formatting must follow Mermaid's syntax rules for mind maps.
+3. Each node will consist of a topic name only.
+4. Include the Mermaid \`click\` functionality for each node. After the Mermaid Markdown, list clickable node information in the format: \`click [node] [nodeClickHandler];\`.
+
+### Example Input:
+We will ignore the \`description\` fields in the JSON and only process the hierarchical structure of topics and subtopics.
+
+\`\`\`json
+{
+  "root": "Learning Paths",
+  "description": "A visual representation of various learning paths.",
+  "subtopics": [
+    {
+      "name": "Programming",
+      "description": "Topics related to learning programming languages.",
+      "subtopics": [
+        {
+          "name": "Python",
+          "description": "A versatile programming language great for beginners."
+        },
+        {
+          "name": "JavaScript",
+          "description": "A popular language for web development."
+        }
+      ]
+    },
+    {
+      "name": "Design",
+      "description": "Topics related to visual and user interface design.",
+      "subtopics": [
+        {
+          "name": "UI/UX",
+          "description": "User interface and experience design."
+        },
+        {
+          "name": "Graphic Design",
+          "description": "The art of visual communication."
+        }
+      ]
+    }
+  ]
+}
+\`\`\`
+
+### Expected Output:
+\`\`\`mermaid
+mindmap
+  root(Learning Paths)
+    Programming
+      Python
+      JavaScript
+    Design
+      UI/UX
+      Graphic Design
+click Programming nodeClickHandler;
+click Python nodeClickHandler;
+click JavaScript nodeClickHandler;
+click Design nodeClickHandler;
+click UI/UX nodeClickHandler;
+click Graphic Design nodeClickHandler;
+\`\`\`
+
+Now, based on the provided list of topics and subtopics, generate the Mermaid Markdown mind map.
+`;