app.py

#!/usr/bin/env python3
"""
Launches a single page Gradio app that:
1. Accepts a topic/question.
2. Generates slide markdown + TTS for each slide.
3. Lets the user page through slides and hear the narration.

Requires: generate_slideshow.py in the same directory and a valid
GEMINI_KEY in your environment.
"""

import asyncio
import atexit
import os
import shutil
import tempfile
import time
import threading
import uuid
from pathlib import Path
from datetime import datetime, timedelta

import gradio as gr
import json
from generate_slideshow import generate_slideshow_with_audio, generate_slideshow_with_audio_async, validate_topic

# Custom CSS for better styling
custom_css = """
.container {max-width: 1000px; margin: auto;}
.input-row {
    margin-bottom: 10px;
}
.demo-row {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}
.demo-row button {
    width: 100% !important;
    height: 40px;
}
.demo-instruction {
    margin-bottom: 5px;
    text-align: center;
    color: #4a6fa5;
}
.demo-instruction h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}
.slide-container {
    margin: 20px auto;
    padding: 30px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.md-container h1, .md-container h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #2c3e50;
}
.slide-image {
    margin: 10px auto;
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.slide-flex {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* Hide image component UI elements */
.slide-image .image-meta,
.slide-image button.icon-button {
    display: none !important;
}
.slide-image > div {
    padding-top: 0 !important;
    border: none !important;
}
.slide-image img {
    border-radius: 8px;
}
.slide-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}
.progress-indicator {
    text-align: center;
    font-weight: bold;
    color: #7f8c8d;
}
.app-title {
    text-align: center;
    margin-bottom: 15px;
    background: #7fe4ff;
    color: #222;
    padding: 15px;
    border-radius: 8px;
    border: 4px solid #7fe4ff;
}
"""

# Custom JS for slide transitions
custom_js = """
function animateSlideTransition() {
    const slideContainer = document.querySelector(".slide-container");
    slideContainer.style.opacity = 0;
    slideContainer.style.transform = "translateY(10px)";
    setTimeout(() => { 
        slideContainer.style.opacity = 1; 
        slideContainer.style.transform = "translateY(0px)";
    }, 50);
}
"""

async def generate_presentation_async(topic: str, session_id=None):
    """Async version: Generate slides, audio, and images for all slides; initialise UI with slide 0."""
    topic = (topic or "").strip()
    # Empty topic check is now handled in _run_with_new_session
    # Notification is shown from the button click handler
        
    # Create or get a session ID
    if session_id is None:
        session_id = get_session_id()
        
    # Initialize session tracking
    if session_id not in active_sessions:
        active_sessions[session_id] = {}
        active_sessions[session_id]["temp_dir"] = tempfile.mkdtemp(prefix=f"gradio_session_{session_id}_")
    
    # Call the async version with the session ID
    slides, audio_files, slide_images = await generate_slideshow_with_audio_async(topic, session_id=session_id)

    # Basic sanity - keep list lengths aligned for audio
    if len(audio_files) < len(slides):
        audio_files.extend([None] * (len(slides) - len(audio_files)))
    elif len(audio_files) > len(slides):
        audio_files = audio_files[: len(slides)]

    progress_text = f"Slide 1 of {len(slides)}"
    
    initial_image = None
    if slide_images and len(slide_images) > 0:
        initial_image = slide_images[0]

    # Store presentation data in the session
    active_sessions[session_id]["slides"] = slides
    active_sessions[session_id]["audio_files"] = audio_files
    active_sessions[session_id]["slide_images"] = slide_images

    return slides, audio_files, slide_images, 0, slides[0], audio_files[0], initial_image, progress_text, session_id


def generate_presentation(topic: str, session_id=None):
    """Synchronous wrapper for the async presentation generator."""
    # Run the async function and handle empty topic case
    return asyncio.run(generate_presentation_async(topic, session_id=session_id))


def next_slide(slides, audio, images, idx, session_id):
    idx = int(idx)
    if idx < len(slides) - 1:
        idx += 1
    progress_text = f"Slide {idx+1} of {len(slides)}"
    return idx, slides[idx], audio[idx], images[idx] if idx < len(images) else None, progress_text


def prev_slide(slides, audio, images, idx, session_id):
    idx = int(idx)
    if idx > 0:
        idx -= 1
    progress_text = f"Slide {idx+1} of {len(slides)}"
    return idx, slides[idx], audio[idx], images[idx] if idx < len(images) else None, progress_text


def on_close(session_id):
    """Handle cleanup when user closes the browser or refreshes"""
    if session_id:
        cleanup_session(session_id)
    return None


# Set up session management and temporary file handling
active_sessions = {}

def get_session_id():
    """Generate a unique session ID for new user connections"""
    return str(uuid.uuid4())

def cleanup_session(session_id):
    """Remove session data when a user disconnects"""
    if session_id in active_sessions:
        print(f"Cleaning up session {session_id}")
        if "temp_dir" in active_sessions[session_id]:
            temp_dir = active_sessions[session_id]["temp_dir"]
            if os.path.exists(temp_dir):
                shutil.rmtree(temp_dir, ignore_errors=True)
        active_sessions.pop(session_id, None)

# Register cleanup to happen on exit
def cleanup_all_sessions():
    """Clean up all session data on exit"""
    for session_id in list(active_sessions.keys()):
        cleanup_session(session_id)

def cleanup_old_sessions():
    """Periodically clean up sessions older than 30 minutes"""
    while True:
        try:
            now = time.time()
            # Check all temp dirs in the system temp directory
            temp_root = tempfile.gettempdir()
            for item in os.listdir(temp_root):
                if item.startswith("slideshow_") or item.startswith("gradio_session_"):
                    item_path = os.path.join(temp_root, item)
                    if os.path.isdir(item_path):
                        # Check if directory is older than 30 minutes
                        mtime = os.path.getmtime(item_path)
                        if (now - mtime) > (30 * 60):  # 30 minutes in seconds
                            print(f"Cleaning up old temp directory: {item_path}")
                            shutil.rmtree(item_path, ignore_errors=True)
        except Exception as e:
            print(f"Error in cleanup thread: {e}")
        
        # Sleep for 10 minutes before next cleanup
        time.sleep(600)

# Start the cleanup thread
cleanup_thread = threading.Thread(target=cleanup_old_sessions, daemon=True)
cleanup_thread.start()

atexit.register(cleanup_all_sessions)

def load_rise_fall_slideshow():
    """Load cached dinosaur slideshow demo and hide the demo button and instruction."""
    project_dir = Path.cwd()
    meta_file = project_dir / "slides_metadata.json"
    if not meta_file.exists():
        raise gr.Error("Cached slideshow not found.")
    metadata = json.load(open(meta_file))
    slides = []
    for m in metadata:
        md = f"## {m['title']}\n\n" + "\n".join(f"- {b}" for b in m['bullet_points'])
        slides.append(md)
    audio_paths = sorted(str(p) for p in project_dir.glob("The-Rise-and-Fall-of-the-Dinos_slide_*.wav"))
    image_paths = sorted(str(p) for p in project_dir.glob("The-Rise-and-Fall-of-the-Dinos_slide_*_image.jpg"))
    idx = 0
    progress_text = f"Slide 1 of {len(slides)}"
    
    # Hide the demo button and instruction after clicking
    hide_button = gr.update(visible=False)
    hide_instruction = gr.update(visible=False)
    
    return slides, audio_paths, image_paths, idx, slides[0], audio_paths[0], image_paths[0], progress_text, None, hide_button, hide_instruction

# Gradio theme setup
theme = gr.themes.Soft(
    primary_hue="blue",
    secondary_hue="indigo",
    neutral_hue="slate",
    radius_size=gr.themes.sizes.radius_md,
    text_size=gr.themes.sizes.text_md,
)

with gr.Blocks(
    title="AI Slideshow Generator", 
    theme=theme,
    css=custom_css,
    js=custom_js,
) as demo:
    gr.Markdown(
        "# Narrated Slideshow Generator 📚💻🗣️",
        elem_classes="app-title"
    )
    
    with gr.Column(elem_classes="container"):
        # First row for topic and generate button - increased horizontal width
        with gr.Row(elem_classes="input-row"):
            topic_box = gr.Textbox(
                label="Topic or Question", 
                placeholder="e.g. Why don't penguins' feet freeze?",
                scale=5  # Increased scale for wider topic box
            )
            gen_btn = gr.Button("Generate", scale=2, variant="primary")
        
        # Second row exclusively for dinosaur button at full width
        with gr.Row(elem_classes="demo-row"):
            demo_instruction = gr.Markdown("### 👇 Click below to view a premade sample slideshow 👇", elem_classes="demo-instruction")
            demo_btn = gr.Button("The Rise and Fall of the Dinosaurs", variant="secondary", scale=1)

        with gr.Group(elem_classes="slide-container"):
            # Create a flex container for slide content and image
            with gr.Column(elem_classes="slide-flex"):
                slide_markdown = gr.Markdown(elem_classes="md-container")
                # Add the title slide image component inside the slide container
                title_image = gr.Image(label="", visible=True, elem_classes="slide-image", show_label=False, show_download_button=False)
            
            progress_indicator = gr.Markdown(
                "Enter a topic and click 'Generate'", 
                elem_classes="progress-indicator"
            )

        with gr.Row(elem_classes="slide-nav"):
            prev_btn = gr.Button("⬅️ Previous Slide", size="sm")
            next_btn = gr.Button("Next Slide ➡️", size="sm", variant="secondary")
        
        audio_player = gr.Audio(autoplay=True, label="Narration", show_label=True)

    # Invisible session state
    slides_state = gr.State([])
    audio_state = gr.State([])
    images_state = gr.State([])
    index_state = gr.State(0)
    session_state = gr.State(None)

    # Wiring
    def prepare_for_generation(topic, session_id):
        """First step: clear the view and prepare for generation"""
        # First check if the topic is empty
        if not (topic or "").strip():
            gr.Info("Please enter a valid topic or question.")
            return (
                [], [], [], 0, "", None, None, "", session_id,
                gr.update(visible=True),  # Show topic box
                gr.update(visible=True),  # Show generate button
                gr.update(value="Generate", interactive=True),  # Reset button state
                gr.update(visible=True),  # Show dinosaur button
                gr.update(visible=True),  # Show instruction
                False  # should_generate
            )
        
        # Validate the topic using the Gemini Flash input guard
        if not validate_topic(topic):
            gr.Info("Please enter a valid topic or question.")
            return (
                [], [], [], 0, "", None, None, "", session_id,
                gr.update(visible=True),  # Show topic box
                gr.update(visible=True),  # Show generate button
                gr.update(value="Generate", interactive=True),  # Reset button state
                gr.update(visible=True),  # Show dinosaur button
                gr.update(visible=True),  # Show instruction
                False  # should_generate
            )
        
        # If topic is valid, clear the current view and prepare for generation
        clear_slide = "Generating your slideshow...\n\nPlease wait."
        gr.Info("This may take a couple minutes.")
        return (
            [], [], [], 0, clear_slide, None, None, "Preparing...", session_id,
            gr.update(visible=False),  # Hide topic box immediately 
            gr.update(visible=False),  # Hide generate button immediately
            gr.update(value="Generating...", interactive=False),  # Update button text and disable
            gr.update(visible=False),  # Hide dinosaur button while generating
            gr.update(visible=False),  # Hide instruction while generating
            True  # should_generate
        )

    def _run_with_new_session(topic, session_id, should_generate):
        """Second step: actually generate the slideshow"""
        if not should_generate:
            # This case should ideally not be hit if UI updates from prepare_for_generation are correct
            # but as a safeguard, return a state that doesn't proceed.
            return (
                [], [], [], 0, "", None, None, "", session_id,
                gr.update(visible=True),
                gr.update(visible=True),
                gr.update(value="Generate", interactive=True),
                gr.update(visible=True),
                gr.update(visible=True),
                False # should_generate (though this output isn't strictly used here, keeping tuple size consistent)
            )
        
        results = generate_presentation(topic, session_id)
        return (*results, 
                gr.update(visible=False), 
                gr.update(visible=False), 
                gr.update(value="Generate", interactive=True), 
                gr.update(visible=False), 
                gr.update(visible=False),
                True # should_generate (maintaining tuple size, actual value less critical here)
               )

    # Two-step process for generation
    # 1. First clear the UI & validate
    should_generate_state = gr.State(False) # Hidden state to pass validation result

    gen_btn.click(
        prepare_for_generation,
        inputs=[topic_box, session_state],
        outputs=[
            slides_state,
            audio_state,
            images_state,
            index_state,
            slide_markdown,
            audio_player,
            title_image,
            progress_indicator,
            session_state,
            topic_box,      # For UI update
            gen_btn,        # For UI update (text, interactivity)
            gen_btn,        # For UI update (visibility - though managed by text/interactivity)
            demo_btn,       # For UI update
            demo_instruction, # For UI update
            should_generate_state # Output of validation
        ]
    ).then(  # 2. Then (conditionally) generate the slideshow
        _run_with_new_session,
        inputs=[topic_box, session_state, should_generate_state],
        outputs=[
            slides_state,
            audio_state,
            images_state,
            index_state,
            slide_markdown,
            audio_player,
            title_image,
            progress_indicator,
            session_state,
            topic_box,      # For UI update post-generation
            gen_btn,        # For UI update post-generation
            gen_btn,        # For UI update post-generation
            demo_btn,       # For UI update post-generation
            demo_instruction, # For UI update post-generation
            should_generate_state # Pass through, though not strictly needed for this output set
        ]
    )
    
    prev_btn.click(
        prev_slide,
        inputs=[slides_state, audio_state, images_state, index_state, session_state],
        outputs=[index_state, slide_markdown, audio_player, title_image, progress_indicator],
    )
    
    next_btn.click(
        next_slide,
        inputs=[slides_state, audio_state, images_state, index_state, session_state],
        outputs=[index_state, slide_markdown, audio_player, title_image, progress_indicator],
    )
    
    # Load cached demo slideshow
    demo_btn.click(
        load_rise_fall_slideshow,
        inputs=[],
        outputs=[slides_state, audio_state, images_state, index_state, slide_markdown, audio_player, title_image, 
               progress_indicator, session_state, demo_btn, demo_instruction],
    )
    
    # We'll rely on atexit for cleanup since Gradio doesn't have a built-in
    # way to detect when a user closes their browser

if __name__ == "__main__":
    demo.launch()