Update styles Totally

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

app.py

@@ -1,15 +1,20 @@
+"""
+Magic Story Creator - An interactive AI-powered story generator for kids
+with a colorful, child-friendly UI
+"""
+
 import gradio as gr
 import logging
 from dotenv import load_dotenv
 from controllers.app_controller import (
     process_story_generation,
     clear_fields,
-    process_chapters,
     handle_chapter_processing,
     generate_audio_with_status,
     generate_melody_from_story_with_status,
 )
 from config import constants
+from pathlib import Path
 
 # Configure logging
 logging.basicConfig(
@@ -20,165 +25,626 @@ logger = logging.getLogger(__name__)
 # Load environment variables from .env file if present (local development)
 load_dotenv()
 
+gr.set_static_paths(paths=[Path.cwd().absolute() / "assets/images"])
+
+# Define the Gradio interface with custom CSS for kid-friendly UI
+css = """
+:root {
+    --main-bg: #f8fcff;
+    --primary-color: #fba639;
+    --accent-color: #00af64;
+    --text-color: #000;
+    --border-radius: 15px;
+    --shadow: 0 4px 8px rgba(0,0,0,0.1);
+
+    --bg-surface: #ffffff;
+    --bg-accent-yellow: #FFF8E1;
+    --bg-accent-blue: #E3F2FD;
+    --bg-accent-pink: #FCE4EC;
+
+    --text-main: #212121;
+    --text-heading: #C62828;
+    --text-subheading: #1565C0;
+    --text-accent: #00897B;
+    --text-warning: #FF8F00;
+    --text-on-accent: #ffffff;
+
+    --accent-green: #43A047;
+    --accent-pink: #EC407A;
+    --accent-pink-light: #ff96b9;
+    --accent-yellow: #FFD600;
+    --accent-blue: #1976D2;
+    --accent-purple: #8E24AA;
+    --interactive-hover: #1565C0;
+
+    --shadow-color: #B0BEC5;
+    --hover-color: #F06292;
+}
+
+.gradio-container {
+    margin: 10 auto;
+    font-family: 'Comic Sans MS', cursive, sans-serif;
+    background-image:  url("/gradio_api/file=assets/images/bg.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-attachment: fixed;
+}
+
+.main-header {
+    color: var(--text-heading);
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+    font-size: 2.8em;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.sub-title {
+    color: var(--accent-purple);
+    text-align: center;
+    font-size: 1.5em;
+}
+
+.sub-header {
+    color: var(--text-subheading);
+}
+
+.step-header {
+    font-size: 1.5em;
+    font-weight: bold;
+    text-align: center;
+    color: var(--text-subheading);
+}
+
+.image-next-header {
+    width: 80px;
+    height: 80px;
+    display: block;
+}
+
+.image-header-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+}
+
+.text {
+    color: var(--text-main);
+}
+
+.box {
+    background-color: var(--bg-surface);
+    border: 2px solid var(--text-main);
+    border-radius: var(--border-radius);
+    padding: 15px;
+    box-shadow: var(--shadow);
+    margin-bottom: 20px;
+    flex: 1; 
+    min-width: 200px;
+    p, strong {
+        color: var(--text-main);
+    }
+}
+
+.box-header{
+    color: var(--accent-blue);
+}
+
+.gr-accordion {
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    box-shadow: var(--shadow);
+    margin-bottom: 15px;
+    background-color: var(--bg-accent-yellow);
+    button {
+    font-weight: bold;
+    color: var(--text-main) ; 
+    }
+}
+
+.tab-container {
+    button:not([aria-selected="true"]) {
+        background-color: transparent;
+        color: var(--text-main);
+    }
+    button:hover {
+            background-color: var(--bg-accent-blue);
+    }
+}
+
+#language-input, #age-slider, #subject-input, #reading-time-slider {
+    min-height: 100px;
+}
+
+#story-tone-buttons > span, #story-type-buttons > span, 
+#age-slider label span, #language-input label span,
+#interests-input label span,
+#subject-input label span, #reading-time-slider label span,
+#model-selector div span {
+    display: block;
+    font-weight: bold;
+    color: var(--accent-pink-light);
+    font-size: 1.1em;
+    margin-bottom: 16px;
+}
+
+.radio-label {
+    display: block;
+    font-weight: bold;
+    color: var(--accent-pink);
+    font-size: 1.1em;
+}
+.radio-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+}
+.radio-option {
+    width: 100px;
+    height: 120px;
+    border: 3px solid #d4e6ff;
+    border-radius: 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 10px;
+    background-color: white;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+.radio-option:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
+}
+.radio-option.selected {
+    border-color: #5d9df5;
+    background-color: #f0f7ff;
+    box-shadow: 0 0 0 3px rgba(93, 157, 245, 0.3);
+}
+.radio-option img {
+    width: 50px;
+    height: 50px;
+    margin-bottom: 10px;
+    transition: all 0.3s ease;
+}
+.radio-option.selected img {
+    transform: scale(1.1);
+}
+.radio-option span {
+    font-weight: bold;
+    color: #4a6baf;
+    text-align: center;
+}
+.hidden-radio {
+    display: none !important;
+}
+
+/* Animations for page transitions */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+.story-container {
+    animation: fadeIn 0.7s ease-out;
+}
+.chapter-accordion {
+    animation: fadeIn 0.5s ease-out;
+    animation-fill-mode: both;
+}
+.chapter-accordion:nth-child(1) { animation-delay: 0.1s; }
+.chapter-accordion:nth-child(2) { animation-delay: 0.2s; }
+.chapter-accordion:nth-child(3) { animation-delay: 0.3s; }
+.chapter-accordion:nth-child(4) { animation-delay: 0.4s; }
+.chapter-accordion:nth-child(5) { animation-delay: 0.5s; }
+
+"""
+
+with gr.Blocks(
+    css=css,
+    theme=gr.themes.Ocean(),
+) as demo:
+    gr.HTML(
+        '<div class="image-header-wrapper">'
+        '<h1 class="main-header">Magic Story Creator </h1>'
+        '<img src="/gradio_api/file=assets/images/wand.png" class="image-next-header" alt="Magic Wand">'
+        "</div>"
+    )
+
+    with gr.Accordion(
+        "How to Create Your Magical Story", elem_classes="gr-accordion", open=False
+    ):
+        gr.HTML("""
+        <div>
+            <div style="display: flex; align-items: center; margin-bottom: 15px;">
+                <div style="margin-right: 15px;">
+                    <img src="/gradio_api/file=assets/images/wand.png" style="width: 80px; height: 80px;" alt="Magic Wand">
+                </div>
+                <div>
+                    <h3 class="sub-header">Welcome to Magic Story Creator!</h3>
+                    <p class="text">This magical tool helps you create personalized stories for children. Follow these simple steps:</p>
+                </div>
+            </div>
+            
+            <div style="display: flex; flex-wrap: wrap; gap: 20px;">
+                <div class ="box">
+                    <h4 class = "box-header">Step 1: Choose Your Adventure</h4>
+                    <p>Select a story type and tone that your child will enjoy.</p>
+                    <p><strong>Example:</strong> Fantasy with Enthusiastic tone</p>
+                </div>
+                <div class ="box">
+                    <h4 class = "box-header">Step 2: Child's Details</h4>
+                    <p>Tell us about the child who will be enjoying the story.</p>
+                    <p><strong>Example:</strong> Age 6, English language, interests in dinosaurs and space</p>
+                </div>
+                
+                <div class ="box">
+                    <h4 class = "box-header">Step 3: Story Details</h4>
+                    <p>Add a subject for your story and how long you'd like it to be.</p>
+                    <p><strong>Example:</strong> "Quantum Computing" for 3 minutes of reading time</p>
+                </div>
+
+                <div class ="box">
+                    <h4 class = "box-header">Step 4: Create Magic!</h4>
+                    <p>Click "Create My Magical Story" and watch the magic happen! Once your story appears, click "Create Illustrated Chapters" to add pictures.</p>
+                </div>
+            </div>
+        </div>
+        """)
 
-# Define the Gradio interface
-with gr.Blocks() as demo:
-    gr.Markdown("# Dynamic Story Generator")
     tabs = gr.Tabs()
     with tabs:
         with gr.Tab("Story Generator") as story_tab:
-            with gr.Row():
-                story_type = gr.Dropdown(
-                    constants.STORY_TYPES, label="Story Type", value="Fantasy"
-                )
-                tone = gr.Dropdown(
-                    constants.TONE_TYPES, label="Tone", value="Enthusiastic"
-                )
-                model_selector = gr.Dropdown(
-                    constants.MODEL_OPTIONS,
-                    label="AI Model",
-                    value=constants.DEFAULT_MODEL,
-                )
+            gr.HTML("""
+                <div class="image-header-wrapper">
+                    <img src="/gradio_api/file=assets/images/wizard.png" class="image-next-header" alt="Magic Wand">
+                    <div class="sub-title" style="margin-right: 15px;">
+                        Let's create a magical story just for you!
+                    </div>
+                </div>
+            """)
 
-            with gr.Row():
-                kid_age = gr.Number(
-                    minimum=constants.KID_AGE_MIN,
-                    maximum=constants.KID_AGE_MAX,
-                    label="Kid Age",
-                    value=constants.DEFAULT_AGE,
-                )
-                kid_language = gr.Textbox(
-                    label="Kid Language", value=constants.DEFAULT_LANGUAGE
-                )
-                kid_interests = gr.Textbox(
-                    label="Kid Interests", placeholder="Robots, Space, Dinosaurs..."
+            with gr.Column(elem_classes="gr-form"):
+                gr.HTML("""
+                    <div style="text-align: center; margin-bottom: 15px;">
+                        <span class="step-header">Step 1: Choose your adventure!</span>
+                    </div>
+                """)
+
+                with gr.Row():
+                    # Story Type
+                    with gr.Column(scale=1):
+                        # Create custom radio buttons  for story types
+
+                        story_type = gr.Radio(
+                            choices=constants.STORY_TYPES,
+                            value=constants.DEFAULT_STORY_TYPE,
+                            interactive=True,
+                            label="Story Type",
+                            elem_id="story-type-buttons",
+                        )
+
+                    # Tone
+                    with gr.Column(scale=1):
+                        tone = gr.Radio(
+                            choices=constants.TONE_TYPES,
+                            label="Story Tone",
+                            value=constants.DEFAULT_TONE_TYPE,
+                            interactive=True,
+                            elem_id="story-tone-buttons",
+                        )
+
+            with gr.Column(elem_classes="gr-form"):
+                gr.HTML("""
+                    <div style="text-align: center; margin-bottom: 15px;">
+                        <span class="step-header">Step 2: Tell us about the reader!</span>
+                    </div>
+                """)
+
+                with gr.Row():
+                    # Kid Age
+                    with gr.Column(scale=1):
+                        kid_age = gr.Slider(
+                            minimum=constants.KID_AGE_MIN,
+                            maximum=constants.KID_AGE_MAX,
+                            value=constants.DEFAULT_KID_AGE,
+                            step=1,
+                            label="Kid Age",
+                            elem_id="age-slider",
+                        )
+
+                    # Kid Language
+                    with gr.Column(scale=1):
+                        kid_language = gr.Textbox(
+                            label="Kid Language",
+                            value=constants.DEFAULT_LANGUAGE,
+                            elem_id="language-input",
+                        )
+
+                with gr.Row():
+                    # Kid Interests with icon
+                    with gr.Column():
+                        kid_interests = gr.Textbox(
+                            label="Kid Interests",
+                            placeholder="Robots, Space, Dinosaurs...",
+                            elem_id="interests-input",
+                        )
+
+            with gr.Column(elem_classes="gr-form"):
+                gr.HTML("""
+                    <div style="text-align: center; margin-bottom: 15px;">
+                        <span class="step-header">Step 3: Story details</span>
+                    </div>
+                """)
+
+                with gr.Row():
+                    # Subject
+                    with gr.Column(scale=1):
+                        subject = gr.Textbox(
+                            placeholder="MCP servers, Quantum Computing...",
+                            label="Subject (What is the story about?)",
+                            elem_id="subject-input",
+                        )
+
+                    # Reading time
+                    with gr.Column(scale=1):
+                        reading_time = gr.Slider(
+                            minimum=constants.READING_TIME_MIN,
+                            maximum=constants.READING_TIME_MAX,
+                            value=constants.DEFAULT_READING_TIME,
+                            step=1,
+                            label="Reading Time (minutes)",
+                            elem_id="reading-time-slider",
+                        )
+
+                with gr.Row():
+                    # PDF Upload with icon
+                    with gr.Column(scale=1):
+                        pdf_upload = gr.File(
+                            file_types=[".pdf"],
+                            label="PDF Upload (Optional)",
+                            elem_id="pdf-upload",
+                        )
+
+                    # AI Model with icon (hidden behind a collapsible for simplicity)
+                    with gr.Column(scale=1):
+                        with gr.Accordion("Advanced: Choose AI Model", open=False):
+                            model_selector = gr.Dropdown(
+                                constants.MODEL_OPTIONS,
+                                label="AI Model",
+                                value=constants.DEFAULT_MODEL,
+                                elem_id="model-selector",
+                            )
+
+                with gr.Row():
+                    generate_button = gr.Button(
+                        "✨ Create My Magical Story! ✨",
+                        variant="primary",
+                    )
+                    clear_button = gr.Button(
+                        "🧹 Start Over",
+                        variant="secondary",
+                    )
+
+            # Loading animation (initially hidden)
+            with gr.Row(visible=False) as loading_container:
+                gr.HTML("""
+                    <div class="loading-animation">
+                        📚 <span style="color: #5d9df5;">Creating your magical story...</span> 📚
+                    </div>
+                    <div style="text-align: center; margin-top: 15px;">
+                        <img src="https://i.imgur.com/JlfQMcz.gif" style="width: 150px;" alt="Magic Book">
+                    </div>
+                """)
+
+            with gr.Blocks(elem_classes="gr-form", visible=False) as story_container:
+                gr.HTML("""
+                    <div style="text-align: center; margin-bottom: 15px;">
+                        <span class="step-header">Your Magical Story is Ready!</span>
+                    </div>
+                """)
+
+                story_title = gr.Textbox(
+                    label="Story Title",
+                    interactive=False,
+                    lines=1,
+                    elem_id="story-title",
                 )
 
-            subject = gr.Textbox(
-                placeholder="MCP servers, Quantum Computing...", label="Subject"
-            )
-            reading_time = gr.Slider(
-                minimum=constants.READING_TIME_MIN,
-                maximum=constants.READING_TIME_MAX,
-                value=constants.DEFAULT_READING_TIME,
-                step=1,
-                label="Reading Time (minutes)",
-            )
-            pdf_upload = gr.File(file_types=[".pdf"], label="PDF Upload (Optional)")
-
-            with gr.Row():
-                generate_button = gr.Button("Generate Story", variant="primary")
-                clear_button = gr.Button("Clear")
-
-            story_title = gr.Textbox(label="Story Title", interactive=False, lines=1)
-            story_text = gr.Textbox(
-                label="Generated Story", interactive=False, lines=10
-            )
-
-            with gr.Row():
-                process_chapters_button = gr.Button(
-                    "Process into Chapters with Image Prompts",
-                    variant="primary",
+                story_text = gr.Textbox(
+                    label="Generated Story",
                     interactive=False,
+                    lines=15,
+                    elem_id="story-text",
                 )
 
+                with gr.Row():
+                    process_chapters_button = gr.Button(
+                        "🎨 Create Illustrated Chapters! 🎨",
+                        variant="primary",
+                        interactive=False,
+                        elem_classes="chapters-button",
+                    )
+
         with gr.Tab("Chapters & Image Prompts") as chapters_tab:
             # State to store chapter data
             chapters_state = gr.State(value=None)
 
+            # Chapter processing loading animation (initially hidden)
+            with gr.Row(visible=False) as chapter_loading_container:
+                gr.HTML("""
+                    <div class="loading-animation">
+                        🎨 <span style="color: #ff9057;">Creating illustrated chapters...</span> 🎨
+                    </div>
+                    <div style="text-align: center; margin-top: 15px;">
+                        <img src="https://i.imgur.com/JlfQMcz.gif" style="width: 150px;" alt="Magic Book">
+                    </div>
+                """)
+
             @gr.render(inputs=[chapters_state])
             def render_chapters(chapters_data):
                 if chapters_data is None:
-                    gr.Markdown(
-                        "Generate a story and process it into chapters to see the content here."
-                    )
+                    gr.HTML("""
+                        <div style="text-align: center; padding: 40px 20px; background-color: rgba(255, 255, 255, 0.8); border-radius: 15px; margin-top: 20px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+                            <img src="https://i.imgur.com/vnvL8Ey.png" style="width: 150px; margin-bottom: 20px;" alt="Empty Book">
+                            <h2 style="color: #5d9df5; margin-bottom: 10px;">Your Illustrated Story Awaits!</h2>
+                            <p style="font-size: 1.2em; color: #666;">First, create your story and then click the "Create Illustrated Chapters!" button to see your story come to life with pictures!</p>
+                        </div>
+                    """)
                     return
-                # TODO Add a loading indicator while processing chapters
 
                 # Check if chapters_data is a string indicating an error
                 if isinstance(chapters_data, str) and chapters_data.startswith(
                     "Error:"
                 ):
-                    gr.Markdown(chapters_data)
+                    gr.HTML(f"""
+                        <div style="text-align: center; padding: 20px; background-color: #ffeded; border-radius: 15px; border: 2px solid #ff5757; margin-top: 20px;">
+                            <img src="https://i.imgur.com/Q1WUlHY.png" style="width: 80px; margin-bottom: 10px;" alt="Error">
+                            <h3 style="color: #ff5757; margin-bottom: 10px;">Oops! Something went wrong</h3>
+                            <p style="color: #333;">{chapters_data}</p>
+                        </div>
+                    """)
                     return
 
-                # Display story title
-                gr.Markdown(f"## {chapters_data.get('title', 'Story Chapters')}")
+                # Display story title with magical styling
+                gr.HTML(f"""
+                    <div style="text-align: center; margin: 20px 0;">
+                        <img src="https://i.imgur.com/yVuULtS.png" style="width: 80px; height: 80px;" alt="Magic Book">
+                        <h1 style="color: #5d9df5; margin: 10px 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.1);">
+                            {chapters_data.get("title", "Story Chapters")}
+                        </h1>
+                    </div>
+                """)
 
-                # Display each chapter with buttons
+                # Chapter navigation
+                gr.HTML("""
+                    <div style="text-align: center; margin-bottom: 20px;">
+                        <h3 style="color: #ff9057;">Your Adventure Chapters</h3>
+                        <p>Click on each chapter to reveal its magical contents!</p>
+                    </div>
+                """)
+
+                # Display each chapter with buttons in colorful cards
                 for i, chapter in enumerate(chapters_data.get("chapters", []), 1):
                     with gr.Accordion(
                         label=f"Chapter {i}: {chapter.get('title', 'Untitled')}",
                         open=False,
+                        elem_classes="chapter-accordion",
                     ):
-                        gr.Markdown(chapter.get("content", ""))
-                        gr.Markdown(
-                            f"**Image Prompt:** *{chapter.get('image_prompt', '')}*"
-                        )
+                        with gr.Blocks(elem_classes="chapter-content-box"):
+                            # Chapter content with magical styling
+                            gr.HTML(f"""
+                                <div style="padding: 10px; background-color: #f8fcff; border-radius: 10px; border-left: 5px solid #5d9df5;">
+                                    <div style="font-family: 'Comic Sans MS', cursive, sans-serif; font-size: 1.1em; line-height: 1.6; color: #333;">
+                                        {chapter.get("content", "").replace("\\n", "<br>")}
+                                    </div>
+                                </div>
+                            """)
+
+                            gr.HTML(f"""
+                                <div style="margin-top: 15px; padding: 10px; background-color: #fff9f5; border-radius: 10px; border-left: 5px solid #ff9057;">
+                                    <h4 style="color: #ff9057; margin-top: 0;">Image Description:</h4>
+                                    <p style="font-style: italic; color: #666;">{chapter.get("image_prompt", "")}</p>
+                                </div>
+                            """)
+
+                            # Display image if available with nice styling
+                            image_b64 = chapter.get("image_b64")
+
+                            with gr.Row(equal_height=True):
+                                with gr.Column(scale=1):
+                                    if image_b64:
+                                        gr.HTML(f"""
+                                            <div style="text-align: center;">
+                                                <div style="display: inline-block; padding: 10px; background-color: white; border-radius: 15px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+                                                    <img src="data:image/png;base64,{chapter["image_b64"]}" style="border-radius: 10px; max-width: 100%;" alt="Chapter Illustration"/>
+                                                </div>
+                                            </div>
+                                        """)
+                                    else:
+                                        gr.HTML("""
+                                            <div style="text-align: center; padding: 30px; background-color: #f0f7ff; border-radius: 15px;">
+                                                <div class="loading-animation" style="font-size: 30px;">🖌️</div>
+                                                <p style="color: #5d9df5; font-weight: bold; margin-top: 15px;">Creating your magical illustration...</p>
+                                            </div>
+                                        """)
+
+                                with gr.Column(scale=1):
+                                    gr.HTML(f"""
+                                        <div style="text-align: center; margin-bottom: 15px;">
+                                            <h3 style="color: #5d9df5;">Listen to Chapter {i}</h3>
+                                            <img src="https://i.imgur.com/fvTLtL7.png" style="width: 60px; height: 60px;" alt="Audio">
+                                        </div>
+                                    """)
+
+                                    chapter_content_state = gr.State(
+                                        value=chapter.get("content", "")
+                                    )
+                                    audio_statuss = gr.Markdown("", visible=False)
+
+                                    read_aloud_btn = gr.Button(
+                                        f"🔊 Read Chapter {i} Aloud",
+                                        size="lg",
+                                        variant="secondary",
+                                        elem_classes="audio-button",
+                                    )
 
-                        # Display image if available
-                        image_b64 = chapter.get("image_b64")
-
-                        # Add chapter-specific buttons
-                        with gr.Row():
-                            if image_b64:
-                                gr.Markdown(
-                                    f'<img src="data:image/png;base64,{chapter["image_b64"]}"/>'
-                                )
-                            else:
-                                gr.Markdown("*Image generating...*")
-
-                            with gr.Column():
-                                chapter_content_state = gr.State(
-                                    value=chapter.get("content", "")
-                                )
-                                audio_statuss = gr.Markdown("", visible=False)
-
-                                read_aloud_btn = gr.Button(
-                                    f"Read Chapter {i} Aloud", size="sm"
-                                )
-                                read_aloud_audio = gr.Audio(
-                                    label="Generated Audio",
-                                    interactive=False,
-                                    autoplay=True,
-                                    show_download_button=True,
-                                    show_share_button=False,
-                                    waveform_options=gr.WaveformOptions(
-                                        waveform_color="#01C6FF",
-                                        waveform_progress_color="#0066B4",
-                                        skip_length=2,
-                                        show_recording_waveform=True,
-                                    ),
-                                )
+                                    read_aloud_audio = gr.Audio(
+                                        label="Generated Audio",
+                                        interactive=False,
+                                        autoplay=True,
+                                        show_download_button=True,
+                                        show_share_button=False,
+                                        waveform_options=gr.WaveformOptions(
+                                            waveform_color="#ff9057",
+                                            waveform_progress_color="#ff6a3b",
+                                            skip_length=2,
+                                            show_recording_waveform=True,
+                                        ),
+                                    )
 
                             read_aloud_btn.click(
                                 generate_audio_with_status,
                                 inputs=[chapter_content_state],
                                 outputs=[read_aloud_audio, audio_statuss],
                             )
-                gr.Markdown(
-                    "### Generate a melody that matches the mood and theme of your story"
-                )
-                with gr.Row():
-                    with gr.Column():
-                        generate_melody_button = gr.Button(
-                            "Generate Story Melody", variant="primary"
-                        )
-                        melody_status = gr.Markdown("", visible=False)
-                    with gr.Column():
-                        melody_output = gr.Audio(
-                            label="Generated Story Melody",
-                            interactive=False,
-                            autoplay=True,
-                            show_download_button=True,
-                            show_share_button=False,
-                            waveform_options=gr.WaveformOptions(
-                                waveform_color="#9c5fff",
-                                waveform_progress_color="#6a2fff",
-                                skip_length=2,
-                                show_recording_waveform=True,
-                            ),
-                        )
+
+                # Story melody section
+                gr.HTML("""
+                    <div style="text-align: center; margin: 30px 0 15px 0;">
+                        <img src="https://i.imgur.com/i4rYOxS.png" style="width: 80px; height: 80px;" alt="Musical Notes">
+                        <h2 style="color: #8c69ff; margin: 10px 0;">Create a Magical Soundtrack for Your Story!</h2>
+                        <p style="color: #666;">Click the button below to generate a special melody that matches the mood of your adventure!</p>
+                    </div>
+                """)
+
+                with gr.Blocks(elem_classes="melody-box"):
+                    with gr.Row():
+                        with gr.Column(scale=1, min_width=200):
+                            generate_melody_button = gr.Button(
+                                "🎵 Create Story Soundtrack 🎵",
+                                variant="primary",
+                                elem_classes="melody-button",
+                            )
+                            melody_status = gr.Markdown("", visible=False)
+
+                        with gr.Column(scale=2):
+                            melody_output = gr.Audio(
+                                label="Your Story's Magical Soundtrack",
+                                interactive=False,
+                                autoplay=True,
+                                show_download_button=True,
+                                show_share_button=False,
+                                waveform_options=gr.WaveformOptions(
+                                    waveform_color="#9c5fff",
+                                    waveform_progress_color="#6a2fff",
+                                    skip_length=2,
+                                    show_recording_waveform=True,
+                                ),
+                            )
                 # Add melody generation from story functionality
                 generate_melody_button.click(
                     generate_melody_from_story_with_status,
@@ -188,7 +654,7 @@ with gr.Blocks() as demo:
 
     error_text = gr.Markdown(visible=False)
 
-    # Connect UI components to actions
+    # Connect UI components to actions with loading animations
     generate_button.click(
         process_story_generation,
         inputs=[
@@ -205,21 +671,23 @@ with gr.Blocks() as demo:
         outputs=[story_title, story_text, process_chapters_button],
     )
 
+    # Clear button - reset all fields and hide results
     clear_button.click(
         clear_fields,
         inputs=[],
         outputs=[subject, story_title, story_text, process_chapters_button],
     )
 
+    # Process chapters with loading animation
     process_chapters_button.click(
         handle_chapter_processing,
         inputs=[story_text, story_title],
         outputs=[chapters_state],
     )
 
-    # Launch the Gradio app
+    # Launch the Gradio app with enhanced settings
     try:
-        logger.info("Starting Dynamic Story Generator app")
+        logger.info("Starting Magic Story Creator app")
         demo.launch(mcp_server=True)
     except Exception as e:
         logger.error(f"Failed to start app: {e}", exc_info=True)

config/constants.py

@@ -1,5 +1,7 @@
-STORY_TYPES = ["Historical", "Futuristic", "Fantasy"]
-TONE_TYPES = ["Funny", "Enthusiastic", "Mysterious"]
+STORY_TYPES = ["Historical", "Futuristic", "Fantasy", "Thriller", "Adventure"]
+DEFAULT_STORY_TYPE = "Historical"
+TONE_TYPES = ["Funny", "Enthusiastic", "Mysterious", "Serious", "Suspenseful"]
+DEFAULT_TONE_TYPE = "Funny"
 MODEL_OPTIONS = [
     "Meta-Llama-3.1-8B-Instruct",
     "Llama-3.3-Swallow-70B-Instruct-v0.4",
@@ -8,7 +10,7 @@ MODEL_OPTIONS = [
 DEFAULT_MODEL = "Meta-Llama-3.1-8B-Instruct"
 KID_AGE_MIN = 3
 KID_AGE_MAX = 12
-DEFAULT_AGE = 6
+DEFAULT_KID_AGE = 6
 DEFAULT_LANGUAGE = "English"
 READING_TIME_MIN = 1
 READING_TIME_MAX = 7

controllers/app_controller.py

@@ -6,6 +6,7 @@ from services.pdf_text_extractor import extract_text_from_pdf
 from services.streaming_chapter_processor import process_story_into_chapters_streaming
 from services.audio_generator import generate_audio, generate_melody_from_story
 import gradio as gr
+from config import constants
 
 logger = logging.getLogger(__name__)
 
@@ -13,13 +14,13 @@ logger = logging.getLogger(__name__)
 def process_story_generation(
     story_type: str,
     tone: str,
-    kid_age: Union[int, float],
-    kid_language: str,
     kid_interests: str,
     subject: str,
-    reading_time: int,
-    pdf_file: Optional[Any],
-    model_selector: str,
+    kid_age: Union[int, float] = constants.DEFAULT_KID_AGE,
+    kid_language: str = constants.DEFAULT_LANGUAGE,
+    reading_time: int = constants.DEFAULT_READING_TIME,
+    pdf_file: Optional[Any] = None,
+    model_selector: str = constants.DEFAULT_MODEL,
 ) -> Tuple[str, str, Any]:
     """Process the story generation request from the UI.