Update app.py

app.py

@@ -15,64 +15,79 @@ except KeyError:
     raise ValueError("Please set the GEMINI_API_KEY environment variable.")
 client = genai.Client(api_key=api_key)
 
-def generate_item(tag, item_index):
+def generate_ideas(tag):
     """
-    Generate a single feed item with diverse text and image.
+    Generate a diverse set of ideas related to the tag using the LLM.
+    
+    Args:
+        tag (str): The tag to base the ideas on.
+    
+    Returns:
+        list: A list of ideas as strings.
+    """
+    prompt = f"""
+    Generate a list of 5 diverse and creative ideas related to {tag} that can be used for a TikTok video.
+    Each idea should be a short sentence describing a specific scene or concept.
+    Return the response as a JSON object with a single key 'ideas' containing a list of 5 ideas.
+    Example: {{"ideas": ["A neon-lit gaming setup with RGB lights flashing", "A futuristic robot assembling a gadget"]}}
+    """
+    response = client.models.generate_content(
+        model='gemini-2.5-flash-preview-04-17',
+        contents=[prompt],
+        config=types.GenerateContentConfig(temperature=1.2)
+    )
+    try:
+        response_json = json.loads(response.text.strip())
+        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",
+            f"A futuristic take on {tag} with holograms",
+            f"A cozy {tag} moment with warm lighting",
+            f"An action-packed {tag} scene with dynamic colors"
+        ]
+
+def generate_item(tag, ideas):
+    """
+    Generate a single feed item using one of the ideas.
     
     Args:
         tag (str): The tag to base the content on.
-        item_index (int): Index of the item to ensure diversity.
+        ideas (list): List of ideas to choose from.
     
     Returns:
         dict: A dictionary with 'text' (str) and 'image_base64' (str).
     """
-    # Define varied styles for diversity in image generation
-    styles = [
-        "futuristic neon lighting",
-        "soft pastel tones with a dreamy vibe",
-        "vibrant and colorful pop art style",
-        "minimalist black and white aesthetic",
-        "retro 80s synthwave look",
-        "golden hour sunlight with warm tones"
-    ]
-    perspectives = [
-        "a close-up view",
-        "a wide-angle shot",
-        "an aerial perspective",
-        "a side profile",
-        "a dynamic angled shot"
-    ]
-    style = random.choice(styles)
-    perspective = random.choice(perspectives)
+    # Select a random idea for diversity
+    selected_idea = random.choice(ideas)
 
-    # Generate text with high temperature for diversity, using the correct config
+    # Second LLM call to generate the precise image prompt and caption
     prompt = f"""
-    Generate a short, engaging TikTok-style caption about {tag}. 
-    Return the response as a JSON object with a single key 'caption' containing the caption text.
-    Example: {{"caption": "Craving this yummy treat! 😍 #foodie"}}
-    Do not include additional commentary or options.
-    Use creative and varied language to ensure uniqueness.
+    Based on the idea "{selected_idea}", create content for a TikTok video about {tag}.
+    Return a JSON object with two keys:
+    - 'caption': A short, viral TikTok-style caption with hashtags.
+    - 'image_prompt': A detailed image prompt for generating a high-quality visual scene.
+    The image prompt should describe the scene vividly, specify a perspective and style, and ensure no text or letters are included.
+    Example: {{"caption": "Neon vibes only! 🌌 #tech", "image_prompt": "A close-up view of a neon-lit gaming setup with RGB lights flashing, in a futuristic style, no text or letters"}}
     """
-    text_response = client.models.generate_content(
+    response = client.models.generate_content(
         model='gemini-2.5-flash-preview-04-17',
         contents=[prompt],
-        config=types.GenerateContentConfig(
-            temperature=1.2  # High temperature for diversity, passed via config
-        )
+        config=types.GenerateContentConfig(temperature=1.2)
     )
-    # Parse JSON response to extract the caption
     try:
-        response_json = json.loads(text_response.text.strip())
+        response_json = json.loads(response.text.strip())
         text = response_json['caption']
+        image_prompt = response_json['image_prompt']
     except (json.JSONDecodeError, KeyError):
-        text = f"Obsessed with {tag}! 🔥 #{tag}"  # Fallback caption
+        # 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 a diverse image based on the tag
-    image_prompt = f"""
-    A high-quality visual scene representing {tag}, designed for a TikTok video. 
-    The image should be {perspective} with a {style}. 
-    Ensure the image is colorful, engaging, and has 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,
@@ -89,59 +104,127 @@ def generate_item(tag, item_index):
         image = Image.open(BytesIO(generated_image.image.image_bytes))
     else:
         # Fallback to a placeholder image
-        image = Image.new('RGB', (360, 640), color='gray')  # 9:16 aspect ratio
+        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()
 
-    return {'text': text, 'image_base64': img_str}
+    return {'text': text, 'image_base64': img_str, 'ideas': ideas}
 
-def start_feed(tag):
+def start_feed(tag, current_index, feed_items, is_loading):
     """
-    Start a new feed with the given tag by generating one initial item.
+    Start or update the feed based on the tag.
     
     Args:
         tag (str): The tag to generate content for.
+        current_index (int): The current item index.
+        feed_items (list): The current list of feed items.
+        is_loading (bool): Whether the feed is currently loading.
     
     Returns:
-        tuple: (current_tag, feed_items, html_content)
+        tuple: (current_tag, current_index, feed_items, html_content, is_loading)
     """
     if not tag.strip():
         tag = "trending"
-    item = generate_item(tag, 0)
-    feed_items = [item]
-    html_content = generate_html(feed_items)
-    return tag, feed_items, html_content
+    
+    # Set loading state to True
+    is_loading = True
+    yield tag, current_index, feed_items, generate_html([], False, 0), 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
+    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
+
+def load_next(tag, current_index, feed_items, is_loading):
+    """
+    Load the next item in the feed.
+    
+    Args:
+        tag (str): The tag to generate content for.
+        current_index (int): The current item index.
+        feed_items (list): The current list of feed items.
+        is_loading (bool): Whether the feed is currently 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
 
-def load_more(current_tag, feed_items):
+    # 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
+
+def load_previous(tag, current_index, feed_items, is_loading):
     """
-    Append a new item to the existing feed and scroll to the latest item.
+    Load the previous item in the feed.
     
     Args:
-        current_tag (str): The tag currently being used for the feed.
+        tag (str): The tag to generate content for.
+        current_index (int): The current item index.
         feed_items (list): The current list of feed items.
+        is_loading (bool): Whether the feed is currently loading.
     
     Returns:
-        tuple: (current_tag, updated_feed_items, updated_html_content)
+        tuple: (current_tag, current_index, feed_items, html_content, is_loading)
     """
-    new_item = generate_item(current_tag, len(feed_items))
-    feed_items.append(new_item)
-    html_content = generate_html(feed_items, scroll_to_latest=True)
-    return current_tag, feed_items, html_content
+    if current_index > 0:
+        current_index -= 1
+    return tag, current_index, feed_items, generate_html(feed_items, False, current_index), is_loading
 
-def generate_html(feed_items, scroll_to_latest=False):
+def generate_html(feed_items, scroll_to_latest=False, current_index=0):
     """
-    Generate an HTML string to display the feed items in a TikTok-like carousel.
+    Generate an HTML string to display the current feed item with click navigation.
     
     Args:
         feed_items (list): List of dictionaries containing 'text' and 'image_base64'.
-        scroll_to_latest (bool): Whether to auto-scroll to the latest item.
+        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.
     
     Returns:
         str: HTML string representing the feed.
     """
+    if not feed_items or current_index >= len(feed_items):
+        return """
+        <div 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;
+        ">
+            <p>Select a tag to start your feed!</p>
+        </div>
+        """
+
+    item = feed_items[current_index]
     html_str = """
     <div id="feed-container" style="
         display: flex;
@@ -151,37 +234,21 @@ def generate_html(feed_items, scroll_to_latest=False):
         margin: 0 auto;
         background-color: #000;
         height: 640px;
-        overflow-y: scroll;
-        scroll-snap-type: y mandatory;
-        scrollbar-width: none;
-        -ms-overflow-style: none;
         border: 1px solid #333;
         border-radius: 10px;
+        position: relative;
     ">
-    """
-    # Hide scrollbar
-    html_str += """
-    <style>
-        #feed-container::-webkit-scrollbar {
-            display: none;
-        }
-        .feed-item {
-            scroll-snap-align: start;
-        }
-    </style>
-    """
-    for idx, item in enumerate(feed_items):
-        html_str += f"""
-        <div class="feed-item" id="item-{idx}" style="
+        <div class="feed-item" style="
             width: 100%;
-            height: 640px;
+            height: 100%;
             position: relative;
             display: flex;
             flex-direction: column;
             justify-content: flex-end;
             overflow: hidden;
-        ">
-            <img src="data:image/png;base64,{item['image_base64']}" style="
+            cursor: pointer;
+        " onclick="handleClick(event)">
+            <img id="feed-image" src="data:image/png;base64,{image_base64}" style="
                 width: 100%;
                 height: 100%;
                 object-fit: cover;
@@ -201,19 +268,28 @@ def generate_html(feed_items, scroll_to_latest=False):
                 font-weight: bold;
                 text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
             ">
-                {item['text']}
+                {text}
             </div>
         </div>
-        """
-    html_str += "</div>"
-
-    # Auto-scroll to the latest item if requested
-    if scroll_to_latest and feed_items:
-        html_str += f"""
-        <script>
-            document.getElementById('item-{len(feed_items) - 1}').scrollIntoView({{ behavior: 'smooth' }});
-        </script>
-        """
+    </div>
+    <script>
+        function handleClick(event) {{
+            const image = document.getElementById('feed-image');
+            const rect = image.getBoundingClientRect();
+            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();
+            }}
+        }}
+    </script>
+    <button id="next-button" style="display: none;" onclick="document.getElementById('next-button').click()"></button>
+    <button id="previous-button" style="display: none;" onclick="document.getElementById('previous-button').click()"></button>
+    """.format(image_base64=item['image_base64'], text=item['text'])
 
     return html_str
 
@@ -222,14 +298,18 @@ with gr.Blocks(
     css="""
         body { background-color: #000; color: #fff; font-family: Arial, sans-serif; }
         .gradio-container { max-width: 400px; margin: 0 auto; padding: 10px; }
-        input, select, button { border-radius: 5px; background-color: #222; color: #fff; border: 1px solid #444; }
-        button { background-color: #ff2d55; border: none; }
-        button:hover { background-color: #e0264b; }
-        .gr-button { width: 100%; margin-top: 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:
+    # State variables
+    current_tag = gr.State(value="")
+    current_index = gr.State(value=0)
+    feed_items = gr.State(value=[])
+    is_loading = gr.State(value=False)
+
     # Input section
     with gr.Column(elem_classes="gr-form"):
         gr.Markdown("### Create Your TikTok Feed")
@@ -242,34 +322,77 @@ with gr.Blocks(
             tag_input = gr.Textbox(
                 label="Or Enter a Custom Tag",
                 value="food",
-                placeholder="e.g., sushi, adventure"
+                placeholder="e.g., sushi, adventure",
+                submit_btn=False  # Disable default submit button
             )
-        with gr.Row():
-            start_button = gr.Button("Start Feed")
-            load_more_button = gr.Button("Load More")
+
+    # Progress bar
+    progress_bar = gr.Slider(
+        minimum=0,
+        maximum=1,
+        value=0,
+        label="Loading Feed...",
+        visible=False
+    )
 
     # Output display
     feed_html = gr.HTML()
 
-    # State variables
-    current_tag = gr.State(value="")
-    feed_items = gr.State(value=[])
-
     # Event handlers
     def set_tag(selected_tag):
-        """Update the tag input when a suggested tag is selected."""
+        """Update the tag input when a suggested tag is selected and start the feed."""
         return selected_tag
 
-    suggested_tags.change(fn=set_tag, inputs=suggested_tags, outputs=tag_input)
-    start_button.click(
+    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,
+        inputs=suggested_tags,
+        outputs=tag_input
+    ).then(
+        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
+    tag_input.submit(
         fn=start_feed,
-        inputs=tag_input,
-        outputs=[current_tag, feed_items, feed_html]
+        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
     )
-    load_more_button.click(
-        fn=load_more,
-        inputs=[current_tag, feed_items],
-        outputs=[current_tag, feed_items, feed_html]
+
+    # 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)
+
+    # Handle click to go to next item
+    next_button.click(
+        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
+    previous_button.click(
+        fn=load_previous,
+        inputs=[current_tag, current_index, feed_items, is_loading],
+        outputs=[current_tag, current_index, feed_items, feed_html, is_loading]
     )
 
 # Launch the app with a public link