Upload 25 files

App.tsx

@@ -1,10 +1,22 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import StoryInput from './components/StoryInput';
-import LoadingIndicator from './components/LoadingIndicator';
-import ComicPreview from './components/ComicPreview';
+import EnhancedLoadingIndicator from './components/EnhancedLoadingIndicator';
+import ComicSeriesManager from './components/ComicSeriesManager';
 import ApiKeySetup from './components/ApiKeySetup';
+import ExplorationPrompt from './components/ExplorationPrompt';
 import { generateMangaScriptAndImages } from './services/geminiService';
-import type { MangaStyle, LoadingState } from './types';
+import { PerformanceTracker } from './utils/imageOptimization';
+import { createMangaPdf } from './services/pdfService';
+import type { 
+    MangaStyle, 
+    GenerationProgress, 
+    CharacterProfile, 
+    MangaPage, 
+    CharacterSketch,
+    EnvironmentSketch,
+    StoryArcSummary,
+    PerformanceTiming
+} from './types';
 
 function App() {
     const [apiKey, setApiKey] = useState<string>('');
@@ -12,9 +24,22 @@ function App() {
     const [story, setStory] = useState('');
     const [author, setAuthor] = useState('');
     const [style, setStyle] = useState<MangaStyle>('Shonen');
-    const [loadingState, setLoadingState] = useState<LoadingState>({ isLoading: false, message: '', progress: 0 });
+    const [generationProgress, setGenerationProgress] = useState<GenerationProgress>({ 
+        phase: 'character_analysis', 
+        message: '', 
+        progress: 0 
+    });
     const [generatedImages, setGeneratedImages] = useState<string[]>([]);
+    const [generatedCharacters, setGeneratedCharacters] = useState<CharacterProfile[]>([]);
+    const [generatedPages, setGeneratedPages] = useState<MangaPage[]>([]);
+    const [characterSketches, setCharacterSketches] = useState<CharacterSketch[]>([]);
+    const [environmentSketches, setEnvironmentSketches] = useState<EnvironmentSketch[]>([]);
+    const [storyArcSummary, setStoryArcSummary] = useState<StoryArcSummary | null>(null);
     const [error, setError] = useState<string | null>(null);
+    const [performanceTimings, setPerformanceTimings] = useState<PerformanceTiming[]>([]);
+    const [totalGenerationTime, setTotalGenerationTime] = useState<number>(0);
+    const [showExplorationPrompt, setShowExplorationPrompt] = useState(false);
+    const [includeDialogue, setIncludeDialogue] = useState<boolean>(true);
 
     // Check for stored API key on component mount
     useEffect(() => {
@@ -29,21 +54,35 @@ function App() {
 
         setError(null);
         setGeneratedImages([]);
-        setLoadingState({ isLoading: true, message: 'Starting...', progress: 0 });
+        setGeneratedCharacters([]);
+        setGeneratedPages([]);
+        setCharacterSketches([]);
+        setEnvironmentSketches([]);
+        setStoryArcSummary(null);
+        setGenerationProgress({ phase: 'character_analysis', message: 'Starting...', progress: 0 });
 
         try {
-            const images = await generateMangaScriptAndImages(
-                { title, story, author, style },
-                (progressUpdate) => setLoadingState(progressUpdate),
+            const result = await generateMangaScriptAndImages(
+                { title, story, author, style, includeDialogue },
+                (progressUpdate) => setGenerationProgress(progressUpdate),
                 apiKey
             );
-            setGeneratedImages(images);
+            setGeneratedImages(result.images);
+            setGeneratedCharacters(result.characters);
+            setGeneratedPages(result.pages);
+            setCharacterSketches(result.characterSketches);
+            setEnvironmentSketches(result.environmentSketches);
+            setStoryArcSummary(result.storyArcSummary);
+            setPerformanceTimings(result.performanceTimings);
+            setTotalGenerationTime(result.totalGenerationTime);
+            
+            // Don't auto-show exploration prompt - only when user clicks download
         } catch (err) {
             const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred.';
             setError(`Manga generation failed: ${errorMessage} Please check the console for details and try again.`);
             console.error(err);
         } finally {
-            setLoadingState({ isLoading: false, message: '', progress: 0 });
+            setGenerationProgress({ phase: 'completion', message: '', progress: 0 });
         }
     }, [title, story, author, style]);
 
@@ -53,13 +92,46 @@ function App() {
         setAuthor('');
         setStyle('Shonen');
         setGeneratedImages([]);
+        setGeneratedCharacters([]);
+        setGeneratedPages([]);
+        setCharacterSketches([]);
+        setEnvironmentSketches([]);
+        setStoryArcSummary(null);
         setError(null);
-        setLoadingState({ isLoading: false, message: '', progress: 0 });
+        setPerformanceTimings([]);
+        setTotalGenerationTime(0);
+        setShowExplorationPrompt(false);
+        setIncludeDialogue(true);
+        setGenerationProgress({ phase: 'character_analysis', message: '', progress: 0 });
     }, []);
 
     const handleApiKeySet = useCallback((newApiKey: string) => {
         setApiKey(newApiKey);
     }, []);
+    
+    const handleExplorationContinue = useCallback(() => {
+        setShowExplorationPrompt(false);
+        // The ComicSeriesManager will handle the continuation logic
+    }, []);
+    
+    const handleExplorationFinish = useCallback((removeApiKey: boolean) => {
+        console.log('handleExplorationFinish called - downloading PDF');
+        setShowExplorationPrompt(false);
+        
+        // Download PDF automatically
+        if (generatedImages.length > 0) {
+            console.log('Calling createMangaPdf...');
+            createMangaPdf(generatedImages, title);
+        } else {
+            console.warn('No generated images available for PDF creation');
+        }
+        
+        // No API key removal - keep it stored for future use
+    }, [generatedImages, title]);
+    
+    const handleDownloadClick = useCallback(() => {
+        setShowExplorationPrompt(true);
+    }, []);
 
     const renderContent = () => {
         // Show API key setup if no key is available
@@ -67,11 +139,30 @@ function App() {
             return <ApiKeySetup onApiKeySet={handleApiKeySet} />;
         }
         
-        if (loadingState.isLoading) {
-            return <LoadingIndicator loadingState={loadingState} />;
+        if (generationProgress.progress > 0 && generationProgress.progress < 100) {
+            return <EnhancedLoadingIndicator generationProgress={generationProgress} />;
         }
         if (generatedImages.length > 0) {
-            return <ComicPreview images={generatedImages} title={title} onReset={handleReset} />;
+            return (
+                <ComicSeriesManager 
+                    initialImages={generatedImages}
+                    title={title}
+                    story={story}
+                    author={author}
+                    style={style}
+                    apiKey={apiKey}
+                    onReset={handleReset}
+                    characters={generatedCharacters}
+                    pages={generatedPages}
+                    characterSketches={characterSketches}
+                    environmentSketches={environmentSketches}
+                    storyArcSummary={storyArcSummary}
+                    performanceTimings={performanceTimings}
+                    totalGenerationTime={totalGenerationTime}
+                    onDownloadClick={handleDownloadClick}
+                    includeDialogue={includeDialogue}
+                />
+            );
         }
         return (
             <StoryInput
@@ -84,26 +175,33 @@ function App() {
                 style={style}
                 onStyleChange={setStyle}
                 onGenerate={handleGenerate}
-                disabled={loadingState.isLoading}
+                disabled={generationProgress.progress > 0 && generationProgress.progress < 100}
+                includeDialogue={includeDialogue}
+                onDialogueToggle={setIncludeDialogue}
             />
         );
     };
 
     return (
         <div className="min-h-screen text-white">
-            <header className="relative overflow-hidden py-8">
-                <div className="absolute inset-0 bg-gradient-to-br from-gray-800/20 to-gray-900/30 backdrop-blur-sm"></div>
+            <header className="relative overflow-hidden py-12">
+                <div className="absolute inset-0 bg-gradient-to-br from-black/40 to-gray-900/20 backdrop-blur-sm"></div>
                 <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                     <div className="text-center">
-                        <h1 className="text-4xl sm:text-6xl font-bold mb-4 animate-fade-in">
+                        <h1 className="text-5xl sm:text-7xl font-black mb-6 animate-fade-in tracking-tight">
                             Comic <span className="gradient-text">Genesis</span> AI
                         </h1>
-                        <p className="text-xl sm:text-2xl text-white/80 mb-2 animate-slide-in">
+                        <p className="text-xl sm:text-2xl text-white/90 mb-4 animate-slide-in font-medium">
                             Professional Comic Book Creation Studio
                         </p>
-                        <p className="text-lg text-white/60 animate-slide-in">
-                            Transform your stories into stunning visual narratives with AI-powered artistry
+                        <p className="text-lg text-white/70 animate-slide-in max-w-2xl mx-auto leading-relaxed">
+                            Transform your stories into stunning visual narratives with cutting-edge AI artistry
                         </p>
+                        <div className="mt-8 flex justify-center">
+                            <div className="glass-card px-6 py-3 text-sm text-white/80">
+                                ✨ Powered by Google Gemini 2.5 Flash • Professional Quality Results
+                            </div>
+                        </div>
                     </div>
                 </div>
             </header>
@@ -111,16 +209,18 @@ function App() {
             <main className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
                 <div className="max-w-6xl mx-auto">
                     {error && (
-                        <div className="glass-card border-red-400 bg-red-500/20 text-red-100 px-6 py-4 mb-8 animate-fade-in" role="alert">
-                            <div className="flex items-center">
-                                <div className="flex-shrink-0">
-                                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
-                                    </svg>
+                        <div className="glass-card border-red-400/30 bg-red-500/10 text-red-100 px-8 py-6 mb-8 animate-fade-in" role="alert">
+                            <div className="flex items-start space-x-4">
+                                <div className="flex-shrink-0 mt-1">
+                                    <div className="w-8 h-8 bg-red-500/20 rounded-full flex items-center justify-center">
+                                        <svg className="w-5 h-5 text-red-300" fill="currentColor" viewBox="0 0 20 20">
+                                            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                                        </svg>
+                                    </div>
                                 </div>
-                                <div className="ml-3">
-                                    <strong className="font-bold">Creation Error: </strong>
-                                    <span>{error}</span>
+                                <div className="flex-1">
+                                    <h3 className="font-bold text-red-200 mb-2">Creation Error</h3>
+                                    <p className="text-red-100/90 text-sm leading-relaxed">{error}</p>
                                 </div>
                             </div>
                         </div>
@@ -129,6 +229,15 @@ function App() {
                 </div>
             </main>
             
+            {/* Exploration Prompt */}
+            <ExplorationPrompt 
+                showPrompt={showExplorationPrompt && generatedImages.length > 0 && !error}
+                onContinue={handleExplorationContinue}
+                onFinish={handleExplorationFinish}
+                generationTime={totalGenerationTime}
+                totalPages={generatedImages.length}
+            />
+            
             <footer className="text-center py-8 px-4 text-white/50 text-sm border-t border-white/10">
                 <div className="max-w-4xl mx-auto">
                     <p className="mb-2">🎨 Powered by Google Gemini Nanobanana • Built for Professional Comic Creators</p>

README.md

@@ -1,5 +1,5 @@
 ---
-title: Manga Genesis AI
+title: Comic Genesis AI
 emoji: 🎨
 colorFrom: purple
 colorTo: pink

components/ApiKeySetup.tsx

@@ -42,9 +42,14 @@ const ApiKeySetup: React.FC<ApiKeySetupProps> = ({ onApiKeySet }) => {
                         className="w-full input-glass"
                         required
                     />
-                    <p className="text-white/60 text-xs mt-2">
-                        🔒 Your API key is stored locally and never sent to our servers
-                    </p>
+                    <div className="flex items-center mt-2 text-white/60 text-xs">
+                        <div className="w-4 h-4 bg-green-500/20 rounded-full flex items-center justify-center mr-2">
+                            <svg className="w-2.5 h-2.5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
+                                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                            </svg>
+                        </div>
+                        <span>Your API key is stored locally and never sent to our servers</span>
+                    </div>
                 </div>
 
                 <button
@@ -65,17 +70,28 @@ const ApiKeySetup: React.FC<ApiKeySetupProps> = ({ onApiKeySet }) => {
                 </button>
 
                 {showInstructions && (
-                    <div className="mt-4 p-4 bg-white/10 rounded-lg text-sm text-white/80 animate-fade-in">
-                        <h3 className="font-semibold mb-3">📝 Getting Your Gemini API Key:</h3>
-                        <ol className="space-y-2 list-decimal list-inside">
-                            <li>Visit <a href="https://makersuite.google.com/app/apikey" target="_blank" rel="noopener noreferrer" className="text-blue-300 hover:text-blue-200 underline">Google AI Studio</a></li>
-                            <li>Sign in with your Google account</li>
-                            <li>Click "Create API Key"</li>
-                            <li>Copy the generated key</li>
-                            <li>Paste it above to start creating comics!</li>
-                        </ol>
-                        <div className="mt-4 p-3 bg-yellow-500/20 rounded-lg">
-                            <p className="text-yellow-200 text-xs">
+                    <div className="mt-4 glass-card p-6 text-sm text-white/80 animate-fade-in">
+                        <h3 className="font-bold mb-4 gradient-text">📝 Getting Your Gemini API Key:</h3>
+                        <div className="space-y-3">
+                            <div className="flex items-start space-x-3">
+                                <div className="w-6 h-6 bg-white/20 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">1</div>
+                                <div>Visit <a href="https://makersuite.google.com/app/apikey" target="_blank" rel="noopener noreferrer" className="text-blue-300 hover:text-blue-200 underline font-medium">Google AI Studio</a></div>
+                            </div>
+                            <div className="flex items-start space-x-3">
+                                <div className="w-6 h-6 bg-white/20 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">2</div>
+                                <div>Sign in with your Google account</div>
+                            </div>
+                            <div className="flex items-start space-x-3">
+                                <div className="w-6 h-6 bg-white/20 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">3</div>
+                                <div>Click "Create API Key" and copy the generated key</div>
+                            </div>
+                            <div className="flex items-start space-x-3">
+                                <div className="w-6 h-6 bg-white/20 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5">4</div>
+                                <div>Paste it above to start creating comics!</div>
+                            </div>
+                        </div>
+                        <div className="mt-6 glass p-4 rounded-lg">
+                            <p className="text-yellow-200 text-xs font-medium">
                                 ⚡ <strong>Free Tier:</strong> Google provides generous free usage for Gemini API - perfect for creating comics!
                             </p>
                         </div>

components/ComicPreview.tsx

@@ -1,10 +1,15 @@
-import React from 'react';
+import React, { useState, memo } from 'react';
 import { createMangaPdf } from '../services/pdfService';
+import ExpandableImageModal from './ExpandableImageModal';
+import LazyImage from './LazyImage';
+import type { StoryArcSummary } from '../types';
 
 interface ComicPreviewProps {
     images: string[];
     title: string;
     onReset: () => void;
+    storyArcSummary?: StoryArcSummary;
+    onDownloadClick?: () => void;
 }
 
 const getPageLabel = (index: number, totalImages: number): string => {
@@ -18,9 +23,25 @@ const getPageLabel = (index: number, totalImages: number): string => {
 };
 
 
-const ComicPreview: React.FC<ComicPreviewProps> = ({ images, title, onReset }) => {
+const ComicPreview: React.FC<ComicPreviewProps> = memo(({ images, title, onReset, storyArcSummary, onDownloadClick }) => {
+    const [selectedImage, setSelectedImage] = useState<{ data: string; title: string; description?: string } | null>(null);
+
     const handleDownload = () => {
-        createMangaPdf(images, title);
+        if (onDownloadClick) {
+            onDownloadClick();
+        } else {
+            createMangaPdf(images, title);
+        }
+    };
+
+    const handleImageClick = (imgData: string, index: number) => {
+        setSelectedImage({
+            data: imgData,
+            title: getPageLabel(index, images.length),
+            description: index === 0 ? 'Opening cover with title and characters' : 
+                        index === images.length - 1 ? 'Story conclusion and finale' : 
+                        'Story development and character progression'
+        });
     };
 
     return (
@@ -51,15 +72,91 @@ const ComicPreview: React.FC<ComicPreviewProps> = ({ images, title, onReset }) =
                 </div>
             </div>
 
+            {/* Story Arc Summary - Compact Version */}
+            {storyArcSummary && (
+                <div className="glass-card p-6">
+                    <h3 className="text-xl font-bold text-white mb-4 text-center gradient-text">
+                        📖 Story Analysis
+                    </h3>
+                    
+                    {/* Compact Theme Display */}
+                    <div className="bg-white/10 rounded-lg p-4 mb-4">
+                        <div className="flex items-start space-x-3">
+                            <span className="text-2xl">🎯</span>
+                            <div className="flex-1">
+                                <h4 className="text-sm font-semibold text-white mb-1">Central Theme</h4>
+                                <p className="text-white/70 text-xs leading-relaxed">
+                                    {storyArcSummary.overallTheme.length > 120 
+                                        ? `${storyArcSummary.overallTheme.slice(0, 120)}...` 
+                                        : storyArcSummary.overallTheme}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Compact Events & Development */}
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div className="bg-white/10 rounded-lg p-4">
+                            <div className="flex items-center space-x-2 mb-3">
+                                <span className="text-lg">🎬</span>
+                                <h4 className="text-sm font-semibold text-white">Key Events</h4>
+                            </div>
+                            <div className="space-y-1">
+                                {storyArcSummary.keyEvents.slice(0, 3).map((event, index) => (
+                                    <div key={index} className="text-white/70 text-xs flex items-start">
+                                        <span className="text-white/50 mr-1 mt-0.5">•</span>
+                                        <span className="leading-tight">
+                                            {event.length > 50 ? `${event.slice(0, 50)}...` : event}
+                                        </span>
+                                    </div>
+                                ))}
+                                {storyArcSummary.keyEvents.length > 3 && (
+                                    <div className="text-white/50 text-xs italic">
+                                        +{storyArcSummary.keyEvents.length - 3} more events
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                        
+                        <div className="bg-white/10 rounded-lg p-4">
+                            <div className="flex items-center space-x-2 mb-3">
+                                <span className="text-lg">👥</span>
+                                <h4 className="text-sm font-semibold text-white">Character Growth</h4>
+                            </div>
+                            <div className="space-y-1">
+                                {storyArcSummary.characterDevelopment.slice(0, 3).map((development, index) => (
+                                    <div key={index} className="text-white/70 text-xs flex items-start">
+                                        <span className="text-white/50 mr-1 mt-0.5">•</span>
+                                        <span className="leading-tight">
+                                            {development.length > 50 ? `${development.slice(0, 50)}...` : development}
+                                        </span>
+                                    </div>
+                                ))}
+                                {storyArcSummary.characterDevelopment.length > 3 && (
+                                    <div className="text-white/50 text-xs italic">
+                                        +{storyArcSummary.characterDevelopment.length - 3} more developments
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+
             {/* Comic Pages Gallery */}
             <div className="panel-grid">
                 {images.map((imgData, index) => (
-                    <div key={index} className="panel-item group">
+                    <div 
+                        key={index} 
+                        className="panel-item group cursor-pointer"
+                        onClick={() => handleImageClick(imgData, index)}
+                    >
                         <div className="relative overflow-hidden">
-                            <img
-                                src={`data:image/jpeg;base64,${imgData}`}
+                            <LazyImage
+                                src={imgData}
                                 alt={`Generated comic page ${index + 1}`}
                                 className="w-full h-auto object-contain transition-transform duration-500 group-hover:scale-105"
+                                quality="compressed"
                             />
                             <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                             <div className="absolute bottom-4 left-4 right-4 transform translate-y-8 group-hover:translate-y-0 transition-transform duration-300">
@@ -68,7 +165,7 @@ const ComicPreview: React.FC<ComicPreviewProps> = ({ images, title, onReset }) =
                                         {getPageLabel(index, images.length)}
                                     </p>
                                     <p className="text-white/80 text-xs">
-                                        Page {index + 1} of {images.length}
+                                        Page {index + 1} of {images.length} • Click to expand
                                     </p>
                                 </div>
                             </div>
@@ -89,6 +186,15 @@ const ComicPreview: React.FC<ComicPreviewProps> = ({ images, title, onReset }) =
                 ))}
             </div>
 
+            {/* Expandable Image Modal */}
+            <ExpandableImageModal
+                isOpen={selectedImage !== null}
+                onClose={() => setSelectedImage(null)}
+                imageData={selectedImage?.data || ''}
+                title={selectedImage?.title || ''}
+                description={selectedImage?.description}
+            />
+
             {/* Stats Section */}
             <div className="glass-card p-6">
                 <div className="flex justify-center items-center gap-8 text-center">
@@ -110,6 +216,6 @@ const ComicPreview: React.FC<ComicPreviewProps> = ({ images, title, onReset }) =
             </div>
         </div>
     );
-};
+});
 
 export default ComicPreview;

components/ComicSeriesManager.tsx

@@ -0,0 +1,421 @@
+import React, { useState, useEffect, memo } from 'react';
+import ComicPreview from './ComicPreview';
+import StoryProgressionSelector from './StoryProgressionSelector';
+import LoadingIndicator from './LoadingIndicator';
+import PerformanceSummary from './PerformanceSummary';
+import { analyzeStoryProgressions, generateComicContinuation } from '../services/geminiService';
+import { createComicSeriesPdf, createMangaPdf } from '../services/pdfService';
+import type { 
+    ComicIteration, 
+    ComicSeries, 
+    StoryProgression, 
+    LoadingState,
+    MangaPage,
+    CharacterProfile,
+    MangaStyle,
+    CharacterSketch,
+    EnvironmentSketch,
+    StoryArcSummary,
+    PerformanceTiming
+} from '../types';
+
+interface ComicSeriesManagerProps {
+    initialImages: string[];
+    title: string;
+    story: string;
+    author: string;
+    style: MangaStyle;
+    apiKey: string;
+    onReset: () => void;
+    characters?: CharacterProfile[];
+    pages?: MangaPage[];
+    characterSketches?: CharacterSketch[];
+    environmentSketches?: EnvironmentSketch[];
+    storyArcSummary?: StoryArcSummary | null;
+    performanceTimings?: PerformanceTiming[];
+    totalGenerationTime?: number;
+    onDownloadClick?: () => void;
+    includeDialogue?: boolean;
+}
+
+type SeriesState = 'preview' | 'analyzing' | 'selecting_progression' | 'generating_continuation' | 'series_complete';
+
+const ComicSeriesManager: React.FC<ComicSeriesManagerProps> = ({
+    initialImages,
+    title,
+    story,
+    author,
+    style,
+    apiKey,
+    onReset,
+    characters = [],
+    pages = [],
+    characterSketches = [],
+    environmentSketches = [],
+    storyArcSummary = null,
+    performanceTimings = [],
+    totalGenerationTime = 0,
+    onDownloadClick,
+    includeDialogue = true
+}) => {
+    const [seriesState, setSeriesState] = useState<SeriesState>('preview');
+    const [comicSeries, setComicSeries] = useState<ComicSeries | null>(null);
+    const [currentProgressions, setCurrentProgressions] = useState<StoryProgression[]>([]);
+    const [loadingState, setLoadingState] = useState<LoadingState>({ isLoading: false, message: '', progress: 0 });
+    const [error, setError] = useState<string | null>(null);
+
+    // Initialize the comic series with the first iteration
+    useEffect(() => {
+        const firstIteration: ComicIteration = {
+            id: 'chapter_1',
+            title,
+            story,
+            author,
+            style,
+            includeDialogue,
+            images: initialImages,
+            characters,
+            pages,
+            generatedAt: new Date()
+        };
+
+        const series: ComicSeries = {
+            seriesTitle: title,
+            author,
+            iterations: [firstIteration],
+            totalPages: initialImages.length,
+            createdAt: new Date(),
+            lastUpdated: new Date(),
+            totalGenerationTime: totalGenerationTime,
+            performanceSummary: performanceTimings
+        };
+
+        setComicSeries(series);
+    }, [initialImages, title, story, author, style, characters, pages, performanceTimings, totalGenerationTime, includeDialogue]);
+
+    const handleContinueStory = async () => {
+        if (!comicSeries || comicSeries.iterations.length === 0) return;
+
+        setError(null);
+        setSeriesState('analyzing');
+        setLoadingState({ isLoading: true, message: 'Analyzing your story for continuation possibilities...', progress: 20 });
+
+        try {
+            const currentIteration = comicSeries.iterations[comicSeries.iterations.length - 1];
+            const progressions = await analyzeStoryProgressions(currentIteration, apiKey);
+            
+            setCurrentProgressions(progressions);
+            setSeriesState('selecting_progression');
+            setLoadingState({ isLoading: false, message: '', progress: 0 });
+        } catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to analyze story progressions.';
+            setError(errorMessage);
+            setSeriesState('preview');
+            setLoadingState({ isLoading: false, message: '', progress: 0 });
+        }
+    };
+
+    const handleProgressionSelect = async (selectedProgression: StoryProgression) => {
+        if (!comicSeries || comicSeries.iterations.length === 0) return;
+
+        setError(null);
+        setSeriesState('generating_continuation');
+        
+        try {
+            const currentIteration = comicSeries.iterations[comicSeries.iterations.length - 1];
+            const newIteration = await generateComicContinuation(
+                currentIteration,
+                selectedProgression,
+                setLoadingState,
+                apiKey
+            );
+
+            // Update the series with the new iteration
+            const updatedSeries: ComicSeries = {
+                ...comicSeries,
+                iterations: [...comicSeries.iterations, newIteration],
+                totalPages: comicSeries.totalPages + newIteration.images.length,
+                lastUpdated: new Date()
+            };
+
+            setComicSeries(updatedSeries);
+            setSeriesState('series_complete');
+            setLoadingState({ isLoading: false, message: '', progress: 0 });
+        } catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to generate story continuation.';
+            setError(errorMessage);
+            setSeriesState('selecting_progression');
+            setLoadingState({ isLoading: false, message: '', progress: 0 });
+        }
+    };
+
+    const handleSkipContinuation = () => {
+        setSeriesState('preview');
+    };
+
+    const handleDownloadSingleComic = () => {
+        if (comicSeries && comicSeries.iterations.length > 0) {
+            createMangaPdf(comicSeries.iterations[0].images, comicSeries.seriesTitle);
+        }
+    };
+
+    const handleDownloadCompleteSeries = () => {
+        if (comicSeries) {
+            createComicSeriesPdf(comicSeries);
+        }
+    };
+
+    const handleContinueAgain = () => {
+        setSeriesState('preview');
+        setCurrentProgressions([]);
+    };
+
+    const getAllImages = (): string[] => {
+        if (!comicSeries) return [];
+        return comicSeries.iterations.flatMap(iteration => iteration.images);
+    };
+
+    const getCurrentTitle = (): string => {
+        if (!comicSeries || seriesState === 'preview') {
+            return title;
+        }
+        return `${comicSeries.seriesTitle} - Complete Series`;
+    };
+
+    // Render based on current state
+    const renderContent = () => {
+        if (loadingState.isLoading) {
+            return <LoadingIndicator loadingState={loadingState} />;
+        }
+
+        switch (seriesState) {
+            case 'selecting_progression':
+                return (
+                    <StoryProgressionSelector
+                        progressions={currentProgressions}
+                        onProgressionSelect={handleProgressionSelect}
+                        onSkip={handleSkipContinuation}
+                        disabled={loadingState.isLoading}
+                        currentIteration={comicSeries?.iterations[0]}
+                        storyArcSummary={storyArcSummary}
+                    />
+                );
+
+            case 'series_complete':
+                return (
+                    <div className="space-y-8 animate-fade-in">
+                        {/* Series Complete Header */}
+                        <div className="glass-card p-8">
+                            <div className="text-center">
+                                <h2 className="text-4xl font-bold text-white mb-4">
+                                    🎉 Series Complete!
+                                </h2>
+                                <p className="text-xl text-white/80 mb-2">
+                                    Your comic series "{comicSeries?.seriesTitle}" is ready
+                                </p>
+                                <p className="text-white/60">
+                                    {comicSeries?.iterations.length} chapters • {comicSeries?.totalPages} total pages
+                                </p>
+                            </div>
+                        </div>
+
+                        {/* Series Preview */}
+                        <ComicSeriesPreview comicSeries={comicSeries!} />
+                        
+                        {/* Performance Summary */}
+                        {comicSeries?.performanceSummary && comicSeries.performanceSummary.length > 0 && (
+                            <PerformanceSummary 
+                                timings={comicSeries.performanceSummary}
+                                totalTime={comicSeries.totalGenerationTime || 0}
+                                totalPages={comicSeries.totalPages}
+                            />
+                        )}
+
+                        {/* Action Buttons */}
+                        <div className="glass-card p-8">
+                            <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
+                                <button
+                                    onClick={handleDownloadCompleteSeries}
+                                    className="btn-primary px-8 py-4 text-lg font-bold hover:scale-105 transition-all duration-300"
+                                >
+                                    📚 Download Complete Series PDF
+                                </button>
+                                
+                                <button
+                                    onClick={handleContinueAgain}
+                                    className="btn-secondary px-6 py-3 hover:scale-105 transition-all duration-300"
+                                >
+                                    ➕ Continue Story Further
+                                </button>
+                                
+                                <button
+                                    onClick={onReset}
+                                    className="btn-secondary px-6 py-3 hover:scale-105 transition-all duration-300"
+                                >
+                                    ✨ Create New Comic
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                );
+
+            default: // 'preview'
+                return (
+                    <div className="space-y-8">
+                        {/* Enhanced Comic Preview with Continue Option */}
+                        <ComicPreview 
+                            images={comicSeries?.iterations[0]?.images || []}
+                            title={getCurrentTitle()}
+                            onReset={onReset}
+                            storyArcSummary={storyArcSummary}
+                            onDownloadClick={onDownloadClick}
+                        />
+                        
+                        {/* Performance Summary for single comic */}
+                        {comicSeries?.performanceSummary && comicSeries.performanceSummary.length > 0 && (
+                            <PerformanceSummary 
+                                timings={comicSeries.performanceSummary}
+                                totalTime={comicSeries.totalGenerationTime || 0}
+                                totalPages={comicSeries.totalPages}
+                            />
+                        )}
+
+                        {/* Story Continuation Prompt */}
+                        <div className="glass-card p-8 animate-fade-in">
+                            <div className="text-center">
+                                <h3 className="text-2xl font-bold text-white mb-4">
+                                    📖 Continue Your Story?
+                                </h3>
+                                <p className="text-white/80 mb-6">
+                                    Your comic is complete, but every great story can continue! 
+                                    Let AI analyze your story and suggest compelling directions to expand it into a series.
+                                </p>
+                                
+                                <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
+                                    <button
+                                        onClick={handleContinueStory}
+                                        className="btn-primary px-8 py-4 text-lg font-bold hover:scale-105 transition-all duration-300"
+                                    >
+                                        🚀 Explore Story Progressions
+                                    </button>
+                                    
+                                    <button
+                                        onClick={handleDownloadSingleComic}
+                                        className="btn-secondary px-6 py-3 hover:scale-105 transition-all duration-300"
+                                    >
+                                        📥 Download Current Comic Only
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                );
+        }
+    };
+
+    return (
+        <div className="space-y-8">
+            {error && (
+                <div className="glass-card border-red-400 bg-red-500/20 text-red-100 px-6 py-4 animate-fade-in" role="alert">
+                    <div className="flex items-center">
+                        <div className="flex-shrink-0">
+                            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                            </svg>
+                        </div>
+                        <div className="ml-3">
+                            <strong className="font-bold">Story Continuation Error: </strong>
+                            <span>{error}</span>
+                        </div>
+                    </div>
+                </div>
+            )}
+            
+            {renderContent()}
+        </div>
+    );
+};
+
+// Component to preview the complete series
+const ComicSeriesPreview: React.FC<{ comicSeries: ComicSeries }> = ({ comicSeries }) => {
+    const [selectedIteration, setSelectedIteration] = useState(0);
+
+    return (
+        <div className="space-y-6">
+            {/* Series Navigation */}
+            <div className="glass-card p-6">
+                <h3 className="text-xl font-bold text-white mb-4 text-center">Series Chapters</h3>
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+                    {comicSeries.iterations.map((iteration, index) => (
+                        <button
+                            key={iteration.id}
+                            onClick={() => setSelectedIteration(index)}
+                            className={`p-4 rounded-lg transition-all duration-300 ${
+                                selectedIteration === index
+                                    ? 'bg-white/20 border-2 border-white/50'
+                                    : 'bg-white/10 hover:bg-white/15 border-2 border-transparent'
+                            }`}
+                        >
+                            <div className="text-white font-semibold">Chapter {index + 1}</div>
+                            <div className="text-white/80 text-sm mt-1">{iteration.title}</div>
+                            <div className="text-white/60 text-xs mt-1">{iteration.images.length} pages</div>
+                        </button>
+                    ))}
+                </div>
+            </div>
+
+            {/* Selected Chapter Preview */}
+            <div className="panel-grid">
+                {comicSeries.iterations[selectedIteration].images.map((imgData, index) => (
+                    <div key={index} className="panel-item group">
+                        <div className="relative overflow-hidden">
+                            <img
+                                src={`data:image/jpeg;base64,${imgData}`}
+                                alt={`Chapter ${selectedIteration + 1} Page ${index + 1}`}
+                                className="w-full h-auto object-contain transition-transform duration-500 group-hover:scale-105"
+                            />
+                            <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                            <div className="absolute bottom-4 left-4 right-4 transform translate-y-8 group-hover:translate-y-0 transition-transform duration-300">
+                                <div className="bg-white/20 backdrop-blur-sm rounded-lg px-3 py-2">
+                                    <p className="text-white font-semibold text-sm">
+                                        Chapter {selectedIteration + 1} - Page {index + 1}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="p-4">
+                            <h3 className="text-white font-semibold">
+                                Page {index + 1}
+                            </h3>
+                            <p className="text-white/70 text-sm mt-1">
+                                {comicSeries.iterations[selectedIteration].title}
+                            </p>
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {/* Series Stats */}
+            <div className="glass-card p-6">
+                <div className="flex justify-center items-center gap-8 text-center">
+                    <div>
+                        <div className="text-2xl font-bold text-white">{comicSeries.iterations.length}</div>
+                        <div className="text-white/70 text-sm">Chapters</div>
+                    </div>
+                    <div className="h-8 w-px bg-white/20"></div>
+                    <div>
+                        <div className="text-2xl font-bold text-white">{comicSeries.totalPages}</div>
+                        <div className="text-white/70 text-sm">Total Pages</div>
+                    </div>
+                    <div className="h-8 w-px bg-white/20"></div>
+                    <div>
+                        <div className="text-2xl font-bold text-white">📚</div>
+                        <div className="text-white/70 text-sm">Complete Series</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ComicSeriesManager;

components/EnhancedLoadingIndicator.tsx

@@ -0,0 +1,218 @@
+import React, { useState, memo } from 'react';
+import LazyImage from './LazyImage';
+import type { GenerationProgress } from '../types';
+
+interface EnhancedLoadingIndicatorProps {
+    generationProgress: GenerationProgress;
+}
+
+const EnhancedLoadingIndicator: React.FC<EnhancedLoadingIndicatorProps> = memo(({ generationProgress }) => {
+    const [selectedSketchIndex, setSelectedSketchIndex] = useState(0);
+    const [selectedPageIndex, setSelectedPageIndex] = useState(0);
+
+    const getPhaseInfo = (phase: GenerationProgress['phase']) => {
+        switch (phase) {
+            case 'character_analysis':
+                return { icon: '🧠', title: 'Character Analysis', description: 'AI is analyzing your story and developing character personalities' };
+            case 'character_sketches':
+                return { icon: '🎨', title: 'Character Design', description: 'Creating visual designs for your main characters' };
+            case 'environment_sketches':
+                return { icon: '🏞️', title: 'Environment Design', description: 'Designing key locations and settings for your story' };
+            case 'script_writing':
+                return { icon: '📝', title: 'Script Writing', description: 'Writing professional manga script with panel layouts' };
+            case 'page_generation':
+                return { icon: '🖼️', title: 'Page Generation', description: 'Bringing your story to life with stunning artwork' };
+            case 'completion':
+                return { icon: '✨', title: 'Finalizing', description: 'Adding finishing touches and analyzing story arc' };
+            default:
+                return { icon: '🔄', title: 'Processing', description: 'Working on your comic...' };
+        }
+    };
+
+    const phaseInfo = getPhaseInfo(generationProgress.phase);
+
+    return (
+        <div className="min-h-screen flex items-center justify-center py-8">
+            <div className="max-w-6xl mx-auto px-4">
+                {/* Main Loading Header */}
+                <div className="glass-card p-8 mb-8 text-center animate-fade-in">
+                    <div className="text-6xl mb-4 animate-pulse-slow">{phaseInfo.icon}</div>
+                    <h2 className="text-3xl font-bold text-white mb-2">{phaseInfo.title}</h2>
+                    <p className="text-white/80 text-lg mb-6">{generationProgress.message}</p>
+                    <p className="text-white/60 text-sm mb-4">{phaseInfo.description}</p>
+                    
+                    {/* Progress Bar */}
+                    <div className="w-full bg-white/20 rounded-full h-6 mb-4 overflow-hidden">
+                        <div 
+                            className="h-6 rounded-full transition-all duration-1000 ease-out bg-gradient-to-r from-gray-300 via-white to-gray-400 relative overflow-hidden"
+                            style={{ width: `${generationProgress.progress}%` }}
+                        >
+                            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-pulse"></div>
+                        </div>
+                    </div>
+                    <div className="text-white/70 text-sm">
+                        {generationProgress.progress}% Complete
+                    </div>
+                </div>
+
+                {/* Character Sketches Display */}
+                {generationProgress.characterSketches && generationProgress.characterSketches.length > 0 && (
+                    <div className="glass-card p-8 mb-8 animate-fade-in">
+                        <h3 className="text-2xl font-bold text-white mb-6 text-center">
+                            🎭 Character Designs
+                        </h3>
+                        
+                        {/* Character Selection */}
+                        <div className="flex justify-center mb-6">
+                            <div className="flex gap-2 bg-white/10 backdrop-blur-sm rounded-xl p-3">
+                                {generationProgress.characterSketches.map((character, index) => (
+                                    <button
+                                        key={index}
+                                        onClick={() => setSelectedSketchIndex(index)}
+                                        className={`px-4 py-2 rounded-lg transition-all duration-300 font-medium ${
+                                            selectedSketchIndex === index
+                                                ? 'bg-white/30 text-white scale-105 shadow-lg'
+                                                : 'bg-white/10 text-white/80 hover:bg-white/20 hover:scale-102'
+                                        }`}
+                                    >
+                                        {character.characterName}
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+
+                        {/* Selected Character Display */}
+                        <div className="flex flex-col lg:flex-row gap-8 items-center">
+                            <div className="flex-1 max-w-md">
+                                <div className="glass rounded-xl p-4">
+                                    <LazyImage
+                                        src={generationProgress.characterSketches[selectedSketchIndex].sketchImage}
+                                        alt={generationProgress.characterSketches[selectedSketchIndex].characterName}
+                                        className="w-full rounded-lg shadow-lg"
+                                        quality="compressed"
+                                    />
+                                </div>
+                            </div>
+                            <div className="flex-1 glass rounded-xl p-6">
+                                <h4 className="text-2xl font-bold text-white mb-4 gradient-text">
+                                    {generationProgress.characterSketches[selectedSketchIndex].characterName}
+                                </h4>
+                                <p className="text-white/80 leading-relaxed text-sm">
+                                    {generationProgress.characterSketches[selectedSketchIndex].description}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                {/* Environment Sketches Display */}
+                {generationProgress.environmentSketches && generationProgress.environmentSketches.length > 0 && (
+                    <div className="glass-card p-8 mb-8 animate-fade-in">
+                        <h3 className="text-2xl font-bold text-white mb-6 text-center">
+                            🏗️ Environment Designs
+                        </h3>
+                        
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                            {generationProgress.environmentSketches.map((environment, index) => (
+                                <div key={index} className="glass-card hover:scale-102 transition-all duration-300">
+                                    <div className="aspect-video mb-4 overflow-hidden rounded-lg">
+                                        <LazyImage
+                                            src={environment.sketchImage}
+                                            alt={environment.environmentName}
+                                            className="w-full h-full object-cover"
+                                            quality="compressed"
+                                        />
+                                    </div>
+                                    <h4 className="text-lg font-bold text-white mb-2 gradient-text-subtle">
+                                        {environment.environmentName}
+                                    </h4>
+                                    <p className="text-white/70 text-sm leading-relaxed">
+                                        {environment.description}
+                                    </p>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+
+                {/* Generated Pages Display */}
+                {generationProgress.generatedPages && generationProgress.generatedPages.length > 0 && (
+                    <div className="glass-card p-8 mb-8 animate-fade-in">
+                        <h3 className="text-2xl font-bold text-white mb-6 text-center">
+                            📚 Pages Generated
+                        </h3>
+                        
+                        {/* Page Navigation */}
+                        <div className="flex justify-center mb-6">
+                            <div className="flex gap-2 glass-card p-3 max-w-full overflow-x-auto">
+                                {generationProgress.generatedPages.map((page, index) => (
+                                    <button
+                                        key={index}
+                                        onClick={() => setSelectedPageIndex(index)}
+                                        className={`px-4 py-2 rounded-lg transition-all duration-300 whitespace-nowrap font-medium ${
+                                            selectedPageIndex === index
+                                                ? 'bg-white/30 text-white scale-105 shadow-lg'
+                                                : 'bg-white/10 text-white/80 hover:bg-white/20 hover:scale-102'
+                                        }`}
+                                    >
+                                        Page {index + 1}
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+
+                        {/* Selected Page Display */}
+                        <div className="text-center">
+                            <div className="max-w-md mx-auto glass rounded-xl p-4">
+                                <LazyImage
+                                    src={generationProgress.generatedPages[selectedPageIndex].image}
+                                    alt={generationProgress.generatedPages[selectedPageIndex].title}
+                                    className="w-full rounded-lg shadow-lg mb-4 hover:scale-105 transition-transform duration-300 cursor-pointer"
+                                    quality="compressed"
+                                />
+                                <h4 className="text-lg font-bold text-white gradient-text-subtle">
+                                    {generationProgress.generatedPages[selectedPageIndex].title}
+                                </h4>
+                            </div>
+                        </div>
+                        
+                        {/* Progress Summary */}
+                        <div className="mt-6 text-center">
+                            <p className="text-white/70">
+                                Generated {generationProgress.generatedPages.length} page{generationProgress.generatedPages.length !== 1 ? 's' : ''} so far
+                            </p>
+                        </div>
+                    </div>
+                )}
+
+                {/* Story Arc Summary Display */}
+                {generationProgress.storyArcSummary && (
+                    <div className="glass-card p-8 animate-fade-in">
+                        <h3 className="text-2xl font-bold text-white mb-6 text-center">
+                            📖 Story Arc Summary
+                        </h3>
+                        
+                        <div className="glass p-6 rounded-xl">
+                            <div className="text-white/80 leading-relaxed text-sm space-y-4">
+                                {generationProgress.storyArcSummary.split('\n\n').map((section, index) => (
+                                    <div key={index} className="bg-white/5 rounded-lg p-4">
+                                        <p className="whitespace-pre-wrap">{section.trim()}</p>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                {/* Spinner for ongoing processes */}
+                {generationProgress.progress < 100 && (
+                    <div className="flex justify-center mt-8">
+                        <div className="spinner"></div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+});
+
+export default EnhancedLoadingIndicator;

components/ExpandableImageModal.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect } from 'react';
+
+interface ExpandableImageModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    imageData: string;
+    title: string;
+    description?: string;
+}
+
+const ExpandableImageModal: React.FC<ExpandableImageModalProps> = ({
+    isOpen,
+    onClose,
+    imageData,
+    title,
+    description
+}) => {
+    // Handle escape key press
+    useEffect(() => {
+        const handleEscape = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+            // Prevent body scrolling when modal is open
+            document.body.style.overflow = 'hidden';
+        }
+
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'unset';
+        };
+    }, [isOpen, onClose]);
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+            {/* Backdrop */}
+            <div 
+                className="absolute inset-0 bg-black/80 backdrop-blur-sm"
+                onClick={onClose}
+            />
+            
+            {/* Modal Content */}
+            <div className="relative z-10 max-w-6xl max-h-full w-full glass-card p-6 animate-fade-in">
+                {/* Close Button */}
+                <button
+                    onClick={onClose}
+                    className="absolute top-4 right-4 z-20 w-10 h-10 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition-all duration-300"
+                >
+                    <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+
+                {/* Title */}
+                <div className="mb-4">
+                    <h2 className="text-2xl font-bold text-white">{title}</h2>
+                    {description && (
+                        <p className="text-white/70 mt-2">{description}</p>
+                    )}
+                </div>
+
+                {/* Image Container */}
+                <div className="flex justify-center items-center max-h-[80vh] overflow-hidden rounded-lg">
+                    <img
+                        src={`data:image/jpeg;base64,${imageData}`}
+                        alt={title}
+                        className="max-w-full max-h-full object-contain rounded-lg shadow-lg"
+                        style={{ maxHeight: 'calc(80vh - 100px)' }}
+                    />
+                </div>
+
+                {/* Controls */}
+                <div className="flex justify-center mt-4 space-x-4">
+                    <button
+                        onClick={() => {
+                            const link = document.createElement('a');
+                            link.href = `data:image/jpeg;base64,${imageData}`;
+                            link.download = `${title.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.jpg`;
+                            link.click();
+                        }}
+                        className="btn-secondary px-4 py-2 text-sm hover:scale-105 transition-all duration-300"
+                    >
+                        📥 Download Image
+                    </button>
+                    <button
+                        onClick={onClose}
+                        className="btn-primary px-4 py-2 text-sm hover:scale-105 transition-all duration-300"
+                    >
+                        Close
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ExpandableImageModal;

components/ExplorationPrompt.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import type { ExplorationPrompt } from '../types';
+
+const ExplorationPromptComponent: React.FC<ExplorationPrompt> = ({
+    showPrompt,
+    onContinue,
+    onFinish,
+    generationTime,
+    totalPages
+}) => {
+    if (!showPrompt) return null;
+
+    const formatTime = (milliseconds: number): string => {
+        const seconds = Math.floor(milliseconds / 1000);
+        const minutes = Math.floor(seconds / 60);
+        const remainingSeconds = seconds % 60;
+        
+        if (minutes > 0) {
+            return `${minutes}m ${remainingSeconds}s`;
+        }
+        return `${remainingSeconds}s`;
+    };
+
+    const handleDownloadFinish = () => {
+        // Trigger PDF download without any API key removal
+        onFinish(false);
+    };
+
+    return (
+        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 animate-fade-in">
+            <div className="glass-card p-8 max-w-lg mx-4 animate-slide-in">
+                {/* Main Exploration Prompt */}
+                <div className="text-center mb-8">
+                    <div className="text-4xl mb-4">🎉</div>
+                    <h2 className="text-2xl font-bold text-white mb-4">
+                        Comic Generation Complete!
+                    </h2>
+                    <div className="glass rounded-lg p-4 mb-6">
+                        <div className="grid grid-cols-2 gap-4 text-center">
+                            <div>
+                                <div className="text-xl font-bold text-white">{totalPages}</div>
+                                <div className="text-white/70 text-sm">Pages Created</div>
+                            </div>
+                            <div>
+                                <div className="text-xl font-bold text-white">{formatTime(generationTime)}</div>
+                                <div className="text-white/70 text-sm">Generation Time</div>
+                            </div>
+                        </div>
+                    </div>
+                    <p className="text-white/80 mb-2">
+                        Would you like to continue exploring story progressions?
+                    </p>
+                    <p className="text-white/60 text-sm">
+                        You can create sequels, prequels, side stories, or alternate endings!
+                    </p>
+                </div>
+
+                {/* Action Buttons */}
+                <div className="space-y-4">
+                    <button
+                        onClick={onContinue}
+                        className="w-full btn-primary text-lg font-bold py-4 px-6 hover:scale-105 transition-all duration-300"
+                    >
+                        🚀 Yes, Continue Exploring!
+                    </button>
+                    
+                    <button
+                        onClick={handleDownloadFinish}
+                        className="w-full btn-secondary py-3 px-6 hover:scale-105 transition-all duration-300"
+                    >
+                        📥 No, Download & Finish
+                    </button>
+                </div>
+
+                {/* Privacy Info */}
+                <div className="mt-6 glass p-3 rounded-lg">
+                    <p className="text-white/60 text-xs text-center">
+                        🛡️ Your API key is stored locally in your browser only and never sent to our servers
+                    </p>
+                </div>
+
+                {/* Info */}
+                <div className="mt-4 text-center">
+                    <p className="text-white/50 text-xs">
+                        💡 Continuing will analyze your story and suggest new directions
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ExplorationPromptComponent;

components/LazyImage.tsx

@@ -0,0 +1,105 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { createLazyLoader } from '../utils/imageOptimization';
+
+interface LazyImageProps {
+    src: string;
+    alt: string;
+    className?: string;
+    fallbackClassName?: string;
+    onLoad?: () => void;
+    onError?: () => void;
+    quality?: 'compressed' | 'full';
+}
+
+const LazyImage: React.FC<LazyImageProps> = ({
+    src,
+    alt,
+    className = '',
+    fallbackClassName = 'bg-white/10 animate-pulse',
+    onLoad,
+    onError,
+    quality = 'compressed'
+}) => {
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [hasError, setHasError] = useState(false);
+    const imgRef = useRef<HTMLImageElement>(null);
+    const observerRef = useRef<IntersectionObserver | null>(null);
+
+    useEffect(() => {
+        if (!imgRef.current) return;
+
+        // Create lazy loader
+        observerRef.current = createLazyLoader({
+            rootMargin: '100px',
+            threshold: 0.1
+        }) as IntersectionObserver;
+
+        // Set up lazy loading
+        const img = imgRef.current;
+        img.dataset.src = `data:image/jpeg;base64,${src}`;
+        img.classList.add('lazy');
+
+        // Observe the image
+        if (observerRef.current) {
+            observerRef.current.observe(img);
+        }
+
+        return () => {
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+            }
+        };
+    }, [src]);
+
+    const handleLoad = () => {
+        setIsLoaded(true);
+        setHasError(false);
+        onLoad?.();
+    };
+
+    const handleError = () => {
+        setHasError(true);
+        setIsLoaded(false);
+        onError?.();
+    };
+
+    return (
+        <div className="relative overflow-hidden">
+            {/* Loading placeholder */}
+            {!isLoaded && !hasError && (
+                <div className={`absolute inset-0 ${fallbackClassName} flex items-center justify-center`}>
+                    <div className="flex flex-col items-center space-y-2">
+                        <div className="spinner w-6 h-6"></div>
+                        <span className="text-white/60 text-xs">Loading...</span>
+                    </div>
+                </div>
+            )}
+
+            {/* Error placeholder */}
+            {hasError && (
+                <div className={`absolute inset-0 bg-red-500/20 flex items-center justify-center`}>
+                    <div className="flex flex-col items-center space-y-2 text-red-300">
+                        <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+                            <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                        </svg>
+                        <span className="text-xs">Failed to load</span>
+                    </div>
+                </div>
+            )}
+
+            {/* Actual image */}
+            <img
+                ref={imgRef}
+                alt={alt}
+                className={`transition-opacity duration-500 ${
+                    isLoaded ? 'opacity-100' : 'opacity-0'
+                } ${className}`}
+                onLoad={handleLoad}
+                onError={handleError}
+                loading="lazy"
+            />
+        </div>
+    );
+};
+
+export default LazyImage;

components/LoadingIndicator.tsx

@@ -33,7 +33,7 @@ const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({ loadingState }) =>
                     </div>
                     
                     {/* Progress Bar */}
-                    <div className="w-full bg-white/20 rounded-full h-6 overflow-hidden backdrop-blur-sm">
+                    <div className="w-full bg-white/20 rounded-full h-6 overflow-hidden">
                         <div
                             className="h-6 rounded-full transition-all duration-1000 ease-out bg-gradient-to-r from-gray-300 via-white to-gray-400 relative overflow-hidden"
                             style={{ width: `${loadingState.progress}%` }}
@@ -59,14 +59,14 @@ const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({ loadingState }) =>
                         ].map((item, index) => (
                             <div
                                 key={index}
-                                className={`p-4 rounded-lg border transition-all duration-500 ${
+                                className={`glass rounded-xl p-4 transition-all duration-500 ${
                                     item.active 
-                                        ? 'bg-white/20 border-white/40 text-white' 
+                                        ? 'bg-white/20 border-white/40 text-white scale-105 shadow-lg' 
                                         : 'bg-white/5 border-white/10 text-white/50'
                                 }`}
                             >
-                                <div className="text-2xl mb-2">{item.icon}</div>
-                                <div className="text-sm font-medium">{item.step}</div>
+                                <div className="text-3xl mb-3 ${item.active ? 'animate-pulse-slow' : ''}">{item.icon}</div>
+                                <div className="text-sm font-semibold">{item.step}</div>
                             </div>
                         ))}
                     </div>
@@ -74,12 +74,14 @@ const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({ loadingState }) =>
 
                 {/* Footer */}
                 <div className="pt-6 border-t border-white/10">
-                    <p className="text-sm text-white/60">
-                        ⚡ Powered by advanced AI • Crafting your unique visual story
-                    </p>
-                    <p className="text-xs text-white/40 mt-2">
-                        Each page is being carefully composed with professional comic techniques
-                    </p>
+                    <div className="glass-card p-4 text-center">
+                        <p className="text-sm text-white/70 font-medium">
+                            ⚡ Powered by Google Gemini 2.5 Flash • Professional Comic Creation
+                        </p>
+                        <p className="text-xs text-white/50 mt-2">
+                            Each page is carefully composed with advanced AI artistry
+                        </p>
+                    </div>
                 </div>
             </div>
         </div>

components/PerformanceSummary.tsx

@@ -0,0 +1,119 @@
+import React, { memo } from 'react';
+import type { PerformanceTiming } from '../types';
+
+interface PerformanceSummaryProps {
+    timings: PerformanceTiming[];
+    totalTime: number;
+    totalPages: number;
+}
+
+const PerformanceSummary: React.FC<PerformanceSummaryProps> = memo(({ 
+    timings, 
+    totalTime, 
+    totalPages 
+}) => {
+    if (timings.length === 0) return null;
+
+    const formatTime = (ms: number): string => {
+        if (ms >= 60000) {
+            const minutes = Math.floor(ms / 60000);
+            const seconds = Math.floor((ms % 60000) / 1000);
+            return `${minutes}m ${seconds}s`;
+        }
+        return `${(ms / 1000).toFixed(1)}s`;
+    };
+
+    const getPerformanceClass = (duration: number, stepName: string): string => {
+        // Define performance thresholds based on step type
+        let threshold = { good: 10000, poor: 30000 }; // default
+        
+        if (stepName.includes('analysis') || stepName.includes('script')) {
+            threshold = { good: 15000, poor: 45000 };
+        } else if (stepName.includes('generation') || stepName.includes('page')) {
+            threshold = { good: 60000, poor: 120000 };
+        } else if (stepName.includes('sketch')) {
+            threshold = { good: 20000, poor: 60000 };
+        }
+        
+        if (duration <= threshold.good) return 'perf-excellent';
+        if (duration <= threshold.poor) return 'perf-good';
+        return 'perf-poor';
+    };
+
+    const averageTimePerPage = totalPages > 0 ? totalTime / totalPages : 0;
+
+    return (
+        <div className="glass-card p-6 animate-fade-in">
+            <h3 className="text-lg font-bold text-white mb-4 flex items-center">
+                📊 Performance Summary
+            </h3>
+            
+            {/* Overall Stats */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                <div className="glass rounded-lg p-4 text-center">
+                    <div className="text-2xl font-bold text-white">{formatTime(totalTime)}</div>
+                    <div className="text-white/70 text-sm">Total Time</div>
+                </div>
+                <div className="glass rounded-lg p-4 text-center">
+                    <div className="text-2xl font-bold text-white">{totalPages}</div>
+                    <div className="text-white/70 text-sm">Pages Generated</div>
+                </div>
+                <div className="glass rounded-lg p-4 text-center">
+                    <div className="text-2xl font-bold text-white">{formatTime(averageTimePerPage)}</div>
+                    <div className="text-white/70 text-sm">Avg per Page</div>
+                </div>
+            </div>
+            
+            {/* Step Breakdown */}
+            <div className="space-y-2">
+                <h4 className="text-sm font-semibold text-white/90 mb-3">Generation Steps</h4>
+                {timings.map((timing, index) => {
+                    const percentage = totalTime > 0 ? (timing.duration / totalTime) * 100 : 0;
+                    const perfClass = getPerformanceClass(timing.duration, timing.stepName);
+                    
+                    return (
+                        <div key={index} className="flex items-center justify-between py-2 px-3 glass rounded-lg">
+                            <div className="flex-1">
+                                <div className="flex items-center justify-between">
+                                    <span className="text-white/90 text-sm font-medium">
+                                        {timing.stepName.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
+                                    </span>
+                                    <div className="flex items-center space-x-2">
+                                        <span className={`text-sm font-semibold ${perfClass}`}>
+                                            {formatTime(timing.duration)}
+                                        </span>
+                                        <span className="text-white/50 text-xs">
+                                            {percentage.toFixed(1)}%
+                                        </span>
+                                    </div>
+                                </div>
+                                {/* Progress bar */}
+                                <div className="mt-2 w-full bg-white/10 rounded-full h-1.5">
+                                    <div 
+                                        className={`h-1.5 rounded-full transition-all duration-500 ${
+                                            perfClass === 'perf-excellent' ? 'bg-green-500' :
+                                            perfClass === 'perf-good' ? 'bg-yellow-500' : 'bg-red-500'
+                                        }`}
+                                        style={{ width: `${percentage}%` }}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+            
+            {/* Performance Tips */}
+            <div className="mt-4 p-3 bg-white/5 rounded-lg">
+                <h5 className="text-xs font-semibold text-white/80 mb-2">💡 Performance Tips</h5>
+                <div className="text-xs text-white/60 space-y-1">
+                    <div>• Generation time depends on story complexity and API response time</div>
+                    <div>• Character sketches improve consistency but add generation time</div>
+                    <div>• Simpler stories with fewer characters generate faster</div>
+                </div>
+            </div>
+        </div>
+    );
+});
+
+export default PerformanceSummary;

components/StoryInput.tsx

@@ -12,6 +12,8 @@ interface StoryInputProps {
     onStyleChange: (style: MangaStyle) => void;
     onGenerate: () => void;
     disabled: boolean;
+    includeDialogue: boolean;
+    onDialogueToggle: (include: boolean) => void;
 }
 
 const styles: { name: MangaStyle; description: string; color: string }[] = [
@@ -80,7 +82,7 @@ const storyTemplates: StoryTemplate[] = [
     }
 ];
 
-const StoryInput: React.FC<StoryInputProps> = ({ title, onTitleChange, story, onStoryChange, author, onAuthorChange, style, onStyleChange, onGenerate, disabled }) => {
+const StoryInput: React.FC<StoryInputProps> = ({ title, onTitleChange, story, onStoryChange, author, onAuthorChange, style, onStyleChange, onGenerate, disabled, includeDialogue, onDialogueToggle }) => {
     const [selectedTemplate, setSelectedTemplate] = useState<string>('custom');
     const [showAdvanced, setShowAdvanced] = useState(false);
 
@@ -191,6 +193,35 @@ const StoryInput: React.FC<StoryInputProps> = ({ title, onTitleChange, story, on
                     />
                 </div>
                 
+                {/* Dialogue Toggle Section */}
+                <div className="space-y-4">
+                    <h3 className="text-lg font-semibold text-white/90 flex items-center">
+                        💬 Text Options
+                    </h3>
+                    <div className="glass-card p-4">
+                        <div className="flex items-center justify-between">
+                            <div className="flex-1">
+                                <h4 className="text-white font-semibold mb-1">Include Dialogue & Text</h4>
+                                <p className="text-white/70 text-sm">
+                                    {includeDialogue 
+                                        ? 'AI will generate dialogue and text within speech bubbles' 
+                                        : 'Generate visual panels only - you can add text manually later'}
+                                </p>
+                            </div>
+                            <label className="relative inline-flex items-center cursor-pointer ml-4">
+                                <input
+                                    type="checkbox"
+                                    checked={includeDialogue}
+                                    onChange={(e) => onDialogueToggle(e.target.checked)}
+                                    disabled={disabled}
+                                    className="sr-only peer"
+                                />
+                                <div className="w-14 h-8 bg-white/20 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-6 peer-checked:after:border-white after:content-[''] after:absolute after:top-1 after:left-1 after:bg-white after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600"></div>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+                
                 <div className="space-y-4">
                     <h3 className="text-lg font-semibold text-white/90 flex items-center">
                         🎨 Art Style

components/StoryProgressionSelector.tsx

@@ -0,0 +1,324 @@
+import React, { useState } from 'react';
+import type { StoryProgression, StoryArcSummary, ComicIteration } from '../types';
+
+interface StoryProgressionSelectorProps {
+    progressions: StoryProgression[];
+    onProgressionSelect: (progression: StoryProgression) => void;
+    onSkip: () => void;
+    disabled: boolean;
+    currentIteration?: ComicIteration;
+    storyArcSummary?: StoryArcSummary | null;
+}
+
+const getProgressionIcon = (direction: StoryProgression['direction']): string => {
+    switch (direction) {
+        case 'sequel': return '⏭️';
+        case 'prequel': return '⏮️';
+        case 'side_story': return '🔀';
+        case 'alternate_ending': return '🔄';
+        default: return '📖';
+    }
+};
+
+const getProgressionColor = (direction: StoryProgression['direction']): string => {
+    switch (direction) {
+        case 'sequel': return 'from-blue-500 to-cyan-500';
+        case 'prequel': return 'from-purple-500 to-violet-500';
+        case 'side_story': return 'from-green-500 to-emerald-500';
+        case 'alternate_ending': return 'from-orange-500 to-red-500';
+        default: return 'from-gray-500 to-gray-600';
+    }
+};
+
+const getDirectionLabel = (direction: StoryProgression['direction']): string => {
+    switch (direction) {
+        case 'sequel': return 'Sequel';
+        case 'prequel': return 'Prequel';
+        case 'side_story': return 'Side Story';
+        case 'alternate_ending': return 'Alternate Ending';
+        default: return 'Story';
+    }
+};
+
+const StoryProgressionSelector: React.FC<StoryProgressionSelectorProps> = ({
+    progressions,
+    onProgressionSelect,
+    onSkip,
+    disabled,
+    currentIteration,
+    storyArcSummary
+}) => {
+    const [selectedProgression, setSelectedProgression] = useState<StoryProgression | null>(null);
+
+    const handleSelect = (progression: StoryProgression) => {
+        if (!disabled) {
+            setSelectedProgression(progression);
+        }
+    };
+
+    const handleConfirm = () => {
+        if (selectedProgression) {
+            onProgressionSelect(selectedProgression);
+        }
+    };
+
+    return (
+        <div className="space-y-8 animate-fade-in">
+            {/* Header Section */}
+            <div className="glass-card p-8">
+                <div className="text-center">
+                    <h2 className="text-4xl font-bold text-white mb-4">
+                        📚 Continue Your Story
+                    </h2>
+                    <p className="text-xl text-white/80 mb-2">
+                        Your comic is complete! Would you like to continue the adventure?
+                    </p>
+                    <p className="text-white/60">
+                        Choose one of these professionally crafted story progressions to expand your comic into a series
+                    </p>
+                </div>
+            </div>
+
+            {/* Story Till Now Section - Compact */}
+            {storyArcSummary && (
+                <div className="glass-card p-6">
+                    <h3 className="text-lg font-bold text-white mb-4 text-center gradient-text">
+                        📖 Story Till Now
+                    </h3>
+                    
+                    {/* Compact Single Row Layout */}
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                        {/* Theme */}
+                        <div className="glass rounded-lg p-4">
+                            <div className="flex items-center space-x-2 mb-2">
+                                <span className="text-xl">🎯</span>
+                                <h4 className="text-sm font-bold text-white">Theme</h4>
+                            </div>
+                            <p className="text-white/70 text-xs leading-tight">
+                                {storyArcSummary.overallTheme.length > 80 
+                                    ? `${storyArcSummary.overallTheme.slice(0, 80)}...` 
+                                    : storyArcSummary.overallTheme}
+                            </p>
+                        </div>
+
+                        {/* Key Events */}
+                        <div className="glass rounded-lg p-4">
+                            <div className="flex items-center space-x-2 mb-2">
+                                <span className="text-xl">🎬</span>
+                                <h4 className="text-sm font-bold text-white">Key Events</h4>
+                            </div>
+                            <div className="space-y-1">
+                                {storyArcSummary.keyEvents.slice(0, 2).map((event, index) => (
+                                    <div key={index} className="text-white/70 text-xs flex items-start">
+                                        <span className="text-white/50 mr-1 mt-0.5">•</span>
+                                        <span>{event.length > 40 ? `${event.slice(0, 40)}...` : event}</span>
+                                    </div>
+                                ))}
+                                {storyArcSummary.keyEvents.length > 2 && (
+                                    <div className="text-white/50 text-xs italic">
+                                        +{storyArcSummary.keyEvents.length - 2} more
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+
+                        {/* Character Growth */}
+                        <div className="glass rounded-lg p-4">
+                            <div className="flex items-center space-x-2 mb-2">
+                                <span className="text-xl">👥</span>
+                                <h4 className="text-sm font-bold text-white">Growth</h4>
+                            </div>
+                            <div className="space-y-1">
+                                {storyArcSummary.characterDevelopment.slice(0, 2).map((dev, index) => (
+                                    <div key={index} className="text-white/70 text-xs flex items-start">
+                                        <span className="text-white/50 mr-1 mt-0.5">•</span>
+                                        <span>{dev.length > 40 ? `${dev.slice(0, 40)}...` : dev}</span>
+                                    </div>
+                                ))}
+                                {storyArcSummary.characterDevelopment.length > 2 && (
+                                    <div className="text-white/50 text-xs italic">
+                                        +{storyArcSummary.characterDevelopment.length - 2} more
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Current Story Stats - Compact */}
+                    {currentIteration && (
+                        <div className="glass rounded-lg p-4">
+                            <div className="flex justify-center items-center gap-6 text-center">
+                                <div>
+                                    <div className="text-xl font-bold text-white">{currentIteration.images.length}</div>
+                                    <div className="text-white/70 text-xs font-medium">Pages</div>
+                                </div>
+                                <div className="h-6 w-px bg-white/20"></div>
+                                <div>
+                                    <div className="text-xl font-bold text-white">{currentIteration.characters.length}</div>
+                                    <div className="text-white/70 text-xs font-medium">Characters</div>
+                                </div>
+                                <div className="h-6 w-px bg-white/20"></div>
+                                <div>
+                                    <div className="text-xl font-bold text-white">{currentIteration.pages.length}</div>
+                                    <div className="text-white/70 text-xs font-medium">Scenes</div>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {/* Progression Options */}
+            <div className="space-y-6">
+                <h3 className="text-2xl font-bold text-white text-center">
+                    🎭 Story Progression Options
+                </h3>
+                
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    {progressions.map((progression, index) => (
+                        <div
+                            key={progression.id}
+                            onClick={() => handleSelect(progression)}
+                            className={`progression-card cursor-pointer ${
+                                selectedProgression?.id === progression.id
+                                    ? 'selected ring-2 ring-white/50 scale-105'
+                                    : 'hover:bg-white/20 hover:scale-102'
+                            } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+                        >
+                            {/* Header */}
+                            <div className="flex items-center justify-between mb-4">
+                                <div className={`px-3 py-1 rounded-full text-sm font-semibold bg-gradient-to-r ${getProgressionColor(progression.direction)} text-white`}>
+                                    {getProgressionIcon(progression.direction)} {getDirectionLabel(progression.direction)}
+                                </div>
+                                <div className="text-white/60 text-sm">
+                                    ~{progression.estimatedPages} pages
+                                </div>
+                            </div>
+
+                            {/* Title */}
+                            <h4 className="text-xl font-bold text-white mb-3">
+                                {progression.title}
+                            </h4>
+
+                            {/* Description */}
+                            <p className="text-white/80 text-sm mb-4 leading-relaxed">
+                                {progression.description}
+                            </p>
+
+                            {/* Synopsis */}
+                            <div className="bg-white/10 rounded-lg p-3 mb-4">
+                                <h5 className="text-white font-semibold text-sm mb-2">📖 Synopsis</h5>
+                                <p className="text-white/70 text-xs leading-relaxed">
+                                    {progression.synopsis}
+                                </p>
+                            </div>
+
+                            {/* Thematic Focus */}
+                            <div className="mb-4">
+                                <h5 className="text-white font-semibold text-sm mb-2">🎯 Focus</h5>
+                                <p className="text-white/70 text-xs">
+                                    {progression.thematicFocus}
+                                </p>
+                            </div>
+
+                            {/* Plot Hooks */}
+                            <div className="mb-4">
+                                <h5 className="text-white font-semibold text-sm mb-2">🪝 Key Elements</h5>
+                                <div className="flex flex-wrap gap-1">
+                                    {progression.plotHooks.slice(0, 3).map((hook, hookIndex) => (
+                                        <span
+                                            key={hookIndex}
+                                            className="bg-white/20 text-white/80 text-xs px-2 py-1 rounded-full"
+                                        >
+                                            {hook.length > 20 ? `${hook.slice(0, 20)}...` : hook}
+                                        </span>
+                                    ))}
+                                </div>
+                            </div>
+
+                            {/* New Characters */}
+                            {progression.newCharacters && progression.newCharacters.length > 0 && (
+                                <div>
+                                    <h5 className="text-white font-semibold text-sm mb-2">👥 New Characters</h5>
+                                    <div className="flex flex-wrap gap-1">
+                                        {progression.newCharacters.slice(0, 3).map((character, charIndex) => (
+                                            <span
+                                                key={charIndex}
+                                                className="bg-gradient-to-r from-yellow-400/20 to-orange-400/20 text-yellow-100 text-xs px-2 py-1 rounded-full"
+                                            >
+                                                {character}
+                                            </span>
+                                        ))}
+                                        {progression.newCharacters.length > 3 && (
+                                            <span className="text-white/60 text-xs px-2 py-1">
+                                                +{progression.newCharacters.length - 3} more
+                                            </span>
+                                        )}
+                                    </div>
+                                </div>
+                            )}
+
+                            {/* Selection Indicator */}
+                            {selectedProgression?.id === progression.id && (
+                                <div className="absolute top-4 right-4 w-6 h-6 bg-white rounded-full flex items-center justify-center">
+                                    <svg className="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
+                                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                                    </svg>
+                                </div>
+                            )}
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            {/* Action Buttons */}
+            <div className="glass-card p-8">
+                <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
+                    <button
+                        onClick={handleConfirm}
+                        disabled={disabled || !selectedProgression}
+                        className={`btn-primary px-8 py-4 text-lg font-bold disabled:opacity-50 disabled:cursor-not-allowed ${
+                            !disabled && selectedProgression ? 'hover:scale-105' : ''
+                        } transition-all duration-300`}
+                    >
+                        {disabled ? (
+                            <span className="flex items-center">
+                                <div className="spinner mr-3"></div>
+                                Generating Continuation...
+                            </span>
+                        ) : selectedProgression ? (
+                            <span className="flex items-center">
+                                🚀 Continue with "{selectedProgression.title}"
+                            </span>
+                        ) : (
+                            <span>Select a Progression to Continue</span>
+                        )}
+                    </button>
+                    
+                    <button
+                        onClick={onSkip}
+                        disabled={disabled}
+                        className={`btn-secondary px-6 py-3 ${
+                            !disabled ? 'hover:scale-105' : 'opacity-50 cursor-not-allowed'
+                        } transition-all duration-300`}
+                    >
+                        📥 Skip & Download Current Comic
+                    </button>
+                </div>
+            </div>
+
+            {/* Info Section */}
+            <div className="glass-card p-6">
+                <div className="text-center">
+                    <h4 className="text-white font-semibold mb-2">🎨 What happens next?</h4>
+                    <p className="text-white/70 text-sm">
+                        When you select a progression, AI will generate a new comic chapter that continues your story.
+                        All chapters will be compiled into a complete series PDF for download.
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default StoryProgressionSelector;

index.css

@@ -1,13 +1,41 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
 
 :root {
-  --primary-gradient: linear-gradient(135deg, #1a1a1a 0%, #333333 100%);
-  --secondary-gradient: linear-gradient(135deg, #444444 0%, #666666 100%);
-  --accent-gradient: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
-  --dark-gradient: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
-  --glass-bg: rgba(255, 255, 255, 0.1);
-  --glass-border: rgba(255, 255, 255, 0.2);
-  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
+  /* Modern Black-to-White Gradient System */
+  --bg-gradient: linear-gradient(135deg, #000000 0%, #1a1a1a 25%, #2d2d2d 75%, #1a1a1a 100%);
+  --primary-gradient: linear-gradient(135deg, #000000 0%, #2d2d2d 50%, #4a4a4a 100%);
+  --secondary-gradient: linear-gradient(135deg, #1a1a1a 0%, #3d3d3d 100%);
+  --accent-gradient: linear-gradient(135deg, #2d2d2d 0%, #5a5a5a 100%);
+  --text-gradient: linear-gradient(135deg, #ffffff 0%, #e5e5e5 50%, #cccccc 100%);
+  
+  /* Glass Morphism - Enhanced */
+  --glass-bg: rgba(255, 255, 255, 0.08);
+  --glass-bg-strong: rgba(255, 255, 255, 0.12);
+  --glass-border: rgba(255, 255, 255, 0.16);
+  --glass-border-strong: rgba(255, 255, 255, 0.24);
+  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  --glass-shadow-strong: 0 16px 40px rgba(0, 0, 0, 0.6);
+  
+  /* Interactive States */
+  --hover-bg: rgba(255, 255, 255, 0.16);
+  --active-bg: rgba(255, 255, 255, 0.20);
+  --focus-ring: rgba(255, 255, 255, 0.24);
+  
+  /* Modern Spacing Scale */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-2xl: 3rem;
+  --space-3xl: 4rem;
+  
+  /* Border Radius Scale */
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --radius-2xl: 24px;
 }
 
 * {
@@ -18,34 +46,53 @@ body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
   margin: 0;
   padding: 0;
-  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 25%, #2a2a2a 75%, #1a1a1a 100%);
+  background: var(--bg-gradient);
   background-attachment: fixed;
   min-height: 100vh;
+  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-/* Glass morphism base styles */
+/* Modern Glass Morphism System */
 .glass {
   background: var(--glass-bg);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border-radius: 20px;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: var(--radius-xl);
   border: 1px solid var(--glass-border);
   box-shadow: var(--glass-shadow);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .glass-card {
-  background: rgba(255, 255, 255, 0.15);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-  transition: all 0.3s ease;
+  background: var(--glass-bg-strong);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--glass-border-strong);
+  box-shadow: var(--glass-shadow-strong);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.glass-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+  opacity: 0.6;
 }
 
 .glass-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 16px 40px 0 rgba(31, 38, 135, 0.5);
+  transform: translateY(-2px);
+  background: var(--hover-bg);
+  border-color: var(--glass-border-strong);
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
 }
 
 /* Animation utilities */
@@ -92,59 +139,102 @@ body {
   animation: pulse 2s infinite;
 }
 
-/* Modern button styles */
+/* Modern Button System */
 .btn-primary {
   background: var(--primary-gradient);
   border: none;
-  border-radius: 12px;
+  border-radius: var(--radius-md);
   color: white;
   font-weight: 600;
-  padding: 12px 24px;
-  transition: all 0.3s ease;
-  box-shadow: 0 4px 15px 0 rgba(31, 38, 135, 0.3);
+  padding: var(--space-lg) var(--space-xl);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: var(--glass-shadow);
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  outline: none;
+}
+
+.btn-primary::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.6s;
 }
 
 .btn-primary:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 25px 0 rgba(31, 38, 135, 0.4);
+  box-shadow: var(--glass-shadow-strong);
+  background: linear-gradient(135deg, #1a1a1a 0%, #3d3d3d 50%, #5a5a5a 100%);
+}
+
+.btn-primary:hover::before {
+  left: 100%;
+}
+
+.btn-primary:focus {
+  box-shadow: var(--glass-shadow-strong), 0 0 0 3px var(--focus-ring);
 }
 
 .btn-secondary {
-  background: rgba(255, 255, 255, 0.2);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 12px;
+  background: var(--glass-bg-strong);
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-md);
   color: white;
-  font-weight: 600;
-  padding: 12px 24px;
-  transition: all 0.3s ease;
+  font-weight: 500;
+  padding: var(--space-lg) var(--space-xl);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  outline: none;
 }
 
 .btn-secondary:hover {
-  background: rgba(255, 255, 255, 0.3);
+  background: var(--hover-bg);
+  border-color: var(--glass-border-strong);
   transform: translateY(-2px);
 }
 
-/* Modern input styles */
+.btn-secondary:focus {
+  box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+/* Modern Input System */
 .input-glass {
-  background: rgba(255, 255, 255, 0.2);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 12px;
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-md);
   color: white;
-  padding: 12px 16px;
-  transition: all 0.3s ease;
+  padding: var(--space-lg) var(--space-lg);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  font-size: 1rem;
+  font-weight: 400;
+  outline: none;
 }
 
 .input-glass::placeholder {
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, 0.6);
+  font-weight: 400;
+}
+
+.input-glass:hover {
+  background: var(--glass-bg-strong);
+  border-color: var(--glass-border-strong);
 }
 
 .input-glass:focus {
-  outline: none;
-  border-color: rgba(255, 255, 255, 0.5);
-  background: rgba(255, 255, 255, 0.3);
-  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
+  border-color: var(--focus-ring);
+  background: var(--glass-bg-strong);
+  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
+}
+
+.input-glass:focus::placeholder {
+  color: rgba(255, 255, 255, 0.4);
 }
 
 /* Loading spinner */
@@ -162,6 +252,51 @@ body {
   100% { transform: rotate(360deg); }
 }
 
+/* Skeleton loading animation */
+.skeleton-loader {
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s infinite;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* Lazy image loading states */
+.lazy {
+  filter: blur(5px);
+  transition: filter 0.3s;
+}
+
+.lazy.loaded {
+  filter: none;
+}
+
+/* Performance timing display */
+.timing-badge {
+  background: rgba(0, 255, 0, 0.1);
+  border: 1px solid rgba(0, 255, 0, 0.3);
+  color: rgba(0, 255, 0, 0.8);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.timing-badge::before {
+  content: '⏱️';
+  font-size: 0.625rem;
+}
+
 /* Panel composition grid */
 .panel-grid {
   display: grid;
@@ -194,9 +329,22 @@ body {
   }
 }
 
-/* Gradient text */
+/* Modern Text Gradients */
 .gradient-text {
-  background: linear-gradient(135deg, #ffffff 0%, #cccccc 100%);
+  background: var(--text-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-weight: 700;
+}
+
+/* Performance indicator colors */
+.perf-excellent { color: #10b981; }
+.perf-good { color: #f59e0b; }
+.perf-poor { color: #ef4444; }
+
+.gradient-text-subtle {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -222,4 +370,180 @@ body {
 .template-card.selected {
   background: rgba(255, 255, 255, 0.3);
   border-color: rgba(255, 255, 255, 0.5);
+}
+
+/* Story progression cards */
+.progression-card {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(15px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  padding: 24px;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  position: relative;
+  min-height: 400px;
+}
+
+.progression-card:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateY(-6px) scale(1.02);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
+}
+
+.progression-card.selected {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: rgba(255, 255, 255, 0.5);
+  box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
+}
+
+/* Series chapter navigation */
+.chapter-nav-button {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 2px solid transparent;
+  border-radius: 12px;
+  padding: 16px;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.chapter-nav-button:hover {
+  background: rgba(255, 255, 255, 0.15);
+  transform: translateY(-2px);
+}
+
+.chapter-nav-button.active {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.5);
+}
+
+/* Enhanced animations for story progression */
+@keyframes progressionSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(30px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.progression-card {
+  animation: progressionSlideIn 0.6s ease-out;
+}
+
+.progression-card:nth-child(2) {
+  animation-delay: 0.1s;
+}
+
+.progression-card:nth-child(3) {
+  animation-delay: 0.2s;
+}
+
+/* Series completion celebration effects */
+@keyframes celebrationGlow {
+  0%, 100% {
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 40px rgba(255, 255, 255, 0.6);
+  }
+}
+
+.series-complete-glow {
+  animation: celebrationGlow 2s ease-in-out infinite;
+}
+
+/* Enhanced hover effects */
+@keyframes scaleHover {
+  to {
+    transform: scale(1.02);
+  }
+}
+
+.hover\:scale-102:hover {
+  animation: scaleHover 0.2s ease-out forwards;
+}
+
+.hover\:scale-105:hover {
+  transform: scale(1.05);
+}
+
+/* Progress indicators */
+.progress-step {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  width: 12px;
+  height: 12px;
+  transition: all 0.3s ease;
+}
+
+.progress-step.active {
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
+}
+
+.progress-step.completed {
+  background: rgba(34, 197, 94, 0.8);
+  box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
+}
+
+/* Series statistics display */
+.series-stats {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+  padding: 1.5rem;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.series-stat-item {
+  text-align: center;
+  padding: 0 1rem;
+}
+
+.series-stat-value {
+  font-size: 2rem;
+  font-weight: 800;
+  color: white;
+  margin-bottom: 0.5rem;
+}
+
+.series-stat-label {
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.series-stat-divider {
+  width: 1px;
+  height: 2rem;
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* Mobile responsiveness for new components */
+@media (max-width: 768px) {
+  .progression-card {
+    padding: 16px;
+    min-height: 300px;
+  }
+  
+  .series-stats {
+    flex-direction: column;
+    gap: 1rem;
+  }
+  
+  .series-stat-divider {
+    width: 100%;
+    height: 1px;
+  }
+  
+  .chapter-nav-button {
+    padding: 12px;
+  }
 }

index.html

@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>AI Manga Generator</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
   <script type="importmap">
 {
   "imports": {

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@google/genai": "^1.17.0",
+    "jspdf": "^3.0.2",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   },

services/geminiService.ts

@@ -1,5 +1,18 @@
 import { GoogleGenAI, Type, Modality } from "@google/genai";
-import type { LoadingState, MangaPage, CharacterProfile, MangaStyle } from '../types';
+import { PerformanceTracker } from '../utils/imageOptimization';
+import type { 
+    LoadingState, 
+    MangaPage, 
+    CharacterProfile, 
+    MangaStyle, 
+    StoryProgression, 
+    ComicIteration,
+    CharacterSketch,
+    EnvironmentSketch,
+    GenerationProgress,
+    StoryArcSummary,
+    PerformanceTiming
+} from '../types';
 
 // Initialize GoogleGenAI client - will be created dynamically with user's API key
 let ai: GoogleGenAI;
@@ -9,6 +22,7 @@ interface StoryDetails {
     story: string;
     author: string;
     style: MangaStyle;
+    includeDialogue: boolean;
 }
 
 // Schema for character profile generation
@@ -65,14 +79,56 @@ const mangaPageSchema = {
     },
 };
 
+/**
+ * Automatically selects the most appropriate manga style based on story content
+ */
+const selectOptimalStyle = (story: string): MangaStyle => {
+    const storyLower = story.toLowerCase();
+    
+    // Action/adventure keywords suggest Shonen
+    const actionKeywords = ['fight', 'battle', 'war', 'hero', 'power', 'strength', 'adventure', 'quest', 'enemy'];
+    if (actionKeywords.some(keyword => storyLower.includes(keyword))) {
+        return 'Shonen';
+    }
+    
+    // Romance/emotion keywords suggest Shojo
+    const romanceKeywords = ['love', 'romance', 'heart', 'relationship', 'feelings', 'beautiful', 'flower', 'tender'];
+    if (romanceKeywords.some(keyword => storyLower.includes(keyword))) {
+        return 'Shojo';
+    }
+    
+    // Mature/complex keywords suggest Seinen
+    const matureKeywords = ['complex', 'psychology', 'society', 'work', 'adult', 'realistic', 'dark', 'serious'];
+    if (matureKeywords.some(keyword => storyLower.includes(keyword))) {
+        return 'Seinen';
+    }
+    
+    // Wacky/absurd keywords suggest Wacky style
+    const wackyKeywords = ['funny', 'crazy', 'weird', 'silly', 'absurd', 'rubber', 'stretchy', 'pirates', 'treasure'];
+    if (wackyKeywords.some(keyword => storyLower.includes(keyword))) {
+        return 'Wacky';
+    }
+    
+    // Cute/simple keywords suggest Chibi
+    const chibiKeywords = ['cute', 'small', 'tiny', 'children', 'school', 'friends', 'simple', 'innocent'];
+    if (chibiKeywords.some(keyword => storyLower.includes(keyword))) {
+        return 'Chibi';
+    }
+    
+    // Default to Shonen for general stories
+    return 'Shonen';
+};
+
 /**
  * Generates character profiles from a story premise with advanced character development.
  */
 const generateCharacterProfiles = async (story: string, style: MangaStyle): Promise<CharacterProfile[]> => {
+    // Auto-select style if "I don't know" is chosen
+    const actualStyle = style === "I don't know" ? selectOptimalStyle(story) : style;
     const prompt = `You are a master character designer and development expert specializing in compelling visual storytelling. Create rich, multi-dimensional character profiles that will serve as the foundation for a professional comic series.
 
 ADVANCED CHARACTER DEVELOPMENT BRIEF:
-Style: ${style} manga aesthetic with professional character design principles
+Style: ${actualStyle} manga aesthetic with professional character design principles
 Story Context: "${story}"
 
 CHARACTER CREATION GUIDELINES:
@@ -85,7 +141,7 @@ CHARACTER CREATION GUIDELINES:
 TECHNICAL SPECIFICATIONS:
 - Create 2-4 main characters (protagonists, deuteragonists, key supporting characters)
 - Each character needs comprehensive visual and personality descriptions
-- Include distinctive features that work well in ${style} art style
+- Include distinctive features that work well in ${actualStyle} art style
 - Consider character relationships and visual contrast between characters
 - Ensure characters can drive the story forward through their actions and conflicts
 
@@ -184,14 +240,30 @@ const analyzeNarrativeStructure = (story: string): { structure: string; keyBeats
 /**
  * Generates a manga script from a story premise and character profiles.
  */
-const generateMangaScript = async (story: string, style: MangaStyle, characters: CharacterProfile[]): Promise<MangaPage[]> => {
+const generateMangaScript = async (story: string, style: MangaStyle, characters: CharacterProfile[], includeDialogue: boolean): Promise<MangaPage[]> => {
+    // Auto-select style if "I don't know" is chosen
+    const actualStyle = style === "I don't know" ? selectOptimalStyle(story) : style;
     const characterDescriptions = characters.map(c => `- ${c.name}: ${c.description}`).join('\n');
     const narrativeAnalysis = analyzeNarrativeStructure(story);
     
     const prompt = `You are a master storyteller and comic book editor with decades of experience creating compelling visual narratives. Your expertise spans multiple genres and you understand the delicate balance between visual storytelling and narrative pacing.
 
+TEXT GENERATION OPTIONS:
+${includeDialogue ? `- Keep ALL dialogue extremely simple and short (max 8-10 words per speech bubble)
+- Use basic vocabulary that's easy to understand
+- Avoid complex sentence structures
+- Break long thoughts into multiple short sentences
+- Prioritize clear, simple communication over elaborate prose` : `- ABSOLUTELY NO DIALOGUE, speech bubbles, or any text content whatsoever
+- ZERO text generation - this is purely visual storytelling
+- Do NOT include any words, phrases, sound effects, or onomatopoeia
+- Focus entirely on visual composition, character expressions, and body language
+- Describe scenes as if they are silent films
+- NO SPEECH BUBBLES, NO TEXT BALLOONS, NO WRITTEN WORDS OF ANY KIND
+- Leave all text elements completely empty for manual addition later`}
+
 ADVANCED STORYTELLING ANALYSIS:
 Story Structure Detected: ${narrativeAnalysis.structure}
+Selected Art Style: ${actualStyle} (${style === "I don't know" ? "auto-selected" : "user-chosen"})
 Key Narrative Beats: ${narrativeAnalysis.keyBeats.join(' → ')}
 
 STORY ENHANCEMENT MISSION:
@@ -205,10 +277,10 @@ Transform this premise into a professional comic script that maximizes emotional
 6. CLIMAX: Build to a satisfying emotional and visual climax
 
 TECHNICAL SPECIFICATIONS:
-- Visual Style: ${style} manga aesthetic with professional composition
+- Visual Style: ${actualStyle} manga aesthetic with professional composition
 - Page Count: 4-5 pages optimized for digital reading
 - Panel Density: 2-4 panels per page with dynamic layouts
-- Dialogue: Concise, character-driven, emotionally resonant
+- Dialogue: ${includeDialogue ? 'Concise, character-driven, emotionally resonant' : 'COMPLETELY FORBIDDEN - absolutely no text or speech of any kind'}
 
 CHARACTER CAST:
 ${characterDescriptions}
@@ -221,7 +293,7 @@ INSTRUCTIONS:
 2. Identify the key emotional moments and visual set pieces
 3. Plan panel compositions that support the narrative flow
 4. Create a script where each panel serves both story and visual impact
-5. Ensure dialogue feels natural and advances both plot and character
+5. ${includeDialogue ? 'Ensure dialogue feels natural and advances both plot and character' : 'CRITICAL: Generate ZERO dialogue or text - tell the story purely through visual elements, poses, expressions, and actions'}
 
 Generate a professional comic script that elevates this premise into a compelling visual narrative.`;
 
@@ -282,6 +354,10 @@ const analyzePageComposition = (page: MangaPage, style: MangaStyle): string => {
         return "SHOJO AESTHETIC LAYOUT: Flowing, organic panel shapes with decorative elements. Focus on character expressions.";
     } else if (style === 'Seinen') {
         return "MATURE COMPOSITION: Clean, sophisticated panel layouts with subtle visual metaphors and realistic proportions.";
+    } else if (style === 'Wacky') {
+        return "WACKY ONE PIECE LAYOUT: Exaggerated, rubber-hose animation style panels with impossible physics and zany expressions. Characters can stretch and deform wildly.";
+    } else if (style === 'Chibi') {
+        return "CHIBI CUTE LAYOUT: Simple, rounded panels with adorable character designs and minimal backgrounds. Focus on expressions.";
     } else {
         return "BALANCED COMPOSITION: Professional comic layout with clear visual hierarchy and optimal reading flow.";
     }
@@ -290,15 +366,24 @@ const analyzePageComposition = (page: MangaPage, style: MangaStyle): string => {
 /**
  * Generates a single manga page image using gemini-2.5-flash-image-preview.
  */
-const generatePageImage = async (prompt: string, previousPageImage?: string, page?: MangaPage, style?: MangaStyle): Promise<string> => {
+const generatePageImage = async (prompt: string, previousPageImage?: string, page?: MangaPage, style?: MangaStyle, includeDialogue: boolean = true): Promise<string> => {
     try {
         const parts: any[] = [];
         
         // Add composition guidance if page data is available
         let enhancedPrompt = prompt;
         if (page && style) {
-            const compositionGuide = analyzePageComposition(page, style);
-            enhancedPrompt = `${prompt}\n\nCOMPOSITION GUIDANCE:\n${compositionGuide}\n\nPROFESSIONAL COMIC TECHNIQUES:\n- Use proper panel gutters and borders\n- Maintain clear reading flow (left to right, top to bottom)\n- Balance text and visual elements\n- Apply comic book color theory and contrast\n- Ensure character consistency and proportions\n- Use appropriate camera angles and perspectives`;
+            const actualStyle = style === "I don't know" ? selectOptimalStyle("action adventure") : style; // fallback for image generation
+            const compositionGuide = analyzePageComposition(page, actualStyle);
+            
+            let styleSpecificInstructions = "";
+            if (actualStyle === 'Wacky') {
+                styleSpecificInstructions = "\nWACKY STYLE SPECIFICS:\n- Characters can have impossible body proportions and physics-defying actions\n- Exaggerated facial expressions with bulging eyes and dropped jaws\n- Rubber-like stretching and deformation of characters\n- Cartoonish impact effects and motion lines\n- Bright, vibrant colors with high contrast";
+            } else if (actualStyle === 'Chibi') {
+                styleSpecificInstructions = "\nCHIBI STYLE SPECIFICS:\n- All characters have large heads (1:2 or 1:3 head-to-body ratio)\n- Simplified features with dot eyes and minimal noses\n- Rounded, soft shapes throughout\n- Pastel or bright cheerful colors\n- Minimal detailed backgrounds";
+            }
+            
+            enhancedPrompt = `${prompt}\n\nCOMPOSITION GUIDANCE:\n${compositionGuide}${styleSpecificInstructions}\n\nPROFESSIONAL COMIC TECHNIQUES:\n- Use proper panel gutters and borders\n- Maintain clear reading flow (left to right, top to bottom)\n- Balance text and visual elements\n- Apply comic book color theory and contrast\n- Ensure character consistency and proportions\n- Use appropriate camera angles and perspectives\n\nTEXT HANDLING:\n${includeDialogue ? '- Keep all speech bubbles short and simple\n- Use basic vocabulary\n- Maximum 8-10 words per dialogue bubble' : '- ABSOLUTELY FORBIDDEN: No speech bubbles, dialogue, text, words, or any written content\n- CRITICAL: Do not include ANY text elements, sound effects, or onomatopoeia\n- MANDATORY: Focus exclusively on visual storytelling through character expressions, body language, and visual metaphors\n- IMPORTANT: Characters can mouth words but NO text should be visible\n- ESSENTIAL: Tell the story purely through visual composition and character acting\n- FINAL RULE: Zero text content - this is a silent comic panel'}`;
         }
         
         if (previousPageImage) {
@@ -340,45 +425,309 @@ const generatePageImage = async (prompt: string, previousPageImage?: string, pag
 };
 
 /**
- * Creates the main manga generation orchestrator.
+ * Generates character sketches for main characters
+ */
+const generateCharacterSketches = async (characters: CharacterProfile[], style: MangaStyle): Promise<CharacterSketch[]> => {
+    const sketches: CharacterSketch[] = [];
+    
+    for (const character of characters.slice(0, 4)) { // Limit to 4 main characters
+        try {
+            const styleDescription = style === 'Wacky' ? 
+                "Wacky One Piece-style with exaggerated, rubber-hose animation aesthetics" :
+                style === 'Chibi' ?
+                "Chibi style with cute, simplified characters having large heads" :
+                style;
+            
+            const sketchPrompt = `TASK: Create a character design sketch.
+STYLE: ${styleDescription} manga, black and white sketch style with clean line art.
+CHARACTER: ${character.name} - ${character.description}
+INSTRUCTIONS: Create a full-body character reference sketch showing the character from front view. Include facial expressions and key design elements. This is a character design sheet, not a comic panel. Generate ONLY the image.`;
+
+            const sketchImage = await generatePageImage(sketchPrompt);
+            sketches.push({
+                characterName: character.name,
+                sketchImage: sketchImage,
+                description: character.description
+            });
+        } catch (error) {
+            console.warn(`Failed to generate sketch for character ${character.name}:`, error);
+        }
+    }
+    
+    return sketches;
+};
+
+/**
+ * Generates environment sketches for key locations
+ */
+const generateEnvironmentSketches = async (story: string, style: MangaStyle): Promise<EnvironmentSketch[]> => {
+    const environments = analyzeStoryEnvironments(story);
+    const sketches: EnvironmentSketch[] = [];
+    
+    for (const env of environments.slice(0, 3)) { // Limit to 3 key environments
+        try {
+            const styleDescription = style === 'Wacky' ? 
+                "Wacky One Piece-style with exaggerated, cartoonish environments" :
+                style === 'Chibi' ?
+                "Chibi style with simple, cute environments" :
+                style;
+            
+            const envPrompt = `TASK: Create an environment/location sketch.
+STYLE: ${styleDescription} manga, black and white sketch style.
+ENVIRONMENT: ${env.name} - ${env.description}
+INSTRUCTIONS: Create a detailed background/environment sketch showing the key location. Focus on atmosphere and architectural/natural elements. This is a location reference sheet. Generate ONLY the image.`;
+
+            const envImage = await generatePageImage(envPrompt);
+            sketches.push({
+                environmentName: env.name,
+                sketchImage: envImage,
+                description: env.description
+            });
+        } catch (error) {
+            console.warn(`Failed to generate environment sketch for ${env.name}:`, error);
+        }
+    }
+    
+    return sketches;
+};
+
+/**
+ * Analyzes story to identify key environments
+ */
+const analyzeStoryEnvironments = (story: string): { name: string; description: string }[] => {
+    const storyLower = story.toLowerCase();
+    const environments: { name: string; description: string }[] = [];
+    
+    // Common environment patterns
+    if (storyLower.includes('school') || storyLower.includes('classroom') || storyLower.includes('student')) {
+        environments.push({ name: 'School', description: 'Educational institution with classrooms and hallways' });
+    }
+    if (storyLower.includes('home') || storyLower.includes('house') || storyLower.includes('room')) {
+        environments.push({ name: 'Home', description: 'Residential living space with personal belongings' });
+    }
+    if (storyLower.includes('city') || storyLower.includes('urban') || storyLower.includes('street')) {
+        environments.push({ name: 'City Street', description: 'Urban environment with buildings and bustling activity' });
+    }
+    if (storyLower.includes('forest') || storyLower.includes('tree') || storyLower.includes('nature')) {
+        environments.push({ name: 'Forest', description: 'Natural woodland environment with trees and wildlife' });
+    }
+    if (storyLower.includes('space') || storyLower.includes('ship') || storyLower.includes('station')) {
+        environments.push({ name: 'Spaceship', description: 'Futuristic spacecraft interior with advanced technology' });
+    }
+    if (storyLower.includes('castle') || storyLower.includes('kingdom') || storyLower.includes('medieval')) {
+        environments.push({ name: 'Castle', description: 'Medieval fortress with stone walls and grand halls' });
+    }
+    
+    // Default environments if none detected
+    if (environments.length === 0) {
+        environments.push(
+            { name: 'Main Setting', description: 'The primary location where the story takes place' },
+            { name: 'Character Home', description: 'Personal living space of the main character' }
+        );
+    }
+    
+    return environments;
+};
+
+/**
+ * Generates story arc summary
+ */
+const generateStoryArcSummary = async (pages: MangaPage[], characters: CharacterProfile[]): Promise<StoryArcSummary> => {
+    const storyContent = pages.map(page => 
+        page.panels.map(panel => `${panel.description}${panel.dialogue ? ` - "${panel.dialogue}"` : ''}`).join(' ')
+    ).join('\n');
+    
+    const prompt = `Analyze this comic story and create a comprehensive story arc summary.
+
+STORY CONTENT:
+${storyContent}
+
+CHARACTERS:
+${characters.map(c => `${c.name}: ${c.description}`).join('; ')}
+
+Create a detailed analysis covering:
+1. Overall theme and central message
+2. Key story events in chronological order
+3. Character development and growth arcs
+4. Narrative progression and story structure
+5. Emotional journey of the characters
+
+Provide insights into how the story unfolds and what makes it compelling.`;
+
+    try {
+        const response = await ai.models.generateContent({
+            model: "gemini-2.5-flash",
+            contents: prompt,
+        });
+
+        const summaryText = response.text.trim();
+        
+        // Parse the summary into structured format
+        const lines = summaryText.split('\n').filter(line => line.trim());
+        let currentSection = '';
+        const summary: StoryArcSummary = {
+            overallTheme: '',
+            keyEvents: [],
+            characterDevelopment: [],
+            narrativeProgression: '',
+            emotionalJourney: ''
+        };
+        
+        for (const line of lines) {
+            if (line.toLowerCase().includes('theme') || line.toLowerCase().includes('message')) {
+                currentSection = 'theme';
+                summary.overallTheme += line.replace(/^\d+\.\s*/, '').replace(/^[^:]*:?\s*/, '') + ' ';
+            } else if (line.toLowerCase().includes('key') && line.toLowerCase().includes('event')) {
+                currentSection = 'events';
+            } else if (line.toLowerCase().includes('character') && line.toLowerCase().includes('development')) {
+                currentSection = 'character';
+            } else if (line.toLowerCase().includes('narrative') || line.toLowerCase().includes('progression')) {
+                currentSection = 'narrative';
+                summary.narrativeProgression += line.replace(/^\d+\.\s*/, '').replace(/^[^:]*:?\s*/, '') + ' ';
+            } else if (line.toLowerCase().includes('emotional') || line.toLowerCase().includes('journey')) {
+                currentSection = 'emotional';
+                summary.emotionalJourney += line.replace(/^\d+\.\s*/, '').replace(/^[^:]*:?\s*/, '') + ' ';
+            } else if (line.trim().startsWith('-') || line.trim().startsWith('•')) {
+                const cleanLine = line.replace(/^[-•]\s*/, '');
+                if (currentSection === 'events') {
+                    summary.keyEvents.push(cleanLine);
+                } else if (currentSection === 'character') {
+                    summary.characterDevelopment.push(cleanLine);
+                }
+            }
+        }
+        
+        return summary;
+    } catch (error) {
+        console.warn('Failed to generate story arc summary:', error);
+        return {
+            overallTheme: 'A compelling narrative exploring themes of growth and adventure',
+            keyEvents: ['Story begins', 'Conflict arises', 'Resolution achieved'],
+            characterDevelopment: ['Characters face challenges', 'Personal growth occurs'],
+            narrativeProgression: 'The story follows a classic narrative structure with rising action leading to climax and resolution',
+            emotionalJourney: 'Characters experience a range of emotions leading to personal transformation'
+        };
+    }
+};
+
+/**
+ * Creates the main manga generation orchestrator with enhanced progress updates.
  */
 export const generateMangaScriptAndImages = async (
     storyDetails: StoryDetails,
-    updateProgress: (state: LoadingState) => void,
+    updateProgress: (state: GenerationProgress) => void,
     apiKey: string
-): Promise<string[]> => {
+): Promise<{
+    images: string[];
+    characters: CharacterProfile[];
+    pages: MangaPage[];
+    characterSketches: CharacterSketch[];
+    environmentSketches: EnvironmentSketch[];
+    storyArcSummary: StoryArcSummary;
+    performanceTimings: PerformanceTiming[];
+    totalGenerationTime: number;
+}> => {
+    const performanceTracker = new PerformanceTracker();
+    const startTime = Date.now();
+    performanceTracker.startTimer('total_generation');
     // Initialize AI client with user's API key
     ai = new GoogleGenAI({ apiKey });
-    const { title, story, author, style } = storyDetails;
+    const { title, story, author, style, includeDialogue } = storyDetails;
+    // Auto-select style if "I don't know" is chosen
+    const actualStyle = style === "I don't know" ? selectOptimalStyle(story) : style;
     const allImages: string[] = [];
 
     // Step 1: Generate Character Profiles
-    updateProgress({ isLoading: true, message: 'Analyzing story for characters...', progress: 10 });
-    const characters = await generateCharacterProfiles(story, style);
+    performanceTracker.startTimer('character_analysis');
+    updateProgress({ 
+        phase: 'character_analysis',
+        message: 'Analyzing story and developing characters...', 
+        progress: 10,
+        currentStepStartTime: Date.now(),
+        stepTimings: performanceTracker.getTimings()
+    });
+    const characters = await generateCharacterProfiles(story, actualStyle);
+    const charAnalysisTiming = performanceTracker.endTimer('character_analysis');
+
+    // Step 2: Generate Character Sketches
+    performanceTracker.startTimer('character_sketches');
+    updateProgress({ 
+        phase: 'character_sketches',
+        message: `Found ${characters.length} characters, creating design sketches (${(charAnalysisTiming.duration / 1000).toFixed(1)}s)...`, 
+        progress: 20,
+        currentStepStartTime: Date.now(),
+        stepTimings: performanceTracker.getTimings()
+    });
+    const characterSketches = await generateCharacterSketches(characters, actualStyle);
+    const sketchTiming = performanceTracker.endTimer('character_sketches');
 
-    // Step 2: Generate Manga Script
-    updateProgress({ isLoading: true, message: 'Writing manga script...', progress: 25 });
-    const scriptPages = await generateMangaScript(story, style, characters);
+    // Step 3: Generate Environment Sketches  
+    performanceTracker.startTimer('environment_sketches');
+    updateProgress({ 
+        phase: 'environment_sketches',
+        message: `Generated ${characterSketches.length} character sketches (${(sketchTiming.duration / 1000).toFixed(1)}s), designing environments...`, 
+        progress: 30,
+        characterSketches: characterSketches,
+        currentStepStartTime: Date.now(),
+        stepTimings: performanceTracker.getTimings()
+    });
+    const environmentSketches = await generateEnvironmentSketches(story, actualStyle);
+    const envTiming = performanceTracker.endTimer('environment_sketches');
+
+    // Step 4: Generate Manga Script
+    performanceTracker.startTimer('script_writing');
+    updateProgress({ 
+        phase: 'script_writing',
+        message: `Generated ${environmentSketches.length} environment designs (${(envTiming.duration / 1000).toFixed(1)}s), writing script...`, 
+        progress: 40,
+        characterSketches: characterSketches,
+        environmentSketches: environmentSketches,
+        currentStepStartTime: Date.now(),
+        stepTimings: performanceTracker.getTimings()
+    });
+    const scriptPages = await generateMangaScript(story, actualStyle, characters, includeDialogue);
+    const scriptTiming = performanceTracker.endTimer('script_writing');
     if (scriptPages.length === 0) {
         throw new Error("The generated script was empty. Please try a different story.");
     }
 
     const totalPagesToGenerate = scriptPages.length + 2; // script pages + title + conclusion
     let pagesGenerated = 0;
+    const generatedPages: { pageNumber: number; image: string; title: string }[] = [];
 
     const characterPromptPart = characters.map(c => `${c.name}: ${c.description}`).join('; ');
 
     const updatePageProgress = () => {
         pagesGenerated++;
-        // Progress from 40% to 95% is for image generation
-        const progress = 40 + Math.round((pagesGenerated / totalPagesToGenerate) * 55);
+        // Progress from 50% to 95% is for image generation
+        const progress = 50 + Math.round((pagesGenerated / totalPagesToGenerate) * 40);
         return progress;
     };
     
-    // Step 3: Generate Title Page
-    updateProgress({ isLoading: true, message: 'Creating title page...', progress: 40 });
+    // Step 5: Generate Title Page
+    performanceTracker.startTimer('page_generation');
+    updateProgress({ 
+        phase: 'page_generation',
+        message: `Created ${scriptPages.length} page script (${(scriptTiming.duration / 1000).toFixed(1)}s), generating title page...`, 
+        progress: 50,
+        characterSketches: characterSketches,
+        environmentSketches: environmentSketches,
+        generatedPages: generatedPages,
+        currentStepStartTime: Date.now(),
+        stepTimings: performanceTracker.getTimings()
+    });
+    
+    let styleDescription = "";
+    if (actualStyle === 'Wacky') {
+        styleDescription = "Wacky One Piece-style with exaggerated, rubber-hose animation aesthetics, impossible physics, and zany character designs";
+    } else if (actualStyle === 'Chibi') {
+        styleDescription = "Chibi style with cute, simplified characters having large heads and minimal features";
+    } else {
+        styleDescription = actualStyle;
+    }
+    
     const titlePagePrompt = `TASK: Create a dynamic manga title page.
-STYLE: ${style}, black and white.
+STYLE: ${styleDescription}, black and white.
 ASPECT RATIO: 3:4 vertical.
 TITLE: "${title}"
 AUTHOR: "${author}"
@@ -387,61 +736,110 @@ INSTRUCTIONS: Create a compelling cover image. Generate ONLY the image.`;
     
     let titleImage: string;
     try {
-        titleImage = await generatePageImage(titlePagePrompt);
+        titleImage = await generatePageImage(titlePagePrompt, undefined, undefined, undefined, includeDialogue);
     } catch (error) {
         console.warn('Title page generation failed, retrying once...', error);
-        titleImage = await generatePageImage(titlePagePrompt);
+        titleImage = await generatePageImage(titlePagePrompt, undefined, undefined, undefined, includeDialogue);
     }
     allImages.push(titleImage);
+    generatedPages.push({ 
+        pageNumber: 0, 
+        image: titleImage, 
+        title: 'Title Page' 
+    });
 
-
-    // Step 4: Generate each page from the script
+    // Step 6: Generate each page from the script
     for (const page of scriptPages) {
         const progress = updatePageProgress();
-        updateProgress({ isLoading: true, message: `Drawing page ${page.pageNumber} of ${scriptPages.length}...`, progress });
+        updateProgress({ 
+            phase: 'page_generation',
+            message: `Drawing page ${page.pageNumber} of ${scriptPages.length}...`, 
+            progress: progress,
+            characterSketches: characterSketches,
+            environmentSketches: environmentSketches,
+            generatedPages: generatedPages
+        });
         
         const panelPrompts = page.panels.map(p => {
             let panelString = `Panel ${p.panelNumber}: ${p.description}`;
-            if (p.dialogue && p.speaker) {
+            if (includeDialogue && p.dialogue && p.speaker) {
                 const speakingCharacter = characters.find(c => c.name === p.speaker);
                 if (speakingCharacter) {
-                    // Planner Agent: Link the visual description directly to the dialogue.
+                    // Link the visual description directly to the dialogue
                     panelString += `\n  - Dialogue: The character speaking is ${speakingCharacter.name} (${speakingCharacter.description}). They say: "${p.dialogue}"`;
                 } else {
                     panelString += `\n  - Dialogue (${p.speaker}): "${p.dialogue}"`;
                 }
+            } else if (!includeDialogue) {
+                panelString += `\n  - NO DIALOGUE: Focus on visual storytelling and character expressions`;
             }
             return panelString;
         }).join('\n\n');
+        
+        // Enhanced prompt for first two pages with character/environment sketches
+        let additionalContext = "";
+        if (page.pageNumber <= 2) {
+            if (characterSketches.length > 0) {
+                additionalContext += `\n\nCHARACTER DESIGN REFERENCES (use these for visual consistency):\n${characterSketches.map(sketch => `${sketch.characterName}: ${sketch.description}`).join('\n')}`;
+            }
+            if (environmentSketches.length > 0) {
+                additionalContext += `\n\nENVIRONMENT REFERENCES (use for setting details):\n${environmentSketches.map(env => `${env.environmentName}: ${env.description}`).join('\n')}`;
+            }
+        }
 
         const pagePrompt = `TASK: Create a manga page image.
-STYLE: ${style}, black and white.
+STYLE: ${styleDescription}, black and white.
 ASPECT RATIO: 3:4 vertical.
 CHARACTERS: ${characterPromptPart}.
-PAGE: ${page.pageNumber}, with ${page.panels.length} panels.
+PAGE: ${page.pageNumber}, with ${page.panels.length} panels.${additionalContext}
 
 PANEL INSTRUCTIONS:
 ${panelPrompts}
 
-FINAL INSTRUCTIONS: Arrange panels dynamically. Place dialogue in speech bubbles for the correct characters. Generate ONLY the image.`;
+FINAL INSTRUCTIONS: Arrange panels dynamically. ${includeDialogue ? 'Place dialogue in speech bubbles for the correct characters.' : 'NO speech bubbles or text - pure visual storytelling.'} ${page.pageNumber <= 2 ? 'Use the character and environment references above for accurate visual consistency.' : ''} Generate ONLY the image.`;
         
         // Pass the last generated image as a reference for consistency
         const previousImage = allImages[allImages.length - 1];
+        const pageStartTime = Date.now();
         let pageImage: string;
         try {
-            pageImage = await generatePageImage(pagePrompt, previousImage, page, style);
+            pageImage = await generatePageImage(pagePrompt, previousImage, page, actualStyle, includeDialogue);
         } catch (error) {
             console.warn(`Page ${page.pageNumber} generation failed, retrying once...`, error);
-            pageImage = await generatePageImage(pagePrompt, previousImage, page, style);
+            pageImage = await generatePageImage(pagePrompt, previousImage, page, actualStyle, includeDialogue);
         }
+        const pageGenTime = Date.now() - pageStartTime;
         allImages.push(pageImage);
+        generatedPages.push({ 
+            pageNumber: page.pageNumber, 
+            image: pageImage, 
+            title: `Page ${page.pageNumber}` 
+        });
+        
+        // Update with timing info
+        updateProgress({ 
+            phase: 'page_generation',
+            message: `Generated page ${page.pageNumber} of ${scriptPages.length} (${(pageGenTime / 1000).toFixed(1)}s)`, 
+            progress: progress,
+            characterSketches: characterSketches,
+            environmentSketches: environmentSketches,
+            generatedPages: generatedPages,
+            stepTimings: performanceTracker.getTimings()
+        });
     }
 
-    // Step 5: Generate Conclusion Page
+    // Step 7: Generate Conclusion Page
     const conclusionProgress = updatePageProgress();
-    updateProgress({ isLoading: true, message: 'Creating conclusion page...', progress: conclusionProgress });
+    updateProgress({ 
+        phase: 'page_generation',
+        message: 'Creating conclusion page...', 
+        progress: conclusionProgress,
+        characterSketches: characterSketches,
+        environmentSketches: environmentSketches,
+        generatedPages: generatedPages
+    });
     const conclusionPagePrompt = `TASK: Create a final, evocative manga page.
-STYLE: ${style}, black and white.
+STYLE: ${styleDescription}, black and white.
 ASPECT RATIO: 3:4 vertical.
 STORY CONTEXT: The story was about "${story}".
 INSTRUCTIONS: The page should feel like a conclusion. Maybe a character looking towards the horizon or a symbolic image related to the story. Include a small, stylized "The End" text. Generate ONLY the image.`;
@@ -450,13 +848,355 @@ INSTRUCTIONS: The page should feel like a conclusion. Maybe a character looking
     const lastContentPage = allImages[allImages.length - 1];
     let conclusionImage: string;
     try {
-        conclusionImage = await generatePageImage(conclusionPagePrompt, lastContentPage);
+        conclusionImage = await generatePageImage(conclusionPagePrompt, lastContentPage, undefined, undefined, includeDialogue);
     } catch (error) {
         console.warn('Conclusion page generation failed, retrying once...', error);
-        conclusionImage = await generatePageImage(conclusionPagePrompt, lastContentPage);
+        conclusionImage = await generatePageImage(conclusionPagePrompt, lastContentPage, undefined, undefined, includeDialogue);
     }
     allImages.push(conclusionImage);
+    generatedPages.push({ 
+        pageNumber: scriptPages.length + 1, 
+        image: conclusionImage, 
+        title: 'Conclusion' 
+    });
+
+    // Step 8: Generate Story Arc Summary
+    performanceTracker.startTimer('story_analysis');
+    updateProgress({ 
+        phase: 'completion',
+        message: 'Analyzing story arc and creating summary...', 
+        progress: 95,
+        characterSketches: characterSketches,
+        environmentSketches: environmentSketches,
+        generatedPages: generatedPages,
+        currentStepStartTime: Date.now(),
+        stepTimings: performanceTracker.getTimings()
+    });
+    const storyArcSummary = await generateStoryArcSummary(scriptPages, characters);
+    const analysisTiming = performanceTracker.endTimer('story_analysis');
+    const pageGenTiming = performanceTracker.endTimer('page_generation');
+    const totalTiming = performanceTracker.endTimer('total_generation');
+    const totalTime = Date.now() - startTime;
+
+    updateProgress({ 
+        phase: 'completion',
+        message: `Comic generation complete! (Total: ${(totalTime / 1000).toFixed(1)}s)`, 
+        progress: 100,
+        characterSketches: characterSketches,
+        environmentSketches: environmentSketches,
+        generatedPages: generatedPages,
+        storyArcSummary: `Theme: ${storyArcSummary.overallTheme}\n\nKey Events:\n${storyArcSummary.keyEvents.map(event => `• ${event}`).join('\n')}\n\nCharacter Development:\n${storyArcSummary.characterDevelopment.map(dev => `• ${dev}`).join('\n')}`,
+        stepTimings: performanceTracker.getTimings(),
+        estimatedTimeRemaining: 0
+    });
+    
+    return {
+        images: allImages,
+        characters: characters,
+        pages: scriptPages,
+        characterSketches: characterSketches,
+        environmentSketches: environmentSketches,
+        storyArcSummary: storyArcSummary,
+        performanceTimings: performanceTracker.getTimings(),
+        totalGenerationTime: totalTime
+    };
+};
+
+// Schema for story progression generation
+const storyProgressionSchema = {
+    type: Type.ARRAY,
+    items: {
+        type: Type.OBJECT,
+        properties: {
+            id: {
+                type: Type.STRING,
+                description: "Unique identifier for this progression option."
+            },
+            title: {
+                type: Type.STRING,
+                description: "Compelling title for this story progression."
+            },
+            description: {
+                type: Type.STRING,
+                description: "Brief description of what this progression offers."
+            },
+            direction: {
+                type: Type.STRING,
+                description: "Type of story progression: sequel, prequel, side_story, or alternate_ending"
+            },
+            synopsis: {
+                type: Type.STRING,
+                description: "Detailed synopsis of the progression storyline."
+            },
+            estimatedPages: {
+                type: Type.INTEGER,
+                description: "Estimated number of pages this progression would require."
+            },
+            thematicFocus: {
+                type: Type.STRING,
+                description: "Main theme or focus of this progression."
+            },
+            newCharacters: {
+                type: Type.ARRAY,
+                items: {
+                    type: Type.STRING
+                },
+                description: "Names of potential new characters to be introduced."
+            },
+            plotHooks: {
+                type: Type.ARRAY,
+                items: {
+                    type: Type.STRING
+                },
+                description: "Key plot hooks that would drive this progression."
+            }
+        },
+        required: ['id', 'title', 'description', 'direction', 'synopsis', 'estimatedPages', 'thematicFocus', 'plotHooks']
+    }
+};
+
+/**
+ * Analyzes a completed comic story and generates three compelling progression options
+ */
+export const analyzeStoryProgressions = async (
+    currentIteration: ComicIteration,
+    apiKey: string
+): Promise<StoryProgression[]> => {
+    ai = new GoogleGenAI({ apiKey });
+    
+    const characterDescriptions = currentIteration.characters.map(c => `${c.name}: ${c.description}`).join('; ');
+    const storyContext = currentIteration.pages.map(page => 
+        page.panels.map(panel => `Panel ${panel.panelNumber}: ${panel.description}${panel.dialogue ? ` - "${panel.dialogue}"` : ''}`).join(' ')
+    ).join('\n');
+
+    const prompt = `You are a master story architect and creative director specializing in compelling narrative continuation and expansion. You understand how to build upon existing stories while maintaining thematic coherence and character development.
+
+STORY ANALYSIS MISSION:
+Analyze this completed comic story and generate exactly 3 distinct, professionally compelling progression options that would make readers excited to continue the journey.
+
+CURRENT STORY CONTEXT:
+Title: "${currentIteration.title}"
+Author: ${currentIteration.author}
+Style: ${currentIteration.style}
+Characters: ${characterDescriptions}
+
+STORY CONTENT:
+${storyContext}
+
+PROGRESSION REQUIREMENTS:
+1. Each option must offer a genuinely different storytelling approach
+2. Maintain thematic consistency with the original story
+3. Introduce compelling new conflicts or deepen existing ones
+4. Consider character growth opportunities
+5. Ensure each progression has strong visual storytelling potential
+6. Balance familiar elements with fresh narrative directions
+
+PROGRESSION TYPES TO CONSIDER:
+- SEQUEL: Continue the story forward in time, exploring consequences and new challenges
+- PREQUEL: Explore backstory or origins that add depth to current events
+- SIDE_STORY: Focus on secondary characters or parallel events during the main story
+- ALTERNATE_ENDING: Explore "what if" scenarios from a key decision point
+
+CREATIVE GUIDELINES:
+- Think like a professional comic editor planning a series
+- Each progression should feel like a natural extension of the story world
+- Consider reader engagement and emotional investment
+- Include potential for visual spectacle and character development
+- Ensure each option offers unique thematic exploration
+
+QUALITY STANDARDS:
+- Professional comic book industry storytelling standards
+- Character-driven narrative development
+- Visual storytelling opportunities
+- Reader engagement and page-turning moments
+- Thematic depth and emotional resonance
+
+Generate 3 distinct story progression options that would make this comic into a compelling series.`;
+
+    try {
+        const response = await ai.models.generateContent({
+            model: "gemini-2.5-flash",
+            contents: prompt,
+            config: {
+                responseMimeType: "application/json",
+                responseSchema: storyProgressionSchema,
+            },
+        });
+
+        const jsonText = response.text.trim();
+        return JSON.parse(jsonText) as StoryProgression[];
+    } catch (e) {
+        console.error("Error generating story progressions:", e);
+        throw new Error("Failed to generate story progression options.");
+    }
+};
+
+/**
+ * Generates a comic continuation based on selected story progression
+ */
+export const generateComicContinuation = async (
+    previousIteration: ComicIteration,
+    selectedProgression: StoryProgression,
+    updateProgress: (state: LoadingState) => void,
+    apiKey: string
+): Promise<ComicIteration> => {
+    ai = new GoogleGenAI({ apiKey });
+    
+    updateProgress({ isLoading: true, message: 'Developing continuation story...', progress: 10 });
+    
+    // Create the continuation story details
+    const continuationStory = `${selectedProgression.synopsis}\n\nBuilding upon: "${previousIteration.story}"\nProgression Focus: ${selectedProgression.thematicFocus}`;
+    
+    // Generate new character profiles (combining existing + new characters)
+    updateProgress({ isLoading: true, message: 'Expanding character cast...', progress: 25 });
+    let allCharacters = [...previousIteration.characters];
+    
+    if (selectedProgression.newCharacters && selectedProgression.newCharacters.length > 0) {
+        const newCharacterPrompt = `Create detailed character profiles for these new characters to be introduced in the story continuation: ${selectedProgression.newCharacters.join(', ')}
+
+Context: This is a continuation of "${previousIteration.title}" in the ${previousIteration.style} style.
+Story Direction: ${selectedProgression.direction}
+Thematic Focus: ${selectedProgression.thematicFocus}
+
+Existing Characters: ${previousIteration.characters.map(c => `${c.name}: ${c.description}`).join('; ')}
+
+Create characters that complement the existing cast and serve the new storyline.`;
+
+        try {
+            const newCharacterResponse = await ai.models.generateContent({
+                model: "gemini-2.5-flash",
+                contents: newCharacterPrompt,
+                config: {
+                    responseMimeType: "application/json",
+                    responseSchema: characterProfileSchema,
+                },
+            });
+
+            const newCharacters = JSON.parse(newCharacterResponse.text.trim()) as CharacterProfile[];
+            allCharacters = [...allCharacters, ...newCharacters];
+        } catch (e) {
+            console.warn("Failed to generate new characters, continuing with existing cast:", e);
+        }
+    }
+
+    // Generate manga script for continuation
+    updateProgress({ isLoading: true, message: 'Writing continuation script...', progress: 40 });
+    const continuationPages = await generateMangaScript(continuationStory, previousIteration.style, allCharacters, previousIteration.includeDialogue ?? true);
+    
+    if (continuationPages.length === 0) {
+        throw new Error("The continuation script was empty. Please try a different progression.");
+    }
+
+    // Generate images for continuation
+    const totalPagesToGenerate = continuationPages.length + 1; // story pages + conclusion
+    let pagesGenerated = 0;
+    const allImages: string[] = [];
+
+    const updatePageProgress = () => {
+        pagesGenerated++;
+        const progress = 50 + Math.round((pagesGenerated / totalPagesToGenerate) * 45);
+        return progress;
+    };
+
+    const characterPromptPart = allCharacters.map(c => `${c.name}: ${c.description}`).join('; ');
+    
+    // Use the last image from previous iteration as style reference
+    const styleReference = previousIteration.images[previousIteration.images.length - 1];
+
+    // Generate each page from the continuation script
+    for (const page of continuationPages) {
+        const progress = updatePageProgress();
+        updateProgress({ isLoading: true, message: `Drawing continuation page ${page.pageNumber} of ${continuationPages.length}...`, progress });
+        
+        const panelPrompts = page.panels.map(p => {
+            let panelString = `Panel ${p.panelNumber}: ${p.description}`;
+            if (p.dialogue && p.speaker) {
+                const speakingCharacter = allCharacters.find(c => c.name === p.speaker);
+                if (speakingCharacter) {
+                    panelString += `\n  - Dialogue: The character speaking is ${speakingCharacter.name} (${speakingCharacter.description}). They say: "${p.dialogue}"`;
+                } else {
+                    panelString += `\n  - Dialogue (${p.speaker}): "${p.dialogue}"`;
+                }
+            }
+            return panelString;
+        }).join('\n\n');
+
+        let styleDescription = "";
+        if (previousIteration.style === 'Wacky') {
+            styleDescription = "Wacky One Piece-style with exaggerated, rubber-hose animation aesthetics, impossible physics, and zany character designs";
+        } else if (previousIteration.style === 'Chibi') {
+            styleDescription = "Chibi style with cute, simplified characters having large heads and minimal features";
+        } else {
+            styleDescription = previousIteration.style;
+        }
+
+        const pagePrompt = `TASK: Create a manga continuation page image.
+STYLE: ${styleDescription}, black and white.
+ASPECT RATIO: 3:4 vertical.
+CHARACTERS: ${characterPromptPart}.
+PAGE: ${page.pageNumber}, with ${page.panels.length} panels.
+STORY CONTINUATION: This continues the story "${previousIteration.title}" with progression: ${selectedProgression.title}
+
+PANEL INSTRUCTIONS:
+${panelPrompts}
+
+FINAL INSTRUCTIONS: Maintain visual consistency with the original story. Arrange panels dynamically. ${(previousIteration.includeDialogue ?? true) ? 'Place dialogue in speech bubbles for the correct characters.' : 'DO NOT include any dialogue, speech bubbles, or text - this is pure visual storytelling.'} Generate ONLY the image.`;
+        
+        let pageImage: string;
+        try {
+            pageImage = await generatePageImage(pagePrompt, styleReference, page, previousIteration.style, previousIteration.includeDialogue ?? true);
+        } catch (error) {
+            console.warn(`Continuation page ${page.pageNumber} generation failed, retrying once...`, error);
+            pageImage = await generatePageImage(pagePrompt, styleReference, page, previousIteration.style, previousIteration.includeDialogue ?? true);
+        }
+        allImages.push(pageImage);
+    }
+
+    // Generate conclusion page for continuation
+    const conclusionProgress = updatePageProgress();
+    updateProgress({ isLoading: true, message: 'Creating continuation conclusion...', progress: conclusionProgress });
+    
+    let styleDescription = "";
+    if (previousIteration.style === 'Wacky') {
+        styleDescription = "Wacky One Piece-style with exaggerated, rubber-hose animation aesthetics, impossible physics, and zany character designs";
+    } else if (previousIteration.style === 'Chibi') {
+        styleDescription = "Chibi style with cute, simplified characters having large heads and minimal features";
+    } else {
+        styleDescription = previousIteration.style;
+    }
+    
+    const conclusionPagePrompt = `TASK: Create a final, evocative manga conclusion page for the continuation.
+STYLE: ${styleDescription}, black and white.
+ASPECT RATIO: 3:4 vertical.
+STORY CONTEXT: This concludes the continuation "${selectedProgression.title}" of the original story "${previousIteration.title}".
+THEMATIC FOCUS: ${selectedProgression.thematicFocus}
+INSTRUCTIONS: Create a satisfying conclusion that reflects the continuation's thematic focus. Include a small, stylized "To Be Continued..." or "End of Chapter" text. Generate ONLY the image.`;
+    
+    const lastContentPage = allImages[allImages.length - 1];
+    let conclusionImage: string;
+    try {
+        conclusionImage = await generatePageImage(conclusionPagePrompt, lastContentPage, undefined, undefined, previousIteration.includeDialogue ?? true);
+    } catch (error) {
+        console.warn('Continuation conclusion page generation failed, retrying once...', error);
+        conclusionImage = await generatePageImage(conclusionPagePrompt, lastContentPage, undefined, undefined, previousIteration.includeDialogue ?? true);
+    }
+    allImages.push(conclusionImage);
+
+    updateProgress({ isLoading: true, message: 'Finalizing continuation...', progress: 100 });
+
+    // Create the new iteration
+    const newIteration: ComicIteration = {
+        id: `${previousIteration.id}_${selectedProgression.id}`,
+        title: selectedProgression.title,
+        story: continuationStory,
+        author: previousIteration.author,
+        style: previousIteration.style,
+        includeDialogue: previousIteration.includeDialogue ?? true,
+        images: allImages,
+        characters: allCharacters,
+        pages: continuationPages,
+        generatedAt: new Date()
+    };
 
-    updateProgress({ isLoading: true, message: 'Finishing up...', progress: 100 });
-    return allImages;
+    return newIteration;
 };

services/pdfService.ts

@@ -1,39 +1,360 @@
-
-// Use global jspdf from CDN
-declare const jspdf: any;
+import { jsPDF } from 'jspdf';
+import type { ComicSeries, ComicIteration } from '../types';
 
 export const createMangaPdf = (images: string[], title: string): void => {
-    const { jsPDF } = jspdf;
-    // Using a common manga/comic book aspect ratio (3:4) for PDF pages.
-    const pdfWidth = 150; // mm
-    const pdfHeight = 200; // mm to maintain 3:4 aspect ratio
+    console.log('createMangaPdf called with:', { imageCount: images.length, title });
+    
+    if (images.length === 0) {
+        console.error('No images provided for PDF creation');
+        return;
+    }
+    
+    // Create PDF with first image dimensions to maintain aspect ratio
+    let doc: jsPDF | null = null;
+
+    images.forEach((imgData, index) => {
+        if (index === 0) {
+            // Use jsPDF's built-in method to get image properties
+            try {
+                const imgProps = (doc as any)?.getImageProperties ? 
+                    (doc as any).getImageProperties(`data:image/jpeg;base64,${imgData}`) : 
+                    null;
+                
+                // If we can't get properties, create a temporary jsPDF instance to get them
+                if (!imgProps) {
+                    const tempDoc = new jsPDF();
+                    const tempImgProps = (tempDoc as any).getImageProperties(`data:image/jpeg;base64,${imgData}`);
+                    var aspectRatio = tempImgProps.width / tempImgProps.height;
+                    console.log('Image dimensions from temp doc:', { width: tempImgProps.width, height: tempImgProps.height, aspectRatio });
+                } else {
+                    var aspectRatio = imgProps.width / imgProps.height;
+                    console.log('Image dimensions:', { width: imgProps.width, height: imgProps.height, aspectRatio });
+                }
+            } catch (error) {
+                // Fallback: assume standard comic book aspect ratio (3:4 portrait)
+                console.warn('Could not determine image dimensions, using default comic aspect ratio:', error);
+                var aspectRatio = 3 / 4; // Standard comic book ratio
+            }
+            
+            // Scale to reasonable print size while maintaining aspect ratio
+            // Use a base size and scale according to aspect ratio
+            const baseSize = 200; // mm - base dimension for the larger side
+            
+            let pageWidth, pageHeight;
+            if (aspectRatio > 1) {
+                // Landscape/Wide format
+                pageWidth = baseSize;
+                pageHeight = baseSize / aspectRatio;
+            } else {
+                // Portrait/Tall format  
+                pageHeight = baseSize;
+                pageWidth = baseSize * aspectRatio;
+            }
+            
+            console.log('PDF page dimensions:', { pageWidth, pageHeight, aspectRatio });
+            
+            doc = new jsPDF({
+                orientation: aspectRatio > 1 ? 'landscape' : 'portrait',
+                unit: 'mm',
+                format: [pageWidth, pageHeight]
+            });
+            
+            // Add first image filling entire page with no margins
+            doc.addImage(`data:image/jpeg;base64,${imgData}`, 'JPEG', 0, 0, pageWidth, pageHeight);
+        } else {
+            // For subsequent pages, maintain the same format as the first page
+            if (doc) {
+                doc.addPage();
+                const pageSize = doc.internal.pageSize;
+                const currentWidth = pageSize.getWidth();
+                const currentHeight = pageSize.getHeight();
+                doc.addImage(`data:image/jpeg;base64,${imgData}`, 'JPEG', 0, 0, currentWidth, currentHeight);
+            }
+        }
+    });
+
+    const safeTitle = title.replace(/[^a-z0-9]/gi, '_').toLowerCase();
+    const filename = `${safeTitle}_manga.pdf`;
+    console.log('Saving PDF with filename:', filename);
+    
+    try {
+        doc.save(filename);
+        console.log('PDF save command executed successfully');
+    } catch (error) {
+        console.error('Error saving PDF:', error);
+    }
+};
+
+/**
+ * Creates a comprehensive PDF from a complete comic series with multiple iterations
+ * Uses the aspect ratio of the first image in the series
+ */
+export const createComicSeriesPdf = (comicSeries: ComicSeries): void => {
+    console.log('createComicSeriesPdf called with:', { iterations: comicSeries.iterations.length, seriesTitle: comicSeries.seriesTitle });
+    
+    // Get dimensions from the first image in the first iteration
+    const firstIteration = comicSeries.iterations[0];
+    if (!firstIteration || firstIteration.images.length === 0) {
+        console.error('No images found in comic series');
+        return;
+    }
+    
+    const firstImageData = firstIteration.images[0];
+    
+    // Use jsPDF's built-in method to get image properties
+    let aspectRatio;
+    try {
+        const tempDoc = new jsPDF();
+        const imgProps = (tempDoc as any).getImageProperties(`data:image/jpeg;base64,${firstImageData}`);
+        aspectRatio = imgProps.width / imgProps.height;
+        console.log('Series image dimensions:', { width: imgProps.width, height: imgProps.height, aspectRatio });
+    } catch (error) {
+        console.warn('Could not determine series image dimensions, using default comic aspect ratio:', error);
+        aspectRatio = 3 / 4; // Standard comic book ratio
+    }
+    
+    // Use same sizing logic as single comic PDF
+    const baseSize = 200;
+    let pdfWidth, pdfHeight;
+    if (aspectRatio > 1) {
+        pdfWidth = baseSize;
+        pdfHeight = baseSize / aspectRatio;
+    } else {
+        pdfHeight = baseSize;
+        pdfWidth = baseSize * aspectRatio;
+    }
+    
+    console.log('Series PDF dimensions:', { pdfWidth, pdfHeight, aspectRatio });
+    
     const doc = new jsPDF({
-        orientation: 'portrait',
+        orientation: aspectRatio > 1 ? 'landscape' : 'portrait',
         unit: 'mm',
         format: [pdfWidth, pdfHeight]
     });
 
-    images.forEach((imgData, index) => {
-        if (index > 0) {
-            doc.addPage();
-        }
-        const imgProps = doc.getImageProperties(`data:image/jpeg;base64,${imgData}`);
-        const aspectRatio = imgProps.width / imgProps.height;
+    let isFirstPage = true;
+    let totalPages = 0;
+
+    // Add title page for the series
+    if (isFirstPage) {
+        // Create a series title page
+        doc.setFillColor(20, 20, 30);
+        doc.rect(0, 0, pdfWidth, pdfHeight, 'F');
+        
+        // Title
+        doc.setTextColor(255, 255, 255);
+        doc.setFontSize(24);
+        doc.setFont('helvetica', 'bold');
+        const titleLines = doc.splitTextToSize(comicSeries.seriesTitle, pdfWidth - 20);
+        const titleY = pdfHeight / 2 - 30;
+        doc.text(titleLines, pdfWidth / 2, titleY, { align: 'center' });
+        
+        // Author
+        doc.setFontSize(16);
+        doc.setFont('helvetica', 'normal');
+        doc.text(`By ${comicSeries.author}`, pdfWidth / 2, titleY + 20, { align: 'center' });
+        
+        // Series info
+        doc.setFontSize(12);
+        doc.text(`Complete Series • ${comicSeries.iterations.length} Chapters • ${comicSeries.totalPages} Pages`, 
+                 pdfWidth / 2, titleY + 35, { align: 'center' });
         
-        let imgWidth = pdfWidth;
-        let imgHeight = pdfWidth / aspectRatio;
+        // Created date
+        doc.setFontSize(10);
+        doc.setTextColor(180, 180, 180);
+        doc.text(`Created: ${comicSeries.createdAt.toLocaleDateString()}`, 
+                 pdfWidth / 2, titleY + 50, { align: 'center' });
+        
+        // "Comic Genesis AI" attribution
+        doc.text('Generated by Comic Genesis AI', 
+                 pdfWidth / 2, pdfHeight - 20, { align: 'center' });
+        
+        isFirstPage = false;
+        totalPages = 1;
+    }
 
-        if (imgHeight > pdfHeight) {
-            imgHeight = pdfHeight;
-            imgWidth = pdfHeight * aspectRatio;
+    // Add each iteration with separator pages
+    comicSeries.iterations.forEach((iteration, iterationIndex) => {
+        // Add chapter divider page (except for the first iteration)
+        if (iterationIndex > 0) {
+            doc.addPage();
+            totalPages++;
+            
+            // Chapter divider page
+            doc.setFillColor(30, 30, 40);
+            doc.rect(0, 0, pdfWidth, pdfHeight, 'F');
+            
+            doc.setTextColor(255, 255, 255);
+            doc.setFontSize(20);
+            doc.setFont('helvetica', 'bold');
+            
+            const chapterTitle = `Chapter ${iterationIndex + 1}`;
+            doc.text(chapterTitle, pdfWidth / 2, pdfHeight / 2 - 20, { align: 'center' });
+            
+            doc.setFontSize(16);
+            doc.setFont('helvetica', 'normal');
+            const iterationTitleLines = doc.splitTextToSize(iteration.title, pdfWidth - 20);
+            doc.text(iterationTitleLines, pdfWidth / 2, pdfHeight / 2, { align: 'center' });
+            
+            doc.setFontSize(10);
+            doc.setTextColor(180, 180, 180);
+            doc.text(`${iteration.images.length} pages`, 
+                     pdfWidth / 2, pdfHeight / 2 + 20, { align: 'center' });
         }
 
-        const x = (pdfWidth - imgWidth) / 2;
-        const y = (pdfHeight - imgHeight) / 2;
+        // Add all images from this iteration
+        iteration.images.forEach((imgData, imageIndex) => {
+            if (!isFirstPage || imageIndex > 0) {
+                doc.addPage();
+                totalPages++;
+            }
+            
+            try {
+                // Fill entire page with image
+                doc.addImage(`data:image/jpeg;base64,${imgData}`, 'JPEG', 0, 0, pdfWidth, pdfHeight);
+                
+                // Add page number footer
+                doc.setFontSize(8);
+                doc.setTextColor(120, 120, 120);
+                doc.text(`${totalPages}`, pdfWidth - 10, pdfHeight - 5, { align: 'right' });
+                
+            } catch (error) {
+                console.warn(`Failed to add image ${imageIndex} from iteration ${iterationIndex}:`, error);
+                
+                // Add error page
+                doc.setFillColor(50, 50, 60);
+                doc.rect(0, 0, pdfWidth, pdfHeight, 'F');
+                doc.setTextColor(200, 200, 200);
+                doc.setFontSize(12);
+                doc.text('Image could not be loaded', pdfWidth / 2, pdfHeight / 2, { align: 'center' });
+            }
+            
+            if (isFirstPage) {
+                isFirstPage = false;
+            }
+        });
+    });
+
+    // Add final credits/summary page
+    doc.addPage();
+    totalPages++;
+    
+    doc.setFillColor(15, 15, 25);
+    doc.rect(0, 0, pdfWidth, pdfHeight, 'F');
+    
+    doc.setTextColor(255, 255, 255);
+    doc.setFontSize(18);
+    doc.setFont('helvetica', 'bold');
+    doc.text('The End', pdfWidth / 2, pdfHeight / 2 - 30, { align: 'center' });
+    
+    doc.setFontSize(12);
+    doc.setFont('helvetica', 'normal');
+    doc.text(`Complete Series: ${comicSeries.seriesTitle}`, pdfWidth / 2, pdfHeight / 2 - 10, { align: 'center' });
+    doc.text(`By ${comicSeries.author}`, pdfWidth / 2, pdfHeight / 2 + 5, { align: 'center' });
+    
+    doc.setFontSize(10);
+    doc.setTextColor(180, 180, 180);
+    doc.text(`${comicSeries.iterations.length} chapters • ${totalPages} total pages`, 
+             pdfWidth / 2, pdfHeight / 2 + 25, { align: 'center' });
+    
+    doc.text(`Generated: ${new Date().toLocaleDateString()}`, 
+             pdfWidth / 2, pdfHeight / 2 + 40, { align: 'center' });
+    
+    doc.text('Powered by Comic Genesis AI & Google Gemini', 
+             pdfWidth / 2, pdfHeight - 15, { align: 'center' });
 
-        doc.addImage(`data:image/jpeg;base64,${imgData}`, 'JPEG', x, y, imgWidth, imgHeight);
+    // Save the PDF
+    const safeTitle = comicSeries.seriesTitle.replace(/[^a-z0-9]/gi, '_').toLowerCase();
+    doc.save(`${safeTitle}_complete_series.pdf`);
+};
+
+/**
+ * Creates a PDF from a single comic iteration with chapter formatting
+ * Uses the aspect ratio of the first image in the iteration
+ */
+export const createIterationPdf = (iteration: ComicIteration, chapterNumber?: number): void => {
+    if (iteration.images.length === 0) {
+        console.error('No images found in iteration');
+        return;
+    }
+    
+    // Get dimensions from the first image using jsPDF
+    const firstImageData = iteration.images[0];
+    
+    let aspectRatio;
+    try {
+        const tempDoc = new jsPDF();
+        const imgProps = (tempDoc as any).getImageProperties(`data:image/jpeg;base64,${firstImageData}`);
+        aspectRatio = imgProps.width / imgProps.height;
+        console.log('Iteration image dimensions:', { width: imgProps.width, height: imgProps.height, aspectRatio });
+    } catch (error) {
+        console.warn('Could not determine iteration image dimensions, using default comic aspect ratio:', error);
+        aspectRatio = 3 / 4; // Standard comic book ratio
+    }
+    
+    // Use same sizing logic as other PDF functions
+    const baseSize = 200;
+    let pdfWidth, pdfHeight;
+    if (aspectRatio > 1) {
+        pdfWidth = baseSize;
+        pdfHeight = baseSize / aspectRatio;
+    } else {
+        pdfHeight = baseSize;
+        pdfWidth = baseSize * aspectRatio;
+    }
+    
+    const doc = new jsPDF({
+        orientation: aspectRatio > 1 ? 'landscape' : 'portrait',
+        unit: 'mm',
+        format: [pdfWidth, pdfHeight]
     });
 
-    const safeTitle = title.replace(/[^a-z0-9]/gi, '_').toLowerCase();
-    doc.save(`${safeTitle}_manga.pdf`);
+    let isFirstPage = true;
+
+    // Add chapter title page if chapter number is provided
+    if (chapterNumber) {
+        doc.setFillColor(20, 20, 30);
+        doc.rect(0, 0, pdfWidth, pdfHeight, 'F');
+        
+        doc.setTextColor(255, 255, 255);
+        doc.setFontSize(20);
+        doc.setFont('helvetica', 'bold');
+        doc.text(`Chapter ${chapterNumber}`, pdfWidth / 2, pdfHeight / 2 - 20, { align: 'center' });
+        
+        doc.setFontSize(16);
+        doc.setFont('helvetica', 'normal');
+        const titleLines = doc.splitTextToSize(iteration.title, pdfWidth - 20);
+        doc.text(titleLines, pdfWidth / 2, pdfHeight / 2, { align: 'center' });
+        
+        doc.setFontSize(10);
+        doc.text(`By ${iteration.author}`, pdfWidth / 2, pdfHeight / 2 + 20, { align: 'center' });
+        
+        isFirstPage = false;
+    }
+
+    // Add all images
+    iteration.images.forEach((imgData, index) => {
+        if (!isFirstPage || index > 0) {
+            doc.addPage();
+        }
+        
+        try {
+            // Fill entire page with image
+            doc.addImage(`data:image/jpeg;base64,${imgData}`, 'JPEG', 0, 0, pdfWidth, pdfHeight);
+            
+        } catch (error) {
+            console.warn(`Failed to add image ${index}:`, error);
+        }
+        
+        if (isFirstPage) {
+            isFirstPage = false;
+        }
+    });
+
+    const safeTitle = iteration.title.replace(/[^a-z0-9]/gi, '_').toLowerCase();
+    const fileName = chapterNumber ? 
+        `${safeTitle}_chapter_${chapterNumber}.pdf` : 
+        `${safeTitle}.pdf`;
+    
+    doc.save(fileName);
 };

types.ts

@@ -33,9 +33,111 @@ export interface StoryTemplate {
   icon: string;
 }
 
+export interface ComicGenerationOptions {
+  includeDialogue: boolean;
+  title: string;
+  story: string;
+  author: string;
+  style: MangaStyle;
+}
+
 export interface NarrativeStructure {
   act: number;
   name: string;
   description: string;
   keyElements: string[];
+}
+
+export interface StoryProgression {
+  id: string;
+  title: string;
+  description: string;
+  direction: 'sequel' | 'prequel' | 'side_story' | 'alternate_ending';
+  synopsis: string;
+  estimatedPages: number;
+  thematicFocus: string;
+  newCharacters?: string[];
+  plotHooks: string[];
+}
+
+export interface ComicIteration {
+  id: string;
+  title: string;
+  story: string;
+  author: string;
+  style: MangaStyle;
+  includeDialogue?: boolean;
+  images: string[];
+  characters: CharacterProfile[];
+  pages: MangaPage[];
+  generatedAt: Date;
+}
+
+export interface ComicSeries {
+  seriesTitle: string;
+  author: string;
+  iterations: ComicIteration[];
+  totalPages: number;
+  createdAt: Date;
+  lastUpdated: Date;
+  totalGenerationTime?: number;
+  performanceSummary?: PerformanceTiming[];
+}
+
+export interface ExplorationPrompt {
+  showPrompt: boolean;
+  onContinue: () => void;
+  onFinish: (removeApiKey: boolean) => void;
+  generationTime: number;
+  totalPages: number;
+}
+
+export interface OptimizedImage {
+  compressed: string;  // For display (smaller size)
+  full: string;       // For PDF generation (full quality)
+  width: number;
+  height: number;
+  compressedSize: number;
+  fullSize: number;
+}
+
+export interface CharacterSketch {
+  characterName: string;
+  sketchImage: string;
+  description: string;
+}
+
+export interface EnvironmentSketch {
+  environmentName: string;
+  sketchImage: string;
+  description: string;
+}
+
+export interface GenerationProgress {
+  phase: 'character_analysis' | 'character_sketches' | 'environment_sketches' | 'script_writing' | 'page_generation' | 'completion';
+  message: string;
+  progress: number;
+  characterSketches?: CharacterSketch[];
+  environmentSketches?: EnvironmentSketch[];
+  generatedPages?: { pageNumber: number; image: string; title: string }[];
+  storyArcSummary?: string;
+  currentStepStartTime?: number;
+  stepTimings?: PerformanceTiming[];
+  estimatedTimeRemaining?: number;
+}
+
+export interface PerformanceTiming {
+  stepName: string;
+  startTime: number;
+  endTime: number;
+  duration: number;
+  timestamp: string;
+}
+
+export interface StoryArcSummary {
+  overallTheme: string;
+  keyEvents: string[];
+  characterDevelopment: string[];
+  narrativeProgression: string;
+  emotionalJourney: string;
 }

utils/imageOptimization.ts

@@ -0,0 +1,223 @@
+export interface OptimizedImage {
+    compressed: string;  // For display (smaller size)
+    full: string;       // For PDF generation (full quality)
+    width: number;
+    height: number;
+    compressedSize: number;
+    fullSize: number;
+}
+
+export interface PerformanceTiming {
+    stepName: string;
+    startTime: number;
+    endTime: number;
+    duration: number;
+    timestamp: string;
+}
+
+/**
+ * Compress base64 image for display purposes while maintaining quality for PDF
+ */
+export async function optimizeImage(base64Image: string, quality: number = 0.7): Promise<OptimizedImage> {
+    return new Promise((resolve, reject) => {
+        try {
+            const img = new Image();
+            img.onload = () => {
+                // Create canvas for compression
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d')!;
+                
+                // Set canvas size to image size
+                canvas.width = img.width;
+                canvas.height = img.height;
+                
+                // Draw image on canvas
+                ctx.drawImage(img, 0, 0);
+                
+                // Create compressed version for display
+                const compressedBase64 = canvas.toDataURL('image/jpeg', quality);
+                
+                // Calculate sizes
+                const fullSize = base64Image.length * 0.75; // Approximate bytes
+                const compressedSize = compressedBase64.split(',')[1].length * 0.75;
+                
+                resolve({
+                    compressed: compressedBase64.split(',')[1], // Remove data:image/jpeg;base64, prefix
+                    full: base64Image,
+                    width: img.width,
+                    height: img.height,
+                    compressedSize: Math.round(compressedSize),
+                    fullSize: Math.round(fullSize)
+                });
+            };
+            
+            img.onerror = () => reject(new Error('Failed to load image for optimization'));
+            img.src = `data:image/jpeg;base64,${base64Image}`;
+        } catch (error) {
+            reject(error);
+        }
+    });
+}
+
+/**
+ * Batch optimize multiple images
+ */
+export async function optimizeImages(images: string[], quality: number = 0.7): Promise<OptimizedImage[]> {
+    const optimizationPromises = images.map(img => optimizeImage(img, quality));
+    return Promise.all(optimizationPromises);
+}
+
+/**
+ * Performance timing utilities
+ */
+export class PerformanceTracker {
+    private timings: PerformanceTiming[] = [];
+    private activeTimers: Map<string, number> = new Map();
+
+    startTimer(stepName: string): void {
+        const startTime = performance.now();
+        this.activeTimers.set(stepName, startTime);
+    }
+
+    endTimer(stepName: string): PerformanceTiming {
+        const endTime = performance.now();
+        const startTime = this.activeTimers.get(stepName);
+        
+        if (!startTime) {
+            throw new Error(`Timer for "${stepName}" was not started`);
+        }
+        
+        const timing: PerformanceTiming = {
+            stepName,
+            startTime,
+            endTime,
+            duration: endTime - startTime,
+            timestamp: new Date().toISOString()
+        };
+        
+        this.timings.push(timing);
+        this.activeTimers.delete(stepName);
+        
+        return timing;
+    }
+
+    getTimings(): PerformanceTiming[] {
+        return [...this.timings];
+    }
+
+    getTotalDuration(): number {
+        return this.timings.reduce((total, timing) => total + timing.duration, 0);
+    }
+
+    getTimingByStep(stepName: string): PerformanceTiming | undefined {
+        return this.timings.find(timing => timing.stepName === stepName);
+    }
+
+    clear(): void {
+        this.timings = [];
+        this.activeTimers.clear();
+    }
+
+    getFormattedSummary(): string {
+        if (this.timings.length === 0) return 'No performance data available';
+        
+        const summary = this.timings.map(timing => 
+            `${timing.stepName}: ${(timing.duration / 1000).toFixed(2)}s`
+        ).join('\n');
+        
+        const total = (this.getTotalDuration() / 1000).toFixed(2);
+        return `${summary}\n\nTotal: ${total}s`;
+    }
+}
+
+/**
+ * Lazy loading utilities
+ */
+export interface LazyLoadOptions {
+    rootMargin?: string;
+    threshold?: number;
+    fallbackDelay?: number;
+}
+
+export function createLazyLoader(options: LazyLoadOptions = {}) {
+    const { rootMargin = '50px', threshold = 0.1, fallbackDelay = 300 } = options;
+    
+    if ('IntersectionObserver' in window) {
+        return new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const img = entry.target as HTMLImageElement;
+                    const src = img.dataset.src;
+                    if (src) {
+                        img.src = src;
+                        img.classList.remove('lazy');
+                        img.classList.add('loaded');
+                    }
+                }
+            });
+        }, { rootMargin, threshold });
+    }
+    
+    // Fallback for older browsers
+    return {
+        observe: (element: Element) => {
+            setTimeout(() => {
+                const img = element as HTMLImageElement;
+                const src = img.dataset.src;
+                if (src) {
+                    img.src = src;
+                    img.classList.remove('lazy');
+                    img.classList.add('loaded');
+                }
+            }, fallbackDelay);
+        },
+        disconnect: () => {},
+        unobserve: () => {}
+    };
+}
+
+/**
+ * Memory usage monitoring
+ */
+export function getMemoryUsage(): { used: number; total: number; percentage: number } | null {
+    if ('memory' in performance) {
+        const memory = (performance as any).memory;
+        return {
+            used: Math.round(memory.usedJSHeapSize / 1024 / 1024), // MB
+            total: Math.round(memory.totalJSHeapSize / 1024 / 1024), // MB
+            percentage: Math.round((memory.usedJSHeapSize / memory.totalJSHeapSize) * 100)
+        };
+    }
+    return null;
+}
+
+/**
+ * Debounce utility for performance
+ */
+export function debounce<T extends (...args: any[]) => any>(
+    func: T,
+    wait: number
+): (...args: Parameters<T>) => void {
+    let timeout: NodeJS.Timeout;
+    return (...args: Parameters<T>) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func(...args), wait);
+    };
+}
+
+/**
+ * Throttle utility for performance
+ */
+export function throttle<T extends (...args: any[]) => any>(
+    func: T,
+    limit: number
+): (...args: Parameters<T>) => void {
+    let inThrottle: boolean;
+    return (...args: Parameters<T>) => {
+        if (!inThrottle) {
+            func(...args);
+            inThrottle = true;
+            setTimeout(() => inThrottle = false, limit);
+        }
+    };
+}

vite.config.ts

@@ -15,6 +15,9 @@ export default defineConfig(({ mode }) => {
         alias: {
           '@': path.resolve(__dirname, '.'),
         }
+      },
+      build: {
+        chunkSizeWarningLimit: 1000
       }
     };
 });