Update Gradio SDK version to 5.5.0 and add new JSON entries for user data

127.0.0.1/username-2ca5yTRsxiA.json

@@ -0,0 +1 @@
+[{"name": "Charbel", "tags": ["Personal"], "link": "example.com", "emojis": "\ud83e\udd70", "color_from": "rgba(157.78125, 125.2561677631579, 125.2561677631579, 1)", "color_to": "rgba(255, 0, 0, 1)", "short_description": "ssadasd", "pinned": false, "favorited": false, "date_added": "2024-11-13 16:25:36.058089"}]

127.0.0.1/username-JDpPDlmi1KA.json

@@ -0,0 +1 @@
+[{"name": "Charbel", "tags": ["Personal"], "link": "example.com", "emojis": "\ud83e\udd70", "color_from": "rgba(157.78125, 125.2561677631579, 125.2561677631579, 1)", "color_to": "rgba(255, 0, 0, 1)", "short_description": "ssadasd", "pinned": false, "favorited": false, "date_added": "2024-11-13 16:25:36.058089"}]

2024-11-13/charbelmalo.json

@@ -0,0 +1 @@
+[{"name": "Charbel", "tags": ["Personal"], "link": "example.com", "emojis": "\ud83e\udd70", "color_from": "rgba(157.78125, 125.2561677631579, 125.2561677631579, 1)", "color_to": "rgba(255, 0, 0, 1)", "short_description": "ssadasd", "pinned": false, "favorited": false, "date_added": "2024-11-13 16:25:36.058089"}]

None/username-J-IG_DLHxw4.json

@@ -0,0 +1 @@
+[{"name": "Charbel", "tags": ["Personal"], "link": "example.com", "emojis": "\ud83e\udd70", "color_from": "rgba(157.78125, 125.2561677631579, 125.2561677631579, 1)", "color_to": "rgba(255, 0, 0, 1)", "short_description": "ssadasd", "pinned": false, "favorited": false, "date_added": "2024-11-13 16:25:36.058089"}]

None/username-PmxrGNiqPfU.json

@@ -0,0 +1 @@
+[{"name": "Charbel", "tags": ["Personal"], "link": "example.com", "emojis": "\ud83e\udd70", "color_from": "rgba(157.78125, 125.2561677631579, 125.2561677631579, 1)", "color_to": "rgba(255, 0, 0, 1)", "short_description": "ssadasd", "pinned": false, "favorited": false, "date_added": "2024-11-13 16:25:36.058089"}]

None/username-RomFxrKCAQE.json

@@ -0,0 +1 @@
+[{"name": "Charbel", "tags": ["Personal"], "link": "example.com", "emojis": "\ud83e\udd70", "color_from": "rgba(157.78125, 125.2561677631579, 125.2561677631579, 1)", "color_to": "rgba(255, 0, 0, 1)", "short_description": "ssadasd", "pinned": false, "favorited": false, "date_added": "2024-11-13 16:25:36.058089"}]

None/username-YAMKd4ALrwo.json

@@ -0,0 +1 @@
+[{"name": "Charbel", "tags": ["Personal"], "link": "example.com", "emojis": "\ud83e\udd70", "color_from": "rgba(157.78125, 125.2561677631579, 125.2561677631579, 1)", "color_to": "rgba(255, 0, 0, 1)", "short_description": "ssadasd", "pinned": false, "favorited": false, "date_added": "2024-11-13 16:25:36.058089"}]

None/username-s4aGziZftC4.json

@@ -0,0 +1 @@
+[{"name": "Charbel", "tags": ["Personal"], "link": "example.com", "emojis": "\ud83e\udd70", "color_from": "rgba(157.78125, 125.2561677631579, 125.2561677631579, 1)", "color_to": "rgba(255, 0, 0, 1)", "short_description": "ssadasd", "pinned": false, "favorited": false, "date_added": "2024-11-13 16:25:36.058089"}]

README.md

@@ -4,7 +4,7 @@ emoji: 🍬🔗
 colorFrom: green
 colorTo: indigo
 sdk: gradio
-sdk_version: 3.40.1
+sdk_version: 5.5.0
 app_file: app.py
 pinned: true
 license: apache-2.0

app.py

@@ -4,24 +4,60 @@ from datetime import datetime
 import json
 import pandas as pd
 import os
+from watchdog.observers import Observer
+from watchdog.events import FileSystemEventHandler
+from functools import wraps
+from pathlib import Path
+import shutil
+import getpass
 
+global shortcuts_list
 shortcuts_list = []
 
+user_dir = Path(__file__).parent / datetime.now().strftime('%Y-%m-%d')
+
+# Add file change handler
+class JSONFileHandler(FileSystemEventHandler):
+    def on_modified(self, event):
+        if event.src_path.endswith('.json'):
+            load_shortcuts()
+
+# Add decorator for file operations
+def ensure_fresh_data(func):
+    @wraps(func)
+    def wrapper(*args, **kwargs):
+        load_shortcuts()  # Reload before each operation
+        result = func(*args, **kwargs)
+        return result
+    return wrapper
+
 def save_shortcuts():
-    with open('shortcuts.json', 'w') as f:
-        json.dump(shortcuts_list, f, default=str)
+    global shortcuts_list
+    path = user_dir / f"{getpass.getuser()}.json"
+    with open(path, 'w') as f:
+        json.dump(path, f, default=str)
+    load_shortcuts()
 
 def load_shortcuts():
     global shortcuts_list
+    # user_dir: Path = current_dir / datetime.now().strftime('%Y-%m-%d')
+    user_dir.mkdir(exist_ok=True)
+    path = user_dir / f"{getpass.getuser()}.json"
     if os.path.exists('shortcuts.json'):
-        with open('shortcuts.json', 'r') as f:
-            shortcuts_list = json.load(f)
-            for shortcut in shortcuts_list:
+        # Open the file in binary mode with no buffering to avoid cached data
+        with open('shortcuts.json', 'rb', buffering=0) as f:
+            data = f.read()
+            tmpshortcuts_list = json.loads(data.decode('utf-8'))
+            for shortcut in tmpshortcuts_list:
                 shortcut['date_added'] = datetime.fromisoformat(shortcut['date_added'])
+            shortcuts_list = tmpshortcuts_list
+            json.dump(tmpshortcuts_list, open(path, 'w'), default=str)
     else:
         shortcuts_list = []
 
+@ensure_fresh_data
 def add_shortcut(name, tags, link, emojis, color_from, color_to, short_description):
+    global shortcuts_list
     new_shortcut = {
         'name': name.strip(),
         'tags': [tag.strip() for tag in tags.split('/') if tag.strip()],
@@ -34,12 +70,18 @@ def add_shortcut(name, tags, link, emojis, color_from, color_to, short_descripti
         'favorited': False,
         'date_added': datetime.now().isoformat()
     }
-    shortcuts_list.append(new_shortcut)
+    shortcuts_list = shortcuts_list.append(new_shortcut)
     save_shortcuts()
     # Return updated HTML
     return update_display()
 
+def delete_directory():
+    shutil.rmtree(str(user_dir))
+
+
+@ensure_fresh_data
 def get_shortcuts_dataframe(sort_by='Recently Added', search_query='', filter_tags=[]):
+    global shortcuts_list
     datafra = pd.DataFrame(shortcuts_list)
     if datafra.empty:
         return datafra
@@ -60,7 +102,9 @@ def get_shortcuts_dataframe(sort_by='Recently Added', search_query='', filter_ta
     datafra = datafra.reset_index(drop=True)
     return datafra
 
+@ensure_fresh_data
 def generate_cards_html(datafra):
+    global shortcuts_list
     if datafra.empty:
         return "<p>No shortcuts available.</p>"
     cards_html = '<div style="display: flex; flex-wrap: wrap;">'
@@ -98,33 +142,36 @@ def generate_cards_html(datafra):
                 </div>
             """
         card_html = f"""
-        <div style="{style}" onmouseover="handleHover({idx})" id="card-{idx}" onmouseout="handleHoverOut({idx})">
+        <div style="{style}" 
+             onmouseover="window.handleHover(event, {idx})" 
+             onmouseout="window.handleHoverOut(event, {idx})">
             {labels_html}
             <div style='font-size: 40px; text-align: center;'>{shortcut['emojis']}</div>
             <h3 style='text-align: center;'>{shortcut['name']}</h3>
             <p style='text-align: center;'>{shortcut['short_description']}</p>
             <div style='text-align: center;'>
-                <button style="background: none; border: none; cursor: pointer; {pin_style}" onclick="togglePin({idx})">{pin_icon}</button>
-                <button style="background: none; border: none; cursor: pointer;" onclick="toggleFavorite({idx})">{favorite_icon}</button>
+                <button style="background: none; border: none; cursor: pointer; {pin_style}" onclick="window.togglePin({idx})">{pin_icon}</button>
+                <button style="background: none; border: none; cursor: pointer;" onclick="window.toggleFavorite({idx})">{favorite_icon}</button>
                 <button onclick="window.open('{shortcut['link']}', '_blank')">🔗 Open</button>
             </div>
-            <div id="delete-{idx}" style="display: none; position: absolute; top: 10px; left: 10px; cursor: pointer;" onclick="deleteShortcut({idx})">
+            <div id="delete-{idx}" style="display: none; position: absolute; top: 10px; left: 10px; cursor: pointer;" onclick="window.deleteShortcut({idx})">
                 🗑️
             </div>
         </div>
         """
         cards_html += card_html
     cards_html += '</div>'
-    
-    # Add JavaScript for handling hover and command/control key
-    
     return cards_html
 
+@ensure_fresh_data
 def update_display(sort_by='Recently Added', search_query='', filter_tags=[]):
+    global shortcuts_list
     datafra = get_shortcuts_dataframe(sort_by, search_query, filter_tags)
     return generate_cards_html(datafra)
 
+@ensure_fresh_data
 def toggle_pin(index):
+    global shortcuts_list
     index = int(index)
     if 0 <= index < len(shortcuts_list):
         shortcuts_list[index]['pinned'] = not shortcuts_list[index]['pinned']
@@ -132,7 +179,9 @@ def toggle_pin(index):
     # Return updated HTML
     return update_display()
 
+@ensure_fresh_data
 def toggle_favorite(index):
+    global shortcuts_list
     index = int(index)
     if 0 <= index < len(shortcuts_list):
         shortcuts_list[index]['favorited'] = not shortcuts_list[index]['favorited']
@@ -140,8 +189,21 @@ def toggle_favorite(index):
     # Return updated HTML
     return update_display()
 
+@ensure_fresh_data
+def delete_shortcut(index):
+    global shortcuts_list
+    index = int(index)
+    if 0 <= index < len(shortcuts_list):
+        del shortcuts_list[index]
+        save_shortcuts()
+    # Return updated HTML
+    return update_display()
+
 load_shortcuts()
 
+
+# JavaScript code attached to window object
+
 js_code = f"""
 function my_func() {{
 window.isCmdOrCtrl = false;
@@ -184,6 +246,22 @@ window.hideDeleteIcons = function() {{
     }});
 }};
 
+window.togglePin = function(idx) {{
+    // Implement the delete functionality, e.g., call an API endpoint
+    fetch('/toggle_pin', {{
+        method: 'POST',
+        headers: {{
+            'Content-Type': 'application/json'
+        }},
+        body: JSON.stringify({{ index: idx }})
+    }})
+    .then(response => response.json())
+    .then(data => {{
+        // Update the grid display
+        document.getElementById('grid_output').innerHTML = data.grid_html;
+    }});
+}};
+
 window.deleteShortcut = function(idx) {{
     // Implement the delete functionality, e.g., call an API endpoint
     fetch('/delete_shortcut', {{
@@ -201,8 +279,9 @@ window.deleteShortcut = function(idx) {{
 }};
 }}
 """
+
 # Build the Gradio App
-with gr.Blocks(theme="charbelgrower/Crystal",js=js_code) as demo:
+with gr.Blocks(theme="charbelgrower/Crystal", js=js_code) as demo:
 
     gr.Markdown("## Website Shortcuts")
     with gr.Row():
@@ -217,6 +296,9 @@ with gr.Blocks(theme="charbelgrower/Crystal",js=js_code) as demo:
 
     grid_output = gr.HTML(value=update_display(), elem_id="grid_output")
 
+    # demo.load(t)
+    load_shortcuts()
+
     gr.Markdown("## Add a New Website Shortcut")
     with gr.Row():
         name = gr.Textbox(label="Name")
@@ -228,10 +310,12 @@ with gr.Blocks(theme="charbelgrower/Crystal",js=js_code) as demo:
         color_to = gr.ColorPicker(label="Gradient Color To")
     short_description = gr.Textbox(label="Short Description")
     add_button = gr.Button("Add Shortcut")
-
+    
     # Update display when filters change
-    def refresh_display(search_query, sort_by, filter_tags):
-        return update_display(sort_by, search_query, filter_tags)
+    def refresh_display(search_query='', sort_by='Recently Added', filter_tags=[]):
+        grid_html = update_display(sort_by, search_query, filter_tags)
+        filter_tags_options = get_all_tags()
+        return grid_html, gr.update(choices=filter_tags_options)
 
     search_bar.change(fn=refresh_display, inputs=[search_bar, sort_options, filter_tags], outputs=grid_output)
     sort_options.change(fn=refresh_display, inputs=[search_bar, sort_options, filter_tags], outputs=grid_output)
@@ -243,38 +327,53 @@ with gr.Blocks(theme="charbelgrower/Crystal",js=js_code) as demo:
         inputs=[name, tags, link, emojis, color_from, color_to, short_description],
         outputs=grid_output
     )
-# Expose endpoints for toggle functions
+    state = gr.State(value=[], delete_callback=lambda v: print("STATE DELETED"))
+    load_shortcuts()
+    # demo.load(get_shortcuts_dataframe)
+# Expose endpoints for custom functions using FastAPI
 api = FastAPI()
+load_shortcuts()
+
 
-@api.post("/toggle_pin")
-async def toggle_pin_route(request: Request):
+@api.post('/save_shortcut')
+async def save_shortcut_endpoint(request: Request):
     data = await request.json()
-    index = data['index']
-    grid_html = toggle_pin(index)
+    grid_html = save_shortcut(data)
     return {'grid_html': grid_html}
 
-@api.post("/delete_shortcut")
-async def delete_shortcut_route(request: Request):
+@api.post('/delete_shortcut')
+async def delete_shortcut_endpoint(request: Request):
     data = await request.json()
-    index = int(data['index'])
-    if 0 <= index < len(shortcuts_list):
-        del shortcuts_list[index]
-        save_shortcuts()
-    # Return updated HTML
-    grid_html = update_display()
+    index = data.get('index')
+    grid_html = delete_shortcut(index)
     return {'grid_html': grid_html}
 
-@api.post("/toggle_favorite")
-async def toggle_favorite_route(request: Request):
+@api.post('/toggle_pin')
+async def toggle_pin_endpoint(request: Request):
     data = await request.json()
-    index = data['index']
-    grid_html = toggle_favorite(index)
+    index = data.get('index')
+    grid_html = toggle_pin(index)
     return {'grid_html': grid_html}
 
-# Mount the Gradio app onto the FastAPI app
-app = gr.mount_gradio_app(api, demo, path="/")
+@api.post('/toggle_favorite')
+async def toggle_favorite_endpoint(request: Request):
+    data = await request.json()
+    index = data.get('index')
+    grid_html = toggle_favorite(index)
+    return {'grid_html': grid_html}
 
+app = gr.mount_gradio_app(api, demo,"/")
+# Initialize file watcher
 if __name__ == "__main__":
     import uvicorn
-    load_shortcuts()
-    uvicorn.run(app, host="127.0.0.1", port=7860)
+    event_handler = JSONFileHandler()
+    observer = Observer()
+    observer.schedule(event_handler, path=str(user_dir / f"{getpass.getuser()}.json"), recursive=False)
+    observer.start()
+
+    try:
+        uvicorn.run(app, host="127.0.0.1", port=7860)
+    finally:
+        demo.unload(delete_directory)
+        observer.stop()
+        observer.join()

requirements.txt

@@ -1,7 +1,7 @@
 APScheduler
 black
 datasets
-gradio==3.40.1
+gradio==5.5.0
 gradio[oauth]
 gradio_client
 huggingface-hub>=0.18.0
@@ -14,4 +14,5 @@ transformers
 tokenizers>=0.15.0
 sentencepiece
 uvicorn
-fastapi
+fastapi
+watchdog>=2.1.6

shortcuts.json

@@ -1 +1 @@
-[{"name": "", "tags": [], "link": "", "emojis": "", "color_from": "#000000", "color_to": "#000000", "short_description": "", "pinned": false, "favorited": false, "date_added": "2024-11-12 23:05:43.625612"}]
+[{"name": "Charbel", "tags": ["Personal"], "link": "example.com", "emojis": "\ud83e\udd70", "color_from": "rgba(157.78125, 125.2561677631579, 125.2561677631579, 1)", "color_to": "rgba(255, 0, 0, 1)", "short_description": "ssadasd", "pinned": false, "favorited": false, "date_added": "2024-11-13T16:25:36.058089"}]