working small from main

.gradio/certificate.pem

@@ -0,0 +1,31 @@
+-----BEGIN CERTIFICATE-----
+MIIFazCCA1OgAwIBAgIRAIIQz7DSQONZRGPgu2OCiwAwDQYJKoZIhvcNAQELBQAw
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwHhcNMTUwNjA0MTEwNDM4
+WhcNMzUwNjA0MTEwNDM4WjBPMQswCQYDVQQGEwJVUzEpMCcGA1UEChMgSW50ZXJu
+ZXQgU2VjdXJpdHkgUmVzZWFyY2ggR3JvdXAxFTATBgNVBAMTDElTUkcgUm9vdCBY
+MTCCAiIwDQYJKoZIhvcNAQEBBQADggIPADCCAgoCggIBAK3oJHP0FDfzm54rVygc
+h77ct984kIxuPOZXoHj3dcKi/vVqbvYATyjb3miGbESTtrFj/RQSa78f0uoxmyF+
+0TM8ukj13Xnfs7j/EvEhmkvBioZxaUpmZmyPfjxwv60pIgbz5MDmgK7iS4+3mX6U
+A5/TR5d8mUgjU+g4rk8Kb4Mu0UlXjIB0ttov0DiNewNwIRt18jA8+o+u3dpjq+sW
+T8KOEUt+zwvo/7V3LvSye0rgTBIlDHCNAymg4VMk7BPZ7hm/ELNKjD+Jo2FR3qyH
+B5T0Y3HsLuJvW5iB4YlcNHlsdu87kGJ55tukmi8mxdAQ4Q7e2RCOFvu396j3x+UC
+B5iPNgiV5+I3lg02dZ77DnKxHZu8A/lJBdiB3QW0KtZB6awBdpUKD9jf1b0SHzUv
+KBds0pjBqAlkd25HN7rOrFleaJ1/ctaJxQZBKT5ZPt0m9STJEadao0xAH0ahmbWn
+OlFuhjuefXKnEgV4We0+UXgVCwOPjdAvBbI+e0ocS3MFEvzG6uBQE3xDk3SzynTn
+jh8BCNAw1FtxNrQHusEwMFxIt4I7mKZ9YIqioymCzLq9gwQbooMDQaHWBfEbwrbw
+qHyGO0aoSCqI3Haadr8faqU9GY/rOPNk3sgrDQoo//fb4hVC1CLQJ13hef4Y53CI
+rU7m2Ys6xt0nUW7/vGT1M0NPAgMBAAGjQjBAMA4GA1UdDwEB/wQEAwIBBjAPBgNV
+HRMBAf8EBTADAQH/MB0GA1UdDgQWBBR5tFnme7bl5AFzgAiIyBpY9umbbjANBgkq
+hkiG9w0BAQsFAAOCAgEAVR9YqbyyqFDQDLHYGmkgJykIrGF1XIpu+ILlaS/V9lZL
+ubhzEFnTIZd+50xx+7LSYK05qAvqFyFWhfFQDlnrzuBZ6brJFe+GnY+EgPbk6ZGQ
+3BebYhtF8GaV0nxvwuo77x/Py9auJ/GpsMiu/X1+mvoiBOv/2X/qkSsisRcOj/KK
+NFtY2PwByVS5uCbMiogziUwthDyC3+6WVwW6LLv3xLfHTjuCvjHIInNzktHCgKQ5
+ORAzI4JMPJ+GslWYHb4phowim57iaztXOoJwTdwJx4nLCgdNbOhdjsnvzqvHu7Ur
+TkXWStAmzOVyyghqpZXjFaH3pO3JLF+l+/+sKAIuvtd7u+Nxe5AW0wdeRlN8NwdC
+jNPElpzVmbUq4JUagEiuTDkHzsxHpFKVK7q4+63SM1N95R1NbdWhscdCb+ZAJzVc
+oyi3B43njTOQ5yOf+1CceWxG1bQVs5ZufpsMljq4Ui0/1lvh+wjChP4kqKOJ2qxq
+4RgqsahDYVvTH9w7jXbyLeiNdd8XM2w9U/t7y0Ff/9yi0GE44Za4rF2LN9d11TPA
+mRGunUHBcnWEvgJBQl9nJEiU0Zsnvgc/ubhPgXRR4Xq37Z0j4r7g1SgEEzwxA57d
+emyPxgcYxn/eR44/KJ4EBs+lVDR3veyJm+kXQ99b21/+jh5Xos1AnX5iItreGCc=
+-----END CERTIFICATE-----

app_starter_gui/css.py

@@ -4,6 +4,8 @@
 __all__ = ['generate_css', 'test_generate_css']
 
 # %% ../nbs/01_css.ipynb 2
+from operator import attrgetter
+from itertools import groupby
 from .core import Button
 from fastcore.test import *  # for test_assert
 
@@ -72,10 +74,16 @@ def generate_css(buttons):
     """
     
     all_css = []
-    for i, button in enumerate(buttons, 1):
-        btn_id = f"btn{i}"
-        css = css_template.format(btn_id=btn_id, image_url=button.image_url)
-        all_css.append(css)
+    
+    # Sort buttons by app_type to match the dashboard layout
+    buttons = sorted(buttons, key=attrgetter('app_type'))
+    button_groups = {k: list(g) for k, g in groupby(buttons, key=attrgetter('app_type'))}
+    
+    for app_type, type_buttons in button_groups.items():
+        for button_idx, button in enumerate(type_buttons, 1):
+            btn_id = f"btn_{app_type}_{button_idx}"
+            css = css_template.format(btn_id=btn_id, image_url=button.image_url)
+            all_css.append(css)
     
     return "\n".join(all_css)
 
@@ -89,7 +97,7 @@ def test_generate_css():
         Button("Search", "img.jpg", "https://search.com", "Search")
     ]
     css = generate_css(buttons)
-    test('#btn1', css.lower(), lambda x,y: x in y)
-    test('#btn2', css.lower(), lambda x,y: x in y)
+    test('#btn_ai_1', css.lower(), lambda x,y: x in y)
+    test('#btn_search_1', css.lower(), lambda x,y: x in y)
 
 test_generate_css()

app_starter_gui/gradio_app.py

@@ -5,6 +5,8 @@ __all__ = ['create_app', 'test_create_app']
 
 # %% ../nbs/02_gradio_app.ipynb 2
 import gradio as gr
+from itertools import groupby
+from operator import attrgetter
 from .core import Button, load_buttons
 from .css import generate_css
 
@@ -20,16 +22,28 @@ def create_app(yaml_file='buttons.yaml', css_generator=generate_css):
     """
     buttons = load_buttons(yaml_file)
     css = generate_css(buttons)
+
+    buttons_sorted = sorted(buttons, key=attrgetter('app_type'))
+    button_groups = {k: list(g) for k, g in groupby(buttons_sorted, key=attrgetter('app_type'))}
     
     with gr.Blocks(css=css) as blocks:
-        with gr.Column():
-            gr.HTML('<div class="button-grid">' + 
-                   ''.join([f'''
-                   <a href="{b.link_url}" class="{b.app_type.lower()}">
-                       <img src="{b.image_url}" style="max-width:100%"/>
-                       <p>{b.label}</p>
-                   </a>''' for b in buttons]) +
-                   '</div>')
+         with gr.Row():
+            # Create a column for each app_type
+            for app_type, type_buttons in button_groups.items():
+                with gr.Column():
+                    gr.Markdown(f"### {app_type}")
+                    for button_idx, button in enumerate(type_buttons):
+                        btn = gr.Button(
+                            value=button.label,
+                            elem_id=f"btn_{app_type}_{button_idx}",  # Make unique ID for each button
+                            scale=1,
+                        )
+                        btn.click(
+                            fn=None, 
+                            inputs=None, 
+                            outputs=None,
+                            js=f"() => {{ window.open('{button.link_url}', '_blank'); }}"
+                        )
     return blocks
 
 # %% ../nbs/02_gradio_app.ipynb 6

buttons.yaml

@@ -3,6 +3,6 @@
   link_url: https://huggingface.co/spaces/Hopsakee/fabric_to_espanso
   app_type: Prompt
 - label: Jaws of the Lion
-  image_url: google.jpg
+  image_url: https://static1.srcdn.com/wordpress/wp-content/uploads/2020/06/Gloomhaven-Jaws-of-the-Lion-Hatchet.jpg
   link_url: https://notebooklm.google.com/notebook/ac6595f8-963c-4bd8-87cf-26b7007434a6?_gl=1*10y09ch*_ga*OTQ0NDQwODcwLjE3MzUzNzU4MDc.*_ga_W0LDH41ZCB*MTczNjk3MjM5NS43LjAuMTczNjk3MjM5NS4wLjAuMA..
   app_type: Bordspel

gradio_app.py

@@ -0,0 +1,51 @@
+# AUTOGENERATED! DO NOT EDIT! File to edit: ../nbs/02_gradio_app.ipynb.
+
+# %% auto 0
+__all__ = ['create_app', 'test_create_app']
+
+# %% ../nbs/02_gradio_app.ipynb 2
+import gradio as gr
+from itertools import groupby
+from operator import attrgetter
+from app_starter_gui.core import Button, load_buttons
+from app_starter_gui.css import generate_css
+
+# %% ../nbs/02_gradio_app.ipynb 4
+def create_app(yaml_file='buttons.yaml', css_generator=generate_css):
+    """Create a Gradio dashboard for the button interface
+    
+    Args:
+        yaml_file: Path to YAML file containing button data (default: 'buttons.yaml')
+        css_generator: Function to generate CSS (default: generate_css)
+    Returns:
+        gr.Blocks: Gradio interface
+    """
+    buttons = load_buttons(yaml_file)
+    css = generate_css(buttons)
+
+    buttons_sorted = sorted(buttons, key=attrgetter('app_type'))
+    buttons_grouped = {k: list(g) for k, g in groupby(buttons_sorted, key=attrgetter('app_type'))}
+
+    with gr.Blocks(css=css) as blocks:
+        with gr.Row():
+            # Create a column for each app type
+            for app_type, type_buttons in buttons_grouped.items():
+                with gr.Column():
+                    gr.Markdown(f"### {app_type}")
+                    for i, button in enumerate(type_buttons, 1):
+                        btn = gr.Button(
+                            value=button.label,
+                            elem_id=f"btn_{app_type}_{i}",
+                            scale=1,
+                        )
+                        btn.click(
+                            fn=None,
+                            inputs=None,
+                            outputs=None,
+                            js=f"() => {{ window.open('{button.link_url}', '_blank'); }}"
+                        )
+    return blocks
+
+if __name__ == '__main__':
+    demo = create_app()
+    demo.launch(share=True)

nbs/01_css.ipynb

@@ -16,7 +16,11 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {},
+   "metadata": {
+    "vscode": {
+     "languageId": "python"
+    }
+   },
    "outputs": [],
    "source": [
     "#| default_exp css"
@@ -25,7 +29,11 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {},
+   "metadata": {
+    "vscode": {
+     "languageId": "python"
+    }
+   },
    "outputs": [
     {
      "ename": "ModuleNotFoundError",
@@ -42,6 +50,8 @@
    "source": [
     "#| export\n",
     "#| hide\n",
+    "from operator import attrgetter\n",
+    "from itertools import groupby\n",
     "from app_starter_gui.core import Button\n",
     "from fastcore.test import *  # for test_assert"
    ]
@@ -49,7 +59,11 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {},
+   "metadata": {
+    "vscode": {
+     "languageId": "python"
+    }
+   },
    "outputs": [],
    "source": [
     "from nbdev.showdoc import show_doc"
@@ -58,7 +72,11 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {},
+   "metadata": {
+    "vscode": {
+     "languageId": "python"
+    }
+   },
    "outputs": [],
    "source": [
     "#| export\n",
@@ -126,10 +144,16 @@
     "    \"\"\"\n",
     "    \n",
     "    all_css = []\n",
-    "    for i, button in enumerate(buttons, 1):\n",
-    "        btn_id = f\"btn{i}\"\n",
-    "        css = css_template.format(btn_id=btn_id, image_url=button.image_url)\n",
-    "        all_css.append(css)\n",
+    "    \n",
+    "    # Sort buttons by app_type to match the dashboard layout\n",
+    "    buttons = sorted(buttons, key=attrgetter('app_type'))\n",
+    "    button_groups = {k: list(g) for k, g in groupby(buttons, key=attrgetter('app_type'))}\n",
+    "    \n",
+    "    for app_type, type_buttons in button_groups.items():\n",
+    "        for button_idx, button in enumerate(type_buttons, 1):\n",
+    "            btn_id = f\"btn_{app_type}_{button_idx}\"\n",
+    "            css = css_template.format(btn_id=btn_id, image_url=button.image_url)\n",
+    "            all_css.append(css)\n",
     "    \n",
     "    return \"\\n\".join(all_css)"
    ]
@@ -137,7 +161,11 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {},
+   "metadata": {
+    "vscode": {
+     "languageId": "python"
+    }
+   },
    "outputs": [
     {
      "ename": "NameError",
@@ -165,7 +193,11 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {},
+   "metadata": {
+    "vscode": {
+     "languageId": "python"
+    }
+   },
    "outputs": [
     {
      "ename": "NameError",
@@ -192,8 +224,8 @@
     "        Button(\"Search\", \"img.jpg\", \"https://search.com\", \"Search\")\n",
     "    ]\n",
     "    css = generate_css(buttons)\n",
-    "    test('#btn1', css.lower(), lambda x,y: x in y)\n",
-    "    test('#btn2', css.lower(), lambda x,y: x in y)\n",
+    "    test('#btn_ai_1', css.lower(), lambda x,y: x in y)\n",
+    "    test('#btn_search_1', css.lower(), lambda x,y: x in y)\n",
     "\n",
     "test_generate_css()"
    ]
@@ -201,7 +233,11 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {},
+   "metadata": {
+    "vscode": {
+     "languageId": "python"
+    }
+   },
    "outputs": [],
    "source": [
     "#| hide\n",

nbs/02_gradio_app.ipynb

@@ -16,7 +16,11 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {},
+   "metadata": {
+    "vscode": {
+     "languageId": "python"
+    }
+   },
    "outputs": [],
    "source": [
     "#| default_exp gradio_app"
@@ -25,7 +29,11 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {},
+   "metadata": {
+    "vscode": {
+     "languageId": "python"
+    }
+   },
    "outputs": [
     {
      "ename": "ModuleNotFoundError",
@@ -43,6 +51,8 @@
     "#| export\n",
     "#| hide\n",
     "import gradio as gr\n",
+    "from itertools import groupby\n",
+    "from operator import attrgetter\n",
     "from app_starter_gui.core import Button, load_buttons\n",
     "from app_starter_gui.css import generate_css"
    ]
@@ -50,7 +60,11 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {},
+   "metadata": {
+    "vscode": {
+     "languageId": "python"
+    }
+   },
    "outputs": [],
    "source": [
     "#| hide\n",
@@ -60,7 +74,11 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {},
+   "metadata": {
+    "vscode": {
+     "languageId": "python"
+    }
+   },
    "outputs": [],
    "source": [
     "#| export\n",
@@ -75,23 +93,39 @@
     "    \"\"\"\n",
     "    buttons = load_buttons(yaml_file)\n",
     "    css = generate_css(buttons)\n",
+    "\n",
+    "    buttons_sorted = sorted(buttons, key=attrgetter('app_type'))\n",
+    "    button_groups = {k: list(g) for k, g in groupby(buttons_sorted, key=attrgetter('app_type'))}\n",
     "    \n",
     "    with gr.Blocks(css=css) as blocks:\n",
-    "        with gr.Column():\n",
-    "            gr.HTML('<div class=\"button-grid\">' + \n",
-    "                   ''.join([f'''\n",
-    "                   <a href=\"{b.link_url}\" class=\"{b.app_type.lower()}\">\n",
-    "                       <img src=\"{b.image_url}\" style=\"max-width:100%\"/>\n",
-    "                       <p>{b.label}</p>\n",
-    "                   </a>''' for b in buttons]) +\n",
-    "                   '</div>')\n",
+    "         with gr.Row():\n",
+    "            # Create a column for each app_type\n",
+    "            for app_type, type_buttons in button_groups.items():\n",
+    "                with gr.Column():\n",
+    "                    gr.Markdown(f\"### {app_type}\")\n",
+    "                    for button_idx, button in enumerate(type_buttons):\n",
+    "                        btn = gr.Button(\n",
+    "                            value=button.label,\n",
+    "                            elem_id=f\"btn_{app_type}_{button_idx}\",  # Make unique ID for each button\n",
+    "                            scale=1,\n",
+    "                        )\n",
+    "                        btn.click(\n",
+    "                            fn=None, \n",
+    "                            inputs=None, \n",
+    "                            outputs=None,\n",
+    "                            js=f\"() => {{ window.open('{button.link_url}', '_blank'); }}\"\n",
+    "                        )\n",
     "    return blocks"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {},
+   "metadata": {
+    "vscode": {
+     "languageId": "python"
+    }
+   },
    "outputs": [],
    "source": [
     "# Example usage\n",
@@ -101,7 +135,11 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {},
+   "metadata": {
+    "vscode": {
+     "languageId": "python"
+    }
+   },
    "outputs": [],
    "source": [
     "#| export\n",
@@ -119,7 +157,11 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "metadata": {},
+   "metadata": {
+    "vscode": {
+     "languageId": "python"
+    }
+   },
    "outputs": [],
    "source": [
     "#| hide\n",

test.ipynb

@@ -0,0 +1,158 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from app_starter_gui.css import generate_css\n",
+    "from app_starter_gui.core import Button, load_buttons"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "yaml_file = \"buttons.yaml\"\n",
+    "buttons = load_buttons(yaml_file)\n",
+    "css = generate_css(buttons)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "\n",
+      "        #btn1 { \n",
+      "            height: 230px;  /* Total height of button */\n",
+      "            width: 200px;\n",
+      "            border-radius: 15px;\n",
+      "            display: flex;\n",
+      "            flex-direction: column;\n",
+      "            padding: 0;\n",
+      "            margin: 0;\n",
+      "            overflow: hidden;\n",
+      "            transition: transform 0.2s, box-shadow 0.2s;\n",
+      "            background: none;\n",
+      "        }\n",
+      "        \n",
+      "        #btn1::before {\n",
+      "            content: '';\n",
+      "            height: 180px;  /* Image height */\n",
+      "            width: 100%;\n",
+      "            background-size: cover;\n",
+      "            background-position: center center;\n",
+      "            background-repeat: no-repeat;\n",
+      "            background-image: url('https://github.com/danielmiessler/fabric/blob/main/images/fabric-logo-gif.gif?raw=true');\n",
+      "            transition: transform 0.2s;\n",
+      "            margin: 0;\n",
+      "            padding: 0;\n",
+      "            display: block;\n",
+      "            flex-shrink: 0;\n",
+      "            position: relative;\n",
+      "            top: 0;\n",
+      "            border-radius: 15px 15px 0 0;  /* Round top corners only */\n",
+      "        }\n",
+      "        \n",
+      "        #btn1:hover {\n",
+      "            transform: translateY(-5px);\n",
+      "            box-shadow: 0 5px 15px rgba(0,0,0,0.3);\n",
+      "        }\n",
+      "\n",
+      "        #btn1 > div {\n",
+      "            height: 50px;\n",
+      "            display: flex;\n",
+      "            align-items: center;\n",
+      "            justify-content: center;\n",
+      "        }\n",
+      "\n",
+      "        #btn1:hover::before {\n",
+      "            transform: scale(1.05);\n",
+      "        }\n",
+      "    \n",
+      "\n",
+      "        #btn2 { \n",
+      "            height: 230px;  /* Total height of button */\n",
+      "            width: 200px;\n",
+      "            border-radius: 15px;\n",
+      "            display: flex;\n",
+      "            flex-direction: column;\n",
+      "            padding: 0;\n",
+      "            margin: 0;\n",
+      "            overflow: hidden;\n",
+      "            transition: transform 0.2s, box-shadow 0.2s;\n",
+      "            background: none;\n",
+      "        }\n",
+      "        \n",
+      "        #btn2::before {\n",
+      "            content: '';\n",
+      "            height: 180px;  /* Image height */\n",
+      "            width: 100%;\n",
+      "            background-size: cover;\n",
+      "            background-position: center center;\n",
+      "            background-repeat: no-repeat;\n",
+      "            background-image: url('https://static1.srcdn.com/wordpress/wp-content/uploads/2020/06/Gloomhaven-Jaws-of-the-Lion-Hatchet.jpg');\n",
+      "            transition: transform 0.2s;\n",
+      "            margin: 0;\n",
+      "            padding: 0;\n",
+      "            display: block;\n",
+      "            flex-shrink: 0;\n",
+      "            position: relative;\n",
+      "            top: 0;\n",
+      "            border-radius: 15px 15px 0 0;  /* Round top corners only */\n",
+      "        }\n",
+      "        \n",
+      "        #btn2:hover {\n",
+      "            transform: translateY(-5px);\n",
+      "            box-shadow: 0 5px 15px rgba(0,0,0,0.3);\n",
+      "        }\n",
+      "\n",
+      "        #btn2 > div {\n",
+      "            height: 50px;\n",
+      "            display: flex;\n",
+      "            align-items: center;\n",
+      "            justify-content: center;\n",
+      "        }\n",
+      "\n",
+      "        #btn2:hover::before {\n",
+      "            transform: scale(1.05);\n",
+      "        }\n",
+      "    \n"
+     ]
+    }
+   ],
+   "source": [
+    "print(css)"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": ".venv",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.11.0rc1"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}