Add image generation for shortcuts and update display logic in app.py

app.py

@@ -2,6 +2,8 @@ import gradio as gr
 from datetime import datetime
 import json
 import pandas as pd
+from PIL import Image, ImageDraw, ImageFont
+import io
 
 shortcuts_list = []
 
@@ -34,7 +36,6 @@ def add_shortcut(name, tags, link, emojis, color_from, color_to, short_descripti
     }
     shortcuts_list.append(new_shortcut)
     save_shortcuts()
-    # Return updated DataFrame
     return update_display()
 
 def get_shortcuts_dataframe(sort_by='Recently Added', search_query='', filter_tags=[]):
@@ -54,55 +55,68 @@ def get_shortcuts_dataframe(sort_by='Recently Added', search_query='', filter_ta
         datafra = datafra.sort_values('date_added', ascending=False)
     # Reset index
     datafra = datafra.reset_index(drop=True)
-    # Select relevant columns
-    datafra = datafra[['name', 'emojis', 'short_description', 'link', 'pinned', 'favorited']]
     return datafra
 
-def update_display(sort_by='Recently Added', search_query='', filter_tags=[]):
-    datafra = get_shortcuts_dataframe(sort_by, search_query, filter_tags)
-    if datafra.empty:
-        return pd.DataFrame(columns=['Name', 'Emojis', 'Description', 'Link', 'Pinned', 'Favorited'])
-    else:
-        datafra = datafra.rename(columns={
-            'name': 'Name',
-            'emojis': 'Emojis',
-            'short_description': 'Description',
-            'link': 'Link',
-            'pinned': 'Pinned',
-            'favorited': 'Favorited'
-        })
-        return datafra
+def generate_shortcut_image(shortcut):
+    # Create an image with gradient background
+    width, height = 300, 200
+    image = Image.new('RGB', (width, height))
+    draw = ImageDraw.Draw(image)
 
-def toggle_pin(selected_indices):
-    if selected_indices is not None:
-        for idx in selected_indices:
-            index = int(idx)
-            if 0 <= index < len(shortcuts_list):
-                shortcuts_list[index]['pinned'] = not shortcuts_list[index]['pinned']
-        save_shortcuts()
-    return update_display()
+    # Draw gradient
+    color_from = shortcut['color_from']
+    color_to = shortcut['color_to']
+    r1, g1, b1 = int(color_from[1:3], 16), int(color_from[3:5], 16), int(color_from[5:], 16)
+    r2, g2, b2 = int(color_to[1:3], 16), int(color_to[3:5], 16), int(color_to[5:], 16)
+    for y in range(height):
+        r = int(r1 + (r2 - r1) * y / height)
+        g = int(g1 + (g2 - g1) * y / height)
+        b = int(b1 + (b2 - b1) * y / height)
+        draw.line([(0, y), (width, y)], fill=(r, g, b))
 
-def toggle_favorite(selected_indices):
-    if selected_indices is not None:
-        for idx in selected_indices:
-            index = int(idx)
-            if 0 <= index < len(shortcuts_list):
-                shortcuts_list[index]['favorited'] = not shortcuts_list[index]['favorited']
-        save_shortcuts()
-    return update_display()
+    # Add emojis
+    try:
+        font = ImageFont.truetype("arial.ttf", 40)
+    except IOError:
+        font = ImageFont.load_default()
+    w, h = draw.textsize(shortcut['emojis'], font=font)
+    draw.text(((width - w) / 2, (height - h) / 4), shortcut['emojis'], font=font, fill='white')
 
-def open_link(selected_indices):
-    if selected_indices:
-        idx = int(selected_indices[0])
-        if 0 <= idx < len(shortcuts_list):
-            link = shortcuts_list[idx]['link']
-            # Use JavaScript to open the link in a new tab
-            return gr.update(_js=f"window.open('{link}', '_blank');")
-    return gr.update()
+    # Add name
+    try:
+        font = ImageFont.truetype("arial.ttf", 24)
+    except IOError:
+        font = ImageFont.load_default()
+    w, h = draw.textsize(shortcut['name'], font=font)
+    draw.text(((width - w) / 2, (height - h) / 2), shortcut['name'], font=font, fill='white')
+
+    # Add short description
+    try:
+        font = ImageFont.truetype("arial.ttf", 16)
+    except IOError:
+        font = ImageFont.load_default()
+    w, h = draw.textsize(shortcut['short_description'], font=font)
+    draw.text(((width - w) / 2, (height - h) * 3 / 4), shortcut['short_description'], font=font, fill='white')
+
+    # Return image
+    return image
+
+def update_display(sort_by='Recently Added', search_query='', filter_tags=[]):
+    datafra = get_shortcuts_dataframe(sort_by, search_query, filter_tags)
+    images = []
+    labels = []
+    for idx, shortcut in datafra.iterrows():
+        image = generate_shortcut_image(shortcut)
+        # Save image to buffer
+        buffer = io.BytesIO()
+        image.save(buffer, format='PNG')
+        buffer.seek(0)
+        images.append(buffer)
+        labels.append(shortcut['name'])
+    return images
 
 load_shortcuts()
 
-# Build the Gradio App
 with gr.Blocks() as app:
     gr.Markdown("## Add a New Website Shortcut")
     with gr.Row():
@@ -116,50 +130,107 @@ with gr.Blocks() as app:
         color_to = gr.ColorPicker(label="Gradient Color To")
     short_description = gr.Textbox(label="Short Description")
     add_button = gr.Button("Add Shortcut")
-    # Output component for the updated table
-    shortcuts_table = gr.Dataframe(headers=['Name', 'Emojis', 'Description', 'Link', 'Pinned', 'Favorited'], datatype=['str', 'str', 'str', 'str', 'bool', 'bool'], interactive=False)
-
     add_button.click(
         add_shortcut,
         inputs=[name, tags, link, emojis, color_from, color_to, short_description],
-        outputs=shortcuts_table
+        outputs=[]
     )
 
     gr.Markdown("## Website Shortcuts")
     with gr.Row():
         search_bar = gr.Textbox(label="Search")
         sort_options = gr.Dropdown(choices=['Recently Added', 'Alphabetical'], label="Sort By", value='Recently Added')
-    # Collect all unique tags
-    all_tags = list(set(tag for shortcut in shortcuts_list for tag in shortcut['tags']))
-    filter_tags = gr.CheckboxGroup(choices=all_tags, label="Filter Tags")
+    all_tags = set(tag for shortcut in shortcuts_list for tag in shortcut['tags'])
+    filter_tags = gr.CheckboxGroup(choices=list(all_tags), label="Filter Tags")
 
-    # Buttons to perform actions
-    with gr.Row():
-        selected_indices = gr.State([])  # To store selected indices
+    # Placeholder for the gallery
+    grid_output = gr.Gallery(
+        label="Shortcuts Gallery", show_label=False, elem_id="gallery",
+        columns=3, object_fit="contain", height="auto"
+    )
+
+    # Update the display whenever filters change
+    def refresh_display():
+        return update_display(sort_options.value, search_bar.value, filter_tags.value)
+
+    search_bar.change(fn=refresh_display, inputs=[], outputs=grid_output)
+    sort_options.change(fn=refresh_display, inputs=[], outputs=grid_output)
+    filter_tags.change(fn=refresh_display, inputs=[], outputs=grid_output)
+
+    # Initial display
+    grid_output.value = update_display()
+
+    # Variables to hold selected shortcut info
+    selected_index = gr.Number(visible=False)
+    shortcut_details = gr.Markdown(visible=False)
+
+    # Handle gallery selection
+    def gallery_select(evt: gr.SelectData):
+        index = evt.index
+        datafra = get_shortcuts_dataframe(sort_options.value, search_bar.value, filter_tags.value)
+        if index < len(datafra):
+            shortcut = datafra.iloc[index]
+            # Display shortcut details
+            shortcut_info = f"""
+            ### {shortcut['name']} {shortcut['emojis']}
+            {shortcut['short_description']}
+            """
+            return index, shortcut_info
+        else:
+            return None, None
+
+    grid_output.select(fn=gallery_select, inputs=None, outputs=[selected_index, shortcut_details])
+    shortcut_details.visible = True
+
+    # Buttons for interactivity
+    with gr.Row(visible=False) as action_row:
         pin_button = gr.Button("📌 Pin/Unpin")
         fav_button = gr.Button("❤️ Favorite/Unfavorite")
         open_link_button = gr.Button("🔗 Open Link")
-    
-    # Update display when filters change
-    def refresh_display(sort_by, search_query, filter_tags):
-        return update_display(sort_by, search_query, filter_tags)
-    
-    search_bar.change(fn=refresh_display, inputs=[sort_options, search_bar, filter_tags], outputs=shortcuts_table)
-    sort_options.change(fn=refresh_display, inputs=[sort_options, search_bar, filter_tags], outputs=shortcuts_table)
-    filter_tags.change(fn=refresh_display, inputs=[sort_options, search_bar, filter_tags], outputs=shortcuts_table)
-    
-    # Actions for buttons
-    pin_button.click(fn=toggle_pin, inputs=selected_indices, outputs=shortcuts_table)
-    fav_button.click(fn=toggle_favorite, inputs=selected_indices, outputs=shortcuts_table)
-    open_link_button.click(fn=open_link, inputs=selected_indices, outputs=None)
-    
-    # Capture selected indices from the DataFrame
-    def update_selected(evt: gr.SelectData):
-        return [evt.index]
-    
-    shortcuts_table.select(fn=update_selected, inputs=None, outputs=selected_indices)
-    
-    # Set initial data
-    shortcuts_table.value = update_display()
+
+    # Show action buttons when a shortcut is selected
+    def show_actions(index):
+        if index is not None:
+            return gr.update(visible=True)
+        else:
+            return gr.update(visible=False)
+
+    selected_index.change(fn=show_actions, inputs=selected_index, outputs=action_row)
+
+    # Functions for buttons
+    def pin_action(index):
+        index = int(index)
+        datafra = get_shortcuts_dataframe(sort_options.value, search_bar.value, filter_tags.value)
+        if index < len(datafra):
+            shortcut = datafra.iloc[index]
+            # Find the original index in shortcuts_list
+            original_index = shortcuts_list.index(shortcut)
+            shortcuts_list[original_index]['pinned'] = not shortcuts_list[original_index]['pinned']
+            save_shortcuts()
+        return refresh_display(), gr.update(visible=False), gr.update(visible=False)
+
+    def favorite_action(index):
+        index = int(index)
+        datafra = get_shortcuts_dataframe(sort_options.value, search_bar.value, filter_tags.value)
+        if index < len(datafra):
+            shortcut = datafra.iloc[index]
+            # Find the original index in shortcuts_list
+            original_index = shortcuts_list.index(shortcut)
+            shortcuts_list[original_index]['favorited'] = not shortcuts_list[original_index]['favorited']
+            save_shortcuts()
+        return refresh_display(), gr.update(visible=False), gr.update(visible=False)
+
+    def open_link_action(index):
+        index = int(index)
+        datafra = get_shortcuts_dataframe(sort_options.value, search_bar.value, filter_tags.value)
+        if index < len(datafra):
+            shortcut = datafra.iloc[index]
+            return shortcut['link']
+        else:
+            return None
+
+    pin_button.click(fn=pin_action, inputs=selected_index, outputs=[grid_output, action_row, shortcut_details])
+    fav_button.click(fn=favorite_action, inputs=selected_index, outputs=[grid_output, action_row, shortcut_details])
+    open_link_button.click(fn=open_link_action, inputs=selected_index, outputs=None, _js="(link) => { if (link) { window.open(link, '_blank'); } }")
 
 app.launch()