Update app.py

app.py

@@ -1,198 +1,107 @@
-import gradio as gr
+import os
+import tempfile
+from flask import Flask, request, jsonify, send_from_directory
 from PIL import Image, ImageDraw
 import numpy as np
 import imageio
-import tempfile
 from gtts import gTTS
 import torch
 from diffusers import DiffusionPipeline, DPMSolverMultistepScheduler
-
-# ========== AI MODEL SETUP (Done once on startup) ==========
-# This part loads the AI model that creates the videos.
-try:
-    device = "cuda" if torch.cuda.is_available() else "cpu"
-    video_pipe = DiffusionPipeline.from_pretrained(
-        "cerspense/zeroscope_v2_576w",
-        torch_dtype=torch.float16
-    )
-    video_pipe.scheduler = DPMSolverMultistepScheduler.from_config(video_pipe.scheduler.config)
-    video_pipe.to(device)
-    model_loaded = True
-except Exception as e:
-    print(f"Error loading model: {e}")
-    model_loaded = False
-
-# ========== UI & STYLING ==========
-# This is where we design the beautiful, child-friendly interface!
-custom_css = """
-/* --- Import a fun, rounded font from Google Fonts --- */
-@import url('https://fonts.googleapis.com/css2?family=Mali:wght@400;700&display=swap');
-
-/* --- Overall page style --- */
-.gradio-container {
-    background: linear-gradient(135deg, #a0c4ff 0%, #c4f5ff 100%); /* Sky blue gradient */
-    font-family: 'Mali', cursive; /* Use our fun, new font */
-}
-
-/* --- Main Title: Big, colorful, and magical! --- */
-#main-title {
-    font-size: 48px;
-    font-weight: 700;
-    color: #ff6b6b; /* Playful coral color */
-    text-align: center;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
-    padding-top: 20px;
-}
-
-#subtitle {
-    font-size: 24px;
-    color: #4a4a4a;
-    text-align: center;
-    margin-top: -10px;
-}
-
-/* --- The main button: Looks like a magic wand button! --- */
-#animate-btn {
-    background: linear-gradient(45deg, #ffd700, #ff8c00); /* Golden-orange gradient */
-    color: white;
-    border: none;
-    border-radius: 50px; /* Fully rounded */
-    padding: 15px 30px;
-    font-size: 22px;
-    font-weight: bold;
-    box-shadow: 0 5px 15px rgba(255, 165, 0, 0.4);
-    transition: transform 0.2s, box-shadow 0.2s;
-}
-#animate-btn:hover {
-    transform: scale(1.05); /* Grow on hover */
-    box-shadow: 0 8px 20px rgba(255, 165, 0, 0.6);
-}
-
-/* --- Text input box: Looks like a story scroll --- */
-#story-input textarea {
-    background-color: #ffffff;
-    border: 3px solid #ffca7a; /* Warm, friendly border */
-    border-radius: 15px;
-    font-size: 18px;
-    padding: 15px;
-    line-height: 1.5;
-}
-
-/* --- Output containers: Framed like a picture book --- */
-.output-box {
-    border: 8px solid #8B4513; /* Wooden frame border */
-    border-image: url('https://www.publicdomainpictures.net/pictures/120000/velka/wooden-frame-texture.jpg') 20 stretch;
-    border-radius: 15px;
-    padding: 10px;
-    background: #fdf6e3; /* Parchment paper background */
-    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
-}
-
-/* --- Explainer character image: A friendly round guide --- */
-.explainer-img img {
-    border-radius: 50% !important;
-    border: 5px solid #ff6b6b;
-    object-fit: cover;
-}
-"""
-
-# ========== BACKEND LOGIC (The "How it Works" part) ==========
-
-def create_animation(story):
-    """Takes the story and creates the video."""
-    if not model_loaded:
-        # Create a dummy error output if the model failed to load
-        blank_image = np.zeros((320, 576, 3), dtype=np.uint8)
-        with tempfile.NamedTemporaryFile(suffix=".mp4", delete=False) as temp_file:
-            imageio.mimsave(temp_file.name, [blank_image for _ in range(3)], fps=3)
-            return "AI model not loaded.", "Error: AI model failed to load.", blank_image, temp_file.name
-    
+import uuid
+
+# Initialize Flask App
+# The 'static_folder' serves files like CSS and JS.
+app = Flask(__name__, static_folder='static')
+
+# Create a directory for generated files if it doesn't exist
+GENERATED_DIR = os.path.join(os.path.dirname(__file__), 'generated')
+os.makedirs(GENERATED_DIR, exist_ok=True)
+
+# ========== LOAD MODELS (Done once on startup) ==========
+device = "cuda" if torch.cuda.is_available() else "cpu"
+video_pipe = DiffusionPipeline.from_pretrained(
+    "cerspense/zeroscope_v2_576w",
+    torch_dtype=torch.float16
+)
+video_pipe.scheduler = DPMSolverMultistepScheduler.from_config(video_pipe.scheduler.config)
+video_pipe.to(device)
+app.logger.info("AI Models loaded successfully.")
+
+# ========== HELPER FUNCTIONS (Your existing logic) ==========
+def story_to_prompt(story):
+    prompt = story.strip()
+    return f"{prompt}, cinematic, beautiful, hd, high quality, detailed"
+
+def generate_explainer_character(name, size=(150,150)):
+    # Your character generation logic here...
+    img = Image.new("RGB", size, (255, 255, 255))
+    draw = ImageDraw.Draw(img)
+    draw.text((10, 10), f"{name} avatar", fill="black")
+    return img
+
+def generate_code_explanation(story, prompt):
+    # Your code explanation logic here...
+    return f"The code processed the story: '{story}' into a prompt for the AI."
+
+# ========== FLASK ROUTES ==========
+
+# Route to serve the main HTML page
+@app.route('/')
+def index():
+    return send_from_directory('.', 'index.html')
+
+# Route to serve generated files (videos, audio)
+@app.route('/generated/<path:filename>')
+def generated_files(filename):
+    return send_from_directory(GENERATED_DIR, filename)
+
+# The main API endpoint to handle story-to-video requests
+@app.route('/animate', methods=['POST'])
+def animate():
+    story = request.json.get('story')
     if not story:
-        return "Please write a story first!", "", np.zeros((320, 576, 3), dtype=np.uint8), None
-    
-    prompt = f"{story.strip()}, beautiful animation, storybook style, vibrant colors, for children"
-    
-    # Generate the video
-    video_frames = video_pipe(prompt, num_inference_steps=25, height=320, width=576, num_frames=24).frames
-    
-    with tempfile.NamedTemporaryFile(suffix=".mp4", delete=False) as temp_file:
-        video_path = temp_file.name
+        return jsonify({"error": "No story provided"}), 400
+
+    app.logger.info(f"Received story: {story}")
+
+    try:
+        # 1. Generate Video
+        prompt = story_to_prompt(story)
+        video_frames = video_pipe(prompt, num_inference_steps=25, height=320, width=576, num_frames=24).frames
+        
+        # Save files with unique names to avoid conflicts
+        unique_id = str(uuid.uuid4())
+        video_filename = f"{unique_id}.mp4"
+        video_path = os.path.join(GENERATED_DIR, video_filename)
         imageio.mimsave(video_path, video_frames, fps=12)
-
-    final_frame_image = video_frames[-1]
-    
-    code_explanation = f"""
-    ### 📜 The Magic Spell (Prompt) We Used:
-    The AI was told to create a video based on this magic spell:
-    **"{prompt}"**
-    """
-    
-    story_explanation = f"Hooray! ✨ Our AI artist read your story about '{story}' and drew this wonderful movie for you!"
-
-    # Generate audio
-    with tempfile.NamedTemporaryFile(suffix=".mp3", delete=False) as temp_audio:
-        tts = gTTS(story_explanation, lang='en')
-        tts.save(temp_audio.name)
-        audio_path = temp_audio.name
-    
-    return story_explanation, audio_path, code_explanation, final_frame_image, video_path
-
-# ========== THE GRADIO APP INTERFACE ==========
-
-with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as app:
-    gr.Markdown("# 🏰 Storybook Animator 🏰", elem_id="main-title")
-    gr.Markdown("Let's bring your imagination to life!", elem_id="subtitle")
-
-    with gr.Row():
-        # --- LEFT SIDE: INPUT ---
-        with gr.Column(scale=2):
-            gr.Markdown("### ✍️ Write Your Magical Story Here:")
-            story_input = gr.Textbox(
-                label="Story",
-                placeholder="A happy little fox making friends with a butterfly...",
-                lines=5,
-                elem_id="story-input",
-                show_label=False
-            )
-            animate_btn = gr.Button("✨ Create My Animation! ✨", elem_id="animate-btn")
-            
-            gr.Examples(
-                examples=[
-                    ["A friendly dragon flying over a candy castle."],
-                    ["A little robot planting a flower on the moon."],
-                    ["A curious squirrel having a tea party with a gnome."],
-                    ["A mermaid discovering a sunken treasure chest filled with glowing pearls."]
-                ],
-                inputs=story_input,
-                label="🌟 Or Try These Fun Ideas:"
-            )
-
-        # --- RIGHT SIDE: OUTPUT ---
-        with gr.Column(scale=3):
-            with gr.Tabs():
-                with gr.TabItem("🎬 Your Movie!"):
-                    output_video = gr.Video(label="Your Story Comes Alive", elem_classes="output-box")
-                
-                with gr.TabItem("🖼️ Picture Preview"):
-                    output_image = gr.Image(label="A Snapshot from Your Story", elem_classes="output-box")
-                    
-                with gr.TabItem("💡 How It Works"):
-                    story_explanation_text = gr.Textbox(label="What Happened", interactive=False, elem_classes="output-box")
-                    explainer_audio = gr.Audio(label="Listen to the Story", type="filepath")
-                    code_explanation_output = gr.Markdown(elem_classes="output-box")
-    
-    # --- Connect the button to the function ---
-    animate_btn.click(
-        fn=create_animation,
-        inputs=story_input,
-        outputs=[
-            story_explanation_text,
-            explainer_audio,
-            code_explanation_output,
-            output_image,
-            output_video
-        ]
-    )
-
-if __name__ == "__main__":
-    app.launch()
+        video_url = f"/generated/{video_filename}"
+        
+        # 2. Generate Story Explanation & Audio
+        story_explanation_text = f"We used an AI to turn your story into a video! The story was about: '{story}'."
+        audio_filename = f"{unique_id}.mp3"
+        audio_path = os.path.join(GENERATED_DIR, audio_filename)
+        tts = gTTS(story_explanation_text, lang='en')
+        tts.save(audio_path)
+        audio_url = f"/generated/{audio_filename}"
+
+        # 3. Generate Code Explanation
+        code_explanation_text = generate_code_explanation(story, prompt)
+
+        app.logger.info(f"Successfully generated video and audio for story.")
+        
+        # 4. Send all data back to the frontend as JSON
+        return jsonify({
+            "video_url": video_url,
+            "story_explanation": story_explanation_text,
+            "audio_url": audio_url,
+            "code_explanation": code_explanation_text,
+            "prompt": prompt
+        })
+
+    except Exception as e:
+        app.logger.error(f"An error occurred: {e}")
+        return jsonify({"error": "Failed to generate animation."}), 500
+
+if __name__ == '__main__':
+    # Use 0.0.0.0 to be accessible within the Docker network
+    app.run(host='0.0.0.0', port=5000, debug=True)