feat: add chatbot and new model ml

dzaky-pr · Oct 6, 2024 · 7274d4c · 7274d4c
1 parent 139d4cc
commit 7274d4c
Show file tree

Hide file tree

Showing 16 changed files with 3,721 additions and 2,378 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/gif/constellations-ml.gif b/public/gif/constellations-ml.gif
diff --git a/public/images/circle-user.png b/public/images/circle-user.png
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 
 import Providers from "@/app/providers";
+import ChatSupport from "./sections/chat-support";
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
 
@@ -21,7 +22,10 @@ export default function RootLayout({
   return (
     <html lang="en" className="scroll-smooth">
       <body className={inter.className}>
-        <Providers>{children}</Providers>
+        <Providers>
+          {children}
+          <ChatSupport />
+        </Providers>
       </body>
     </html>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,7 +1,9 @@
 "use client";
 
 import Layout from "@/layouts/Layout";
+import ChatSupport from "./sections/chat-support";
 import ChatBot from "./sections/chatbot";
+import Constellations from "./sections/constellations";
 import { BentoGallery } from "./sections/gallery";
 import Hero from "./sections/hero";
 import LookBackGraph from "./sections/lookback";
@@ -14,13 +16,15 @@ export default function Home() {
   return (
     <>
       <Layout withFooter withNavbar>
+        <ChatSupport />
         <ChatBot />
         <Hero />
         <MainBuild />
         <LookBackGraph />
         <World />
         <Neutrack />
         <Moonface />
+        <Constellations />
         <BentoGallery />
       </Layout>
     </>

diff --git a/src/app/sections/chat-support.tsx b/src/app/sections/chat-support.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  ChatBubble,
+  ChatBubbleAvatar,
+  ChatBubbleMessage,
+} from "@/components/ui/chat/chat-bubble";
+import { ChatInput } from "@/components/ui/chat/chat-input";
+import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
+import {
+  ExpandableChat,
+  ExpandableChatBody,
+  ExpandableChatFooter,
+  ExpandableChatHeader,
+} from "@/components/ui/chat/expandable-chat";
+import { sendMessageToGemini } from "@/lib/geminiApi"; // Import API handler
+import { Send } from "lucide-react";
+import { useState } from "react";
+
+export default function ChatSupport() {
+  const [messages, setMessages] = useState([
+    { sender: "bot", text: "Hello, how can I assist you today?" },
+  ]);
+  const [input, setInput] = useState("");
+
+  const handleSendMessage = async () => {
+    if (!input.trim()) return;
+
+    // Add user message to the chat
+    const newMessage = { sender: "user", text: input };
+    setMessages((prev) => [...prev, newMessage]);
+    setInput("");
+
+    try {
+      // Send message to the API
+      const response = await sendMessageToGemini(input);
+      const botReply = response.reply || "No response received";
+
+      // Add bot response to the chat
+      setMessages((prev) => [...prev, { sender: "bot", text: botReply }]);
+      // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+      // biome-ignore lint/correctness/noUnusedVariables: <explanation>
+    } catch (error: any) {
+      setMessages((prev) => [
+        ...prev,
+        { sender: "bot", text: "Error communicating with API." },
+      ]);
+    }
+  };
+
+  return (
+    <ExpandableChat
+      size="lg"
+      position="bottom-right"
+      className="bg-neutral-900 border-[0.5px] border-neutral-50 rounded-xl"
+    >
+      <ExpandableChatHeader className="flex-col text-center justify-center">
+        <h1 className="text-xl text-white font-semibold">
+          Chat with our AI ✨
+        </h1>
+        <p className="text-white">Ask any question for our AI to answer</p>
+        {/* <div className="flex gap-2 text-white items-center pt-2">
+          <Button variant="secondary" className="text-white">
+            New Chat
+          </Button>
+          <Button variant="secondary" className="text-white">
+            See FAQ
+          </Button>
+        </div> */}
+      </ExpandableChatHeader>
+      <ExpandableChatBody>
+        <ChatMessageList>
+          {messages.map((msg, idx) => (
+            <ChatBubble
+              key={idx}
+              variant={msg.sender === "user" ? "sent" : "received"}
+            >
+              <ChatBubbleAvatar
+                src={
+                  msg.sender === "user"
+                    ? "./images/circle-user.png"
+                    : "./images/mascot-neutrack.png"
+                }
+              />
+              <ChatBubbleMessage>{msg.text}</ChatBubbleMessage>
+            </ChatBubble>
+          ))}
+        </ChatMessageList>
+      </ExpandableChatBody>
+      <ExpandableChatFooter className="flex items-center gap-2">
+        <ChatInput
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && handleSendMessage()}
+          placeholder="Type your message..."
+        />
+        <Button type="submit" size="icon" onClick={handleSendMessage}>
+          <Send className="size-6 text-white" />
+        </Button>
+      </ExpandableChatFooter>
+    </ExpandableChat>
+  );
+}
diff --git a/src/app/sections/constellations.tsx b/src/app/sections/constellations.tsx
@@ -0,0 +1,67 @@
+import { BentoCard, BentoGrid } from "@/components/BentoGrid";
+import ButtonLink from "@/components/links/ButtonLink";
+import { Bot } from "lucide-react";
+
+const features = [
+  {
+    Icon: Bot,
+    name: "Machine Learning Preview",
+    description:
+      "Integrating machine learning to astrophysics, we are working to modeling datasets.",
+    href: "",
+    cta: "",
+    className: "",
+    background: (
+      <div className="absolute h-full w-full [mask-image:linear-gradient(to_top,transparent_5%,#000_100%)] ">
+        <video
+          src="https://res.cloudinary.com/dzaky/video/upload/v1728227378/constellations-ml_c4ay13.mp4"
+          autoPlay
+          loop
+          muted
+          playsInline
+          className="pointer-events-none h-full w-full object-cover  group-hover:scale-105"
+        />
+      </div>
+    ),
+  },
+];
+
+export default function Constellations() {
+  return (
+    <section
+      id="moonface"
+      className="mx-4 my-16 sm:mx-auto rounded-lg p-4 max-w-screen-xl border-[0.5px] border-gray-700"
+    >
+      <div className="gap-8 flex flex-col-reverse lg:grid lg:grid-cols-2">
+        <div className="flex flex-col gap-2">
+          <h1 className="text-center text-sm font-regular text-white md:text-lg pb-4">
+            Neutrack Constellation Prediction Model
+          </h1>
+          <p className="text-white text-justify py-8 ">
+            This computer vision model is designed to identify constellations
+            from images of the night sky. As an additional concept for NeuTrack,
+            a device aimed at making the universe more accessible, this model
+            provides a way for users to discover which constellations are above
+            them without relying on sight. By analyzing images of star-filled
+            skies, it accurately classifies the visible constellations, offering
+            an intuitive understanding of what's overhead. This innovative tool
+            blends astronomy with accessibility, enriching the experience for
+            anyone curious about the Cosmos.
+          </p>
+          <ButtonLink
+            href="https://huggingface.co/spaces/SteelAwsm/testgrad"
+            openNewTab
+          >
+            Let's try the machine!
+          </ButtonLink>
+        </div>
+
+        <BentoGrid>
+          {features.map((feature, idx) => (
+            <BentoCard key={idx} {...feature} />
+          ))}
+        </BentoGrid>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/sections/neutrack.tsx b/src/app/sections/neutrack.tsx
@@ -35,7 +35,7 @@ export function Neutrack() {
             href="https://memoryreboot.pythonanywhere.com/"
             openNewTab
           >
-            Click for GPS tracker!
+            Click for the GPS tracker!
           </ButtonLink>
         </div>
 

diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className,
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };