AI podcast project

frontend/src/components/PodcastMaker/ScriptEditor/SceneEditor.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Stack, Box, Typography, Divider, Chip, alpha, CircularProgress } from "@mui/material";
+import { Stack, Box, Typography, Divider, Chip, alpha, CircularProgress, LinearProgress } from "@mui/material";
 import {
   EditNote as EditNoteIcon,
   CheckCircle as CheckCircleIcon,
@@ -11,6 +11,8 @@ import {
 import { Scene, Line, Knobs } from "../types";
 import { GlassyCard, glassyCardSx, PrimaryButton } from "../ui";
 import { LineEditor } from "./LineEditor";
+import { ImageRegenerateModal, ImageGenerationSettings } from "./ImageRegenerateModal";
+import { AudioRegenerateModal, AudioGenerationSettings } from "./AudioRegenerateModal";
 import { podcastApi } from "../../../services/podcastApi";
 import { aiApiClient } from "../../../api/client";
 
@@ -24,6 +26,7 @@ interface SceneEditorProps {
   onAudioGenerationStart?: (sceneId: string) => void;
   onAudioGenerated?: (sceneId: string, audioUrl: string) => void;
   idea?: string; // Podcast idea for image generation context
+  avatarUrl?: string | null; // Base avatar URL for consistent scene image generation
 }
 
 export const SceneEditor: React.FC<SceneEditorProps> = ({
@@ -36,10 +39,30 @@ export const SceneEditor: React.FC<SceneEditorProps> = ({
   onAudioGenerationStart,
   onAudioGenerated,
   idea,
+  avatarUrl,
 }) => {
   const [localGenerating, setLocalGenerating] = useState(false);
   const [generatingImage, setGeneratingImage] = useState(false);
+  const [imageGenerationStatus, setImageGenerationStatus] = useState<string>("");
+  const [imageGenerationProgress, setImageGenerationProgress] = useState<number>(0);
   const [audioBlobUrl, setAudioBlobUrl] = useState<string | null>(null);
+  const [imageBlobUrl, setImageBlobUrl] = useState<string | null>(null);
+  const [imageLoading, setImageLoading] = useState(false);
+  const [showRegenerateModal, setShowRegenerateModal] = useState(false);
+  const [showAudioModal, setShowAudioModal] = useState(false);
+  const [audioSettings, setAudioSettings] = useState<AudioGenerationSettings>({
+    voiceId: "Wise_Woman",
+    speed: 1.0,
+    volume: 1.0,
+    pitch: 0.0,
+    emotion: scene.emotion || "neutral",
+    englishNormalization: true,
+    sampleRate: 24000,
+    bitrate: 64000,
+    channel: "1",
+    format: "mp3",
+    languageBoost: "auto",
+  });
 
   // Load audio as blob when audioUrl is available
   useEffect(() => {
@@ -116,6 +139,99 @@ export const SceneEditor: React.FC<SceneEditorProps> = ({
     };
   }, [scene.audioUrl, scene.id]);
 
+  // Load image as blob when imageUrl is available
+  useEffect(() => {
+    if (!scene.imageUrl) {
+      // Clean up blob URL if imageUrl is removed
+      setImageBlobUrl((currentBlobUrl) => {
+        if (currentBlobUrl && currentBlobUrl.startsWith('blob:')) {
+          URL.revokeObjectURL(currentBlobUrl);
+        }
+        return null;
+      });
+      return;
+    }
+
+    let isMounted = true;
+    const currentImageUrl = scene.imageUrl; // Capture current value
+
+    const loadImageBlob = async () => {
+      try {
+        setImageLoading(true);
+        // Normalize path
+        let imagePath = currentImageUrl.startsWith('/') ? currentImageUrl : `/${currentImageUrl}`;
+        
+        // Convert /api/story/images/ to /api/podcast/images/ if needed
+        if (imagePath.includes('/api/story/images/')) {
+          const filename = imagePath.split('/api/story/images/').pop() || '';
+          imagePath = `/api/podcast/images/${filename}`;
+        }
+        
+        // Ensure it's a podcast image endpoint
+        if (!imagePath.includes('/api/podcast/images/')) {
+          const filename = imagePath.split('/').pop() || currentImageUrl;
+          imagePath = `/api/podcast/images/${filename}`;
+        }
+
+        // Remove query parameters if present
+        imagePath = imagePath.split('?')[0];
+
+        const response = await aiApiClient.get(imagePath, {
+          responseType: 'blob',
+        });
+        
+        if (!isMounted) {
+          return;
+        }
+        
+        // Double-check that imageUrl hasn't changed
+        if (scene.imageUrl !== currentImageUrl) {
+          return;
+        }
+        
+        const blob = response.data;
+        const blobUrl = URL.createObjectURL(blob);
+        
+        setImageBlobUrl((prevBlobUrl) => {
+          // Clean up previous blob URL if exists
+          if (prevBlobUrl && prevBlobUrl !== blobUrl && prevBlobUrl.startsWith('blob:')) {
+            URL.revokeObjectURL(prevBlobUrl);
+          }
+          return blobUrl;
+        });
+      } catch (error) {
+        console.error('[SceneEditor] Failed to load image blob:', error);
+        // Fallback: try with query token
+        try {
+          const token = localStorage.getItem('clerk_dashboard_token') || '';
+          if (token) {
+            const urlWithToken = `${currentImageUrl}?token=${encodeURIComponent(token)}`;
+            setImageBlobUrl(urlWithToken);
+          }
+        } catch (fallbackError) {
+          console.error('[SceneEditor] Fallback image loading failed:', fallbackError);
+        }
+      } finally {
+        if (isMounted) {
+          setImageLoading(false);
+        }
+      }
+    };
+
+    loadImageBlob();
+
+    return () => {
+      isMounted = false;
+      // Cleanup blob URL on unmount or when imageUrl changes
+      setImageBlobUrl((prevBlobUrl) => {
+        if (prevBlobUrl && prevBlobUrl.startsWith('blob:')) {
+          URL.revokeObjectURL(prevBlobUrl);
+        }
+        return null;
+      });
+    };
+  }, [scene.imageUrl]);
+
   const updateLine = (updatedLine: Line) => {
     const updated = { ...scene, lines: scene.lines.map((l) => (l.id === updatedLine.id ? updatedLine : l)) };
     onUpdateScene(updated);
@@ -126,7 +242,7 @@ export const SceneEditor: React.FC<SceneEditorProps> = ({
   const hasAudio = Boolean(scene.audioUrl && audioBlobUrl);
   const hasImage = Boolean(scene.imageUrl);
 
-  const handleApproveAndGenerate = async () => {
+  const handleApproveAndGenerate = async (settings?: AudioGenerationSettings) => {
     const wasAlreadyApproved = scene.approved;
     const sceneId = scene.id;
     
@@ -152,11 +268,20 @@ export const SceneEditor: React.FC<SceneEditorProps> = ({
       const currentScene = { ...scene, approved: true };
       
       // Generate audio
+      const effectiveSettings = settings || audioSettings;
       const result = await podcastApi.renderSceneAudio({
         scene: currentScene,
-        voiceId: "Wise_Woman",
-        emotion: scene.emotion || knobs.voice_emotion || "neutral",
-        speed: knobs.voice_speed || 1.0,
+        voiceId: effectiveSettings.voiceId || "Wise_Woman",
+        emotion: effectiveSettings.emotion || scene.emotion || knobs.voice_emotion || "neutral",
+        speed: effectiveSettings.speed ?? knobs.voice_speed ?? 1.0,
+        volume: effectiveSettings.volume ?? 1.0,
+        pitch: effectiveSettings.pitch ?? 0.0,
+        englishNormalization: effectiveSettings.englishNormalization ?? true,
+        sampleRate: effectiveSettings.sampleRate,
+        bitrate: effectiveSettings.bitrate,
+        channel: effectiveSettings.channel,
+        format: effectiveSettings.format,
+        languageBoost: effectiveSettings.languageBoost,
       });
 
       // Update scene with audio URL and ensure approved state
@@ -179,35 +304,138 @@ export const SceneEditor: React.FC<SceneEditorProps> = ({
     }
   };
 
-  const handleGenerateImage = async () => {
+  const handleGenerateImage = async (settings?: ImageGenerationSettings) => {
     const sceneId = scene.id;
+    const startTime = Date.now();
+    let progressInterval: NodeJS.Timeout | null = null;
     
     try {
       setGeneratingImage(true);
+      setShowRegenerateModal(false);
+      setImageGenerationStatus("Submitting image generation request...");
+      setImageGenerationProgress(10);
       
       // Build scene content from lines for context
       const sceneContent = scene.lines.map((line) => line.text).join(" ");
       
+      // Log avatar URL for debugging
+      console.log("[SceneEditor] Generating image with avatarUrl:", avatarUrl);
+      console.log("[SceneEditor] Custom settings:", settings);
+      
+      // Simulate progress updates during API call
+      progressInterval = setInterval(() => {
+        const elapsed = Date.now() - startTime;
+        const seconds = Math.floor(elapsed / 1000);
+        
+        // Update status based on elapsed time
+        if (seconds < 5) {
+          setImageGenerationStatus("Submitting request to AI service...");
+          setImageGenerationProgress(15);
+        } else if (seconds < 15) {
+          setImageGenerationStatus("AI is generating your image...");
+          setImageGenerationProgress(30);
+        } else if (seconds < 30) {
+          setImageGenerationStatus("Creating character-consistent scene image...");
+          setImageGenerationProgress(50);
+        } else if (seconds < 60) {
+          setImageGenerationStatus("Rendering image details...");
+          setImageGenerationProgress(70);
+        } else {
+          setImageGenerationStatus(`Processing... (${seconds}s elapsed)`);
+          setImageGenerationProgress(Math.min(90, 50 + (seconds - 30) / 2));
+        }
+      }, 1000);
+      
       const result = await podcastApi.generateSceneImage({
         sceneId: scene.id,
         sceneTitle: scene.title,
         sceneContent: sceneContent,
+        baseAvatarUrl: avatarUrl || undefined, // Pass base avatar URL for character consistency
         idea: idea,
         width: 1024,
         height: 1024,
+        // Pass custom settings if provided
+        customPrompt: settings?.prompt,
+        style: settings?.style,
+        renderingSpeed: settings?.renderingSpeed,
+        aspectRatio: settings?.aspectRatio,
       });
       
+      if (progressInterval) {
+        clearInterval(progressInterval);
+        progressInterval = null;
+      }
+      
+      setImageGenerationStatus("Finalizing image...");
+      setImageGenerationProgress(95);
+      
       // Update scene with image URL
       const updatedScene = { ...scene, imageUrl: result.image_url };
       onUpdateScene(updatedScene);
-    } catch (error) {
+      
+      const elapsed = Math.floor((Date.now() - startTime) / 1000);
+      setImageGenerationStatus(`Image generated successfully in ${elapsed}s`);
+      setImageGenerationProgress(100);
+      
+      // Clear status after a moment
+      setTimeout(() => {
+        setImageGenerationStatus("");
+        setImageGenerationProgress(0);
+      }, 2000);
+    } catch (error: any) {
+      // Clear interval on error
+      if (progressInterval) {
+        clearInterval(progressInterval);
+        progressInterval = null;
+      }
+      
       console.error("Failed to generate image:", error);
+      // Extract error message from response if available
+      const errorMessage = error?.response?.data?.detail?.message 
+        || error?.response?.data?.detail?.error 
+        || error?.response?.data?.detail 
+        || error?.message 
+        || "Failed to generate image. Please try again.";
+      console.error("Error details:", {
+        status: error?.response?.status,
+        statusText: error?.response?.statusText,
+        data: error?.response?.data,
+        message: errorMessage,
+      });
+      
+      setImageGenerationStatus(`Error: ${errorMessage}`);
+      setImageGenerationProgress(0);
+      
+      // Show user-friendly error message
+      alert(`Image generation failed: ${errorMessage}`);
       throw error;
     } finally {
+      // Ensure interval is cleared
+      if (progressInterval) {
+        clearInterval(progressInterval);
+      }
       setGeneratingImage(false);
     }
   };
 
+  const handleRegenerateClick = () => {
+    setShowRegenerateModal(true);
+  };
+
+  const handleAudioRegenerateClick = () => {
+    if (hasAudio) {
+      setShowAudioModal(true);
+    } else {
+      handleApproveAndGenerate(audioSettings);
+    }
+  };
+
+  const handleAudioRegenerate = (settings: AudioGenerationSettings) => {
+    setAudioSettings(settings);
+    setShowAudioModal(false);
+    handleApproveAndGenerate(settings);
+  };
+
   return (
     <GlassyCard sx={glassyCardSx}>
       <Stack spacing={2.5}>
@@ -256,7 +484,7 @@ export const SceneEditor: React.FC<SceneEditorProps> = ({
           </Box>
           <Stack direction="row" spacing={1.5} flexWrap="wrap" useFlexGap>
             <PrimaryButton
-              onClick={handleApproveAndGenerate}
+              onClick={handleAudioRegenerateClick}
               disabled={approving || generating}
               loading={approving || generating}
               startIcon={
@@ -270,7 +498,7 @@ export const SceneEditor: React.FC<SceneEditorProps> = ({
               }
               tooltip={
                 hasAudio && !generating
-                  ? "Regenerate audio for this scene"
+                  ? "Regenerate audio for this scene with custom settings"
                   : generating
                   ? "Generating audio..."
                   : scene.approved
@@ -290,7 +518,7 @@ export const SceneEditor: React.FC<SceneEditorProps> = ({
                 : "Approve & Generate Audio"}
             </PrimaryButton>
             <PrimaryButton
-              onClick={handleGenerateImage}
+              onClick={hasImage ? handleRegenerateClick : () => handleGenerateImage()}
               disabled={generatingImage}
               loading={generatingImage}
               startIcon={
@@ -372,7 +600,157 @@ export const SceneEditor: React.FC<SceneEditorProps> = ({
             </Box>
           </>
         )}
+
+        {/* Image Generation Progress - Show when generating */}
+        {generatingImage && (
+          <>
+            <Divider sx={{ borderColor: "rgba(15, 23, 42, 0.08)", borderWidth: 1, mt: 1 }} />
+            <Box
+              sx={{
+                p: 2,
+                background: "linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%)",
+                borderRadius: 2,
+                border: "1px solid rgba(102, 126, 234, 0.2)",
+              }}
+            >
+              <Stack direction="row" alignItems="center" spacing={1.5} sx={{ mb: 1.5 }}>
+                <ImageIcon sx={{ color: "#667eea", fontSize: "1.25rem" }} />
+                <Typography variant="subtitle2" sx={{ color: "#667eea", fontWeight: 600 }}>
+                  Generating Image...
+                </Typography>
+              </Stack>
+              
+              {/* Progress Bar */}
+              <Box sx={{ mb: 1.5 }}>
+                <LinearProgress 
+                  variant="determinate" 
+                  value={imageGenerationProgress} 
+                  sx={{ 
+                    height: 8, 
+                    borderRadius: 4,
+                    backgroundColor: alpha("#667eea", 0.1),
+                    "& .MuiLinearProgress-bar": {
+                      backgroundColor: "#667eea",
+                      borderRadius: 4,
+                    }
+                  }} 
+                />
+                <Typography variant="caption" sx={{ color: "#667eea", mt: 0.5, display: "block", textAlign: "right" }}>
+                  {imageGenerationProgress}%
+                </Typography>
+              </Box>
+              
+              {/* Status Message */}
+              {imageGenerationStatus && (
+                <Typography variant="body2" sx={{ color: "#667eea", fontSize: "0.875rem", lineHeight: 1.6, mb: 1 }}>
+                  {imageGenerationStatus}
+                </Typography>
+              )}
+              
+              {/* Spinner */}
+              <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", mt: 1 }}>
+                <CircularProgress size={32} sx={{ color: "#667eea" }} />
+              </Box>
+            </Box>
+          </>
+        )}
+
+        {/* Generated Image Display - Show when image exists and not generating */}
+        {scene.imageUrl && !generatingImage && (
+          <>
+            <Divider sx={{ borderColor: "rgba(15, 23, 42, 0.08)", borderWidth: 1, mt: 1 }} />
+            <Box
+              sx={{
+                p: 2,
+                background: imageBlobUrl && !imageLoading
+                  ? "linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%)"
+                  : "linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.08) 100%)",
+                borderRadius: 2,
+                border: imageBlobUrl && !imageLoading
+                  ? "1px solid rgba(102, 126, 234, 0.2)"
+                  : "1px solid rgba(245, 158, 11, 0.2)",
+              }}
+            >
+              <Stack direction="row" alignItems="center" spacing={1.5} sx={{ mb: 1.5 }}>
+                <ImageIcon sx={{ color: imageBlobUrl && !imageLoading ? "#667eea" : "#d97706", fontSize: "1.25rem" }} />
+                <Typography variant="subtitle2" sx={{ color: imageBlobUrl && !imageLoading ? "#667eea" : "#d97706", fontWeight: 600 }}>
+                  {imageBlobUrl && !imageLoading ? "Image Generated" : "Loading Image..."}
+                </Typography>
+              </Stack>
+              {imageBlobUrl && !imageLoading ? (
+                <Box
+                  sx={{
+                    width: "100%",
+                    borderRadius: 2,
+                    overflow: "hidden",
+                    border: "1px solid rgba(102,126,234,0.2)",
+                    background: alpha("#667eea", 0.05),
+                  }}
+                >
+                  <Box
+                    component="img"
+                    src={imageBlobUrl}
+                    alt={scene.title}
+                    sx={{
+                      width: "100%",
+                      height: "auto",
+                      display: "block",
+                      maxHeight: 400,
+                      objectFit: "cover",
+                    }}
+                    onError={(e) => {
+                      console.error('[SceneEditor] Image failed to load:', {
+                        src: e.currentTarget.src,
+                        imageUrl: scene.imageUrl,
+                        imageBlobUrl,
+                      });
+                    }}
+                    onLoad={() => {
+                      console.log('[SceneEditor] Image loaded successfully');
+                    }}
+                  />
+                </Box>
+              ) : (
+                <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", py: 2 }}>
+                  <CircularProgress size={24} sx={{ color: "#d97706" }} />
+                </Box>
+              )}
+            </Box>
+          </>
+        )}
       </Stack>
+
+      {/* Image Regeneration Modal */}
+      <ImageRegenerateModal
+        open={showRegenerateModal}
+        onClose={() => setShowRegenerateModal(false)}
+        onRegenerate={handleGenerateImage}
+        initialPrompt={(() => {
+          const promptParts = [
+            `Scene: ${scene.title}`,
+            "Professional podcast recording studio",
+            "Modern microphone setup",
+            "Clean background, professional lighting",
+            "16:9 aspect ratio, video-optimized composition"
+          ];
+          if (idea) {
+            promptParts.push(`Topic: ${idea.substring(0, 60)}`);
+          }
+          return promptParts.join(", ");
+        })()}
+        initialStyle="Realistic"
+        initialRenderingSpeed="Quality"
+        initialAspectRatio="16:9"
+        isGenerating={generatingImage}
+      />
+
+      <AudioRegenerateModal
+        open={showAudioModal}
+        onClose={() => setShowAudioModal(false)}
+        onRegenerate={handleAudioRegenerate}
+        initialSettings={audioSettings}
+        isGenerating={generating}
+      />
     </GlassyCard>
   );
 };