Update app.py

app.py

@@ -10,12 +10,6 @@ import random
 import urllib.parse
 import time
 
-# Check Gradio version
-required_version = "4.44.0"
-current_version = gr.__version__
-if current_version < required_version:
-    raise ValueError(f"Gradio version {current_version} is outdated. Please upgrade to {required_version} or later using 'pip install gradio=={required_version}'.")
-
 # Initialize the Google Generative AI client with the API key from environment variables
 try:
     api_key = os.environ['GEMINI_API_KEY']
@@ -47,6 +41,40 @@ SAFETY_SETTINGS = [
     ),
 ]
 
+# Define progress stages and corresponding witty messages
+PROGRESS_STAGES = {
+    "initializing": [
+        "Warming up the creativity engine... 🚀",
+        "Getting ready to spark some magic... ✨",
+        "Loading the idea generator... ⚡"
+    ],
+    "generating_ideas": [
+        "Brainstorming brilliant ideas... 💡",
+        "Cooking up some viral concepts... 🍳",
+        "Mixing creativity with a pinch of flair... 🎨"
+    ],
+    "creating_image": [
+        "Painting a stunning visual... 🖌️",
+        "Snapping the perfect shot... 📸",
+        "Crafting a masterpiece pixel by pixel... 🖼️"
+    ],
+    "retrying_image": [
+        "Tweaking the image for perfection... 🔧",
+        "Giving it another go for that wow factor... 🔄",
+        "Adjusting the lens for a better shot... 🎥"
+    ],
+    "generating_video": [
+        "Rolling the cameras for a viral video... 🎬",
+        "Animating the scene with cinematic vibes... 🌟",
+        "Producing a TikTok-worthy clip... 🎞️"
+    ],
+    "finalizing": [
+        "Putting the final touches... 🎀",
+        "Polishing your content to shine... 💎",
+        "Almost ready to blow up the feed... 🔥"
+    ]
+}
+
 def clean_response_text(response_text):
     """
     Clean the API response by removing Markdown code block markers.
@@ -61,10 +89,7 @@ def clean_response_text(response_text):
 def generate_ideas(user_input):
     """
     Generate a diverse set of ideas based on the user's input concept using the LLM.
-    Yields progress updates for the loading UI.
     """
-    yield (10, f"Brainstorming epic ideas for {user_input}... 🌟")
-    
     prompt = f"""
     The user has provided the concept: "{user_input}". You must generate 5 diverse and creative ideas for a TikTok video that are directly and explicitly related to "{user_input}".
     Each idea must clearly incorporate and focus on the core theme of "{user_input}" without deviating into unrelated topics.
@@ -87,14 +112,9 @@ def generate_ideas(user_input):
         response_json = json.loads(cleaned_text)
         if 'ideas' not in response_json or not isinstance(response_json['ideas'], list) or len(response_json['ideas']) != 5:
             raise ValueError("Invalid JSON format: 'ideas' key missing, not a list, or incorrect length")
-        
-        ideas = response_json['ideas']
-        yield (20, f"Ideas locked in for {user_input}! 🚀")
-        return ideas
-    
+        return response_json['ideas']
     except Exception as e:
         print(f"Error generating ideas: {e}")
-        yield (20, f"Oops, tweaking the plan for {user_input}... 🔧")
         return [
             f"A dramatic {user_input} scene with cinematic lighting",
             f"A close-up of {user_input} in a futuristic setting",
@@ -105,8 +125,8 @@ def generate_ideas(user_input):
 
 def generate_item(user_input, ideas, generate_video=False, max_retries=3):
     """
-    Generate a single feed item (image and optionally one video) using one of the ideas.
-    Yields progress updates for the loading UI.
+    Generate a single feed item with progress updates.
+    Yields progress stage and message for UI updates.
     """
     video_base64 = None
     max_total_attempts = 3
@@ -114,7 +134,8 @@ def generate_item(user_input, ideas, generate_video=False, max_retries=3):
     total_attempts = 0
     while total_attempts < max_total_attempts:
         total_attempts += 1
-        yield (20 + total_attempts * 10, f"Attempt {total_attempts} to craft your {user_input} masterpiece... 🎨")
+        
+        yield {"stage": "initializing", "message": random.choice(PROGRESS_STAGES["initializing"]), "progress": 10}
         
         generated_image = None
         text = None
@@ -122,7 +143,8 @@ def generate_item(user_input, ideas, generate_video=False, max_retries=3):
         image_prompt = None
         
         for image_attempt in range(max_retries):
-            yield (20 + total_attempts * 10 + image_attempt * 5, f"Crafting a stunning image for {user_input}... 📸")
+            yield {"stage": "creating_image", "message": random.choice(PROGRESS_STAGES["creating_image"]), "progress": 30 + (image_attempt * 10)}
+            
             selected_idea = random.choice(ideas)
             prompt = f"""
             The user has provided the concept: "{user_input}". Based on this concept and the specific idea "{selected_idea}", create content for a TikTok video.
@@ -141,21 +163,16 @@ def generate_item(user_input, ideas, generate_video=False, max_retries=3):
                         safety_settings=SAFETY_SETTINGS
                     )
                 )
-                if not response.text or response.text.isspace():
-                    raise ValueError("Empty response from API")
                 cleaned_text = clean_response_text(response.text)
                 response_json = json.loads(cleaned_text)
-                if 'caption' not in response_json or 'image_prompt' not in response_json:
-                    raise ValueError("Invalid JSON format: 'caption' or 'image_prompt' key missing")
                 text = response_json['caption']
                 image_prompt = response_json['image_prompt']
             except Exception as e:
-                print(f"Error generating item (image attempt {image_attempt + 1}): {e}")
+                print(f"Error generating item: {e}")
                 text = f"Amazing {user_input}! 🔥 #{user_input.replace(' ', '')}"
                 image_prompt = f"A vivid scene of {selected_idea} related to {user_input}, in a vibrant pop art style, no text or letters"
 
             try:
-                yield (40 + image_attempt * 5, f"Rendering your {user_input} vision... ✨")
                 imagen = client.models.generate_images(
                     model='imagen-3.0-generate-002',
                     prompt=image_prompt,
@@ -173,17 +190,15 @@ def generate_item(user_input, ideas, generate_video=False, max_retries=3):
                     buffered = BytesIO()
                     image.save(buffered, format="PNG")
                     img_str = base64.b64encode(buffered.getvalue()).decode()
-                    yield (50, f"Image for {user_input} is ready! 🎉")
                     break
                 else:
                     if image_attempt == max_retries - 1:
-                        yield (50, f"Tweaking the image for {user_input}... 🔄")
                         if total_attempts == max_total_attempts:
                             image = Image.new('RGB', (360, 640), color='gray')
                             buffered = BytesIO()
                             image.save(buffered, format="PNG")
                             img_str = base64.b64encode(buffered.getvalue()).decode()
-                            yield (60, f"Using a placeholder for {user_input}... 🖼️")
+                            yield {"stage": "finalizing", "message": random.choice(PROGRESS_STAGES["finalizing"]), "progress": 90}
                             return {
                                 'text': text,
                                 'image_base64': img_str,
@@ -191,16 +206,16 @@ def generate_item(user_input, ideas, generate_video=False, max_retries=3):
                                 'ideas': ideas
                             }
                         break
+                    yield {"stage": "retrying_image", "message": random.choice(PROGRESS_STAGES["retrying_image"]), "progress": 40 + (image_attempt * 10)}
             except Exception as e:
-                print(f"Error generating image (image attempt {image_attempt + 1}): {e}")
+                print(f"Error generating image: {e}")
                 if image_attempt == max_retries - 1:
-                    yield (50, f"Retrying image for {user_input}... 🔄")
                     if total_attempts == max_total_attempts:
                         image = Image.new('RGB', (360, 640), color='gray')
                         buffered = BytesIO()
                         image.save(buffered, format="PNG")
                         img_str = base64.b64encode(buffered.getvalue()).decode()
-                        yield (60, f"Using a placeholder for {user_input}... 🖼️")
+                        yield {"stage": "finalizing", "message": random.choice(PROGRESS_STAGES["finalizing"]), "progress": 90}
                         return {
                             'text': text,
                             'image_base64': img_str,
@@ -208,20 +223,16 @@ def generate_item(user_input, ideas, generate_video=False, max_retries=3):
                             'ideas': ideas
                         }
                     break
+                yield {"stage": "retrying_image", "message": random.choice(PROGRESS_STAGES["retrying_image"]), "progress": 40 + (image_attempt * 10)}
 
         if generate_video and generated_image is not None:
-            max_video_retries_per_image = 2
-            video_generated = False
-
-            # Image-to-video generation
+            yield {"stage": "generating_video", "message": random.choice(PROGRESS_STAGES["generating_video"]), "progress": 70}
             try:
-                yield (60, f"Filming a viral video for {user_input}... 🎥")
                 video_prompt = f"""
                 The user concept is "{user_input}". Based on this and the scene: {image_prompt}, create a video.
                 Use a close-up shot with a slow dolly shot circling around the subject, 
                 using shallow focus on the main subject to emphasize details, in a realistic style with cinematic lighting.
                 """
-                print(f"Attempting image-to-video generation: {video_prompt}")
                 operation = client.models.generate_videos(
                     model="veo-2.0-generate-001",
                     prompt=video_prompt,
@@ -236,114 +247,62 @@ def generate_item(user_input, ideas, generate_video=False, max_retries=3):
                 while not operation.done:
                     time.sleep(20)
                     operation = client.operations.get(operation)
-                
-                print(f"Image-to-video operation: done={operation.done}, error={operation.error}, response={operation.response}")
                 if operation.error:
                     raise ValueError(f"Video generation failed: {operation.error.message}")
-                if operation.response is None or not hasattr(operation.response, 'generated_videos') or operation.response.generated_videos is None:
-                    raise ValueError("Video generation failed: No generated_videos in response")
-                
-                if len(operation.response.generated_videos) > 0:
+                if operation.response and len(operation.response.generated_videos) > 0:
                     video = operation.response.generated_videos[0]
-                    if video is None or not hasattr(video, 'video'):
-                        raise ValueError("Video is invalid or missing video data")
                     video_data = client.files.download(file=video.video)
-                    if isinstance(video_data, bytes):
-                        video_bytes = video_data
-                    else:
-                        video_buffer = BytesIO()
-                        for chunk in video_data:
-                            video_buffer.write(chunk)
-                        video_bytes = video_buffer.getvalue()
+                    video_bytes = video_data if isinstance(video_data, bytes) else BytesIO(video_data).getvalue()
                     video_base64 = base64.b64encode(video_bytes).decode()
-                    video_generated = True
-                    yield (90, f"Video for {user_input} is a wrap! 🎬")
+                    yield {"stage": "finalizing", "message": random.choice(PROGRESS_STAGES["finalizing"]), "progress": 90}
                     return {
                         'text': text,
                         'image_base64': img_str,
                         'video_base64': video_base64,
                         'ideas': ideas
                     }
-                else:
-                    raise ValueError("No video was generated")
             except Exception as e:
-                print(f"Error generating video (image-to-video): {e}")
-                yield (70, f"Switching to a new video approach for {user_input}... 🎞️")
-
-            # Text-to-video generation (fallback)
-            if not video_generated:
-                for video_attempt in range(max_video_retries_per_image):
-                    try:
-                        yield (75 + video_attempt * 5, f"Trying a fresh video take for {user_input}... 📹")
-                        video_prompt_base = f"""
-                        The user concept is "{user_input}". Based on this and the scene: {image_prompt}, create a video.
-                        Use a close-up shot with a slow dolly shot circling around the subject, 
-                        using shallow focus on the main subject to emphasize details, in a realistic style with cinematic lighting.
-                        """
-                        video_prompt = video_prompt_base if video_attempt == 0 else f"""
-                        The user concept is "{user_input}". Based on this and a simplified scene: {image_prompt}, create a video.
-                        Use a static close-up shot of the subject in a realistic style.
-                        """
-                        print(f"Attempting text-to-video generation (attempt {video_attempt + 1}): {video_prompt}")
-                        operation = client.models.generate_videos(
-                            model="veo-2.0-generate-001",
-                            prompt=video_prompt,
-                            config=types.GenerateVideosConfig(
-                                aspect_ratio="9:16",
-                                number_of_videos=1,
-                                duration_seconds=8,
-                                negative_prompt="blurry, low quality, text, letters"
-                            )
+                print(f"Error generating video: {e}")
+                yield {"stage": "generating_video", "message": random.choice(PROGRESS_STAGES["generating_video"]), "progress": 80}
+                try:
+                    operation = client.models.generate_videos(
+                        model="veo-2.0-generate-001",
+                        prompt=video_prompt,
+                        config=types.GenerateVideosConfig(
+                            aspect_ratio="9:16",
+                            number_of_videos=1,
+                            duration_seconds=8,
+                            negative_prompt="blurry, low quality, text, letters"
                         )
-                        while not operation.done:
-                            time.sleep(20)
-                            operation = client.operations.get(operation)
-                        
-                        print(f"Text-to-video operation (attempt {video_attempt + 1}): done={operation.done}, error={operation.error}, response={operation.response}")
-                        if operation.error:
-                            raise ValueError(f"Video generation failed: {operation.error.message}")
-                        if operation.response is None or not hasattr(operation.response, 'generated_videos') or operation.response.generated_videos is None:
-                            raise ValueError("Video generation failed: No generated_videos in response")
-                        
-                        if len(operation.response.generated_videos) > 0:
-                            video = operation.response.generated_videos[0]
-                            if video is None or not hasattr(video, 'video'):
-                                raise ValueError("Video is invalid or missing video data")
-                            video_data = client.files.download(file=video.video)
-                            if isinstance(video_data, bytes):
-                                video_bytes = video_data
-                            else:
-                                video_buffer = BytesIO()
-                                for chunk in video_data:
-                                    video_buffer.write(chunk)
-                                video_bytes = video_buffer.getvalue()
-                            video_base64 = base64.b64encode(video_bytes).decode()
-                            video_generated = True
-                            yield (90, f"Video for {user_input} is a wrap! 🎬")
-                            return {
-                                'text': text,
-                                'image_base64': img_str,
-                                'video_base64': video_base64,
-                                'ideas': ideas
-                            }
-                        else:
-                            raise ValueError("No video was generated")
-                    except Exception as e:
-                        print(f"Error generating video (text-to-video attempt {video_attempt + 1}): {e}")
-                        if video_attempt == max_video_retries_per_image - 1:
-                            yield (85, f"Finalizing without video for {user_input}... 📌")
-                            if total_attempts == max_total_attempts:
-                                yield (95, f"Polishing your {user_input} masterpiece... ✨")
-                                return {
-                                    'text': text,
-                                    'image_base64': img_str,
-                                    'video_base64': video_base64,
-                                    'ideas': ideas
-                                }
-                            break
+                    )
+                    while not operation.done:
+                        time.sleep(20)
+                        operation = client.operations.get(operation)
+                    if operation.response and len(operation.response.generated_videos) > 0:
+                        video = operation.response.generated_videos[0]
+                        video_data = client.files.download(file=video.video)
+                        video_bytes = video_data if isinstance(video_data, bytes) else BytesIO(video_data).getvalue()
+                        video_base64 = base64.b64encode(video_bytes).decode()
+                        yield {"stage": "finalizing", "message": random.choice(PROGRESS_STAGES["finalizing"]), "progress": 90}
+                        return {
+                            'text': text,
+                            'image_base64': img_str,
+                            'video_base64': video_base64,
+                            'ideas': ideas
+                        }
+                except Exception as e:
+                    print(f"Error generating text-to-video: {e}")
+                    if total_attempts == max_total_attempts:
+                        yield {"stage": "finalizing", "message": random.choice(PROGRESS_STAGES["finalizing"]), "progress": 90}
+                        return {
+                            'text': text,
+                            'image_base64': img_str,
+                            'video_base64': None,
+                            'ideas': ideas
+                        }
         
         if img_str is not None:
-            yield (95, f"Polishing your {user_input} masterpiece... ✨")
+            yield {"stage": "finalizing", "message": random.choice(PROGRESS_STAGES["finalizing"]), "progress": 90}
             return {
                 'text': text,
                 'image_base64': img_str,
@@ -351,13 +310,11 @@ def generate_item(user_input, ideas, generate_video=False, max_retries=3):
                 'ideas': ideas
             }
 
-    print("Max total attempts reached without successful image generation. Using placeholder.")
-    yield (95, f"Falling back to a placeholder for {user_input}... 🖼️")
     image = Image.new('RGB', (360, 640), color='gray')
     buffered = BytesIO()
     image.save(buffered, format="PNG")
     img_str = base64.b64encode(buffered.getvalue()).decode()
-    yield (100, f"Ready to roll with {user_input}! 🚀")
+    yield {"stage": "finalizing", "message": random.choice(PROGRESS_STAGES["finalizing"]), "progress": 90}
     return {
         'text': f"Amazing {user_input}! 🔥 #{user_input.replace(' ', '')}",
         'image_base64': img_str,
@@ -365,128 +322,41 @@ def generate_item(user_input, ideas, generate_video=False, max_retries=3):
         'ideas': ideas
     }
 
-def generate_progress_html(progress, message, user_input):
-    """
-    Generate HTML for the progress bar and witty text.
-    """
-    return f"""
-    <div id="progress-container" style="
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        max-width: 360px;
-        margin: 0 auto;
-        background-color: #000;
-        height: 200px;
-        border: 1px solid #333;
-        border-radius: 10px;
-        color: white;
-        font-family: Arial, sans-serif;
-        position: relative;
-    ">
-        <div id="loading-message" style="
-            font-size: 18px;
-            font-weight: bold;
-            text-align: center;
-            margin-bottom: 20px;
-            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
-        ">
-            {message}
-        </div>
-        <div style="
-            width: 80%;
-            height: 10px;
-            background-color: #333;
-            border-radius: 5px;
-            overflow: hidden;
-        ">
-            <div id="progress-bar" style="
-                width: {progress}%;
-                height: 100%;
-                background: linear-gradient(to right, #ff2d55, #ff5e78);
-                transition: width 0.5s ease-in-out;
-            "></div>
-        </div>
-        <div style="
-            margin-top: 10px;
-            font-size: 14px;
-            color: #ccc;
-        ">
-            {int(progress)}% Complete
-        </div>
-        <style>
-            @keyframes pulse {{
-                0% {{ opacity: 1; }}
-                50% {{ opacity: 0.5; }}
-                100% {{ opacity: 1; }}
-            }}
-            #loading-message {{
-                animation: pulse 2s infinite;
-            }}
-        </style>
-    </div>
-    """
-
-def process_generator(generator):
-    """
-    Process a generator to collect progress updates and the final result.
-    Returns a tuple of (progress_updates, final_result).
-    """
-    progress_updates = []
-    final_result = None
-    for item in generator:
-        if isinstance(item, tuple):
-            progress_updates.append(item)
-        else:
-            final_result = item
-    return progress_updates, final_result
-
 def start_feed(user_input, generate_video, current_index, feed_items):
     """
-    Start or update the feed based on the user input.
-    Returns all outputs expected by Gradio.
+    Start or update the feed based on the user input with progress updates.
     """
     if not user_input.strip():
         user_input = "trending"
-    
     current_user_input = user_input
     is_loading = True
-    progress_html = generate_progress_html(0, f"Getting started with {user_input}... 🚀", user_input)
     share_links = ""
     
-    # Ensure feed_items is a list
-    feed_items = feed_items if isinstance(feed_items, list) else []
-    print(f"start_feed: feed_items type={type(feed_items)}, value={feed_items}")
+    html_content = generate_html([], False, 0, user_input, is_loading, "initializing", random.choice(PROGRESS_STAGES["initializing"]), 10)
+    yield current_user_input, current_index, feed_items, html_content, share_links, is_loading
 
     try:
-        # Generate ideas
-        ideas_gen = generate_ideas(user_input)
-        progress_updates, ideas = process_generator(ideas_gen)
-        for progress, message in progress_updates:
-            progress_html = generate_progress_html(progress, message, user_input)
-            yield (progress_html, None, None, None, None, is_loading, progress_html)
-        
-        # Generate item
-        item_gen = generate_item(user_input, ideas, generate_video=generate_video)
-        progress_updates, item = process_generator(item_gen)
-        for progress, message in progress_updates:
-            progress_html = generate_progress_html(progress, message, user_input)
-            yield (progress_html, None, None, None, None, is_loading, progress_html)
+        html_content = generate_html([], False, 0, user_input, is_loading, "generating_ideas", random.choice(PROGRESS_STAGES["generating_ideas"]), 20)
+        yield current_user_input, current_index, feed_items, html_content, share_links, is_loading
+        ideas = generate_ideas(user_input)
         
-        feed_items = [item]
-        current_index = 0
-        feed_html = generate_html(feed_items, False, current_index, user_input, is_loading=False)
-        share_links = generate_share_links(
-            item['image_base64'],
-            item['video_base64'],
-            item['text']
-        )
+        item_generator = generate_item(user_input, ideas, generate_video=generate_video)
+        for progress in item_generator:
+            if isinstance(progress, dict) and "stage" in progress:
+                html_content = generate_html([], False, 0, user_input, is_loading, progress["stage"], progress["message"], progress["progress"])
+                yield current_user_input, current_index, feed_items, html_content, share_links, is_loading
+            else:
+                item = progress
+                feed_items = [item]
+                current_index = 0
+                share_links = generate_share_links(item['image_base64'], item['video_base64'], item['text'])
+                is_loading = False
+                html_content = generate_html(feed_items, False, current_index, user_input, is_loading)
+                yield current_user_input, current_index, feed_items, html_content, share_links, is_loading
+                return
     except Exception as e:
         print(f"Error in start_feed: {e}")
-        feed_items = []
-        current_index = 0
-        feed_html = """
+        html_content = """
         <div style="
             display: flex;
             flex-direction: column;
@@ -504,61 +374,60 @@ def start_feed(user_input, generate_video, current_index, feed_items):
             <p>Error generating content. Please try again!</p>
         </div>
         """
-        progress_html = generate_progress_html(100, "Oops, something went wrong! 😅", user_input)
         is_loading = False
-        return current_user_input, current_index, feed_items, feed_html, share_links, is_loading, progress_html
-
-    is_loading = False
-    progress_html = ""
-    return current_user_input, current_index, feed_items, feed_html, share_links, is_loading, progress_html
+        yield current_user_input, current_index, feed_items, html_content, share_links, is_loading
+        return
 
 def load_next(user_input, generate_video, current_index, feed_items):
     """
-    Load the next item in the feed.
-    Returns all outputs expected by Gradio.
+    Load the next item in the feed with progress updates.
     """
     current_user_input = user_input if user_input.strip() else "trending"
     user_input = current_user_input
     is_loading = True
-    progress_html = generate_progress_html(0, f"Loading next {user_input} vibe... 🚀", user_input)
     share_links = ""
-
-    # Ensure feed_items is a list
-    feed_items = feed_items if isinstance(feed_items, list) else []
-    print(f"load_next: feed_items type={type(feed_items)}, value={feed_items}, current_index={current_index}")
+    
+    html_content = generate_html(feed_items, False, current_index, user_input, is_loading, "initializing", random.choice(PROGRESS_STAGES["initializing"]), 10)
+    yield current_user_input, current_index, feed_items, html_content, share_links, is_loading
 
     try:
         if current_index + 1 < len(feed_items):
             current_index += 1
-            progress_html = generate_progress_html(50, f"Switching to the next {user_input} moment... 🔄", user_input)
-            yield (progress_html, None, None, None, None, is_loading, progress_html)
+            is_loading = False
+            html_content = generate_html(feed_items, False, current_index, user_input, is_loading)
+            share_links = generate_share_links(
+                feed_items[current_index]['image_base64'],
+                feed_items[current_index]['video_base64'],
+                feed_items[current_index]['text']
+            )
+            yield current_user_input, current_index, feed_items, html_content, share_links, is_loading
+            return
         else:
-            ideas = feed_items[-1]['ideas'] if feed_items else None
-            if not ideas:
-                ideas_gen = generate_ideas(user_input)
-                progress_updates, ideas = process_generator(ideas_gen)
-                for progress, message in progress_updates:
-                    progress_html = generate_progress_html(progress, message, user_input)
-                    yield (progress_html, None, None, None, None, is_loading, progress_html)
+            ideas = feed_items[-1]['ideas'] if feed_items else generate_ideas(user_input)
+            html_content = generate_html(feed_items, False, current_index, user_input, is_loading, "generating_ideas", random.choice(PROGRESS_STAGES["generating_ideas"]), 20)
+            yield current_user_input, current_index, feed_items, html_content, share_links, is_loading
             
-            new_item_gen = generate_item(user_input, ideas, generate_video=generate_video)
-            progress_updates, new_item = process_generator(new_item_gen)
-            for progress, message in progress_updates:
-                progress_html = generate_progress_html(progress, message, user_input)
-                yield (progress_html, None, None, None, None, is_loading, progress_html)
-            
-            feed_items.append(new_item)
-            current_index = len(feed_items) - 1
-        
-        feed_html = generate_html(feed_items, False, current_index, user_input, is_loading=False)
-        share_links = generate_share_links(
-            feed_items[current_index]['image_base64'],
-            feed_items[current_index]['video_base64'],
-            feed_items[current_index]['text']
-        )
+            item_generator = generate_item(user_input, ideas, generate_video=generate_video)
+            for progress in item_generator:
+                if isinstance(progress, dict) and "stage" in progress:
+                    html_content = generate_html(feed_items, False, current_index, user_input, is_loading, progress["stage"], progress["message"], progress["progress"])
+                    yield current_user_input, current_index, feed_items, html_content, share_links, is_loading
+                else:
+                    new_item = progress
+                    feed_items.append(new_item)
+                    current_index = len(feed_items) - 1
+                    is_loading = False
+                    html_content = generate_html(feed_items, False, current_index, user_input, is_loading)
+                    share_links = generate_share_links(
+                        feed_items[current_index]['image_base64'],
+                        feed_items[current_index]['video_base64'],
+                        feed_items[current_index]['text']
+                    )
+                    yield current_user_input, current_index, feed_items, html_content, share_links, is_loading
+                    return
     except Exception as e:
         print(f"Error in load_next: {e}")
-        feed_html = """
+        html_content = """
         <div style="
             display: flex;
             flex-direction: column;
@@ -576,13 +445,9 @@ def load_next(user_input, generate_video, current_index, feed_items):
             <p>Error generating content. Please try again!</p>
         </div>
         """
-        progress_html = generate_progress_html(100, "Oops, something went wrong! 😅", user_input)
         is_loading = False
-        return current_user_input, current_index, feed_items, feed_html, share_links, is_loading, progress_html
-
-    is_loading = False
-    progress_html = ""
-    return current_user_input, current_index, feed_items, feed_html, share_links, is_loading, progress_html
+        yield current_user_input, current_index, feed_items, html_content, share_links, is_loading
+        return
 
 def load_previous(user_input, generate_video, current_index, feed_items):
     """
@@ -590,26 +455,22 @@ def load_previous(user_input, generate_video, current_index, feed_items):
     """
     current_user_input = user_input if user_input.strip() else "trending"
     
-    # Ensure feed_items is a list
-    feed_items = feed_items if isinstance(feed_items, list) else []
-    print(f"load_previous: feed_items type={type(feed_items)}, value={feed_items}, current_index={current_index}")
-
     if current_index > 0:
         current_index -= 1
-    feed_html = generate_html(feed_items, False, current_index, user_input, is_loading=False)
+    html_content = generate_html(feed_items, False, current_index, user_input, False)
     share_links = generate_share_links(
-        feed_items[current_index]['image_base64'] if feed_items else "",
-        feed_items[current_index]['video_base64'] if feed_items else None,
-        feed_items[current_index]['text'] if feed_items else ""
+        feed_items[current_index]['image_base64'],
+        feed_items[current_index]['video_base64'],
+        feed_items[current_index]['text']
     )
-    return current_user_input, current_index, feed_items, feed_html, share_links, False, ""
+    return current_user_input, current_index, feed_items, html_content, share_links, False
 
 def generate_share_links(image_base64, video_base64, caption):
     """
     Generate share links for social media platforms with download links for image and video.
     """
-    image_data_url = f"data:image/png;base64,{image_base64}" if image_base64 else "#"
-    encoded_caption = urllib.parse.quote(caption if caption else "")
+    image_data_url = f"data:image/png;base64,{image_base64}"
+    encoded_caption = urllib.parse.quote(caption)
 
     download_links = f"""
         <p style="text-align: center; margin-bottom: 10px;">Download the media to share:</p>
@@ -716,7 +577,7 @@ def generate_share_links(image_base64, video_base64, caption):
                 justify-content: center;
                 margin-top: 10px;
             ">
-                <a href="https://studio.youtube.com/channel/UC/videos/upload?description={caption}" target="_blank" style="
+                <a href="https://www.youtube.com/upload?description={caption}" target="_blank" style="
                     background-color: #ff0000;
                     color: white;
                     padding: 8px 16px;
@@ -746,20 +607,18 @@ def generate_share_links(image_base64, video_base64, caption):
     </div>
     """.format(caption=encoded_caption)
 
-def generate_html(feed_items, scroll_to_latest=False, current_index=0, user_input="", is_loading=False, progress=0, message=""):
+def generate_html(feed_items, scroll_to_latest=False, current_index=0, user_input="", is_loading=False, progress_stage="initializing", progress_message="", progress_percent=10):
     """
-    Generate an HTML string to display the current feed item or loading state.
+    Generate an HTML string to display the current feed item or a loading screen with a progress bar.
     """
-    # Ensure feed_items is a list
-    feed_items = feed_items if isinstance(feed_items, list) else []
-    print(f"generate_html: feed_items type={type(feed_items)}, value={feed_items}, current_index={current_index}")
-
     if is_loading:
-        return """
+        progress_percent = max(0, min(100, progress_percent))
+        return f"""
         <div id="feed-container" style="
             display: flex;
             flex-direction: column;
             align-items: center;
+            justify-content: center;
             max-width: 360px;
             margin: 0 auto;
             background-color: #000;
@@ -768,13 +627,61 @@ def generate_html(feed_items, scroll_to_latest=False, current_index=0, user_inpu
             border-radius: 10px;
             color: white;
             font-family: Arial, sans-serif;
+            position: relative;
         ">
+            <div id="loading-message" style="
+                font-size: 18px;
+                font-weight: bold;
+                text-align: center;
+                margin-bottom: 20px;
+                text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+                max-width: 90%;
+            ">
+                {progress_message}
+            </div>
+            <div style="
+                width: 80%;
+                height: 10px;
+                background-color: #333;
+                border-radius: 5px;
+                overflow: hidden;
+            ">
+                <div style="
+                    width: {progress_percent}%;
+                    height: 100%;
+                    background: linear-gradient(to right, #ff2d55, #ff5e78);
+                    transition: width 0.5s ease-in-out;
+                "></div>
+            </div>
+            <style>
+                @keyframes pulse {{
+                    0% {{ opacity: 1; }}
+                    50% {{ opacity: 0.7; }}
+                    100% {{ opacity: 1; }}
+                }}
+                #loading-message {{
+                    animation: pulse 2s infinite;
+                }}
+            </style>
+            <script>
+                const stages = {json.dumps(PROGRESS_STAGES)};
+                const currentStage = "{progress_stage}";
+                let currentMessageIndex = 0;
+                const messageElement = document.getElementById('loading-message');
+                function rotateMessages() {{
+                    if (stages[currentStage] && stages[currentStage].length > 0) {{
+                        currentMessageIndex = (currentMessageIndex + 1) % stages[currentStage].length;
+                        messageElement.textContent = stages[currentStage][currentMessageIndex];
+                    }}
+                }}
+                setInterval(rotateMessages, 2000);
+            </script>
         </div>
         """
 
     if not feed_items or current_index >= len(feed_items):
         return """
-        <div id="feed-container" style="
+        <div style="
             display: flex;
             flex-direction: column;
             align-items: center;
@@ -793,33 +700,30 @@ def generate_html(feed_items, scroll_to_latest=False, current_index=0, user_inpu
         """
 
     item = feed_items[current_index]
-    if item['video_base64']:
-        media_element = f"""
-            <video id="feed-video" controls style="
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-                position: absolute;
-                top: 0;
-                left: 0;
-                z-index: 1;
-            ">
-                <source src="data:video/mp4;base64,{item['video_base64']}" type="video/mp4">
-                Your browser does not support the video tag.
-            </video>
-        """
-    else:
-        media_element = f"""
-            <img id="feed-image" src="data:image/png;base64,{item['image_base64']}" style="
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-                position: absolute;
-                top: 0;
-                left: 0;
-                z-index: 1;
-            ">
-        """
+    media_element = f"""
+        <img id="feed-image" src="data:image/png;base64,{item['image_base64']}" style="
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 1;
+        ">
+    """ if not item['video_base64'] else f"""
+        <video id="feed-video" controls style="
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 1;
+        ">
+            <source src="data:video/mp4;base64,{item['video_base64']}" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
+    """
 
     html_str = f"""
     <div id="feed-container" style="
@@ -871,7 +775,6 @@ def generate_html(feed_items, scroll_to_latest=False, current_index=0, user_inpu
             }}
         }}
     </script>
-    <button id="previous-button" style="display: none;" onclick="document.getElementById('previous-button').click()"></button>
     """
     return html_str
 
@@ -890,7 +793,7 @@ with gr.Blocks(
 ) as demo:
     current_user_input = gr.State(value="")
     current_index = gr.State(value=0)
-    feed_items = gr.State(value=[])  # Ensure initial value is an empty list
+    feed_items = gr.State(value=[])
     is_loading = gr.State(value=False)
     share_links = gr.State(value="")
 
@@ -908,29 +811,28 @@ with gr.Blocks(
         )
         magic_button = gr.Button("✨ Generate Next Item", elem_classes="gr-button")
 
-    progress_html = gr.HTML(label="Progress", visible=True)
     feed_html = gr.HTML()
     share_html = gr.HTML(label="Share this item:")
 
     user_input.submit(
         fn=start_feed,
         inputs=[user_input, generate_video_checkbox, current_index, feed_items],
-        outputs=[current_user_input, current_index, feed_items, feed_html, share_html, is_loading, progress_html]
+        outputs=[current_user_input, current_index, feed_items, feed_html, share_html, is_loading],
+        _js="() => { return { stream: true }; }"
     )
 
     magic_button.click(
         fn=load_next,
         inputs=[user_input, generate_video_checkbox, current_index, feed_items],
-        outputs=[current_user_input, current_index, feed_items, feed_html, share_html, is_loading, progress_html]
+        outputs=[current_user_input, current_index, feed_items, feed_html, share_html, is_loading],
+        _js="() => { return { stream: true }; }"
     )
 
     previous_button = gr.Button("Previous", elem_id="previous-button", visible=False)
-
     previous_button.click(
         fn=load_previous,
         inputs=[user_input, generate_video_checkbox, current_index, feed_items],
-        outputs=[current_user_input, current_index, feed_items, feed_html, share_html, is_loading, progress_html]
+        outputs=[current_user_input, current_index, feed_items, feed_html, share_html, is_loading]
     )
 
-# Launch the app
 demo.launch()