import React, { useState } from 'react'; import { useVideoState } from './useVideoState'; import { motion, useTransform, AnimatePresence, useMotionValue, useMotionValueEvent, type MotionValue } from 'framer-motion'; import { ArrowDownRight, BarChart3, Bell, Bot, Brain, Check, ChevronRight, Code, FileText, Globe, Menu, Mic, Send, Settings, Sparkles, User } from 'lucide-react'; import { Area, Bar } from 'recharts'; // ─── Scene Components ───────────────────────────────────────────────────── function Scene0({ time }) { return (

{/* AI for Beginners Logo Placeholder */}

AI for Beginners

{/* Main Title */}

BUILD YOUR AI RESEARCH WORKFLOW IN 10 MINUTES!

); } function Scene1({ time }) { const opacity1 = useTransform(time, [2.0, 2.3], [0, 1]); const opacity2 = useTransform(time, [3.8, 4.1], [0, 1]); const opacity3 = useTransform(time, [5.6, 5.9], [0, 1]); const opacity4 = useTransform(time, [7.4, 7.7], [0, 1]); return (

What You'll Learn

Master Article Summaries using ChatGPT

Conduct Effective Competitive Analysis with Gemini

Build a Reusable AI Research Pipeline

Automate Repetitive Research Tasks & Save Time

); } function Scene2({ time }) { // TIMING MAP: // [0.0s - 2.0s] "Our research workflow begins with consuming information efficiently." // [2.0s - 5.6s] "Most people just skim articles or manually highlight, which is slow." // [5.6s - 10.8s] "Instead, we're going to use ChatGPT to get a concise summary with actionable insights." // [10.8s - 17.2s] "First, I've got this article here about a new trend in the tech industry." // [17.2s - 20.4s] "I'll copy the full text of the article." const articleTitle = "The Rise of AI-Driven Personalization in Tech"; const articleContent = `In the rapidly evolving landscape of technology, artificial intelligence (AI) is no longer a futuristic concept but a present-day reality transforming various industries. One of the most significant trends is the surge in AI-driven personalization, profoundly impacting user experience across platforms. From e-commerce recommendations to tailored content feeds, AI algorithms are becoming increasingly sophisticated in understanding individual preferences and behaviors. This shift marks a departure from traditional, one-size-fits-all approaches, moving towards highly customized interactions. Companies are leveraging vast datasets and advanced machine learning models to predict user needs, anticipate desires, and deliver highly relevant content or product suggestions. The benefits are multifold: enhanced user engagement, increased conversion rates, and a more intuitive digital environment. However, this trend also brings forth challenges related to data privacy and algorithmic bias. As AI systems become more autonomous in their decision-making, ensuring transparency and fairness becomes paramount. Regulatory bodies and tech companies alike are grappling with how to balance innovation with ethical considerations, striving to build trust in these powerful new technologies. The future of tech personalization will undoubtedly involve continuous innovation, coupled with a strong emphasis on responsible AI development.`; // Animation for article text highlight const highlightOpacity = useTransform(time, [17.2, 20.4], [0, 1]); return (

{/* Left Pane: ChatGPT Interface */}

ChatGPT

Start a new conversation or select a previous one.

{/* Right Pane: Article Browser */}

{/* Browser header */}

techtrends.com/ai-personalization

{/* Article content */}

{articleTitle} {/* Simulate text highlighting */} {articleContent}

Published on October 26, 2023

By Tech Insights Group

); } function Scene3({ time }) { const fullPrompt = "Act as an expert industry analyst. Summarize the following article, focusing on key trends, potential market impact, and any emerging opportunities or threats. Provide the summary in no more than 250 words, and include three bullet points of key takeaways for a business strategist. Here is the article:"; const articlePlaceholder = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."; const charIndex = useTransform(time, [7.0, 37.5], [0, fullPrompt.length], { clamp: true }); const [displayedPrompt, setDisplayedPrompt] = useState(""); useMotionValueEvent(charIndex, "change", (v) => { setDisplayedPrompt(fullPrompt.slice(0, Math.round(v))); }); const cursorOpacity = useTransform(time, (v) => { if (v < 6.5) { // Before cursor appears return 0; } else if (v < 7.0 || v > 37.5) { // Before typing starts or after typing ends (blinking) return Math.floor(v * 2) % 2 === 0 ? 1 : 0; } else { // During typing (solid) return 1; } }); const articleOpacity = useTransform(time, [37.5, 38.0], [0, 1], { clamp: true }); return (

{/* Header */}

ChatGPT

{/* Chat History Area - empty for this scene */}

{/* No previous chat messages for this scene */}

Start a new conversation

{/* Input Area */}

{displayedPrompt} {articlePlaceholder}

ChatGPT can make mistakes. Consider checking important information.

); } function Scene4({ time }) { const fullPrompt = "Summarize the attached research paper on 'Future of AI in Healthcare' focusing on key trends, market impact, and actionable takeaways for strategic decision-making. Use bullet points for each section."; const fullResponse = `**Key Trends:** * **Personalized Medicine:** AI-driven diagnostics and treatment plans tailored to individual patient data. * **Predictive Analytics:** Early disease detection and outbreak prediction using large datasets. * **Robotics in Surgery:** AI-assisted surgical robots enhancing precision and minimizing invasiveness. **Market Impact:** * **Cost Reduction:** Streamlining operations, reducing diagnostic errors, and optimizing resource allocation. * **Increased Accessibility:** Expanding healthcare reach to underserved areas via telemedicine and AI diagnostics. * **New Drug Discovery:** Accelerating research and development cycles for novel therapies. **Actionable Takeaways:** * **Invest in AI Infrastructure:** Prioritize secure data platforms and advanced computing for AI integration. * **Foster AI Literacy:** Train healthcare professionals in AI tools and data interpretation. * **Collaborate with Tech Firms:** Partner with AI innovators to co-develop specialized healthcare solutions.`; const responseWords = fullResponse.split(" "); // Stream words from 0.8s to 5.8s const wordIndex = useTransform(time, [0.8, 5.8], [0, responseWords.length], { clamp: true }); const [visibleResponse, setVisibleResponse] = useState(""); useMotionValueEvent(wordIndex, "change", (v) => { setVisibleResponse(responseWords.slice(0, Math.round(v)).join(" ")); }); // Function to safely render markdown-like text const formatResponse = (text) => { return text .replace(/\*\*(.*?)\*\*/g, '$1') // Bold text .replace(/\n\* /g, '
• ') // Bullet points .replace(/\n/g, '
'); // Remaining newlines for paragraph breaks }; return (

{/* Chat Header */}

AI Assistant

GPT-4

{/* Chat Messages Area */}

{/* User Prompt */}

You

{fullPrompt}

{/* AI Response */}

AI Assistant

{/* Input area */}

); } function Scene5({ time }) { const fullTipText = "You can save these prompt templates and reuse them for any article, creating a consistent summarization process."; const words = fullTipText.split(" "); const wordIndex = useTransform(time, [0.5, 6.5], [0, words.length]); const [displayedText, setDisplayedText] = useState(""); useMotionValueEvent(wordIndex, "change", (latest) => { setDisplayedText(words.slice(0, Math.round(latest)).join(" ")); }); return (

Tip:

{displayedText} {/* Blinking cursor appears after text starts */} {time.get() >= 0.5 && ( )}


          Saved Prompt Templates


  );
}

function Scene6({ time }) {
  return (
    
      
        {/* Chat Header */}
        
          
            
            Gemini Chat
          
          
        

        {/* Main Chat Area - Blank, ready for input */}
        
          
          How can I help you today?
          Start a new conversation to explore competitive insights.
        

        {/* Input Area */}
        
          
            
            
          
        
      
    
  );
}

function Scene7({ time }) {
  const fullPromptText = "I need to conduct a competitive analysis for [Your Company/Product Name] against [Competitor 1 Name], [Competitor 2 Name], and [Competitor 3 Name]. For each competitor, please research and provide the following information in a structured table: Key Features, Target Audience, Pricing Model (if available), Recent News/Updates, and Unique Selling Proposition. Focus on publicly available information.";

  const charIndex = useTransform(time, [3.7, 32.3], [0, fullPromptText.length], { clamp: true });
  const [displayedPrompt, setDisplayedPrompt] = useState("");

  useMotionValueEvent(charIndex, "change", (latest) => {
    setDisplayedPrompt(fullPromptText.slice(0, Math.round(latest)));
  });

  // Cursor blink animation: visible during typing, then blinks after typing completes.
  const finalCursorOpacity = useTransform(
    time,
    [3.6, 3.7, 32.3, 32.5, 32.7, 32.9, 33.1],
    [0, 1, 1, 0, 1, 0, 1], // Hidden, then visible during typing, then blinks off/on
    { clamp: true }
  );

  return (
    
      
        {/* Header */}
        
          
            
            AI Research Assistant
          
          
            
            
          
        

        {/* Chat History Area - empty for this scene */}
        
          {/* No messages yet, just the input prompt being typed */}
        

        {/* Input Area */}
        
          
            
              {displayedPrompt}
              
            
            
              
            

          

          
            
          
        

      

    
  );
}

function Scene8({ time }: { time: MotionValue }) {
  const promptText = "Analyze the top 3 AI research tools. For each, identify their key features, pricing model, primary target audience, main strengths, and main weaknesses. Present this data in a structured table.";

  const competitorData = [
    {
      name: "AI Research Pro",
      features: "Advanced NLP, summarization, citation management",
      pricing: "Subscription (tiered)",
      audience: "Academic researchers, data scientists",
      strengths: "High accuracy, robust features",
      weaknesses: "Steep learning curve, higher cost",
    },
    {
      name: "DataGenius AI",
      features: "Data extraction, visualization, trend analysis",
      pricing: "Freemium, enterprise plans",
      audience: "Business analysts, market researchers",
      strengths: "User-friendly interface, good visuals",
      weaknesses: "Limited deep NLP, integration challenges",
    },
    {
      name: "InsightFlow",
      features: "Semantic search, content generation, collaborative tools",
      pricing: "Per-user monthly",
      audience: "Content creators, strategy teams",
      strengths: "Innovative content features, collaboration",
      weaknesses: "Less focus on raw data analysis, newer tool",
    },
  ];

  const headerOpacity = useTransform(time, [0, 0.5], [0, 1]);
  const row1Opacity = useTransform(time, [0.5, 1.5], [0, 1]);
  const row2Opacity = useTransform(time, [1.5, 2.5], [0, 1]);
  const row3Opacity = useTransform(time, [2.5, 3.5], [0, 1]);

  return (
    
      
        {/* Header */}
        
          
            
            Gemini
          
          
            
            
          
        

        {/* Prompt Area */}
        
          
            
            {promptText}
          
        

        {/* Response Area */}
        
          
            
            Here is the competitive analysis for the top AI research tools:
          

          
            
                {competitorData.map((competitor, index) => {
                  const opacity = [row1Opacity, row2Opacity, row3Opacity][index];
                  return (
                    
                      
                  );
                })}
              
              
                
                  Competitor
                  Key Features
                  Pricing Model
                  Target Audience
                  Strengths
                  Weaknesses
                
              
              {competitor.name}
                      {competitor.features}
                      {competitor.pricing}
                      {competitor.audience}
                      {competitor.strengths}
                      {competitor.weaknesses}
                    
            
          
        

        {/* Input Footer */}
        
          
            
            
          
          
        
      
    
  );
}

function Scene9({ time }) {
  const fullPromptText = "Generate a comprehensive competitive analysis report based on the above data. Identify key strengths and weaknesses of each competitor, opportunities for our product, and potential threats. Structure the report with an executive summary, detailed analysis per competitor, and strategic recommendations.";
  const promptCharIndex = useTransform(time, [15.0, 22.0], [0, fullPromptText.length], { clamp: true });
  const [displayedPrompt, setDisplayedPrompt] = useState("");

  useMotionValueEvent(promptCharIndex, "change", (v) => {
    setDisplayedPrompt(fullPromptText.slice(0, Math.round(v)));
  });

  const competitorData = [
    { name: "Competitor A", features: "AI Summaries, Collaboration", pricing: "Premium", target: "Enterprise" },
    { name: "Competitor B", features: "Real-time Analytics, Integrations", pricing: "Freemium", target: "SMB" },
    { name: "Competitor C", features: "Custom Dashboards, Reporting", pricing: "Enterprise", target: "Large Corp" },
  ];

  return (
    
      
        {/* Header */}
        
          
            
            Gemini Chat
          
          
        

        {/* Chat Messages Area */}
        
          {/* Previous AI Response - Data Table */}
          
            
              
                
                AI Response
              
              Here is the structured competitor data:
              
                
                    {competitorData.map((data, index) => (
                      
                    ))}
                  
                  
                    
                      Competitor
                      Key Features
                      Pricing Model
                      Target Market
                    
                  
                  
                        {data.name}
                        {data.features}
                        {data.pricing}
                        {data.target}
                      
                
              
            
          

          {/* User Prompt Input Area */}
          
            
              
                {displayedPrompt}
                {time.get() > 15.0 && time.get() < 22.0 && (
                  
                    |
                  
                )}
              
            
          
        

        {/* Input Bar at the bottom */}
        
          
          
        
      
    
  );
}

function Scene10({ time }: { time: MotionValue }) {
  const fullPrompt = "Based on the competitor data you just provided, please perform a competitive analysis. Identify the top 3 strengths and weaknesses of [Your Product] relative to these competitors. Suggest 2-3 strategic recommendations for how [Your Product] can differentiate itself and gain market share. Present this in a report format with clear headings.";

  const charIndex = useTransform(time, [0.5, 8.0], [0, fullPrompt.length], {
    clamp: true,
  });
  const [displayedPrompt, setDisplayedPrompt] = useState("");

  useMotionValueEvent(charIndex, "change", (v) => {
    setDisplayedPrompt(fullPrompt.slice(0, Math.round(v)));
  });

  return (
    
      
        {/* Chat Header */}
        
          
            
            AI Assistant
          
          
            
            
          
        

        {/* Chat Messages Area (Placeholder for previous interaction) */}
        
          {/* Previous user message (placeholder) */}
          
            
              Here's the competitor data for analysis.
            
          
          {/* AI response (placeholder) */}
          
            
              Thank you for the data. What would you like me to do with it?
            
          
        

        {/* Input Area */}
        
          
            
              {displayedPrompt}
              {/* Typing cursor */}
              
            
          
          
        
      
    
  );
}

function Scene11({ time }: { time: MotionValue }) {
  // Prompt text
  const promptText = "Generate a competitive analysis report for our new AI-powered research platform, comparing us against the top 3 market leaders. Include strengths, weaknesses, and actionable strategic recommendations.";

  // Full report content
  const strengthsWeaknessesFull = `
    1. Competitor A:
       - Strengths: Extensive market share, strong brand recognition, large existing user base.
       - Weaknesses: Legacy technology, slower innovation cycle, higher subscription costs.
    2. Competitor B:
       - Strengths: Niche specialization in specific research areas, excellent user experience for targeted tasks.
       - Weaknesses: Limited feature set, scalability challenges for broader applications.
    3. Our Platform:
       - Strengths: Cutting-edge AI models, superior data integration capabilities, highly customizable workflows.
       - Weaknesses: New market entrant, lower brand awareness, initial adoption hurdles.
  `.trim();

  const recommendationsFull = `
    1. Marketing Focus: Highlight unique AI features and automation benefits to differentiate from competitors.
    2. Strategic Partnerships: Collaborate with established data providers or academic institutions for faster market penetration.
    3. Pricing Strategy: Introduce tiered pricing with a strong freemium or trial offer to attract initial users.
    4. User Education: Provide comprehensive tutorials and support to accelerate user onboarding and demonstrate value.
  `.trim();

  // Split into words for streaming, preserving whitespace for pre-wrap formatting
  const strengthsWeaknessesWords = strengthsWeaknessesFull.split(/(\s+)/);
  const recommendationsWords = recommendationsFull.split(/(\s+)/);

  // Motion values for word indices
  const strengthsWeaknessesWordIndex = useTransform(time, [0.5, 4.0], [0, strengthsWeaknessesWords.length], { clamp: true });
  const recommendationsWordIndex = useTransform(time, [4.0, 8.0], [0, recommendationsWords.length], { clamp: true });

  // State for displayed text
  const [displayedStrengthsWeaknesses, setDisplayedStrengthsWeaknesses] = useState("");
  const [displayedRecommendations, setDisplayedRecommendations] = useState("");

  // Update displayed text based on motion values
  useMotionValueEvent(strengthsWeaknessesWordIndex, "change", (v) => {
    setDisplayedStrengthsWeaknesses(strengthsWeaknessesWords.slice(0, Math.round(v)).join(""));
  });

  useMotionValueEvent(recommendationsWordIndex, "change", (v) => {
    setDisplayedRecommendations(recommendationsWords.slice(0, Math.round(v)).join(""));
  });

  // Animation for the "pipeline" highlight
  const pipelineOpacity = useTransform(time, [8.0, 8.5], [0, 1], { clamp: true });
  const pipelineBorderWidth = useTransform(time, [8.0, 8.5], [0, 4], { clamp: true });

  return (
    
       `rgba(99, 102, 241, {"$"}{"{"}o})`), // indigo-500
          boxShadow: useTransform(pipelineOpacity, (o) => `0px 10px 15px -3px rgba(99, 102, 241, {"$"}{"{"}o * 0.3}), 0px 4px 6px -2px rgba(99, 102, 241, {"$"}{"{"}o * 0.3})`)
        }}
        className="relative w-full max-w-2xl bg-white rounded-2xl shadow-xl flex flex-col p-6 gap-6 transition-all duration-300 ease-out max-h-[90%]"
      >
        {/* Header */}
        
          
          Gemini AI Report
        

        {/* Report Content */}
        
          Competitive Analysis: AI Research Platforms

          {/* Strengths & Weaknesses Section */}
          
            
               Relative Strengths & Weaknesses
            
            
              {displayedStrengthsWeaknesses}
            
          

          {/* Strategic Recommendations Section */}
          
            
               Strategic Recommendations
            
            
              {displayedRecommendations}
            
          
        

        {/* Prompt Input Area (static, already submitted) */}
        
          
          
            {promptText}
          
          
        
      
    
  );
}

function Scene12({ time }: { time: MotionValue }) {
  const check1Opacity = useTransform(time, [6.5, 7.0], [0, 1]);
  const check2Opacity = useTransform(time, [11.5, 12.0], [0, 1]);
  const check3Opacity = useTransform(time, [14.5, 15.0], [0, 1]);

  const automationOpacity = useTransform(time, [17.5, 18.0], [0, 1]);
  const automationY = useTransform(time, [17.5, 18.0], [20, 0]);

  return (
    
      
        
          Reusable Research Pipeline
        

        {/* Step 1: Summarize */}
        
          
            
          
          
            
              1. Summarize with ChatGPT
            
            
              Using specific prompt templates
            
          
          
            
          
        

        
          
        

        {/* Step 2: Gather Data */}
        
          
            
          

          
            
              2. Gather Data with Gemini
            
            
              Structured prompts for extraction
            
          
          
            
          
        


        
          
        

        {/* Step 3: Analyze & Report */}
        
          
            
          
          
            
              3. Analyze & Report with Gemini
            
            
              Leveraging conversational memory
            
          
          
            
          
        
      

      {/* Automation Indicator */}
      
        
        Significantly automates repetitive tasks
      
    
  );
}

function Scene13({ time }) {
  const translateY1 = useTransform(time, [6.5, 7.0], [20, 0]);
  const opacity1 = useTransform(time, [6.5, 7.0], [0, 1]);

  const translateY2 = useTransform(time, [9.0, 9.5], [20, 0]);
  const opacity2 = useTransform(time, [9.0, 9.5], [0, 1]);

  const translateY3 = useTransform(time, [11.5, 12.0], [20, 0]);
  const opacity3 = useTransform(time, [11.5, 12.0], [0, 1]);

  const translateY4 = useTransform(time, [14.0, 14.5], [20, 0]);
  const opacity4 = useTransform(time, [14.0, 14.5], [0, 1]);

  const callToActionOpacity = useTransform(time, [16.5, 17.0], [0, 1]);
  const callToActionScale = useTransform(time, [16.5, 17.0], [0.9, 1]);

  const learnings = [
    { text: "Article Summaries with ChatGPT", icon: FileText, style: { opacity: opacity1, y: translateY1 } },
    { text: "Competitive Analysis with Gemini", icon: BarChart3, style: { opacity: opacity2, y: translateY2 } },
    { text: "Reusable Research Pipeline", icon: Code, style: { opacity: opacity3, y: translateY3 } },
    { text: "Automate Research Tasks", icon: Code, style: { opacity: opacity4, y: translateY4 } },
  ];

  return (
    
      
        {/* AI Unwrap Logo Placeholder */}
        
          
          AI Unwrap
        

        Key Learnings

        
          {learnings.map((item, index) => (
            
              
              {item.text}
            
          ))}
        

        
          
            Give it a try and see what you can do!
          
          
            Thank you for watching this video.
          
        
      
    
  );
}

// ─── Scene Error Boundary ─────────────────────────────────────────────────
class SceneErrorBoundary extends React.Component<
  { children: React.ReactNode; sceneIndex: number },
  { error: string | null }
> {
  constructor(props: { children: React.ReactNode; sceneIndex: number }) {
    super(props);
    this.state = { error: null };
  }
  static getDerivedStateFromError(err: Error): { error: string } {
    return { error: err.message };
  }
  componentDidCatch(err: Error) {
    // Notify the host (StudioPlayer) so it can show the Auto-Fix / Show Code overlay
    try { window.parent.postMessage({ type: 'scene-boundary-error', message: err.message }, '*'); } catch (_) {}
  }
  render() {
    if (this.state.error) {
      return (
        
          
            ⚠️
            Scene {this.props.sceneIndex + 1} rendering error
            {this.state.error}
          
        
      );
    }
    return this.props.children;
  }
}

// ─── App Wrapper ─────────────────────────────────────────────────────────

export default function App() {
  const { time, sceneIndex } = useVideoState();

  return (
    
      
        
          {sceneIndex === 0 && }
          {sceneIndex === 1 && }
          {sceneIndex === 2 && }
          {sceneIndex === 3 && }
          {sceneIndex === 4 && }
          {sceneIndex === 5 && }
          {sceneIndex === 6 && }
          {sceneIndex === 7 && }
          {sceneIndex === 8 && }
          {sceneIndex === 9 && }
          {sceneIndex === 10 && }
          {sceneIndex === 11 && }
          {sceneIndex === 12 && }
          {sceneIndex === 13 && }
        
      
    
  );
}

BUILD YOUR AI RESEARCH WORKFLOW IN 10 MINUTES!

أنشئ درسك التعليمي الخاص