Update app.py

app.py

@@ -2,14 +2,13 @@ import gradio as gr
 import os
 import json
 import glob
+import pandas as pd
 
 # Directory to store JSON list files
 LISTS_DIR = "lists"
-
 # Ensure the lists directory exists
 os.makedirs(LISTS_DIR, exist_ok=True)
 
-
 # Get list of available JSON files
 def get_list_files():
     files = glob.glob(os.path.join(LISTS_DIR, "*.json"))
@@ -23,7 +22,25 @@ def load_list_data(list_name):
             return json.load(f)
     return {"name": "Empty List", "items": []}
 
-# Get list items in table format
+# Create HTML table with clickable links
+def get_list_items_html(list_name):
+    data = load_list_data(list_name)
+    html = "<table style='width:100%; border-collapse: collapse;'>"
+    html += "<tr><th style='text-align:left; padding:8px; border-bottom:1px solid #ddd;'>Name</th>"
+    html += "<th style='text-align:left; padding:8px; border-bottom:1px solid #ddd;'>Description</th>"
+    html += "<th style='text-align:left; padding:8px; border-bottom:1px solid #ddd;'>Link</th></tr>"
+    
+    for item in data["items"]:
+        html += "<tr>"
+        html += f"<td style='padding:8px; border-bottom:1px solid #ddd;'>{item['name']}</td>"
+        html += f"<td style='padding:8px; border-bottom:1px solid #ddd;'>{item['description']}</td>"
+        html += f"<td style='padding:8px; border-bottom:1px solid #ddd;'><a href='{item['link']}' target='_blank'>{item['link']}</a></td>"
+        html += "</tr>"
+    
+    html += "</table>"
+    return html
+
+# Get list items in table format (for backup/alternative view)
 def get_list_items(list_name):
     data = load_list_data(list_name)
     return [[item["name"], item["description"], item["link"]] 
@@ -36,17 +53,13 @@ def get_list_title(list_name):
 
 # Function to switch between lists
 def switch_list(list_name):
-    return get_list_title(list_name), get_list_items(list_name)
-
-gr.Markdown("""
-    ## Useful Things Archive
-    
-    """)
+    return get_list_title(list_name), get_list_items_html(list_name)
     
 # Build the Gradio interface
-with gr.Blocks(title="Static List Manager") as app:
-    gr.Markdown("# Static List Manager")
-    
+with gr.Blocks(title="Useful Things Archive") as app:
+    gr.Markdown("""
+    ## Useful Things Archive
+    """)
     # Get available lists
     list_names = get_list_files()
     if not list_names:
@@ -65,43 +78,16 @@ with gr.Blocks(title="Static List Manager") as app:
     
     list_title = gr.Markdown(f"## {get_list_title(list_names[0])}")
     
-    # Display table of list items
-    items_table = gr.Dataframe(
-        headers=["Name", "Description", "Link"],
-        datatype=["str", "str", "str"],
-        value=get_list_items(list_names[0]),
-        interactive=False
-    )
+    # Use HTML component instead of Dataframe to enable clickable links
+    items_html = gr.HTML(value=get_list_items_html(list_names[0]))
     
     # Connect tab events to switch lists
     for i, (tab, list_name) in enumerate(tab_list):
         tab.select(
             lambda name=list_name: switch_list(name), 
             inputs=[], 
-            outputs=[list_title, items_table]
+            outputs=[list_title, items_html]
         )
 
-    # Add instructions
-    gr.Markdown("""
-    ### How to Add More Lists
-    
-    1. Create a JSON file in the 'lists' folder with the format: listname.json
-    2. Use the following structure in your JSON file:
-    ```json
-    {
-        "name": "Your List Title",
-        "items": [
-            {
-                "name": "Item Name",
-                "description": "Item Description",
-                "link": "https://example.com"
-            },
-            ...
-        ]
-    }
-    ```
-    3. Restart the app to see your new list
-    """)
-
 # Launch the app
 app.launch()