Update app.py

app.py

@@ -74,7 +74,7 @@ def generate_ideas(user_input):
         user_input (str): The user's input concept or idea.
     
     Yields:
-        tuple: (progress_percentage, message) for UI updates.
+        tuple: (progress_percentage, message) for progress_html updates.
         list: Final list of ideas as strings.
     """
     yield (10, f"Brainstorming epic ideas for {user_input}... 🌟")
@@ -138,7 +138,7 @@ def generate_item(user_input, ideas, generate_video=False, max_retries=3):
         max_retries (int): Maximum number of retries for image generation per cycle.
     
     Yields:
-        tuple: (progress_percentage, message) for UI updates.
+        tuple: (progress_percentage, message) for progress_html updates.
         dict: Final dictionary with 'text', 'image_base64', 'video_base64', and 'ideas'.
     """
     video_base64 = None
@@ -480,6 +480,77 @@ 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.
+    
+    Args:
+        progress (float): Current progress percentage (0–100).
+        message (str): Current loading message to display.
+        user_input (str): The user's input concept or idea for context.
+    
+    Returns:
+        str: HTML string for the progress bar.
+    """
+    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 start_feed(user_input, generate_video, current_index, feed_items):
     """
     Start or update the feed based on the user input.
@@ -492,8 +563,8 @@ def start_feed(user_input, generate_video, current_index, feed_items):
         feed_items (list): The current list of feed items.
     
     Yields:
-        tuple: (progress_percentage, message, html_content, is_loading) for UI updates.
-        tuple: (current_user_input, current_index, feed_items, html_content, share_links, is_loading) for final result.
+        tuple: (progress_html) for progress updates.
+        tuple: (current_user_input, current_index, feed_items, feed_html, share_html, is_loading) for final result.
     """
     if not user_input.strip():
         user_input = "trending"
@@ -503,8 +574,8 @@ def start_feed(user_input, generate_video, current_index, feed_items):
     
     # Set initial loading state
     is_loading = True
-    html_content = generate_html([], False, 0, user_input, is_loading, 0, f"Getting started with {user_input}... 🚀")
-    yield (0, f"Getting started with {user_input}... 🚀", html_content, is_loading)
+    progress_html = generate_progress_html(0, f"Getting started with {user_input}... 🚀", user_input)
+    yield (progress_html,)
     share_links = ""
 
     try:
@@ -514,8 +585,8 @@ def start_feed(user_input, generate_video, current_index, feed_items):
         for update in ideas_gen:
             if isinstance(update, tuple):
                 progress, message = update
-                html_content = generate_html([], False, 0, user_input, is_loading, progress, message)
-                yield (progress, message, html_content, is_loading)
+                progress_html = generate_progress_html(progress, message, user_input)
+                yield (progress_html,)
             else:
                 ideas = update
         
@@ -525,13 +596,14 @@ def start_feed(user_input, generate_video, current_index, feed_items):
         for update in item_gen:
             if isinstance(update, tuple):
                 progress, message = update
-                html_content = generate_html([], False, 0, user_input, is_loading, progress, message)
-                yield (progress, message, html_content, is_loading)
+                progress_html = generate_progress_html(progress, message, user_input)
+                yield (progress_html,)
             else:
                 item = update
         
         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'],
@@ -541,7 +613,7 @@ def start_feed(user_input, generate_video, current_index, feed_items):
         print(f"Error in start_feed: {e}")
         feed_items = []
         current_index = 0
-        html_content = """
+        feed_html = """
         <div style="
             display: flex;
             flex-direction: column;
@@ -559,15 +631,15 @@ 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)
+        yield (progress_html,)
         is_loading = False
-        yield (100, "Oops, something went wrong! 😅", html_content, is_loading)
-        return current_user_input, current_index, feed_items, html_content, share_links, is_loading
+        return current_user_input, current_index, feed_items, feed_html, share_links, is_loading
 
     # Set loading state to False and update UI
     is_loading = False
-    html_content = generate_html(feed_items, False, current_index, user_input, is_loading, 100, "")
-    yield (100, f"Ready to roll with {user_input}! 🚀", html_content, is_loading)
-    return current_user_input, current_index, feed_items, html_content, share_links, is_loading
+    progress_html = ""
+    return current_user_input, current_index, feed_items, feed_html, share_links, is_loading
 
 def load_next(user_input, generate_video, current_index, feed_items):
     """
@@ -578,11 +650,11 @@ def load_next(user_input, generate_video, current_index, feed_items):
         user_input (str): The user's input concept or idea (updated from the textbox).
         generate_video (bool): Whether to generate a video.
         current_index (int): The current item index.
-        feed_items (list): The current list of feed items.
+        feed_items (list): The current list of feed_items.
     
     Yields:
-        tuple: (progress_percentage, message, html_content, is_loading) for UI updates.
-        tuple: (current_user_input, current_index, feed_items, html_content, share_links, is_loading) for final result.
+        tuple: (progress_html) for progress updates.
+        tuple: (current_user_input, current_index, feed_items, feed_html, share_html, is_loading) for final result.
     """
     # Update current_user_input with the latest user_input from the textbox
     current_user_input = user_input if user_input.strip() else "trending"
@@ -591,14 +663,15 @@ def load_next(user_input, generate_video, current_index, feed_items):
     user_input = current_user_input
     
     is_loading = True
-    html_content = generate_html(feed_items, False, current_index, user_input, is_loading, 0, f"Loading next {user_input} vibe... 🚀")
-    yield (0, f"Loading next {user_input} vibe... 🚀", html_content, is_loading)
+    progress_html = generate_progress_html(0, f"Loading next {user_input} vibe... 🚀", user_input)
+    yield (progress_html,)
     share_links = ""
 
     try:
         if current_index + 1 < len(feed_items):
             current_index += 1
-            yield (50, f"Switching to the next {user_input} moment... 🔄", html_content, is_loading)
+            progress_html = generate_progress_html(50, f"Switching to the next {user_input} moment... 🔄", user_input)
+            yield (progress_html,)
         else:
             ideas = feed_items[-1]['ideas'] if feed_items else None
             if not ideas:
@@ -607,8 +680,8 @@ def load_next(user_input, generate_video, current_index, feed_items):
                 for update in ideas_gen:
                     if isinstance(update, tuple):
                         progress, message = update
-                        html_content = generate_html(feed_items, False, current_index, user_input, is_loading, progress, message)
-                        yield (progress, message, html_content, is_loading)
+                        progress_html = generate_progress_html(progress, message, user_input)
+                        yield (progress_html,)
                     else:
                         ideas = update
             
@@ -618,14 +691,15 @@ def load_next(user_input, generate_video, current_index, feed_items):
             for update in new_item_gen:
                 if isinstance(update, tuple):
                     progress, message = update
-                    html_content = generate_html(feed_items, False, current_index, user_input, is_loading, progress, message)
-                    yield (progress, message, html_content, is_loading)
+                    progress_html = generate_progress_html(progress, message, user_input)
+                    yield (progress_html,)
                 else:
                     new_item = update
             
             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'],
@@ -633,7 +707,7 @@ def load_next(user_input, generate_video, current_index, feed_items):
         )
     except Exception as e:
         print(f"Error in load_next: {e}")
-        html_content = """
+        feed_html = """
         <div style="
             display: flex;
             flex-direction: column;
@@ -651,14 +725,14 @@ 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)
+        yield (progress_html,)
         is_loading = False
-        yield (100, "Oops, something went wrong! 😅", html_content, is_loading)
-        return current_user_input, current_index, feed_items, html_content, share_links, is_loading
+        return current_user_input, current_index, feed_items, feed_html, share_links, is_loading
 
     is_loading = False
-    html_content = generate_html(feed_items, False, current_index, user_input, is_loading, 100, "")
-    yield (100, f"Next {user_input} vibe is live! 🚀", html_content, is_loading)
-    return current_user_input, current_index, feed_items, html_content, share_links, is_loading
+    progress_html = ""
+    return current_user_input, current_index, feed_items, feed_html, share_links, is_loading
 
 def load_previous(user_input, generate_video, current_index, feed_items):
     """
@@ -671,20 +745,20 @@ def load_previous(user_input, generate_video, current_index, feed_items):
         feed_items (list): The current list of feed items.
     
     Returns:
-        tuple: (current_user_input, current_index, feed_items, html_content, share_links, is_loading)
+        tuple: (current_user_input, current_index, feed_items, feed_html, share_html, is_loading)
     """
     # Update current_user_input with the latest user_input
     current_user_input = user_input if user_input.strip() else "trending"
     
     if current_index > 0:
         current_index -= 1
-    html_content = generate_html(feed_items, False, current_index, user_input, False, 100, "")
+    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']
     )
-    return current_user_input, current_index, feed_items, html_content, share_links, False
+    return current_user_input, current_index, feed_items, feed_html, share_links, False
 
 def generate_share_links(image_base64, video_base64, caption):
     """
@@ -693,7 +767,7 @@ def generate_share_links(image_base64, video_base64, caption):
     
     Args:
         image_base64 (str): The base64-encoded image data.
-        video_base64 (str or None): The base64-encoded video data (single video).
+        video_base64 (str or None): The base64-enoded video data (single video).
         caption (str): The caption to share.
     
     Returns:
@@ -843,13 +917,13 @@ def generate_share_links(image_base64, video_base64, caption):
 
 def generate_html(feed_items, scroll_to_latest=False, current_index=0, user_input="", is_loading=False, progress=0, message=""):
     """
-    Generate an HTML string to display the current feed item or loading state with progress bar.
+    Generate an HTML string to display the current feed item or loading state.
     
     Args:
         feed_items (list): List of dictionaries containing 'text', 'image_base64', and 'video_base64'.
         scroll_to_latest (bool): Whether to auto-scroll to the latest item (not used here).
         current_index (int): The index of the item to display.
-        user_input (str): The user's input concept or idea for loading messages.
+        user_input (str): The user's input concept or idea for context.
         is_loading (bool): Whether the feed is currently loading.
         progress (float): Current progress percentage (0–100).
         message (str): Current loading message to display.
@@ -858,12 +932,12 @@ def generate_html(feed_items, scroll_to_latest=False, current_index=0, user_inpu
         str: HTML string representing the feed or loading state.
     """
     if is_loading:
-        return f"""
+        # When loading, return an empty feed container (progress is handled by progress_html)
+        return """
         <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;
@@ -872,54 +946,13 @@ 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);
-            ">
-                {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>
         """
 
     if not feed_items or current_index >= len(feed_items):
         return """
-        <div style="
+        <div id="feed-container" style="
             display: flex;
             flex-direction: column;
             align-items: center;
@@ -1058,6 +1091,7 @@ with gr.Blocks(
         magic_button = gr.Button("✨ Generate Next Item", elem_classes="gr-button")
 
     # Output display
+    progress_html = gr.HTML(label="Progress", visible=True)
     feed_html = gr.HTML()
     share_html = gr.HTML(label="Share this item:")
 
@@ -1066,14 +1100,14 @@ with gr.Blocks(
     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]
+        outputs=[current_user_input, current_index, feed_items, feed_html, share_html, is_loading, progress_html]
     )
 
     # Handle magic button click to generate next item
     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]
+        outputs=[current_user_input, current_index, feed_items, feed_html, share_html, is_loading, progress_html]
     )
 
     # Hidden button for previous item navigation
@@ -1083,7 +1117,7 @@ with gr.Blocks(
     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]
+        outputs=[current_user_input, current_index, feed_items, feed_html, share_html, is_loading, progress_html]
     )
 
 # Launch the app