gradio 5.5.0 hover functional but not deleting

app.py

@@ -98,7 +98,7 @@ def generate_cards_html(datafra):
                 </div>
             """
         card_html = f"""
-        <div style="{style}" onmouseover="handleHover(event, {idx})" onmouseout="handleHoverOut(event, {idx})">
+        <div style="{style}" onmouseover="handleHover({idx})" id="card-{idx}" onmouseout="handleHoverOut({idx})">
             {labels_html}
             <div style='font-size: 40px; text-align: center;'>{shortcut['emojis']}</div>
             <h3 style='text-align: center;'>{shortcut['name']}</h3>
@@ -117,65 +117,7 @@ def generate_cards_html(datafra):
     cards_html += '</div>'
     
     # Add JavaScript for handling hover and command/control key
-    cards_html += """
-    <script>
-        let isCmdOrCtrl = false;
-
-        window.addEventListener('keydown', function(e) {
-            if (e.key === 'Meta' || e.key === 'Control') {
-                isCmdOrCtrl = true;
-                showDeleteIcons();
-            }
-        });
-
-        window.addEventListener('keyup', function(e) {
-            if (e.key === 'Meta' || e.key === 'Control') {
-                isCmdOrCtrl = false;
-                hideDeleteIcons();
-            }
-        });
-
-        function handleHover(event, idx) {
-            if (isCmdOrCtrl) {
-                document.getElementById(`delete-${idx}`).style.display = 'block';
-            }
-        }
-
-        function handleHoverOut(event, idx) {
-            document.getElementById(`delete-${idx}`).style.display = 'none';
-        }
-
-        function showDeleteIcons() {
-            const deleteIcons = document.querySelectorAll('[id="delete-1"]');
-            deleteIcons.forEach(icon => {
-                icon.style.display = 'block';
-            });
-        }
-
-        function hideDeleteIcons() {
-            const deleteIcons = document.querySelectorAll('[id^="delete-"]');
-            deleteIcons.forEach(icon => {
-                icon.style.display = 'none';
-            });
-        }
-
-        function deleteShortcut(idx) {
-            // Implement the delete functionality, e.g., call an API endpoint
-            fetch('/delete_shortcut', {
-                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;
-            });
-        }
-    </script>
-    """
+    
     return cards_html
 
 def update_display(sort_by='Recently Added', search_query='', filter_tags=[]):
@@ -200,8 +142,67 @@ def toggle_favorite(index):
 
 load_shortcuts()
 
+js_code = f"""
+function my_func() {{
+window.isCmdOrCtrl = false;
+
+window.addEventListener('keydown', function(e) {{
+    if (e.key === 'Meta' || e.key === 'Control') {{
+        window.isCmdOrCtrl = true;
+        window.showDeleteIcons();
+    }}
+}});
+
+window.addEventListener('keyup', function(e) {{
+    if (e.key === 'Meta' || e.key === 'Control') {{
+        window.isCmdOrCtrl = false;
+        window.hideDeleteIcons();
+    }}
+}});
+
+window.handleHover = function(event, idx) {{
+    if (window.isCmdOrCtrl) {{
+        document.getElementById('card-' + idx).style.display = 'block';
+    }}
+}};
+
+window.handleHoverOut = function(event, idx) {{
+    document.getElementById('card-'+ idx).style.display = 'none';
+}};
+
+window.showDeleteIcons = function() {{
+    const deleteIcons = document.querySelectorAll('[id^="delete-"]');
+    deleteIcons.forEach(icon => {{
+        icon.style.display = 'block';
+    }});
+}};
+
+window.hideDeleteIcons = function() {{
+    const deleteIcons = document.querySelectorAll('[id^="delete-"]');
+    deleteIcons.forEach(icon => {{
+        icon.style.display = 'none';
+    }});
+}};
+
+window.deleteShortcut = function(idx) {{
+    // Implement the delete functionality, e.g., call an API endpoint
+    fetch('/delete_shortcut', {{
+        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;
+    }});
+}};
+}}
+"""
 # Build the Gradio App
-with gr.Blocks(theme="charbelgrower/Crystal") as demo:
+with gr.Blocks(theme="charbelgrower/Crystal",js=js_code) as demo:
 
     gr.Markdown("## Website Shortcuts")
     with gr.Row():
@@ -242,8 +243,6 @@ with gr.Blocks(theme="charbelgrower/Crystal") as demo:
         inputs=[name, tags, link, emojis, color_from, color_to, short_description],
         outputs=grid_output
     )
-
-
 # Expose endpoints for toggle functions
 api = FastAPI()
 
@@ -254,6 +253,17 @@ async def toggle_pin_route(request: Request):
     grid_html = toggle_pin(index)
     return {'grid_html': grid_html}
 
+@api.post("/delete_shortcut")
+async def delete_shortcut_route(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()
+    return {'grid_html': grid_html}
+
 @api.post("/toggle_favorite")
 async def toggle_favorite_route(request: Request):
     data = await request.json()
@@ -267,4 +277,4 @@ app = gr.mount_gradio_app(api, demo, path="/")
 if __name__ == "__main__":
     import uvicorn
     load_shortcuts()
-    uvicorn.run(app, host="0.0.0.0", port=7860)
+    uvicorn.run(app, host="127.0.0.1", port=7860)

debugsrc.html

@@ -0,0 +1,118 @@
+
+<!doctype html>
+<html
+	lang="en"
+	style="
+		margin: 0;
+		padding: 0;
+		min-height: 100%;
+		display: flex;
+		flex-direction: column;
+	"
+>
+	<head>
+		<meta charset="utf-8" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1, shrink-to-fit=no"
+		/>
+
+		<style>
+			:root {
+				--bg: #00000;
+				--col:   #27272a;
+				--bg-dark: #0f0f11;
+				--col-dark: #f4f4f5;
+			}
+
+
+			body {
+				background: var(--bg);
+				color: var(--col);
+				font-family: Arial, Helvetica, sans-serif;
+			}
+
+			@media (prefers-color-scheme: dark) {
+				body {
+					background: var(--bg-dark);
+					color: var(--col-dark);
+				}
+			}
+		</style>
+
+		<meta property="og:url" content="https://gradio.app/" />
+		<meta property="og:type" content="website" />
+		<meta property="og:image" content="" />
+		<meta property="og:title" content="Gradio" />
+		<meta
+			property="og:description"
+			content=""
+		/>
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta name="twitter:creator" content="@teamGradio" />
+		<meta name="twitter:title" content="Gradio" />
+		<meta
+			name="twitter:description"
+			content=""
+		/>
+		<meta name="twitter:image" content="" />
+
+		<script data-gradio-mode>
+			window.__gradio_mode__ = "app";
+			window.iFrameResizer = {
+				heightCalculationMethod: "taggedElement"
+			};
+			window.parent?.postMessage(
+				{ type: "SET_SCROLLING", enabled: false },
+				"*"
+			);
+		</script>
+
+		<script>
+			window.gradio_config = {"version":"5.5.0","api_prefix":"/gradio_api","mode":"blocks","app_id":15757525916552852410,"dev_mode":false,"analytics_enabled":true,"components":[{"id":1,"type":"markdown","props":{"value":"## Website Shortcuts","show_label":false,"rtl":false,"latex_delimiters":[{"left":"$$","right":"$$","display":true}],"visible":true,"elem_classes":[],"sanitize_html":true,"line_breaks":false,"header_links":false,"show_copy_button":false,"container":false,"name":"markdown","_selectable":false},"skip_api":false,"component_class_id":"47f4a7917d7d455055ddfb54d4147dec","key":null,"api_info":{"type":"string"},"api_info_as_input":{"type":"string"},"api_info_as_output":{"type":"string"},"example_inputs":"# Hello!"},{"id":2,"type":"row","props":{"variant":"default","visible":true,"equal_height":false,"show_progress":false,"name":"row"},"skip_api":true,"component_class_id":"313a53a4f76f80198b3414a1821e1fa2","key":null},{"id":3,"type":"textbox","props":{"lines":1,"max_lines":20,"label":"Search","show_label":true,"container":true,"min_width":160,"visible":true,"autofocus":false,"autoscroll":true,"elem_classes":[],"type":"text","rtl":false,"show_copy_button":false,"submit_btn":false,"stop_btn":false,"name":"textbox","_selectable":false},"skip_api":false,"component_class_id":"09c75848e5328f6330816b435be2b6cb","key":null,"api_info":{"type":"string"},"api_info_as_input":{"type":"string"},"api_info_as_output":{"type":"string"},"example_inputs":"Hello!!"},{"id":4,"type":"dropdown","props":{"choices":[["Recently Added","Recently Added"],["Alphabetical","Alphabetical"],["Favorites","Favorites"]],"value":"Recently Added","type":"value","allow_custom_value":false,"filterable":true,"label":"Sort By","show_label":true,"container":true,"min_width":160,"visible":true,"elem_classes":[],"name":"dropdown","_selectable":false},"skip_api":false,"component_class_id":"2fe3459ec05e4acfc97195632a045e7a","key":null,"api_info":{"type":"string","enum":["Recently Added","Alphabetical","Favorites"]},"api_info_as_input":{"type":"string","enum":["Recently Added","Alphabetical","Favorites"]},"api_info_as_output":{"type":"string","enum":["Recently Added","Alphabetical","Favorites"]},"example_inputs":"Recently Added"},{"id":5,"type":"form","props":{"scale":2,"min_width":320,"name":"form"},"skip_api":true,"component_class_id":"829df243394d805ac7679e56e074d9b8","key":null},{"id":6,"type":"checkboxgroup","props":{"choices":[["Main","Main"],["Grower","Grower"]],"value":[],"type":"value","label":"Filter Tags","show_label":true,"container":true,"min_width":160,"visible":true,"elem_classes":[],"name":"checkboxgroup","_selectable":false},"skip_api":false,"component_class_id":"9c13e838e2c274b81df4ed33732ec952","key":null,"api_info":{"items":{"enum":["Main","Grower"],"type":"string"},"title":"Checkbox Group","type":"array"},"api_info_as_input":{"items":{"enum":["Main","Grower"],"type":"string"},"title":"Checkbox Group","type":"array"},"api_info_as_output":{"items":{"enum":["Main","Grower"],"type":"string"},"title":"Checkbox Group","type":"array"},"example_inputs":["Main"]},{"id":7,"type":"html","props":{"value":"\u003cdiv style=\"display: flex; flex-wrap: wrap;\"\u003e\n        \u003cdiv style=\"\n            background: linear-gradient(135deg, #000000, #000000);\n            padding: 20px;\n            border-radius: 10px;\n            position: relative;\n            color: white;\n            width: 300px;\n            margin: 10px;\n            cursor: pointer;\n        \" onmouseover=\"handleHover(event, 0)\" onmouseout=\"handleHoverOut(event, 0)\"\u003e\n            \n            \u003cdiv style=\u0027font-size: 40px; text-align: center;\u0027\u003e\u003c/div\u003e\n            \u003ch3 style=\u0027text-align: center;\u0027\u003e\u003c/h3\u003e\n            \u003cp style=\u0027text-align: center;\u0027\u003e\u003c/p\u003e\n            \u003cdiv style=\u0027text-align: center;\u0027\u003e\n                \u003cbutton style=\"background: none; border: none; cursor: pointer; opacity: 0.3; text-decoration: line-through;\" onclick=\"togglePin(0)\"\u003e📍\u003c/button\u003e\n                \u003cbutton style=\"background: none; border: none; cursor: pointer;\" onclick=\"toggleFavorite(0)\"\u003e🤍\u003c/button\u003e\n                \u003cbutton onclick=\"window.open(\u0027\u0027, \u0027_blank\u0027)\"\u003e🔗 Open\u003c/button\u003e\n            \u003c/div\u003e\n            \u003cdiv id=\"delete-0\" style=\"display: none; position: absolute; top: 10px; left: 10px; cursor: pointer;\" onclick=\"deleteShortcut(0)\"\u003e\n                🗑️\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \n        \u003cdiv style=\"\n            background: linear-gradient(135deg, #931010, #33417a);\n            padding: 20px;\n            border-radius: 10px;\n            position: relative;\n            color: white;\n            width: 300px;\n            margin: 10px;\n            cursor: pointer;\n        \" onmouseover=\"handleHover(event, 1)\" onmouseout=\"handleHoverOut(event, 1)\"\u003e\n            \n                \u003cdiv style=\u0027position: absolute; top: 10px; right: 10px; font-size: 24px;\u0027\u003e\n                    \n                    ❤️\n                \u003c/div\u003e\n            \n            \u003cdiv style=\u0027font-size: 40px; text-align: center;\u0027\u003e⚡\u003c/div\u003e\n            \u003ch3 style=\u0027text-align: center;\u0027\u003eCharbel\u003c/h3\u003e\n            \u003cp style=\u0027text-align: center;\u0027\u003easdasfd\u003c/p\u003e\n            \u003cdiv style=\u0027text-align: center;\u0027\u003e\n                \u003cbutton style=\"background: none; border: none; cursor: pointer; opacity: 0.3; text-decoration: line-through;\" onclick=\"togglePin(1)\"\u003e📍\u003c/button\u003e\n                \u003cbutton style=\"background: none; border: none; cursor: pointer;\" onclick=\"toggleFavorite(1)\"\u003e❤️\u003c/button\u003e\n                \u003cbutton onclick=\"window.open(\u0027http://example.com\u0027, \u0027_blank\u0027)\"\u003e🔗 Open\u003c/button\u003e\n            \u003c/div\u003e\n            \u003cdiv id=\"delete-1\" style=\"display: none; position: absolute; top: 10px; left: 10px; cursor: pointer;\" onclick=\"deleteShortcut(1)\"\u003e\n                🗑️\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \n        \u003cdiv style=\"\n            background: linear-gradient(135deg, #931010, #33417a);\n            padding: 20px;\n            border-radius: 10px;\n            position: relative;\n            color: white;\n            width: 300px;\n            margin: 10px;\n            cursor: pointer;\n        \" onmouseover=\"handleHover(event, 2)\" onmouseout=\"handleHoverOut(event, 2)\"\u003e\n            \n            \u003cdiv style=\u0027font-size: 40px; text-align: center;\u0027\u003e⚡\u003c/div\u003e\n            \u003ch3 style=\u0027text-align: center;\u0027\u003eCharbel\u003c/h3\u003e\n            \u003cp style=\u0027text-align: center;\u0027\u003easdasfd\u003c/p\u003e\n            \u003cdiv style=\u0027text-align: center;\u0027\u003e\n                \u003cbutton style=\"background: none; border: none; cursor: pointer; opacity: 0.3; text-decoration: line-through;\" onclick=\"togglePin(2)\"\u003e📍\u003c/button\u003e\n                \u003cbutton style=\"background: none; border: none; cursor: pointer;\" onclick=\"toggleFavorite(2)\"\u003e🤍\u003c/button\u003e\n                \u003cbutton onclick=\"window.open(\u0027http://example.com\u0027, \u0027_blank\u0027)\"\u003e🔗 Open\u003c/button\u003e\n            \u003c/div\u003e\n            \u003cdiv id=\"delete-2\" style=\"display: none; position: absolute; top: 10px; left: 10px; cursor: pointer;\" onclick=\"deleteShortcut(2)\"\u003e\n                🗑️\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e\n    \u003cscript\u003e\n        let isCmdOrCtrl = false;\n\n        window.addEventListener(\u0027keydown\u0027, function(e) {\n            if (e.key === \u0027Meta\u0027 || e.key === \u0027Control\u0027) {\n                isCmdOrCtrl = true;\n                showDeleteIcons();\n            }\n        });\n\n        window.addEventListener(\u0027keyup\u0027, function(e) {\n            if (e.key === \u0027Meta\u0027 || e.key === \u0027Control\u0027) {\n                isCmdOrCtrl = false;\n                hideDeleteIcons();\n            }\n        });\n\n        function handleHover(event, idx) {\n            if (isCmdOrCtrl) {\n                document.getElementById(`delete-${idx}`).style.display = \u0027block\u0027;\n            }\n        }\n\n        function handleHoverOut(event, idx) {\n            document.getElementById(`delete-${idx}`).style.display = \u0027none\u0027;\n        }\n\n        function showDeleteIcons() {\n            const deleteIcons = document.querySelectorAll(\u0027[id^=\"delete-\"]\u0027);\n            deleteIcons.forEach(icon =\u003e {\n                icon.style.display = \u0027block\u0027;\n            });\n        }\n\n        function hideDeleteIcons() {\n            const deleteIcons = document.querySelectorAll(\u0027[id^=\"delete-\"]\u0027);\n            deleteIcons.forEach(icon =\u003e {\n                icon.style.display = \u0027none\u0027;\n            });\n        }\n\n        function deleteShortcut(idx) {\n            fetch(\u0027/delete_shortcut\u0027, {\n                method: \u0027POST\u0027,\n                headers: {\n                    \u0027Content-Type\u0027: \u0027application/json\u0027\n                },\n                body: JSON.stringify({ index: idx })\n            })\n            .then(response =\u003e response.json())\n            .then(data =\u003e {\n                document.getElementById(\u0027grid_output\u0027).innerHTML = data.grid_html;\n            });\n        }\n    \u003c/script\u003e\n    ","show_label":false,"visible":true,"elem_id":"grid_output","elem_classes":[],"name":"html","_selectable":false},"skip_api":false,"component_class_id":"f8ae0fac356b5e9e9f5997c9f39381eb","key":null,"api_info":{"type":"string"},"api_info_as_input":{"type":"string"},"api_info_as_output":{"type":"string"},"example_inputs":"\u003cp\u003eHello\u003c/p\u003e"},{"id":8,"type":"markdown","props":{"value":"## Add a New Website Shortcut","show_label":false,"rtl":false,"latex_delimiters":[{"left":"$$","right":"$$","display":true}],"visible":true,"elem_classes":[],"sanitize_html":true,"line_breaks":false,"header_links":false,"show_copy_button":false,"container":false,"name":"markdown","_selectable":false},"skip_api":false,"component_class_id":"47f4a7917d7d455055ddfb54d4147dec","key":null,"api_info":{"type":"string"},"api_info_as_input":{"type":"string"},"api_info_as_output":{"type":"string"},"example_inputs":"# Hello!"},{"id":9,"type":"row","props":{"variant":"default","visible":true,"equal_height":false,"show_progress":false,"name":"row"},"skip_api":true,"component_class_id":"313a53a4f76f80198b3414a1821e1fa2","key":null},{"id":10,"type":"textbox","props":{"lines":1,"max_lines":20,"label":"Name","show_label":true,"container":true,"min_width":160,"visible":true,"autofocus":false,"autoscroll":true,"elem_classes":[],"type":"text","rtl":false,"show_copy_button":false,"submit_btn":false,"stop_btn":false,"name":"textbox","_selectable":false},"skip_api":false,"component_class_id":"09c75848e5328f6330816b435be2b6cb","key":null,"api_info":{"type":"string"},"api_info_as_input":{"type":"string"},"api_info_as_output":{"type":"string"},"example_inputs":"Hello!!"},{"id":11,"type":"textbox","props":{"lines":1,"max_lines":20,"label":"Link","show_label":true,"container":true,"min_width":160,"visible":true,"autofocus":false,"autoscroll":true,"elem_classes":[],"type":"text","rtl":false,"show_copy_button":false,"submit_btn":false,"stop_btn":false,"name":"textbox","_selectable":false},"skip_api":false,"component_class_id":"09c75848e5328f6330816b435be2b6cb","key":null,"api_info":{"type":"string"},"api_info_as_input":{"type":"string"},"api_info_as_output":{"type":"string"},"example_inputs":"Hello!!"},{"id":12,"type":"form","props":{"scale":2,"min_width":320,"name":"form"},"skip_api":true,"component_class_id":"829df243394d805ac7679e56e074d9b8","key":null},{"id":13,"type":"row","props":{"variant":"default","visible":true,"equal_height":false,"show_progress":false,"name":"row"},"skip_api":true,"component_class_id":"313a53a4f76f80198b3414a1821e1fa2","key":null},{"id":14,"type":"textbox","props":{"lines":1,"max_lines":20,"label":"Tags (separate levels with \u0027/\u0027)","show_label":true,"container":true,"min_width":160,"visible":true,"autofocus":false,"autoscroll":true,"elem_classes":[],"type":"text","rtl":false,"show_copy_button":false,"submit_btn":false,"stop_btn":false,"name":"textbox","_selectable":false},"skip_api":false,"component_class_id":"09c75848e5328f6330816b435be2b6cb","key":null,"api_info":{"type":"string"},"api_info_as_input":{"type":"string"},"api_info_as_output":{"type":"string"},"example_inputs":"Hello!!"},{"id":15,"type":"textbox","props":{"lines":1,"max_lines":20,"label":"Emojis","show_label":true,"container":true,"min_width":160,"visible":true,"autofocus":false,"autoscroll":true,"elem_classes":[],"type":"text","rtl":false,"show_copy_button":false,"submit_btn":false,"stop_btn":false,"name":"textbox","_selectable":false},"skip_api":false,"component_class_id":"09c75848e5328f6330816b435be2b6cb","key":null,"api_info":{"type":"string"},"api_info_as_input":{"type":"string"},"api_info_as_output":{"type":"string"},"example_inputs":"Hello!!"},{"id":16,"type":"colorpicker","props":{"label":"Gradient Color From","show_label":true,"container":true,"min_width":160,"visible":true,"elem_classes":[],"name":"colorpicker","_selectable":false},"skip_api":false,"component_class_id":"b6e29717f9da6f8ee9e68786bdcdf52b","key":null,"api_info":{"type":"string"},"api_info_as_input":{"type":"string"},"api_info_as_output":{"type":"string"},"example_inputs":"#000000"},{"id":17,"type":"colorpicker","props":{"label":"Gradient Color To","show_label":true,"container":true,"min_width":160,"visible":true,"elem_classes":[],"name":"colorpicker","_selectable":false},"skip_api":false,"component_class_id":"b6e29717f9da6f8ee9e68786bdcdf52b","key":null,"api_info":{"type":"string"},"api_info_as_input":{"type":"string"},"api_info_as_output":{"type":"string"},"example_inputs":"#000000"},{"id":18,"type":"form","props":{"scale":2,"min_width":320,"name":"form"},"skip_api":true,"component_class_id":"829df243394d805ac7679e56e074d9b8","key":null},{"id":19,"type":"textbox","props":{"lines":1,"max_lines":20,"label":"Short Description","show_label":true,"container":true,"min_width":160,"visible":true,"autofocus":false,"autoscroll":true,"elem_classes":[],"type":"text","rtl":false,"show_copy_button":false,"submit_btn":false,"stop_btn":false,"name":"textbox","_selectable":false},"skip_api":false,"component_class_id":"09c75848e5328f6330816b435be2b6cb","key":null,"api_info":{"type":"string"},"api_info_as_input":{"type":"string"},"api_info_as_output":{"type":"string"},"example_inputs":"Hello!!"},{"id":20,"type":"button","props":{"value":"Add Shortcut","variant":"secondary","visible":true,"interactive":true,"elem_classes":[],"name":"button","_selectable":false},"skip_api":true,"component_class_id":"2cef5886dcd05b2d9540cf332d83a683","key":null},{"id":21,"type":"form","props":{"scale":0,"min_width":0,"name":"form"},"skip_api":true,"component_class_id":"829df243394d805ac7679e56e074d9b8","key":null},{"id":22,"type":"form","props":{"scale":0,"min_width":0,"name":"form"},"skip_api":true,"component_class_id":"829df243394d805ac7679e56e074d9b8","key":null}],"css":"","connect_heartbeat":false,"js":"\n    \u003cscript\u003e\n        let isCmdOrCtrl = false;\n\n        window.addEventListener(\u0027keydown\u0027, function(e) {\n            if (e.key === \u0027Meta\u0027 || e.key === \u0027Control\u0027) {\n                isCmdOrCtrl = true;\n                showDeleteIcons();\n            }\n        });\n\n        window.addEventListener(\u0027keyup\u0027, function(e) {\n            if (e.key === \u0027Meta\u0027 || e.key === \u0027Control\u0027) {\n                isCmdOrCtrl = false;\n                hideDeleteIcons();\n            }\n        });\n\n        function handleHover(idx) {\n            if (isCmdOrCtrl) {\n                document.getElementById(`delete-${idx}`).style.display = \u0027block\u0027;\n            }\n        }\n\n        function handleHoverOut(event, idx) {\n            document.getElementById(`delete-${idx}`).style.display = \u0027none\u0027;\n        }\n\n        function showDeleteIcons() {\n            const deleteIcons = document.querySelectorAll(\u0027[id^=\"delete-\"]\u0027);\n            deleteIcons.forEach(icon =\u003e {\n                icon.style.display = \u0027block\u0027;\n            });\n        }\n\n        function hideDeleteIcons() {\n            const deleteIcons = document.querySelectorAll(\u0027[id^=\"delete-\"]\u0027);\n            deleteIcons.forEach(icon =\u003e {\n                icon.style.display = \u0027none\u0027;\n            });\n        }\n\n        function deleteShortcut(idx) {\n            // Implement the delete functionality, e.g., call an API endpoint\n            fetch(\u0027/delete_shortcut\u0027, {\n                method: \u0027POST\u0027,\n                headers: {\n                    \u0027Content-Type\u0027: \u0027application/json\u0027\n                },\n                body: JSON.stringify({ index: idx })\n            })\n            .then(response =\u003e response.json())\n            .then(data =\u003e {\n                // Update the grid display\n                document.getElementById(\u0027grid_output\u0027).innerHTML = data.grid_html;\n            });\n        }\n    \u003c/script\u003e\n    ","head":"","title":"Gradio","space_id":null,"enable_queue":true,"show_error":true,"show_api":true,"is_colab":false,"max_file_size":null,"stylesheets":["https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600\u0026display=swap","https://fonts.googleapis.com/css2?family=Inter:wght@400;600\u0026display=swap"],"theme":"charbelgrower/Crystal","protocol":"sse_v3","body_css":{"body_background_fill":"#00000","body_text_color":"#27272a","body_background_fill_dark":"#0f0f11","body_text_color_dark":"#f4f4f5"},"fill_height":false,"fill_width":false,"theme_hash":"f322243f01b4f40698dc227c874ccdcbba613448116f2810abfd7c916537b3e9","layout":{"id":0,"children":[{"id":1},{"id":2,"children":[{"id":5,"children":[{"id":3},{"id":4}]}]},{"id":21,"children":[{"id":6}]},{"id":7},{"id":8},{"id":9,"children":[{"id":12,"children":[{"id":10},{"id":11}]}]},{"id":13,"children":[{"id":18,"children":[{"id":14},{"id":15}]},{"id":16},{"id":17}]},{"id":22,"children":[{"id":19}]},{"id":20}]},"dependencies":[{"id":0,"targets":[[3,"change"]],"inputs":[3,4,6],"outputs":[7],"backend_fn":true,"js":null,"queue":true,"api_name":"refresh_display","scroll_to_output":false,"show_progress":"full","batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"always_last","show_api":true,"zerogpu":false,"rendered_in":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null},{"id":1,"targets":[[4,"change"]],"inputs":[3,4,6],"outputs":[7],"backend_fn":true,"js":null,"queue":true,"api_name":"refresh_display_1","scroll_to_output":false,"show_progress":"full","batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"always_last","show_api":true,"zerogpu":false,"rendered_in":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null},{"id":2,"targets":[[6,"change"]],"inputs":[3,4,6],"outputs":[7],"backend_fn":true,"js":null,"queue":true,"api_name":"refresh_display_2","scroll_to_output":false,"show_progress":"full","batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"always_last","show_api":true,"zerogpu":false,"rendered_in":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null},{"id":3,"targets":[[20,"click"]],"inputs":[10,14,11,15,16,17,19],"outputs":[7],"backend_fn":true,"js":null,"queue":true,"api_name":"add_shortcut","scroll_to_output":false,"show_progress":"full","batch":false,"max_batch_size":4,"cancels":[],"types":{"generator":false,"cancel":false},"collects_event_data":false,"trigger_after":null,"trigger_only_on_success":false,"trigger_mode":"once","show_api":true,"zerogpu":false,"rendered_in":null,"connection":"sse","time_limit":null,"stream_every":0.5,"like_user_message":false,"event_specific_args":null}],"root":"http://127.0.0.1:7860","username":null};</script><script>window.gradio_api_info = {"named_endpoints":{"/refresh_display":{"parameters":[{"label":"Search","parameter_name":"search_query","parameter_has_default":false,"parameter_default":null,"type":{"type":"string"},"python_type":{"type":"str","description":""},"component":"Textbox","example_input":"Hello!!"},{"label":"Sort By","parameter_name":"sort_by","parameter_has_default":true,"parameter_default":"Recently Added","type":{"type":"string","enum":["Recently Added","Alphabetical","Favorites"]},"python_type":{"type":"Literal[\u0027Recently Added\u0027, \u0027Alphabetical\u0027, \u0027Favorites\u0027]","description":""},"component":"Dropdown","example_input":"Recently Added"},{"label":"Filter Tags","parameter_name":"filter_tags","parameter_has_default":true,"parameter_default":[],"type":{"items":{"enum":["Main","Grower"],"type":"string"},"title":"Checkbox Group","type":"array"},"python_type":{"type":"List[Literal[\u0027Main\u0027, \u0027Grower\u0027]]","description":""},"component":"Checkboxgroup","example_input":["Main"]}],"returns":[{"label":"value_7","type":{"type":"string"},"python_type":{"type":"str","description":""},"component":"Html"}],"show_api":true},"/refresh_display_1":{"parameters":[{"label":"Search","parameter_name":"search_query","parameter_has_default":false,"parameter_default":null,"type":{"type":"string"},"python_type":{"type":"str","description":""},"component":"Textbox","example_input":"Hello!!"},{"label":"Sort By","parameter_name":"sort_by","parameter_has_default":true,"parameter_default":"Recently Added","type":{"type":"string","enum":["Recently Added","Alphabetical","Favorites"]},"python_type":{"type":"Literal[\u0027Recently Added\u0027, \u0027Alphabetical\u0027, \u0027Favorites\u0027]","description":""},"component":"Dropdown","example_input":"Recently Added"},{"label":"Filter Tags","parameter_name":"filter_tags","parameter_has_default":true,"parameter_default":[],"type":{"items":{"enum":["Main","Grower"],"type":"string"},"title":"Checkbox Group","type":"array"},"python_type":{"type":"List[Literal[\u0027Main\u0027, \u0027Grower\u0027]]","description":""},"component":"Checkboxgroup","example_input":["Main"]}],"returns":[{"label":"value_7","type":{"type":"string"},"python_type":{"type":"str","description":""},"component":"Html"}],"show_api":true},"/refresh_display_2":{"parameters":[{"label":"Search","parameter_name":"search_query","parameter_has_default":false,"parameter_default":null,"type":{"type":"string"},"python_type":{"type":"str","description":""},"component":"Textbox","example_input":"Hello!!"},{"label":"Sort By","parameter_name":"sort_by","parameter_has_default":true,"parameter_default":"Recently Added","type":{"type":"string","enum":["Recently Added","Alphabetical","Favorites"]},"python_type":{"type":"Literal[\u0027Recently Added\u0027, \u0027Alphabetical\u0027, \u0027Favorites\u0027]","description":""},"component":"Dropdown","example_input":"Recently Added"},{"label":"Filter Tags","parameter_name":"filter_tags","parameter_has_default":true,"parameter_default":[],"type":{"items":{"enum":["Main","Grower"],"type":"string"},"title":"Checkbox Group","type":"array"},"python_type":{"type":"List[Literal[\u0027Main\u0027, \u0027Grower\u0027]]","description":""},"component":"Checkboxgroup","example_input":["Main"]}],"returns":[{"label":"value_7","type":{"type":"string"},"python_type":{"type":"str","description":""},"component":"Html"}],"show_api":true},"/add_shortcut":{"parameters":[{"label":"Name","parameter_name":"name","parameter_has_default":false,"parameter_default":null,"type":{"type":"string"},"python_type":{"type":"str","description":""},"component":"Textbox","example_input":"Hello!!"},{"label":"Tags (separate levels with \u0027/\u0027)","parameter_name":"tags","parameter_has_default":false,"parameter_default":null,"type":{"type":"string"},"python_type":{"type":"str","description":""},"component":"Textbox","example_input":"Hello!!"},{"label":"Link","parameter_name":"link","parameter_has_default":false,"parameter_default":null,"type":{"type":"string"},"python_type":{"type":"str","description":""},"component":"Textbox","example_input":"Hello!!"},{"label":"Emojis","parameter_name":"emojis","parameter_has_default":false,"parameter_default":null,"type":{"type":"string"},"python_type":{"type":"str","description":""},"component":"Textbox","example_input":"Hello!!"},{"label":"Gradient Color From","parameter_name":"color_from","parameter_has_default":false,"parameter_default":null,"type":{"type":"string"},"python_type":{"type":"str","description":""},"component":"Colorpicker","example_input":"#000000"},{"label":"Gradient Color To","parameter_name":"color_to","parameter_has_default":false,"parameter_default":null,"type":{"type":"string"},"python_type":{"type":"str","description":""},"component":"Colorpicker","example_input":"#000000"},{"label":"Short Description","parameter_name":"short_description","parameter_has_default":false,"parameter_default":null,"type":{"type":"string"},"python_type":{"type":"str","description":""},"component":"Textbox","example_input":"Hello!!"}],"returns":[{"label":"value_7","type":{"type":"string"},"python_type":{"type":"str","description":""},"component":"Html"}],"show_api":true}},"unnamed_endpoints":{}};
+				
+			</script>
+
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link
+			rel="preconnect"
+			href="https://fonts.gstatic.com"
+			crossorigin="anonymous"
+		/>
+		<script
+			src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"
+			async
+		></script>
+		<script type="module" crossorigin src="./assets/index-Ya43XIXp.js"></script>
+		<link rel="stylesheet" crossorigin href="./assets/index-_g6Rc0H7.css">
+	</head>
+
+	<body
+		style="
+			width: 100%;
+			margin: 0;
+			padding: 0;
+			display: flex;
+			flex-direction: column;
+			flex-grow: 1;
+		"
+	>
+		<gradio-app
+			control_page_title="true"
+			embed="false"
+			eager="true"
+			style="display: flex; flex-direction: column; flex-grow: 1"
+		>
+		</gradio-app>
+		<script>
+			const ce = document.getElementsByTagName("gradio-app");
+
+			if (ce[0]) {
+				ce[0].addEventListener("domchange", () => {
+					document.body.style.padding = "0";
+				});
+				document.body.style.padding = "0";
+			}
+		</script>
+	</body>
+</html>

shortcuts.json

@@ -1 +1 @@
-[{"name": "Charbel", "tags": ["Grower", "Main"], "link": "http://example.com", "emojis": "\u26a1", "color_from": "#931010", "color_to": "#33417a", "short_description": "asdasfd", "pinned": false, "favorited": false, "date_added": "2024-11-12T23:04:40.313478"}, {"name": "Charbel", "tags": ["Grower", "Main"], "link": "http://example.com", "emojis": "\u26a1", "color_from": "#931010", "color_to": "#33417a", "short_description": "asdasfd", "pinned": false, "favorited": true, "date_added": "2024-11-12T23:04:42.705989"}, {"name": "", "tags": [], "link": "", "emojis": "", "color_from": "#000000", "color_to": "#000000", "short_description": "", "pinned": false, "favorited": false, "date_added": "2024-11-12T23:05:43.625612"}]
+[{"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"}]