Carousel in ar-mode

README.md

@@ -20,7 +20,7 @@
 Today's AI assistants are *too slow*, *too basic*, or *too disconnected* from real user needs.  
 **NbAIl** solves this by combining **super-fast text, smooth voice conversation, intelligent command execution, and planned augmented reality (AR) capabilities** — all in a **single multimodal powerhouse**.
 
-One of NbAIl’s proudest innovations: **Command Mode**.  
+One of NbAIl's proudest innovations: **Command Mode**.  
 Simply type a command like `/open notepad and write hello world`, and our **Terminator Agent**, powered by **Groq** for understanding and **local Python automation**, will **open system apps, type messages, and perform actions** automatically.  
 **Zero manual work. Full smart automation.**  
 Built to behave like a *true futuristic assistant* — not just a chatbot.
@@ -68,7 +68,7 @@ Built to behave like a *true futuristic assistant* — not just a chatbot.
 - ✅ **Multi-mode Switcher** — instantly switch between chat, voice, command, and AR
 - ✅ **Error Handling & Fail-Safes** — graceful recovery when apps not found
 
-🚀 **NbAIl doesn’t just "chat." It "acts."**
+🚀 **NbAIl doesn't just "chat." It "acts."**
 
 ---
 
@@ -125,7 +125,7 @@ python terminator_agent.py
 ```bash
 ngrok http 8000
 
-(Replace 5000 with your local port if it’s different.)
+(Replace 5000 with your local port if it's different.)
 
 ```
 —
@@ -147,7 +147,7 @@ ngrok http 8000
 # 🔮 Future Scope of NbAIl
 
 While NbAIl already delivers a futuristic multimodal experience, the journey has just begun!  
-Here’s what’s planned for future versions:
+Here's what's planned for future versions:
 
 ---
 
@@ -190,7 +190,7 @@ Here’s what’s planned for future versions:
 # 📚 Resources / Credits
 
 This project would not have been possible without the amazing technologies, APIs, and open-source tools available to the community.  
-Here’s what powered NbAIl:
+Here's what powered NbAIl:
 
 ---
 
@@ -254,3 +254,29 @@ Bigger, smarter, and even crazier updates are on the way.
 
 > **"The ones who are crazy enough to think they can change the world are the ones who do."**  
 > — Apple, 1997
+
+## Environment Variables
+
+You'll need to set up the following environment variables in your `.env.local` file:
+
+- `NEXT_PUBLIC_GROQ_API_KEY`: Your Groq API key for AI analysis
+- `NEXT_PUBLIC_MISTRAL_API_KEY`: Your Mistral API key for alternative AI analysis (optional)
+
+### Obtaining API Keys
+
+1. **Groq API Key**:
+   - Visit [Groq's website](https://console.groq.com/)
+   - Create an account and generate an API key
+
+2. **Mistral API Key**:
+   - Visit [Mistral's website](https://mistral.ai/)
+   - Create an account and generate an API key
+   - Note: We're using the Pixtral 12B 2409 model for AR mode vision analysis
+
+Example `.env.local` file:
+```
+NEXT_PUBLIC_GROQ_API_KEY=your_groq_api_key_here
+NEXT_PUBLIC_MISTRAL_API_KEY=your_mistral_api_key_here
+```
+
+**Note**: Keep your API keys confidential and never commit them to version control.

app/ar-mode/MobileCarousel.tsx

@@ -0,0 +1,120 @@
+import { AnimatePresence, motion } from "framer-motion";
+import Carousel from "@/components/ui/carousel-new"; // Updated import path
+import { FiLayers, FiCode, FiFileText } from "react-icons/fi";
+
+// Define the slide data structure that matches arModeSlides
+interface SlideData {
+  title: string;
+  button: string;
+  description: string;
+  src?: string;
+}
+
+interface MobileCarouselProps {
+  showCards: boolean;
+  slides?: SlideData[];
+}
+
+const MobileCarousel = ({ showCards, slides }: MobileCarouselProps) => {
+  // Default slide data if none is provided
+  const defaultSlides = [
+    {
+      title: "AR Insights",
+      description: "Explore AI-powered scene analysis",
+      id: 1,
+      icon: <FiLayers className="h-[16px] w-[16px] text-white" />,
+    },
+    {
+      title: "Identity Snapshot",
+      description: "Demographic and emotional insights about detected individuals.",
+      button: "View Traits",
+      src: "/images/identity-analysis.jpg",
+      id: 2,
+      icon: <FiFileText className="h-[16px] w-[16px] text-white" />,
+    },
+    {
+      title: "Object Detection",
+      description: "Detected Objects: - None\nDetected Gestures: - None",
+      button: "Recognize Items",
+      id: 3,
+      icon: <FiCode className="h-[16px] w-[16px] text-white" />,
+    }
+  ];
+
+  // Convert the slides from arModeSlides format to CarouselItem format if slides are provided
+  const carouselItems = slides ? slides.map((slide, index) => {
+    let icon;
+    // Assign icons based on slide title or index
+    if (slide.title.includes("Scene")) {
+      icon = <FiLayers className="h-[16px] w-[16px] text-white" />;
+    } else if (slide.title.includes("Identity")) {
+      icon = <FiFileText className="h-[16px] w-[16px] text-white" />;
+
+      // If this is the Identity Snapshot slide, parse the traits
+      if (slide.description && slide.description.includes('\n')) {
+        const traitPills = slide.description.split('\n')
+          .filter(trait => trait.trim() !== '')
+          .map(trait => {
+            let icon = '🤔';
+            if (trait.includes('Age')) icon = '🎂';
+            if (trait.includes('Gender')) icon = '👤';
+            if (trait.includes('Mood')) icon = '😀';
+            return `${icon} ${trait.replace('- ', '')}`;
+          });
+
+        // Update description with trait information
+        slide.description = traitPills.length > 0 
+          ? traitPills.join('\n')
+          : 'No Clear Face Detected. Check the lighting';
+      }
+    } else if (slide.title.includes("Object")) {
+      icon = <FiCode className="h-[16px] w-[16px] text-white" />;
+
+      // Directly set the description to match desktop view card
+      slide.description = `**Objects & Gestures:**
+- No objects detected
+- No gestures detected`;
+    }
+
+    return {
+      title: slide.title,
+      description: slide.description,
+      id: index + 1,
+      icon: icon || <FiCode className="h-[16px] w-[16px] text-white" />, // Ensure icon is always defined
+      image: slide.title.includes("Identity") ? slide.src : undefined, // Only add image for Identity Snapshot
+      data: undefined // Remove data for all slides
+    };
+  }) : defaultSlides;
+
+  return (
+    // Only show on mobile devices (md:hidden)
+    <div className="absolute inset-0 flex items-center justify-center z-20 pointer-events-none md:hidden">
+      <div className="w-full max-w-xs pointer-events-auto translate-y-[90px]">
+        <AnimatePresence>
+          {showCards && (
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 20 }}
+              className="mb-4"
+            >
+              <div style={{ height: '300px', position: 'relative' }}>
+                <Carousel
+                  items={carouselItems}
+                  baseWidth={350}
+                  autoplay={false}
+                  autoplayDelay={3000}
+                  pauseOnHover={false}
+                  loop={true}
+                  round={false}
+                />
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+};
+
+export default MobileCarousel;