Update app.py

app.py

@@ -1,4 +1,5 @@
 # app.py
+
 import gradio as gr
 from bs4 import BeautifulSoup
 import asyncio
@@ -246,19 +247,17 @@ def display_bookmarks(bookmarks_list):
         # Assign CSS classes based on bookmark status
         if bookmark.get('dead_link'):
             card_classes = "card dead-link"
-            text_style = "color: #D32F2F;"  # Red color for dead links
         else:
             card_classes = "card active-link"
-            text_style = "color: #000000;"  # Black color for active links
 
         card_html = f'''
-        <div class="{card_classes}" style="border: 2px solid; padding: 10px; margin: 10px; border-radius: 5px;">
+        <div class="{card_classes}">
             <div class="card-content">
-                <h3 style="{text_style}">{index}. {title} {status}</h3>
-                <p style="{text_style}"><strong>Category:</strong> {category}</p>
-                <p style="{text_style}"><strong>URL:</strong> <a href="{url}" target="_blank" style="{text_style}">{url}</a></p>
-                <p style="{text_style}"><strong>ETag:</strong> {etag}</p>
-                <p style="{text_style}"><strong>Summary:</strong> {summary}</p>
+                <h3>{index}. {title} {status}</h3>
+                <p><strong>Category:</strong> {category}</p>
+                <p><strong>URL:</strong> <a href="{url}" target="_blank">{url}</a></p>
+                <p><strong>ETag:</strong> {etag}</p>
+                <p><strong>Summary:</strong> {summary}</p>
             </div>
         </div>
         '''
@@ -401,7 +400,7 @@ def delete_selected_bookmarks(selected_indices, state_bookmarks):
     # Update the shared state
     updated_state = bookmarks.copy()
 
-    return message, gr.update(choices=choices), bookmarks_html, updated_state
+    return message, gr.update(choices=choices), bookmarks_html
 
 # Edit category of selected bookmarks
 def edit_selected_bookmarks_category(selected_indices, new_category, state_bookmarks):
@@ -409,16 +408,14 @@ def edit_selected_bookmarks_category(selected_indices, new_category, state_bookm
         return (
             "⚠️ No bookmarks selected.",
             gr.update(choices=[f"{i+1}. {bookmark['title']} (Category: {bookmark['category']})" for i, bookmark in enumerate(state_bookmarks)]),
-            display_bookmarks(state_bookmarks),
-            state_bookmarks
+            display_bookmarks(state_bookmarks)
         )
 
     if not new_category:
         return (
             "⚠️ No new category selected.",
             gr.update(choices=[f"{i+1}. {bookmark['title']} (Category: {bookmark['category']})" for i, bookmark in enumerate(state_bookmarks)]),
-            display_bookmarks(state_bookmarks),
-            state_bookmarks
+            display_bookmarks(state_bookmarks)
         )
 
     bookmarks = state_bookmarks.copy()
@@ -449,7 +446,7 @@ def edit_selected_bookmarks_category(selected_indices, new_category, state_bookm
     # Update the shared state
     updated_state = bookmarks.copy()
 
-    return message, gr.update(choices=choices), bookmarks_html, updated_state
+    return message, gr.update(choices=choices), bookmarks_html
 
 # Export bookmarks to HTML
 def export_bookmarks(state_bookmarks):
@@ -539,7 +536,7 @@ Please identify the most relevant bookmarks that match the user's query. Provide
 def build_app():
     try:
         logger.info("Building Gradio app")
-        with gr.Blocks(theme=gr.themes.Default(), css="""
+        with gr.Blocks(css="""
         .card {
             box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
             transition: 0.3s;
@@ -547,29 +544,62 @@ def build_app():
         .card:hover {
             box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
         }
+
+        /* Dynamic Theme Styling */
+        @media (prefers-color-scheme: dark) {
+            body {
+                color: white;
+                background-color: #121212;
+            }
+            .card {
+                background-color: #1e1e1e;
+            }
+            a {
+                color: #bb86fc;
+            }
+            h1, h2, h3, p, strong {
+                color: inherit;
+            }
+        }
+
+        @media (prefers-color-scheme: light) {
+            body {
+                color: black;
+                background-color: white;
+            }
+            .card {
+                background-color: #fff;
+            }
+            a {
+                color: #1a0dab;
+            }
+            h1, h2, h3, p, strong {
+                color: inherit;
+            }
+        }
         """) as demo:
             # Shared states
             state_bookmarks = gr.State([])
-            chat_history = gr.State([])  # Optional, if you want to maintain chat history
+            chat_history = gr.State([])
 
             # General Overview
             gr.Markdown("""
-# 📚 SmartMarks - AI Browser Bookmarks Manager
+    # 📚 SmartMarks - AI Browser Bookmarks Manager
 
-Welcome to **SmartMarks**, your intelligent assistant for managing browser bookmarks. SmartMarks leverages AI to help you organize, search, and interact with your bookmarks seamlessly. Whether you're looking to categorize your links, retrieve information quickly, or maintain an updated list, SmartMarks has you covered.
+    Welcome to **SmartMarks**, your intelligent assistant for managing browser bookmarks. SmartMarks leverages AI to help you organize, search, and interact with your bookmarks seamlessly. Whether you're looking to categorize your links, retrieve information quickly, or maintain an updated list, SmartMarks has you covered.
 
----
+    ---
 
-## 🚀 **How to Use SmartMarks**
+    ## 🚀 **How to Use SmartMarks**
 
-SmartMarks is divided into three main sections:
+    SmartMarks is divided into three main sections:
 
-1. **📂 Upload and Process Bookmarks:** Import your existing bookmarks and let SmartMarks analyze and categorize them for you.
-2. **💬 Chat with Bookmarks:** Interact with your bookmarks using natural language queries to find relevant links effortlessly.
-3. **🛠️ Manage Bookmarks:** View, edit, delete, and export your bookmarks with ease.
+    1. **📂 Upload and Process Bookmarks:** Import your existing bookmarks and let SmartMarks analyze and categorize them for you.
+    2. **💬 Chat with Bookmarks:** Interact with your bookmarks using natural language queries to find relevant links effortlessly.
+    3. **🛠️ Manage Bookmarks:** View, edit, delete, and export your bookmarks with ease.
 
-Navigate through the tabs to explore each feature in detail.
-""")
+    Navigate through the tabs to explore each feature in detail.
+    """)
 
             # Define Manage Bookmarks components outside the tab for global access
             bookmark_selector = gr.CheckboxGroup(label="✅ Select Bookmarks", choices=[])
@@ -578,21 +608,21 @@ Navigate through the tabs to explore each feature in detail.
             # Upload and Process Bookmarks Tab
             with gr.Tab("Upload and Process Bookmarks"):
                 gr.Markdown("""
-## 📂 **Upload and Process Bookmarks**
+    ## 📂 **Upload and Process Bookmarks**
 
-### 📝 **Steps to Upload and Process:**
+    ### 📝 **Steps to Upload and Process:**
 
-1. **🔽 Upload Bookmarks File:**
-   - Click on the **"📁 Upload Bookmarks HTML File"** button.
-   - Select your browser's exported bookmarks HTML file from your device.
+    1. **🔽 Upload Bookmarks File:**
+       - Click on the **"📁 Upload Bookmarks HTML File"** button.
+       - Select your browser's exported bookmarks HTML file from your device.
 
-2. **⚙️ Process Bookmarks:**
-   - After uploading, click on the **"⚙️ Process Bookmarks"** button.
-   - SmartMarks will parse your bookmarks, fetch additional information, generate summaries, and categorize each link based on predefined categories.
+    2. **⚙️ Process Bookmarks:**
+       - After uploading, click on the **"⚙️ Process Bookmarks"** button.
+       - SmartMarks will parse your bookmarks, fetch additional information, generate summaries, and categorize each link based on predefined categories.
 
-3. **📄 View Processed Bookmarks:**
-   - Once processing is complete, your bookmarks will be displayed in an organized and visually appealing format below.
-""")
+    3. **📄 View Processed Bookmarks:**
+       - Once processing is complete, your bookmarks will be displayed in an organized and visually appealing format below.
+    """)
 
                 upload = gr.File(label="📁 Upload Bookmarks HTML File", type='binary')
                 process_button = gr.Button("⚙️ Process Bookmarks")
@@ -608,19 +638,22 @@ Navigate through the tabs to explore each feature in detail.
             # Chat with Bookmarks Tab
             with gr.Tab("Chat with Bookmarks"):
                 gr.Markdown("""
-## 💬 **Chat with Bookmarks**
+    ## 💬 **Chat with Bookmarks**
+
+    ### 🤖 **How to Interact:**
 
-### 🤖 **How to Interact:**
+    1. **✍️ Enter Your Query:**
+       - In the **"✍️ Ask about your bookmarks"** textbox, type your question or keyword related to your bookmarks. For example, "Do I have any bookmarks about GenerativeAI?"
 
-1. **✍️ Enter Your Query:**
-   - In the **"✍️ Ask about your bookmarks"** textbox, type your question or keyword related to your bookmarks. For example, "Do I have any bookmarks about GenerativeAI?"
+    2. **📨 Submit Your Query:**
+       - Click the **"📨 Send"** button to submit your query.
 
-2. **📨 Submit Your Query:**
-   - Click the **"📨 Send"** button to submit your query.
+    3. **📈 Receive AI-Driven Responses:**
+       - SmartMarks will analyze your query and provide relevant bookmarks that match your request, making it easier to find specific links without manual searching.
 
-3. **📈 Receive AI-Driven Responses:**
-   - SmartMarks will analyze your query and provide relevant bookmarks that match your request, making it easier to find specific links without manual searching.
-""")
+    4. **🗂️ View Chat History:**
+       - All your queries and the corresponding AI responses are displayed in the chat history for your reference.
+    """)
 
                 with gr.Row():
                     chat_history_display = gr.Chatbot(label="🗨️ Chat History")
@@ -650,28 +683,28 @@ Navigate through the tabs to explore each feature in detail.
             # Manage Bookmarks Tab
             with gr.Tab("Manage Bookmarks"):
                 gr.Markdown("""
-## 🛠️ **Manage Bookmarks**
+    ## 🛠️ **Manage Bookmarks**
 
-### 🗂️ **Features:**
+    ### 🗂️ **Features:**
 
-1. **👁️ View Bookmarks:**
-   - All your processed bookmarks are displayed here with their respective categories and summaries.
+    1. **👁️ View Bookmarks:**
+       - All your processed bookmarks are displayed here with their respective categories and summaries.
 
-2. **✅ Select Bookmarks:**
-   - Use the checkboxes next to each bookmark to select one, multiple, or all bookmarks you wish to manage.
+    2. **✅ Select Bookmarks:**
+       - Use the checkboxes next to each bookmark to select one, multiple, or all bookmarks you wish to manage.
 
-3. **🗑️ Delete Selected Bookmarks:**
-   - After selecting the desired bookmarks, click the **"🗑️ Delete Selected Bookmarks"** button to remove them from your list.
+    3. **🗑️ Delete Selected Bookmarks:**
+       - After selecting the desired bookmarks, click the **"🗑️ Delete Selected Bookmarks"** button to remove them from your list.
 
-4. **✏️ Edit Categories:**
-   - Select the bookmarks you want to re-categorize.
-   - Choose a new category from the dropdown menu labeled **"🆕 New Category"**.
-   - Click the **"✏️ Edit Category of Selected Bookmarks"** button to update their categories.
+    4. **✏️ Edit Categories:**
+       - Select the bookmarks you want to re-categorize.
+       - Choose a new category from the dropdown menu labeled **"🆕 New Category"**.
+       - Click the **"✏️ Edit Category of Selected Bookmarks"** button to update their categories.
 
-5. **💾 Export Bookmarks:**
-   - Click the **"💾 Export Bookmarks"** button to download your updated bookmarks as an HTML file.
-   - This file can be uploaded back to your browser to reflect the changes made within SmartMarks.
-""")
+    5. **💾 Export Bookmarks:**
+       - Click the **"💾 Export Bookmarks"** button to download your updated bookmarks as an HTML file.
+       - This file can be uploaded back to your browser to reflect the changes made within SmartMarks.
+    """)
 
                 manage_output = gr.Textbox(label="🔄 Manage Output", interactive=False)
                 new_category_input = gr.Dropdown(label="🆕 New Category", choices=CATEGORIES, value="Uncategorized")
@@ -686,13 +719,13 @@ Navigate through the tabs to explore each feature in detail.
                 delete_button.click(
                     delete_selected_bookmarks,
                     inputs=[bookmark_selector, state_bookmarks],
-                    outputs=[manage_output, bookmark_selector, bookmark_display_manage, state_bookmarks]
+                    outputs=[manage_output, bookmark_selector, bookmark_display_manage]
                 )
 
                 edit_category_button.click(
                     edit_selected_bookmarks_category,
                     inputs=[bookmark_selector, new_category_input, state_bookmarks],
-                    outputs=[manage_output, bookmark_selector, bookmark_display_manage, state_bookmarks]
+                    outputs=[manage_output, bookmark_selector, bookmark_display_manage]
                 )
 
                 export_button.click(