Update app.py

app.py

@@ -7,6 +7,7 @@ import base64
 import os
 import json
 import random
+import urllib.parse
 
 # Initialize the Google Generative AI client with the API key from environment variables
 try:
@@ -170,7 +171,7 @@ def start_feed(tag, current_index, feed_items):
         feed_items (list): The current list of feed items.
     
     Returns:
-        tuple: (current_tag, current_index, feed_items, html_content, is_loading)
+        tuple: (current_tag, current_index, feed_items, html_content, share_links, is_loading)
     """
     if not tag.strip():
         tag = "trending"
@@ -178,12 +179,14 @@ def start_feed(tag, current_index, feed_items):
     # Set loading state
     is_loading = True
     html_content = generate_html([], False, 0, tag, is_loading)
+    share_links = ""
 
     try:
         ideas = generate_ideas(tag)
         item = generate_item(tag, ideas)
         feed_items = [item]
         current_index = 0
+        share_links = generate_share_links(item['image_base64'], item['text'])
     except Exception as e:
         print(f"Error in start_feed: {e}")
         feed_items = []
@@ -207,12 +210,12 @@ def start_feed(tag, current_index, feed_items):
         </div>
         """
         is_loading = False
-        return tag, current_index, feed_items, html_content, is_loading
+        return tag, current_index, feed_items, html_content, share_links, is_loading
 
     # Set loading state to False and update UI
     is_loading = False
     html_content = generate_html(feed_items, False, current_index, tag, is_loading)
-    return tag, current_index, feed_items, html_content, is_loading
+    return tag, current_index, feed_items, html_content, share_links, is_loading
 
 def load_next(tag, current_index, feed_items):
     """
@@ -224,10 +227,11 @@ def load_next(tag, current_index, feed_items):
         feed_items (list): The current list of feed items.
     
     Returns:
-        tuple: (current_tag, current_index, feed_items, html_content, is_loading)
+        tuple: (current_tag, current_index, feed_items, html_content, share_links, is_loading)
     """
     is_loading = True
     html_content = generate_html(feed_items, False, current_index, tag, is_loading)
+    share_links = ""
 
     try:
         if current_index + 1 < len(feed_items):
@@ -237,6 +241,7 @@ def load_next(tag, current_index, feed_items):
             new_item = generate_item(tag, ideas)
             feed_items.append(new_item)
             current_index = len(feed_items) - 1
+        share_links = generate_share_links(feed_items[current_index]['image_base64'], feed_items[current_index]['text'])
     except Exception as e:
         print(f"Error in load_next: {e}")
         html_content = """
@@ -258,11 +263,11 @@ def load_next(tag, current_index, feed_items):
         </div>
         """
         is_loading = False
-        return tag, current_index, feed_items, html_content, is_loading
+        return tag, current_index, feed_items, html_content, share_links, is_loading
 
     is_loading = False
     html_content = generate_html(feed_items, False, current_index, tag, is_loading)
-    return tag, current_index, feed_items, html_content, is_loading
+    return tag, current_index, feed_items, html_content, share_links, is_loading
 
 def load_previous(tag, current_index, feed_items):
     """
@@ -274,16 +279,84 @@ def load_previous(tag, current_index, feed_items):
         feed_items (list): The current list of feed items.
     
     Returns:
-        tuple: (current_tag, current_index, feed_items, html_content, is_loading)
+        tuple: (current_tag, current_index, feed_items, html_content, share_links, is_loading)
     """
     if current_index > 0:
         current_index -= 1
     html_content = generate_html(feed_items, False, current_index, tag, False)
-    return tag, current_index, feed_items, html_content, False
+    share_links = generate_share_links(feed_items[current_index]['image_base64'], feed_items[current_index]['text'])
+    return tag, current_index, feed_items, html_content, share_links, False
+
+def generate_share_links(image_base64, caption):
+    """
+    Generate share links for social media platforms.
+    
+    Args:
+        image_base64 (str): The base64-encoded image data.
+        caption (str): The caption to share with the image.
+    
+    Returns:
+        str: HTML string with share links.
+    """
+    # Create a data URL for the image
+    image_data_url = f"data:image/png;base64,{image_base64}"
+    encoded_caption = urllib.parse.quote(caption)
+    encoded_image_url = urllib.parse.quote(image_data_url)
+
+    # Generate share links for each platform
+    share_links = """
+    <div style="
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 10px;
+        margin-top: 10px;
+        color: white;
+        font-family: Arial, sans-serif;
+    ">
+        <a href="https://www.tiktok.com/upload?caption={caption}" target="_blank" style="
+            background-color: #00f2ea;
+            color: #000;
+            padding: 5px 10px;
+            border-radius: 5px;
+            text-decoration: none;
+        ">Share on TikTok</a>
+        <a href="https://www.instagram.com/?url={image_url}&caption={caption}" target="_blank" style="
+            background-color: #e1306c;
+            color: white;
+            padding: 5px 10px;
+            border-radius: 5px;
+            text-decoration: none;
+        ">Share on Instagram</a>
+        <a href="https://www.facebook.com/sharer/sharer.php?u={image_url}&quote={caption}" target="_blank" style="
+            background-color: #4267b2;
+            color: white;
+            padding: 5px 10px;
+            border-radius: 5px;
+            text-decoration: none;
+        ">Share on Facebook</a>
+        <a href="https://twitter.com/intent/tweet?text={caption}&url={image_url}" target="_blank" style="
+            background-color: #1da1f2;
+            color: white;
+            padding: 5px 10px;
+            border-radius: 5px;
+            text-decoration: none;
+        ">Share on X</a>
+        <a href="https://pinterest.com/pin/create/button/?url={image_url}&description={caption}" target="_blank" style="
+            background-color: #bd081c;
+            color: white;
+            padding: 5px 10px;
+            border-radius: 5px;
+            text-decoration: none;
+        ">Share on Pinterest</a>
+    </div>
+    """.format(caption=encoded_caption, image_url=encoded_image_url)
+
+    return share_links
 
 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 and a next button.
+    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'.
@@ -429,20 +502,6 @@ def generate_html(feed_items, scroll_to_latest=False, current_index=0, tag="", i
             ">
                 {text}
             </div>
-            <button id="next-button" style="
-                position: absolute;
-                bottom: 80px;
-                right: 20px;
-                background-color: #ff2d55;
-                color: white;
-                border: none;
-                border-radius: 50%;
-                width: 50px;
-                height: 50px;
-                font-size: 24px;
-                cursor: pointer;
-                z-index: 3;
-            " onclick="document.getElementById('next-button').click()">✨</button>
         </div>
     </div>
     <script>
@@ -456,7 +515,6 @@ def generate_html(feed_items, scroll_to_latest=False, current_index=0, tag="", i
             }}
         }}
     </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'])
 
@@ -467,20 +525,24 @@ 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 { border-radius: 5px; background-color: #222; color: #fff; border: 1px solid #444; }
+        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; }
         .gr-form { background-color: #111; padding: 15px; border-radius: 10px; }
     """,
-    title="TikTok-Style Infinite Feed"
+    title="Create Your Feed"  # Updated title
 ) 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)
+    share_links = gr.State(value="")
 
     # Input section
     with gr.Column(elem_classes="gr-form"):
-        gr.Markdown("### Create Your TikTok Feed")
+        gr.Markdown("### Create Your Feed")
         with gr.Row():
             suggested_tags = gr.Dropdown(
                 choices=["food", "travel", "fashion", "tech"],
@@ -493,9 +555,11 @@ with gr.Blocks(
                 placeholder="e.g., sushi, adventure",
                 submit_btn=False
             )
+        magic_button = gr.Button("✨ Generate Next Item", elem_classes="gr-button")
 
     # Output display
     feed_html = gr.HTML()
+    share_html = gr.HTML(label="Share this item:")
 
     # Event handlers
     def set_tag(selected_tag):
@@ -510,32 +574,31 @@ with gr.Blocks(
     ).then(
         fn=start_feed,
         inputs=[tag_input, current_index, feed_items],
-        outputs=[current_tag, current_index, feed_items, feed_html, is_loading]
+        outputs=[current_tag, current_index, feed_items, feed_html, share_html, is_loading]
     )
 
     # Handle Enter keypress in the custom tag input
     tag_input.submit(
         fn=start_feed,
         inputs=[tag_input, current_index, feed_items],
-        outputs=[current_tag, current_index, feed_items, feed_html, is_loading]
+        outputs=[current_tag, current_index, feed_items, feed_html, share_html, is_loading]
     )
 
-    # 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(
+    # Handle magic button click to generate next item
+    magic_button.click(
         fn=load_next,
         inputs=[current_tag, current_index, feed_items],
-        outputs=[current_tag, current_index, feed_items, feed_html, is_loading]
+        outputs=[current_tag, current_index, feed_items, feed_html, share_html, is_loading]
     )
 
+    # Hidden button for previous item navigation
+    previous_button = gr.Button("Previous", elem_id="previous-button", visible=False)
+
     # Handle click to go to previous item
     previous_button.click(
         fn=load_previous,
         inputs=[current_tag, current_index, feed_items],
-        outputs=[current_tag, current_index, feed_items, feed_html, is_loading]
+        outputs=[current_tag, current_index, feed_items, feed_html, share_html, is_loading]
     )
 
 # Launch the app