Update app.py

app.py

@@ -1,882 +1,615 @@
-import os
-import re
-import uuid
-import json
-import time
-import random
-import shutil
-import requests
-import asyncio
-import gradio as gr
-from pathlib import Path
-import edge_tts
-from gtts import gTTS
-import numpy as np
-import g4f
-from g4f.client import Client
-import assemblyai as aai
-from moviepy.editor import *
-from moviepy.video.fx.all import crop
-from moviepy.audio.fx.all import volumex
-from concurrent.futures import ThreadPoolExecutor
-
-# Constants
-TEMP_DIR = Path("temp")
-OUTPUT_DIR = Path("output")
-MUSIC_DIR = Path("music")
-
-# Ensure directories exist
-TEMP_DIR.mkdir(exist_ok=True)
-OUTPUT_DIR.mkdir(exist_ok=True)
-MUSIC_DIR.mkdir(exist_ok=True)
-
-# Add a sample music file if none exists
-if not list(MUSIC_DIR.glob("*.mp3")):
-    # Create a simple silent audio file as placeholder
-    silent_clip = AudioClip(lambda t: 0, duration=10)
-    silent_clip.write_audiofile(MUSIC_DIR / "silence.mp3", fps=44100)
-
-# Utility functions
-def info(msg):
-    return gr.Info(msg)
-
-def warning(msg):
-    return gr.Warning(msg)
-
-def error(msg):
-    return gr.Error(msg)
-
-def generate_id():
-    return str(uuid.uuid4())
-
-def choose_random_music():
-    music_files = list(MUSIC_DIR.glob("*.mp3"))
-    if not music_files:
-        return MUSIC_DIR / "silence.mp3"
-    return random.choice(music_files)
-
-def parse_model(model_name):
-    """Parse model name for g4f"""
-    if model_name == "gpt-4":
-        return g4f.models.gpt_4
-    elif model_name == "gpt-3.5-turbo":
-        return g4f.models.gpt_35_turbo
-    else:
-        return model_name
-
-class YouTubeGenerator:
-    def __init__(self):
-        self.reset()
-    
-    def reset(self):
-        """Reset all generation state"""
-        self.subject = ""
-        self.script = ""
-        self.metadata = {"title": "", "description": ""}
-        self.image_prompts = []
-        self.images = []
-        self.tts_path = ""
-        self.video_path = ""
-    
-    def clean_temp_files(self, keep_video=False):
-        """Clean temporary files except final video if requested"""
-        for img in self.images:
-            if os.path.exists(img):
-                os.remove(img)
-        
-        if self.tts_path and os.path.exists(self.tts_path):
-            os.remove(self.tts_path)
-            
-        if not keep_video and self.video_path and os.path.exists(self.video_path):
-            os.remove(self.video_path)
-    
-    def generate_response(self, prompt, model="gpt-4"):
-        """Generate response using G4F"""
-        try:
-            response = g4f.ChatCompletion.create(
-                model=parse_model(model),
-                messages=[{"role": "user", "content": prompt}]
-            )
-            return response
-        except Exception as e:
-            error(f"Error generating response: {str(e)}")
-            return ""
-
-    def generate_topic(self, niche):
-        """Generate a topic based on the niche"""
-        prompt = f"Please generate a specific video idea that takes about the following topic: {niche}. Make it exactly one sentence. Only return the topic, nothing else."
-        completion = self.generate_response(prompt)
-        
-        if not completion:
-            raise ValueError("Failed to generate topic")
-            
-        self.subject = completion
-        return completion
-
-    def generate_script(self, subject, language):
-        """Generate video script based on subject"""
-        prompt = f"""
-        Generate a script for youtube shorts video, depending on the subject of the video.
-
-        The script is to be returned as a string with the specified number of paragraphs.
-
-        Here is an example of a string:
-        "This is an example string."
-
-        Do not under any circumstance reference this prompt in your response.
-
-        Get straight to the point, don't start with unnecessary things like, "welcome to this video".
-
-        Obviously, the script should be related to the subject of the video.
-        
-        YOU MUST NOT INCLUDE ANY TYPE OF MARKDOWN OR FORMATTING IN THE SCRIPT, NEVER USE A TITLE.
-        YOU MUST WRITE THE SCRIPT IN THE LANGUAGE SPECIFIED IN [LANGUAGE].
-        ONLY RETURN THE RAW CONTENT OF THE SCRIPT. DO NOT INCLUDE "VOICEOVER", "NARRATOR" OR SIMILAR INDICATORS OF WHAT SHOULD BE SPOKEN AT THE BEGINNING OF EACH PARAGRAPH OR LINE. YOU MUST NOT MENTION THE PROMPT, OR ANYTHING ABOUT THE SCRIPT ITSELF. ALSO, NEVER TALK ABOUT THE AMOUNT OF PARAGRAPHS OR LINES. JUST WRITE THE SCRIPT
-        
-        Subject: {subject}
-        Language: {language}
-        """
-        completion = self.generate_response(prompt)
-        
-        # Apply regex to remove *
-        completion = re.sub(r"\*", "", completion)
-        
-        if not completion:
-            raise ValueError("The generated script is empty")
-        
-        if len(completion) > 5000:
-            raise ValueError("Generated script is too long (>5000 chars)")
-        
-        self.script = completion
-        return completion
-
-    def generate_metadata(self, subject):
-        """Generate title and description"""
-        title_prompt = f"Please generate a YouTube Video Title for the following subject, including hashtags: {subject}. Only return the title, nothing else. Limit the title under 100 characters."
-        title = self.generate_response(title_prompt)
-        
-        if len(title) > 100:
-            title = title[:97] + "..."
-        
-        desc_prompt = f"Please generate a YouTube Video Description for the following script: {self.script}. Only return the description, nothing else."
-        description = self.generate_response(desc_prompt)
-        
-        self.metadata = {
-            "title": title,
-            "description": description
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>YouTube Shorts Generator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#5D5CDE',
+                    }
+                }
+            }
+        };
+    </script>
+    <style>
+        .loading-spinner {
+            border: 4px solid rgba(0, 0, 0, 0.1);
+            border-left-color: #5D5CDE;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            animation: spin 1s linear infinite;
         }
         
-        return self.metadata
-
-    def generate_prompts(self, subject, script):
-        """Generate image prompts for the script"""
-        n_prompts = 5
-        prompt = f"""
-        Generate {n_prompts} Image Prompts for AI Image Generation,
-        depending on the subject of a video.
-        Subject: {subject}
-
-        The image prompts are to be returned as
-        a JSON-Array of strings.
-
-        Each search term should consist of a full sentence,
-        always add the main subject of the video.
-
-        Be emotional and use interesting adjectives to make the
-        Image Prompt as detailed as possible.
-        
-        YOU MUST ONLY RETURN THE JSON-ARRAY OF STRINGS.
-        YOU MUST NOT RETURN ANYTHING ELSE. 
-        YOU MUST NOT RETURN THE SCRIPT.
-        
-        The search terms must be related to the subject of the video.
-        Here is an example of a JSON-Array of strings:
-        ["image prompt 1", "image prompt 2", "image prompt 3"]
-
-        For context, here is the full text:
-        {script}
-        """
-        
-        completion = str(self.generate_response(prompt, model="gpt-4"))
-        completion = completion.replace("```json", "").replace("```", "")
-        
-        image_prompts = []
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
         
-        try:
-            # First try to parse as JSON directly
-            image_prompts = json.loads(completion)
-            if isinstance(image_prompts, dict) and "image_prompts" in image_prompts:
-                image_prompts = image_prompts["image_prompts"]
-        except Exception:
-            # If that fails, try to extract array from the text
-            try:
-                # Get everything between [ and ], and turn it into a list
-                r = re.compile(r"\[.*\]", re.DOTALL)
-                matches = r.findall(completion)
-                if matches:
-                    image_prompts = json.loads(matches[0])
-            except Exception as e:
-                raise ValueError(f"Failed to parse image prompts: {str(e)}")
+        .dark .loading-spinner {
+            border-color: rgba(255, 255, 255, 0.1);
+            border-left-color: #5D5CDE;
+        }
+    </style>
+</head>
+<body class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen">
+    <div class="container mx-auto px-4 py-8 max-w-4xl">
+        <h1 class="text-3xl font-bold mb-4 text-center text-primary">YouTube Shorts Generator</h1>
         
-        # Ensure we have prompts and they're in the right format
-        if not image_prompts or not isinstance(image_prompts, list):
-            raise ValueError("No valid image prompts were generated")
+        <div class="mb-8 bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
+            <div class="mb-4">
+                <label for="niche" class="block text-sm font-medium mb-1">Niche/Topic</label>
+                <input type="text" id="niche" placeholder="E.g., Fitness tips, Technology facts, Travel destinations" class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-base">
+            </div>
             
-        # Limit to 5 prompts
-        image_prompts = image_prompts[:5]
-        
-        self.image_prompts = image_prompts
-        return image_prompts
-
-    def generate_image(self, prompt, provider="g4f", model="sdxl-turbo"):
-        """Generate an image using the specified provider"""
-        try:
-            if provider == "g4f":
-                client = Client()
-                response = client.images.generate(
-                    model=model,
-                    prompt=prompt,
-                    response_format="url"
-                )
-                
-                if response and response.data and len(response.data) > 0:
-                    image_url = response.data[0].url
-                    image_response = requests.get(image_url)
-                    
-                    if image_response.status_code == 200:
-                        image_path = str(TEMP_DIR / f"{generate_id()}.png")
-                        with open(image_path, "wb") as f:
-                            f.write(image_response.content)
-                        self.images.append(image_path)
-                        return image_path
-                    
-                raise ValueError(f"Failed to download image from {image_url}")
-                        
-            elif provider == "prodia":
-                s = requests.Session()
-                headers = {
-                    "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36"
-                }
+            <div class="mb-4">
+                <label for="language" class="block text-sm font-medium mb-1">Language</label>
+                <select id="language" class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-base">
+                    <option value="English">English</option>
+                    <option value="Spanish">Spanish</option>
+                    <option value="French">French</option>
+                    <option value="German">German</option>
+                    <option value="Italian">Italian</option>
+                    <option value="Portuguese">Portuguese</option>
+                    <option value="Russian">Russian</option>
+                    <option value="Japanese">Japanese</option>
+                    <option value="Chinese">Chinese</option>
+                    <option value="Hindi">Hindi</option>
+                </select>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                <div>
+                    <label for="text-generator" class="block text-sm font-medium mb-1">Text Generator</label>
+                    <select id="text-generator" class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-base">
+                        <option value="Claude-3.7-Sonnet">Claude-3.7-Sonnet</option>
+                        <option value="GPT-4o">GPT-4o</option>
+                        <option value="GPT-4o-mini">GPT-4o-mini</option>
+                        <option value="Gemini-2.0-Flash">Gemini-2.0-Flash</option>
+                    </select>
+                </div>
                 
-                # Generate job
-                resp = s.get(
-                    "https://api.prodia.com/generate",
-                    params={
-                        "new": "true",
-                        "prompt": prompt,
-                        "model": model,
-                        "negative_prompt": "verybadimagenegative_v1.3",
-                        "steps": "20",
-                        "cfg": "7",
-                        "seed": random.randint(1, 10000),
-                        "sample": "DPM++ 2M Karras",
-                        "aspect_ratio": "square"
-                    },
-                    headers=headers
-                )
-                
-                job_id = resp.json().get('job')
-                if not job_id:
-                    raise ValueError("Failed to get job ID from Prodia")
-                
-                # Wait for job to complete
-                for _ in range(30):  # Timeout after 30 attempts (150 seconds)
-                    time.sleep(5)
-                    status = s.get(f"https://api.prodia.com/job/{job_id}", headers=headers).json()
-                    if status.get("status") == "succeeded":
-                        img_data = s.get(f"https://images.prodia.xyz/{job_id}.png?download=1", headers=headers).content
-                        image_path = str(TEMP_DIR / f"{generate_id()}.png")
-                        with open(image_path, "wb") as f:
-                            f.write(img_data)
-                        self.images.append(image_path)
-                        return image_path
-                
-                raise ValueError("Prodia image generation timed out")
-                
-            elif provider == "pollinations":
-                response = requests.get(f"https://image.pollinations.ai/prompt/{prompt}{random.randint(1,10000)}")
-                if response.status_code == 200:
-                    image_path = str(TEMP_DIR / f"{generate_id()}.png")
-                    with open(image_path, "wb") as f:
-                        f.write(response.content)
-                    self.images.append(image_path)
-                    return image_path
-                else:
-                    raise ValueError(f"Pollinations request failed: {response.status_code}")
-                    
-            else:
-                raise ValueError(f"Unsupported image provider: {provider}")
+                <div>
+                    <label for="image-generator" class="block text-sm font-medium mb-1">Image Generator</label>
+                    <select id="image-generator" class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-base">
+                        <option value="FLUX-pro-1.1">FLUX-pro-1.1</option>
+                        <option value="FLUX-schnell">FLUX-schnell</option>
+                        <option value="Dall-E-3">Dall-E-3</option>
+                    </select>
+                </div>
                 
-        except Exception as e:
-            raise ValueError(f"Image generation failed: {str(e)}")
-
-    async def generate_edge_tts(self, text, voice):
-        """Generate speech using Edge TTS"""
-        try:
-            audio_path = str(TEMP_DIR / f"{generate_id()}.mp3")
-            communicate = edge_tts.Communicate(text, voice)
-            await communicate.save(audio_path)
-            self.tts_path = audio_path
-            return audio_path
-        except Exception as e:
-            # Try an alternative voice if the specified one fails
-            try:
-                fallback_voice = "en-US-ChristopherNeural"
-                communicate = edge_tts.Communicate(text, fallback_voice)
-                audio_path = str(TEMP_DIR / f"{generate_id()}.mp3")
-                await communicate.save(audio_path)
-                self.tts_path = audio_path
-                return audio_path
-            except Exception as nested_e:
-                raise ValueError(f"Edge TTS failed with both voices: {str(e)}, fallback: {str(nested_e)}")
-
-    def generate_gtts(self, text, lang='en'):
-        """Generate speech using Google TTS"""
-        try:
-            audio_path = str(TEMP_DIR / f"{generate_id()}.mp3")
-            tts = gTTS(text=text, lang=lang, slow=False)
-            tts.save(audio_path)
-            self.tts_path = audio_path
-            return audio_path
-        except Exception as e:
-            raise ValueError(f"Google TTS failed: {str(e)}")
-
-    def generate_speech(self, text, engine="edge", voice="en-US-ChristopherNeural"):
-        """Generate speech from text using selected engine"""
-        # Clean text
-        text = re.sub(r'[^\w\s.?!]', '', text)
-        
-        if engine == "edge":
-            # Edge TTS is async, so we need to run it in an event loop
-            return asyncio.run(self.generate_edge_tts(text, voice))
-        elif engine == "gtts":
-            return self.generate_gtts(text, lang=voice)
-        else:
-            raise ValueError(f"Unsupported TTS engine: {engine}")
-
-    def generate_subtitles(self, audio_path, api_key):
-        """Generate word-highlighted subtitles"""
-        try:
-            # Set API key
-            aai.settings.api_key = api_key
-            
-            # Configure transcription
-            config = aai.TranscriptionConfig(
-                speaker_labels=False, 
-                word_boost=[], 
-                format_text=True
-            )
-            
-            # Create transcriber and transcribe audio
-            transcriber = aai.Transcriber(config=config)
-            transcript = transcriber.transcribe(audio_path)
-            
-            # Process word-level information
-            wordlevel_info = []
-            for word in transcript.words:
-                word_data = {
-                    "word": word.text.strip(),
-                    "start": word.start / 1000.0,
-                    "end": word.end / 1000.0
-                }
-                wordlevel_info.append(word_data)
-            
-            # Split text into lines based on character count and duration
-            MAX_CHARS = 30
-            MAX_DURATION = 3.0
-            MAX_GAP = 2.5
-            
-            subtitles = []
-            line = []
-            line_duration = 0
-            
-            for idx, word_data in enumerate(wordlevel_info):
-                word = word_data["word"]
-                start = word_data["start"]
-                end = word_data["end"]
-                
-                line.append(word_data)
-                line_duration += end - start
-                temp = " ".join(item["word"] for item in line)
-                new_line_chars = len(temp)
-                duration_exceeded = line_duration > MAX_DURATION
-                chars_exceeded = new_line_chars > MAX_CHARS
-                
-                if idx > 0:
-                    gap = word_data['start'] - wordlevel_info[idx - 1]['end']
-                    maxgap_exceeded = gap > MAX_GAP
-                else:
-                    maxgap_exceeded = False
-                
-                # Check if any condition is exceeded to finalize the current line
-                if duration_exceeded or chars_exceeded or maxgap_exceeded:
-                    if line:
-                        subtitle_line = {
-                            "text": " ".join(item["word"] for item in line),
-                            "start": line[0]["start"],
-                            "end": line[-1]["end"],
-                            "words": line
-                        }
-                        subtitles.append(subtitle_line)
-                        line = []
-                        line_duration = 0
-            
-            # Add the remaining words as the last subtitle line if any
-            if line:
-                subtitle_line = {
-                    "text": " ".join(item["word"] for item in line),
-                    "start": line[0]["start"],
-                    "end": line[-1]["end"],
-                    "words": line
-                }
-                subtitles.append(subtitle_line)
-            
-            # Create subtitle clips
-            all_subtitle_clips = []
-            
-            # Define formatting constants
-            FONT = 'Helvetica-Bold'
-            FONTSIZE = 80
-            COLOR = 'white'
-            BG_COLOR = 'blue'
-            FRAME_SIZE = (1080, 1920)
-            
-            for subtitle in subtitles:
-                full_duration = subtitle['end'] - subtitle['start']
-                
-                word_clips = []
-                xy_textclips_positions = []
-                
-                # Dynamic vertical positioning (moved to bottom)
-                frame_width, frame_height = FRAME_SIZE
-                x_pos = 0
-                y_pos = frame_height * 0.85  # Position at 85% of frame height
-                x_buffer = frame_width * 1 / 10
-                y_buffer = 10  # Small vertical buffer
-                
-                line_height = 0
-                current_line_height = 0
-                
-                for index, wordJSON in enumerate(subtitle['words']):
-                    duration = wordJSON['end'] - wordJSON['start']
-                    word_clip = TextClip(wordJSON['word'], font=FONT, fontsize=FONTSIZE, color=COLOR).set_start(subtitle['start']).set_duration(full_duration)
-                    word_width, word_height = word_clip.size
-                    
-                    # Track line height for multi-line support
-                    line_height = max(line_height, word_height)
-                    
-                    # Check if the current word exceeds the frame width, move to the next line
-                    if x_pos + word_width > frame_width - 2 * x_buffer:
-                        x_pos = 0
-                        y_pos += line_height + y_buffer
-                        current_line_height += line_height + y_buffer
-                    
-                    # Store the position and other details for highlighting
-                    xy_textclips_positions.append({
-                        "x_pos": x_pos + x_buffer,
-                        "y_pos": y_pos + y_buffer,
-                        "width": word_width,
-                        "height": word_height,
-                        "word": wordJSON['word'],
-                        "start": wordJSON['start'],
-                        "end": wordJSON['end'],
-                        "duration": duration
-                    })
-                    
-                    # Set the position of the word clip
-                    word_clip = word_clip.set_position((x_pos + x_buffer, y_pos + y_buffer))
-                    word_clips.append(word_clip)
-                    x_pos = x_pos + word_width + 10
-                
-                # Create highlighted word clips
-                for highlight_word in xy_textclips_positions:
-                    word_clip_highlight = TextClip(highlight_word['word'], font=FONT, fontsize=FONTSIZE, color=COLOR, bg_color=BG_COLOR).set_start(highlight_word['start']).set_duration(highlight_word['duration'])
-                    word_clip_highlight = word_clip_highlight.set_position((highlight_word['x_pos'], highlight_word['y_pos']))
-                    word_clips.append(word_clip_highlight)
-                
-                # Add all word clips to the list of subtitle clips
-                all_subtitle_clips.extend(word_clips)
-            
-            return all_subtitle_clips
-        except Exception as e:
-            print(f"Subtitle generation error: {str(e)}")
-            return []  # Return empty list if subtitles fail
-
-    def combine_video(self, include_subtitles=True, subtitles_api_key=""):
-        """Combine all elements into final video"""
-        try:
-            output_path = str(TEMP_DIR / f"{generate_id()}.mp4")
+                <div>
+                    <label for="voice-generator" class="block text-sm font-medium mb-1">Voice Generator</label>
+                    <select id="voice-generator" class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-base">
+                        <option value="ElevenLabs">ElevenLabs</option>
+                        <option value="PlayAI-Dialog">PlayAI-Dialog</option>
+                    </select>
+                </div>
+            </div>
             
-            # Load audio
-            tts_clip = AudioFileClip(self.tts_path)
-            max_duration = tts_clip.duration
+            <div>
+                <label for="voice-name" class="block text-sm font-medium mb-1">Voice Name (Optional)</label>
+                <input type="text" id="voice-name" placeholder="E.g., Sarah, Brian, Lily, Monika Sogam" class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-base">
+            </div>
             
-            # Calculate duration per image
-            req_dur = max_duration / len(self.images)
-            
-            # Create video clips from images
-            clips = []
-            tot_dur = 0
-            
-            while tot_dur < max_duration:
-                for image_path in self.images:
-                    clip = ImageClip(image_path)
-                    clip.duration = req_dur
-                    clip = clip.set_fps(30)
-                    
-                    # Intelligent cropping for different aspect ratios
-                    aspect_ratio = 9/16  # Standard vertical video ratio
-                    if clip.w / clip.h < aspect_ratio:
-                        clip = crop(
-                            clip, 
-                            width=clip.w, 
-                            height=round(clip.w / aspect_ratio), 
-                            x_center=clip.w / 2, 
-                            y_center=clip.h / 2
-                        )
-                    else:
-                        clip = crop(
-                            clip, 
-                            width=round(aspect_ratio * clip.h), 
-                            height=clip.h, 
-                            x_center=clip.w / 2, 
-                            y_center=clip.h / 2
-                        )
-                    
-                    clip = clip.resize((1080, 1920))  # Hardcoded frame size for shorts
-                    
-                    clips.append(clip)
-                    tot_dur += clip.duration
-                    
-                    # Break if we have enough duration
-                    if tot_dur >= max_duration:
-                        break
-            
-            # Concatenate all clips
-            final_clip = concatenate_videoclips(clips)
-            final_clip = final_clip.set_fps(30)
-            
-            # Add background music
-            random_music = choose_random_music()
-            random_music_clip = AudioFileClip(str(random_music))
-            random_music_clip = random_music_clip.fx(volumex, 0.1)
-            random_music_clip = random_music_clip.set_duration(max_duration)
-            
-            # Generate subtitles if requested
-            word_highlighted_clips = []
-            if include_subtitles and subtitles_api_key:
-                word_highlighted_clips = self.generate_subtitles(self.tts_path, subtitles_api_key)
-            
-            # Combine audio
-            comp_audio = CompositeAudioClip([
-                tts_clip,
-                random_music_clip
-            ])
+            <button id="generate-btn" class="mt-6 w-full bg-primary hover:bg-opacity-90 text-white py-3 px-4 rounded-md font-medium transition duration-200">
+                Generate Video
+            </button>
+        </div>
+        
+        <div id="loading-container" class="hidden flex-col items-center justify-center py-8">
+            <div class="loading-spinner mb-4"></div>
+            <div id="status-message" class="text-lg font-medium">Generating content...</div>
+            <div id="progress-detail" class="text-sm text-gray-500 dark:text-gray-400 mt-2"></div>
+        </div>
+        
+        <div id="results-container" class="hidden bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
+            <h2 class="text-xl font-bold mb-3">Generated Video</h2>
             
-            # Set audio and duration
-            final_clip = final_clip.set_audio(comp_audio)
-            final_clip = final_clip.set_duration(tts_clip.duration)
+            <div id="video-player-container" class="mb-6 relative pt-[56.25%]">
+                <video id="video-player" controls class="absolute top-0 left-0 w-full h-full rounded-lg">
+                    Your browser does not support the video tag.
+                </video>
+            </div>
             
-            # Add subtitles if we have them
-            if word_highlighted_clips:
-                final_clip = CompositeVideoClip([final_clip] + word_highlighted_clips)
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                    <h3 class="font-medium mb-2">Title</h3>
+                    <p id="video-title" class="bg-white dark:bg-gray-700 p-3 rounded-md"></p>
+                </div>
+                <div>
+                    <h3 class="font-medium mb-2">Description</h3>
+                    <p id="video-description" class="bg-white dark:bg-gray-700 p-3 rounded-md h-24 overflow-y-auto"></p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Initialize dark mode based on user preference
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.documentElement.classList.add('dark');
+        }
+        
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+            if (event.matches) {
+                document.documentElement.classList.add('dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+            }
+        });
+        
+        // Handler for generating videos
+        document.getElementById('generate-btn').addEventListener('click', async function() {
+            // Get input values
+            const niche = document.getElementById('niche').value.trim();
+            const language = document.getElementById('language').value;
+            const textGenerator = document.getElementById('text-generator').value;
+            const imageGenerator = document.getElementById('image-generator').value;
+            const voiceGenerator = document.getElementById('voice-generator').value;
+            const voiceName = document.getElementById('voice-name').value.trim();
             
-            # Write video file
-            final_clip.write_videofile(output_path, threads=4)
+            // Validation
+            if (!niche) {
+                alert('Please enter a niche/topic');
+                return;
+            }
             
-            # Save to output directory with a more descriptive name
-            safe_title = re.sub(r'[^\w\s-]', '', self.metadata["title"])
-            safe_title = re.sub(r'[-\s]+', '-', safe_title).strip('-_')
-            final_output = str(OUTPUT_DIR / f"{safe_title}_{int(time.time())}.mp4")
-            shutil.copy2(output_path, final_output)
+            // Show loading state
+            document.getElementById('loading-container').classList.remove('hidden');
+            document.getElementById('loading-container').classList.add('flex');
+            document.getElementById('results-container').classList.add('hidden');
             
-            self.video_path = final_output
-            return final_output
-        except Exception as e:
-            raise ValueError(f"Video generation failed: {str(e)}")
-
-def generate_full_pipeline(
-    niche, 
-    language, 
-    img_provider, 
-    img_model, 
-    tts_engine, 
-    tts_voice, 
-    include_subtitles, 
-    assemblyai_key,
-    progress=gr.Progress()
-):
-    progress(0, desc="Initializing")
-    generator = YouTubeGenerator()
-    
-    try:
-        # Step 1: Generate topic
-        progress(0.05, desc="Generating topic")
-        topic = generator.generate_topic(niche)
-        
-        # Step 2: Generate script
-        progress(0.1, desc="Generating script")
-        script = generator.generate_script(topic, language)
-        
-        # Step 3: Generate metadata
-        progress(0.15, desc="Generating metadata")
-        metadata = generator.generate_metadata(topic)
-        
-        # Step 4: Generate image prompts
-        progress(0.2, desc="Generating image prompts")
-        image_prompts = generator.generate_prompts(topic, script)
-        
-        # Step 5: Generate images
-        progress(0.3, desc="Generating images")
-        images = []
-        total_images = len(image_prompts)
-        
-        for i, prompt in enumerate(image_prompts):
-            progress(0.3 + (0.3 * i/total_images), desc=f"Generating image {i+1}/{total_images}")
-            img_path = generator.generate_image(prompt, provider=img_provider, model=img_model)
-            images.append(img_path)
-        
-        # Step 6: Generate speech
-        progress(0.6, desc="Generating speech")
-        tts_path = generator.generate_speech(script, engine=tts_engine, voice=tts_voice)
+            try {
+                // Updates for the loading message
+                updateProgress('Generating topic...');
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                
+                // Step 1: Generate topic
+                const topic = await generateTopic(niche, textGenerator);
+                
+                // Step 2: Generate script
+                updateProgress('Creating script...');
+                const script = await generateScript(topic, language, textGenerator);
+                
+                // Step 3: Generate metadata
+                updateProgress('Creating title and description...');
+                const metadata = await generateMetadata(topic, script, textGenerator);
+                
+                // Step 4: Generate image prompts
+                updateProgress('Creating image prompts...');
+                const imagePrompts = await generateImagePrompts(topic, script, textGenerator);
+                
+                // Step 5: Generate images
+                updateProgress('Generating images...');
+                const imageUrls = await generateImages(imagePrompts, imageGenerator);
+                
+                // Step 6: Generate speech
+                updateProgress('Creating voiceover...');
+                const audioUrl = await generateSpeech(script, language, voiceGenerator, voiceName);
+                
+                // Step 7: Generate video
+                updateProgress('Creating final video...');
+                const videoUrl = await generateVideo(imageUrls, audioUrl, script);
+                
+                // Display results
+                displayResults(videoUrl, metadata.title, metadata.description);
+                
+            } catch (error) {
+                console.error('Error:', error);
+                document.getElementById('status-message').textContent = 'Error generating video';
+                document.getElementById('progress-detail').textContent = error.message || 'An unexpected error occurred';
+            }
+        });
         
-        # Step 7: Combine into video
-        progress(0.8, desc="Creating video")
-        video_path = generator.combine_video(
-            include_subtitles=include_subtitles,
-            subtitles_api_key=assemblyai_key if include_subtitles else ""
-        )
+        function updateProgress(message) {
+            document.getElementById('progress-detail').textContent = message;
+        }
         
-        progress(1.0, desc="Complete!")
+        // Function to generate topic based on niche
+        async function generateTopic(niche, textGeneratorModel) {
+            try {
+                const prompt = `Please generate a specific video idea that takes about the following topic: ${niche}. Make it exactly one sentence. Only return the topic, nothing else.`;
+                
+                // Use Poe API to send user message
+                const handlerId = 'topic-generation-handler';
+                let topicResult = '';
+                
+                // Register handler for response
+                window.Poe.registerHandler(handlerId, (result) => {
+                    if (result.responses.length > 0) {
+                        const response = result.responses[0];
+                        if (response.status === 'complete') {
+                            topicResult = response.content.trim();
+                        }
+                    }
+                });
+                
+                // Send request to generate topic
+                await window.Poe.sendUserMessage(`@${textGeneratorModel} ${prompt}`, {
+                    handler: handlerId,
+                    stream: false,
+                    openChat: false
+                });
+                
+                // Wait for response to be complete
+                while (!topicResult) {
+                    await new Promise(resolve => setTimeout(resolve, 100));
+                }
+                
+                return topicResult;
+            } catch (error) {
+                console.error('Error generating topic:', error);
+                throw new Error('Failed to generate topic');
+            }
+        }
         
-        return {
-            "topic": topic,
-            "script": script,
-            "title": metadata["title"],
-            "description": metadata["description"],
-            "image_prompts": "\n\n".join([f"{i+1}. {prompt}" for i, prompt in enumerate(image_prompts)]),
-            "images": images,
-            "audio": tts_path,
-            "video": video_path,
-            "video_html": f'
-'
+        // Function to generate script based on topic
+        async function generateScript(topic, language, textGeneratorModel) {
+            try {
+                const prompt = `
+                Generate a script for youtube shorts video, depending on the subject of the video.
+                
+                The script is to be returned as a string with several paragraphs.
+                
+                Get straight to the point, don't start with unnecessary things like, "welcome to this video".
+                
+                Obviously, the script should be related to the subject of the video.
+                
+                YOU MUST NOT INCLUDE ANY TYPE OF MARKDOWN OR FORMATTING IN THE SCRIPT, NEVER USE A TITLE.
+                YOU MUST WRITE THE SCRIPT IN THE LANGUAGE SPECIFIED IN [LANGUAGE].
+                ONLY RETURN THE RAW CONTENT OF THE SCRIPT. DO NOT INCLUDE "VOICEOVER", "NARRATOR" OR SIMILAR INDICATORS.
+                
+                Subject: ${topic}
+                Language: ${language}
+                `;
+                
+                // Use Poe API to send user message
+                const handlerId = 'script-generation-handler';
+                let scriptResult = '';
+                
+                // Register handler for response
+                window.Poe.registerHandler(handlerId, (result) => {
+                    if (result.responses.length > 0) {
+                        const response = result.responses[0];
+                        if (response.status === 'complete') {
+                            scriptResult = response.content.trim();
+                        }
+                    }
+                });
+                
+                // Send request to generate script
+                await window.Poe.sendUserMessage(`@${textGeneratorModel} ${prompt}`, {
+                    handler: handlerId,
+                    stream: false,
+                    openChat: false
+                });
+                
+                // Wait for response to be complete
+                while (!scriptResult) {
+                    await new Promise(resolve => setTimeout(resolve, 100));
+                }
+                
+                return scriptResult;
+            } catch (error) {
+                console.error('Error generating script:', error);
+                throw new Error('Failed to generate script');
+            }
         }
-    
-    except Exception as e:
-        generator.clean_temp_files()
-        error_msg = str(e)
-        return {
-            "topic": f"ERROR: {error_msg}",
-            "script": "",
-            "title": "",
-            "description": "",
-            "image_prompts": "",
-            "images": [],
-            "audio": None,
-            "video": None,
-            "video_html": f'
-Video generation failed: {error_msg}
-'
+        
+        // Function to generate metadata (title and description)
+        async function generateMetadata(topic, script, textGeneratorModel) {
+            try {
+                const titlePrompt = `Please generate a YouTube Video Title for the following subject, including hashtags: ${topic}. Only return the title, nothing else. Limit the title under 100 characters.`;
+                
+                // Use Poe API to send user message for title
+                const titleHandlerId = 'title-generation-handler';
+                let titleResult = '';
+                
+                // Register handler for title response
+                window.Poe.registerHandler(titleHandlerId, (result) => {
+                    if (result.responses.length > 0) {
+                        const response = result.responses[0];
+                        if (response.status === 'complete') {
+                            titleResult = response.content.trim();
+                        }
+                    }
+                });
+                
+                // Send request to generate title
+                await window.Poe.sendUserMessage(`@${textGeneratorModel} ${titlePrompt}`, {
+                    handler: titleHandlerId,
+                    stream: false,
+                    openChat: false
+                });
+                
+                // Wait for title response to be complete
+                while (!titleResult) {
+                    await new Promise(resolve => setTimeout(resolve, 100));
+                }
+                
+                // Now generate description
+                const descPrompt = `Please generate a YouTube Video Description for the following script: ${script}. Only return the description, nothing else.`;
+                
+                // Use Poe API to send user message for description
+                const descHandlerId = 'desc-generation-handler';
+                let descResult = '';
+                
+                // Register handler for description response
+                window.Poe.registerHandler(descHandlerId, (result) => {
+                    if (result.responses.length > 0) {
+                        const response = result.responses[0];
+                        if (response.status === 'complete') {
+                            descResult = response.content.trim();
+                        }
+                    }
+                });
+                
+                // Send request to generate description
+                await window.Poe.sendUserMessage(`@${textGeneratorModel} ${descPrompt}`, {
+                    handler: descHandlerId,
+                    stream: false,
+                    openChat: false
+                });
+                
+                // Wait for description response to be complete
+                while (!descResult) {
+                    await new Promise(resolve => setTimeout(resolve, 100));
+                }
+                
+                return {
+                    title: titleResult,
+                    description: descResult
+                };
+            } catch (error) {
+                console.error('Error generating metadata:', error);
+                throw new Error('Failed to generate title and description');
+            }
         }
-
-def ui_component():
-    # Define UI components
-    with gr.Blocks(theme=gr.themes.Soft()) as app:
-        gr.Markdown("# YouTube Shorts Generator")
-        gr.Markdown("Generate complete YouTube Shorts videos with AI")
         
-        with gr.Tabs():
-            with gr.TabItem("Generate Video"):
-                with gr.Row():
-                    with gr.Column():
-                        # Input parameters
-                        niche_input = gr.Textbox(label="Video Niche/Topic", placeholder="Historical Facts", value="Historical Facts")
-                        language_input = gr.Dropdown(
-                            label="Language", 
-                            choices=["English", "Spanish", "French", "German", "Italian", "Portuguese", "Russian", "Japanese", "Chinese", "Korean", "Arabic"],
-                            value="English"
-                        )
-                        
-                        with gr.Accordion("Image Generation Settings", open=False):
-                            img_provider = gr.Dropdown(
-                                label="Image Provider", 
-                                choices=["g4f", "prodia", "pollinations"],
-                                value="g4f"
-                            )
-                            
-                            img_model = gr.Dropdown(
-                                label="Image Model",
-                                choices=["sdxl-turbo", "sdxl", "stable-diffusion-3", "kandinsky-2.2", "midjourney"],
-                                value="sdxl-turbo"
-                            )
-                            
-                        with gr.Accordion("TTS Settings", open=False):
-                            tts_engine = gr.Dropdown(
-                                label="TTS Engine",
-                                choices=["edge", "gtts"],
-                                value="edge"
-                            )
-                            
-                            tts_voice = gr.Dropdown(
-                                label="TTS Voice",
-                                choices=["en-US-ChristopherNeural", "en-US-GuyNeural", "en-US-JennyNeural", "en-US-AriaNeural", "en-GB-SoniaNeural", "en"],
-                                value="en-US-ChristopherNeural"
-                            )
-                        
-                        with gr.Accordion("Subtitle Settings", open=False):
-                            include_subtitles = gr.Checkbox(label="Generate Word-Level Subtitles", value=False)
-                            assemblyai_key = gr.Textbox(
-                                label="AssemblyAI API Key (required for subtitles)", 
-                                placeholder="Your AssemblyAI API Key",
-                                type="password"
-                            )
-                        
-                        generate_btn = gr.Button("Generate Video", variant="primary")
-                    
-                    with gr.Column():
-                        # Output display
-                        with gr.Accordion("Generated Content", open=True):
-                            topic_output = gr.Textbox(label="Generated Topic")
-                            script_output = gr.Textbox(label="Generated Script", lines=10)
-                            title_output = gr.Textbox(label="Video Title")
-                            description_output = gr.Textbox(label="Video Description", lines=5)
-                        
-                        with gr.Accordion("Generated Assets", open=True):
-                            prompts_output = gr.Textbox(label="Image Prompts", lines=5)
-                            gallery_output = gr.Gallery(label="Generated Images")
-                            audio_output = gr.Audio(label="Generated Speech")
-                            video_output = gr.Video(label="Final Video")
-                            
-                            video_html = gr.HTML(label="Video Player")
-                
-                # Connect button to function
-                generate_btn.click(
-                    generate_full_pipeline,
-                    inputs=[
-                        niche_input, 
-                        language_input, 
-                        img_provider, 
-                        img_model, 
-                        tts_engine, 
-                        tts_voice, 
-                        include_subtitles, 
-                        assemblyai_key
-                    ],
-                    outputs={
-                        "topic": topic_output,
-                        "script": script_output,
-                        "title": title_output,
-                        "description": description_output,
-                        "image_prompts": prompts_output,
-                        "images": gallery_output,
-                        "audio": audio_output,
-                        "video": video_output,
-                        "video_html": video_html
+        // Function to generate image prompts
+        async function generateImagePrompts(topic, script, textGeneratorModel) {
+            try {
+                const prompt = `
+                Generate 5 Image Prompts for AI Image Generation,
+                depending on the subject of a video.
+                Subject: ${topic}
+                
+                The image prompts are to be returned as
+                a JSON-Array of strings.
+                
+                Each search term should consist of a full sentence,
+                always add the main subject of the video.
+                
+                Be emotional and use interesting adjectives to make the
+                Image Prompt as detailed as possible.
+                
+                YOU MUST ONLY RETURN THE JSON-ARRAY OF STRINGS.
+                YOU MUST NOT RETURN ANYTHING ELSE.
+                
+                For context, here is the full text:
+                ${script}
+                `;
+                
+                // Use Poe API to send user message
+                const handlerId = 'image-prompts-handler';
+                let promptsResult = '';
+                
+                // Register handler for response
+                window.Poe.registerHandler(handlerId, (result) => {
+                    if (result.responses.length > 0) {
+                        const response = result.responses[0];
+                        if (response.status === 'complete') {
+                            promptsResult = response.content.trim();
+                        }
                     }
-                )
-            
-            with gr.TabItem("Settings"):
-                gr.Markdown("## Advanced Settings")
+                });
                 
-                with gr.Accordion("Storage Settings", open=True):
-                    temp_dir = gr.Textbox(label="Temporary Directory", value=str(TEMP_DIR))
-                    output_dir = gr.Textbox(label="Output Directory", value=str(OUTPUT_DIR))
-                    music_dir = gr.Textbox(label="Music Directory", value=str(MUSIC_DIR))
-                    
-                    def update_dirs(temp, output, music):
-                        global TEMP_DIR, OUTPUT_DIR, MUSIC_DIR
-                        TEMP_DIR = Path(temp)
-                        OUTPUT_DIR = Path(output)
-                        MUSIC_DIR = Path(music)
-                        
-                        # Ensure directories exist
-                        TEMP_DIR.mkdir(exist_ok=True)
-                        OUTPUT_DIR.mkdir(exist_ok=True)
-                        MUSIC_DIR.mkdir(exist_ok=True)
-                        
-                        return f"Directories updated: {temp}, {output}, {music}"
-                    
-                    update_dirs_btn = gr.Button("Update Directories")
-                    dirs_status = gr.Textbox(label="Status")
-                    
-                    update_dirs_btn.click(
-                        update_dirs,
-                        inputs=[temp_dir, output_dir, music_dir],
-                        outputs=dirs_status
-                    )
-                
-                with gr.Accordion("Add Background Music", open=True):
-                    music_file = gr.File(label="Upload Music File (MP3)")
-                    
-                    def add_music(file):
-                        if file is None:
-                            return "No file selected"
-                        
-                        try:
-                            filename = os.path.basename(file.name)
-                            dest_path = MUSIC_DIR / filename
-                            shutil.copy2(file.name, dest_path)
-                            return f"Music file added: {filename}"
-                        except Exception as e:
-                            return f"Error adding music: {str(e)}"
+                // Send request to generate image prompts
+                await window.Poe.sendUserMessage(`@${textGeneratorModel} ${prompt}`, {
+                    handler: handlerId,
+                    stream: false,
+                    openChat: false
+                });
+                
+                // Wait for response to be complete
+                while (!promptsResult) {
+                    await new Promise(resolve => setTimeout(resolve, 100));
+                }
+                
+                // Clean and parse the JSON response
+                const cleanedResponse = promptsResult
+                    .replace(/```json/g, '')
+                    .replace(/```/g, '')
+                    .trim();
+                
+                try {
+                    return JSON.parse(cleanedResponse);
+                } catch (parseError) {
+                    // If parsing fails, try to extract the array from the text
+                    const arrayMatch = cleanedResponse.match(/\[.*\]/s);
+                    if (arrayMatch) {
+                        return JSON.parse(arrayMatch[0]);
+                    }
+                    throw new Error('Failed to parse image prompts');
+                }
+            } catch (error) {
+                console.error('Error generating image prompts:', error);
+                throw new Error('Failed to generate image prompts');
+            }
+        }
+        
+        // Function to generate images based on prompts
+        async function generateImages(imagePrompts, imageGeneratorModel) {
+            try {
+                const imageUrls = [];
+                
+                for (let i = 0; i < imagePrompts.length; i++) {
+                    updateProgress(`Generating image ${i+1}/${imagePrompts.length}...`);
                     
-                    add_music_btn = gr.Button("Add Music")
-                    music_status = gr.Textbox(label="Status")
+                    // Use Poe API to send user message
+                    const handlerId = `image-generation-handler-${i}`;
                     
-                    add_music_btn.click(
-                        add_music,
-                        inputs=music_file,
-                        outputs=music_status
-                    )
-                
-                with gr.Accordion("Cleanup", open=True):
-                    def clean_temp():
-                        try:
-                            for file in TEMP_DIR.glob("*"):
-                                file.unlink()
-                            return "Temporary files cleaned successfully"
-                        except Exception as e:
-                            return f"Error cleaning files: {str(e)}"
+                    // Register handler for response
+                    window.Poe.registerHandler(handlerId, (result) => {
+                        if (result.responses.length > 0) {
+                            const response = result.responses[0];
+                            if (response.status === 'complete' && response.attachments && response.attachments.length > 0) {
+                                imageUrls.push(response.attachments[0].url);
+                            }
+                        }
+                    });
                     
-                    clean_temp_btn = gr.Button("Clean Temporary Files")
-                    clean_status = gr.Textbox(label="Status")
+                    // Send request to generate image
+                    await window.Poe.sendUserMessage(`@${imageGeneratorModel} ${imagePrompts[i]}`, {
+                        handler: handlerId,
+                        stream: false,
+                        openChat: false
+                    });
                     
-                    clean_temp_btn.click(
-                        clean_temp,
-                        outputs=clean_status
-                    )
-            
-            with gr.TabItem("Help"):
-                gr.Markdown("""
-                # Help & Troubleshooting
+                    // Wait for a short time to ensure the handler has time to receive the response
+                    await new Promise(resolve => setTimeout(resolve, 3000));
+                }
                 
-                ## Common Issues
+                // Ensure we have at least one image
+                if (imageUrls.length === 0) {
+                    throw new Error('Failed to generate any images');
+                }
+                
+                return imageUrls;
+            } catch (error) {
+                console.error('Error generating images:', error);
+                throw new Error('Failed to generate images');
+            }
+        }
+        
+        // Function to generate speech from script
+        async function generateSpeech(script, language, voiceGeneratorModel, voiceName) {
+            try {
+                // Use Poe API to send user message
+                const handlerId = 'speech-generation-handler';
+                let audioUrl = null;
+                
+                // Register handler for response
+                window.Poe.registerHandler(handlerId, (result) => {
+                    if (result.responses.length > 0) {
+                        const response = result.responses[0];
+                        if (response.status === 'complete' && response.attachments && response.attachments.length > 0) {
+                            audioUrl = response.attachments[0].url;
+                        }
+                    }
+                });
+                
+                // Prepare the prompt
+                let prompt = script;
+                if (voiceName) {
+                    prompt += ` --voice ${voiceName}`;
+                }
                 
-                ### Image Generation
+                // Send request to generate speech
+                await window.Poe.sendUserMessage(`@${voiceGeneratorModel} ${prompt}`, {
+                    handler: handlerId,
+                    stream: false,
+                    openChat: false
+                });
                 
-                - **G4F Issues**: If image generation with G4F fails, try switching to "prodia" or "pollinations" provider
-                - **Model Compatibility**: Not all models work with all providers. If you get errors, try a different model/provider combination
+                // Wait for audio URL to be available
+                let attempts = 0;
+                while (!audioUrl && attempts < 30) {
+                    await new Promise(resolve => setTimeout(resolve, 1000));
+                    attempts++;
+                }
                 
-                ### TTS Issues
+                if (!audioUrl) {
+                    throw new Error('Failed to generate speech audio');
+                }
                 
-                - **Edge TTS Voice Error**: If you get "No audio was received" error, try a different voice like "en-US-ChristopherNeural"
-                - **Google TTS**: For simplicity, use Google TTS with language code "en" if Edge TTS isn't working
+                return audioUrl;
+            } catch (error) {
+                console.error('Error generating speech:', error);
+                throw new Error('Failed to generate speech');
+            }
+        }
+        
+        // Function to generate video by combining images and audio
+        async function generateVideo(imageUrls, audioUrl, script) {
+            // Here we would normally combine everything into a video
+            // Since we can't actually do video processing in the browser easily,
+            // we'll simulate it with image slideshow and audio
+            
+            try {
+                // Create a simulated video player that shows images as a slideshow with audio
+                // This is a simple mockup - in a real application, you would use a video processing service
                 
-                ### Video Generation
+                // For this demo, we'll just return the audio URL and use the first image
+                // as a placeholder in the video player
                 
-                - **Video Creation Errors**: Make sure all images were successfully generated before creating the video
-                - **Subtitle Issues**: Subtitles require an AssemblyAI API key. You can get a free one at [AssemblyAI](https://www.assemblyai.com/)
+                // In a real implementation, this is where you would call an external video
+                // processing service or use a server-side component
                 
-                ## Tips for Best Results
+                // Simulate processing time
+                await new Promise(resolve => setTimeout(resolve, 3000));
                 
-                1. **Topics**: Be specific with your niche/topic for better results
-                2. **Images**: SDXL Turbo is fastest, but other models may give better quality
-                3. **TTS**: Edge TTS generally gives the best quality voice with "en-US-ChristopherNeural"
-                4. **Background Music**: Add your own music files for better video quality
-                """)
+                // Return a mock video URL (which is just the audio URL for this demo)
+                return {
+                    audioUrl: audioUrl,
+                    imageUrls: imageUrls
+                };
+            } catch (error) {
+                console.error('Error generating video:', error);
+                throw new Error('Failed to generate video');
+            }
+        }
         
-    return app
-
-if __name__ == "__main__":
-    app = ui_component()
-    app.launch()
+        // Function to display results
+        function displayResults(videoData, title, description) {
+            // Hide loading container
+            document.getElementById('loading-container').classList.add('hidden');
+            document.getElementById('loading-container').classList.remove('flex');
+            
+            // Show results container
+            document.getElementById('results-container').classList.remove('hidden');
+            
+            // Set title and description
+            document.getElementById('video-title').textContent = title;
+            document.getElementById('video-description').textContent = description;
+            
+            // Set up video player with images slideshow and audio
+            const videoPlayer = document.getElementById('video-player');
+            
+            // Create a simple slideshow with the first image and audio
+            if (videoData.imageUrls && videoData.imageUrls.length > 0) {
+                // Set poster to first image
+                videoPlayer.setAttribute('poster', videoData.imageUrls[0]);
+            }
+            
+            // Set audio source
+            videoPlayer.innerHTML = '';
+            const audioSource = document.createElement('source');
+            audioSource.src = videoData.audioUrl;
+            audioSource.type = 'audio/mpeg';
+            videoPlayer.appendChild(audioSource);
+            
+            // Add text explaining this is a simulation
+            const textOverlay = document.createElement('div');
+            textOverlay.innerHTML = `
+                <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 text-white p-4 text-center">
+                    <div>
+                        <p class="font-bold mb-2">Audio Preview</p>
+                        <p class="text-sm">This is an audio preview. In a full implementation, this would be a video combining the generated images and audio.</p>
+                    </div>
+                </div>
+            `;
+            videoPlayer.parentNode.appendChild(textOverlay);
+            
+            // Load and play
+            videoPlayer.load();
+        }
+    </script>
+</body>
+</html>