Update app.py

app.py

@@ -41,7 +41,6 @@ def generate_ideas(tag):
         ideas = response_json['ideas']
         return ideas
     except (json.JSONDecodeError, KeyError):
-        # Fallback ideas if parsing fails
         return [
             f"A vibrant {tag} scene at sunset",
             f"A close-up of {tag} with neon lights",
@@ -61,10 +60,7 @@ def generate_item(tag, ideas):
     Returns:
         dict: A dictionary with 'text' (str) and 'image_base64' (str).
     """
-    # Select a random idea for diversity
     selected_idea = random.choice(ideas)
-
-    # Second LLM call to generate the precise image prompt and caption
     prompt = f"""
     Based on the idea "{selected_idea}", create content for a TikTok video about {tag}.
     Return a JSON object with two keys:
@@ -83,11 +79,9 @@ def generate_item(tag, ideas):
         text = response_json['caption']
         image_prompt = response_json['image_prompt']
     except (json.JSONDecodeError, KeyError):
-        # Fallback if parsing fails
         text = f"Obsessed with {tag}! 🔥 #{tag}"
         image_prompt = f"A vivid scene of {selected_idea}, in a vibrant pop art style, no text or letters"
 
-    # Generate the image using the precise prompt
     image_response = client.models.generate_images(
         model='imagen-3.0-generate-002',
         prompt=image_prompt,
@@ -98,15 +92,12 @@ def generate_item(tag, ideas):
         )
     )
 
-    # Check if images were generated
     if image_response.generated_images and len(image_response.generated_images) > 0:
         generated_image = image_response.generated_images[0]
         image = Image.open(BytesIO(generated_image.image.image_bytes))
     else:
-        # Fallback to a placeholder image
         image = Image.new('RGB', (360, 640), color='gray')
 
-    # Convert the image to base64
     buffered = BytesIO()
     image.save(buffered, format="PNG")
     img_str = base64.b64encode(buffered.getvalue()).decode()
@@ -129,20 +120,16 @@ def start_feed(tag, current_index, feed_items, is_loading):
     if not tag.strip():
         tag = "trending"
     
-    # Set loading state to True
     is_loading = True
-    yield tag, current_index, feed_items, generate_html([], False, 0), is_loading
+    yield tag, current_index, feed_items, generate_html([], False, 0, tag, is_loading), is_loading
 
-    # Generate new ideas for the tag
     ideas = generate_ideas(tag)
-    # Generate the first item
     item = generate_item(tag, ideas)
-    feed_items = [item]  # Reset feed with the new item
+    feed_items = [item]
     current_index = 0
 
-    # Set loading state to False
     is_loading = False
-    return tag, current_index, feed_items, generate_html(feed_items, False, current_index), is_loading
+    return tag, current_index, feed_items, generate_html(feed_items, False, current_index, tag, is_loading), is_loading
 
 def load_next(tag, current_index, feed_items, is_loading):
     """
@@ -157,23 +144,19 @@ def load_next(tag, current_index, feed_items, is_loading):
     Returns:
         tuple: (current_tag, current_index, feed_items, html_content, is_loading)
     """
-    # Set loading state to True
     is_loading = True
-    yield tag, current_index, feed_items, generate_html(feed_items, False, current_index), is_loading
+    yield tag, current_index, feed_items, generate_html(feed_items, False, current_index, tag, is_loading), is_loading
 
-    # If there’s a next item, show it; otherwise, generate a new one
     if current_index + 1 < len(feed_items):
         current_index += 1
     else:
-        # Use the ideas from the last item to generate a new one
         ideas = feed_items[-1]['ideas'] if feed_items else generate_ideas(tag)
         new_item = generate_item(tag, ideas)
         feed_items.append(new_item)
         current_index = len(feed_items) - 1
 
-    # Set loading state to False
     is_loading = False
-    return tag, current_index, feed_items, generate_html(feed_items, False, current_index), is_loading
+    return tag, current_index, feed_items, generate_html(feed_items, False, current_index, tag, is_loading), is_loading
 
 def load_previous(tag, current_index, feed_items, is_loading):
     """
@@ -190,9 +173,9 @@ def load_previous(tag, current_index, feed_items, is_loading):
     """
     if current_index > 0:
         current_index -= 1
-    return tag, current_index, feed_items, generate_html(feed_items, False, current_index), is_loading
+    return tag, current_index, feed_items, generate_html(feed_items, False, current_index, tag, is_loading), is_loading
 
-def generate_html(feed_items, scroll_to_latest=False, current_index=0):
+def generate_html(feed_items, scroll_to_latest=False, current_index=0, tag="", is_loading=False):
     """
     Generate an HTML string to display the current feed item with click navigation.
     
@@ -200,10 +183,81 @@ def generate_html(feed_items, scroll_to_latest=False, current_index=0):
         feed_items (list): List of dictionaries containing 'text' and 'image_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.
+        tag (str): The current tag for loading messages.
+        is_loading (bool): Whether the feed is currently loading.
     
     Returns:
         str: HTML string representing the feed.
     """
+    # Define loading messages based on the tag
+    loading_messages = [
+        f"Cooking up a {tag} masterpiece... 🍳",
+        f"Snapping a vibrant {tag} moment... 📸",
+        f"Creating a {tag} vibe that pops... ✨",
+        f"Getting that perfect {tag} shot... 🎥",
+        f"Bringing {tag} to life... 🌟"
+    ]
+
+    if is_loading:
+        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;
+            height: 640px;
+            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);
+            ">
+                {loading_messages[0]}
+            </div>
+            <div style="
+                width: 80%;
+                height: 10px;
+                background-color: #333;
+                border-radius: 5px;
+                overflow: hidden;
+            ">
+                <div style="
+                    width: 0%;
+                    height: 100%;
+                    background: linear-gradient(to right, #ff2d55, #ff5e78);
+                    animation: loading 2s infinite;
+                "></div>
+            </div>
+            <style>
+                @keyframes loading {{
+                    0% {{ width: 0%; }}
+                    50% {{ width: 100%; }}
+                    100% {{ width: 0%; }}
+                }}
+            </style>
+            <script>
+                const messages = {json.dumps(loading_messages)};
+                let currentMessageIndex = 0;
+                const messageElement = document.getElementById('loading-message');
+                function rotateMessages() {{
+                    currentMessageIndex = (currentMessageIndex + 1) % messages.length;
+                    messageElement.textContent = messages[currentMessageIndex];
+                }}
+                setInterval(rotateMessages, 2000);
+            </script>
+        </div>
+        """
+
     if not feed_items or current_index >= len(feed_items):
         return """
         <div style="
@@ -279,10 +333,8 @@ def generate_html(feed_items, scroll_to_latest=False, current_index=0):
             const clickX = event.clientX - rect.left;
             const width = rect.width;
             if (clickX > width * 0.75) {{
-                // Click on the right 25% to go to previous
                 document.getElementById('previous-button').click();
             }} else {{
-                // Click anywhere else to go to next
                 document.getElementById('next-button').click();
             }}
         }}
@@ -300,7 +352,6 @@ with gr.Blocks(
         .gradio-container { max-width: 400px; margin: 0 auto; padding: 10px; }
         input, select { border-radius: 5px; background-color: #222; color: #fff; border: 1px solid #444; }
         .gr-form { background-color: #111; padding: 15px; border-radius: 10px; }
-        .gr-progress { background-color: #ff2d55; }
     """,
     title="TikTok-Style Infinite Feed"
 ) as demo:
@@ -323,18 +374,9 @@ with gr.Blocks(
                 label="Or Enter a Custom Tag",
                 value="food",
                 placeholder="e.g., sushi, adventure",
-                submit_btn=False  # Disable default submit button
+                submit_btn=False
             )
 
-    # Progress bar
-    progress_bar = gr.Slider(
-        minimum=0,
-        maximum=1,
-        value=0,
-        label="Loading Feed...",
-        visible=False
-    )
-
     # Output display
     feed_html = gr.HTML()
 
@@ -343,10 +385,6 @@ with gr.Blocks(
         """Update the tag input when a suggested tag is selected and start the feed."""
         return selected_tag
 
-    def update_progress(is_loading):
-        """Show or hide the progress bar based on loading state."""
-        return gr.update(visible=is_loading, value=0 if is_loading else 1)
-
     # Handle dropdown selection
     suggested_tags.change(
         fn=set_tag,
@@ -356,10 +394,6 @@ with gr.Blocks(
         fn=start_feed,
         inputs=[tag_input, current_index, feed_items, is_loading],
         outputs=[current_tag, current_index, feed_items, feed_html, is_loading]
-    ).then(
-        fn=update_progress,
-        inputs=is_loading,
-        outputs=progress_bar
     )
 
     # Handle Enter keypress in the custom tag input
@@ -367,13 +401,9 @@ with gr.Blocks(
         fn=start_feed,
         inputs=[tag_input, current_index, feed_items, is_loading],
         outputs=[current_tag, current_index, feed_items, feed_html, is_loading]
-    ).then(
-        fn=update_progress,
-        inputs=is_loading,
-        outputs=progress_bar
     )
 
-    # Hidden buttons for navigation
+    # Hidden buttonsAPPROXIMATELY Hidden buttons for navigation
     next_button = gr.Button("Next", elem_id="next-button", visible=False)
     previous_button = gr.Button("Previous", elem_id="previous-button", visible=False)
 
@@ -382,10 +412,6 @@ with gr.Blocks(
         fn=load_next,
         inputs=[current_tag, current_index, feed_items, is_loading],
         outputs=[current_tag, current_index, feed_items, feed_html, is_loading]
-    ).then(
-        fn=update_progress,
-        inputs=is_loading,
-        outputs=progress_bar
     )
 
     # Handle click to go to previous item