{
 "cells": [
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "---\n",
    "description: A simple GUI to quickly switch to URL-apps I often use.\n",
    "output-file: index.html\n",
    "title: Hopsakee/app_starter_gui\n",
    "\n",
    "---\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "#| default_exp _modidx"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "ename": "ModuleNotFoundError",
     "evalue": "No module named 'app_starter_gui'",
     "output_type": "error",
     "traceback": [
      "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
      "\u001b[0;31mModuleNotFoundError\u001b[0m                       Traceback (most recent call last)",
      "Cell \u001b[0;32mIn[1], line 2\u001b[0m\n\u001b[1;32m      1\u001b[0m \u001b[38;5;66;03m#| hide\u001b[39;00m\n\u001b[0;32m----> 2\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m\u001b[38;5;250m \u001b[39m\u001b[38;5;21;01mapp_starter_gui\u001b[39;00m\u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01mcore\u001b[39;00m\u001b[38;5;250m \u001b[39m\u001b[38;5;28;01mimport\u001b[39;00m \u001b[38;5;241m*\u001b[39m\n",
      "\u001b[0;31mModuleNotFoundError\u001b[0m: No module named 'app_starter_gui'"
     ]
    }
   ],
   "source": [
    "#| export\n",
    "#| hide\n",
    "from app_starter_gui.core import *"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This file will become your README and also the index of your documentation."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Developer Guide"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If you are new to using `nbdev` here are some useful pointers to get you started."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Install Hopsakee/app_starter_gui in Development mode"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "```sh\n",
    "# make sure Hopsakee/app_starter_gui package is installed in development mode\n",
    "$ pip install -e .\n",
    "# if using PDM you should probably use\n",
    "$ pdm install\n",
    "\n",
    "# make changes under nbs/ directory\n",
    "# ...\n",
    "\n",
    "# compile to have changes apply to Hopsakee/app_starter_gui\n",
    "$ nbdev_prepare\n",
    "# if using PDM you should probably first explicitly activate the project environment\n",
    "$ eval $(pdm venv activate in-project)\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Usage"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Installation"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Install latest from the GitHub [repository][repo]:\n",
    "\n",
    "```sh\n",
    "$ pip install git+https://github.com/Hopsakee/Hopsakee/app_starter_gui.git\n",
    "```\n",
    "\n",
    "or from [conda][conda]\n",
    "\n",
    "```sh\n",
    "$ conda install -c Hopsakee Hopsakee/app_starter_gui\n",
    "```\n",
    "\n",
    "or from [pypi][pypi]\n",
    "\n",
    "\n",
    "```sh\n",
    "$ pip install Hopsakee/app_starter_gui\n",
    "```\n",
    "\n",
    "\n",
    "[repo]: https://github.com/Hopsakee/Hopsakee/app_starter_gui\n",
    "[docs]: https://Hopsakee.github.io/Hopsakee/app_starter_gui/\n",
    "[pypi]: https://pypi.org/project/Hopsakee/app_starter_gui/\n",
    "[conda]: https://anaconda.org/Hopsakee/Hopsakee/app_starter_gui"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Documentation"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Documentation can be found hosted on this GitHub [repository][repo]'s [pages][docs]. Additionally you can find package manager specific guidelines on [conda][conda] and [pypi][pypi] respectively.\n",
    "\n",
    "[repo]: https://github.com/Hopsakee/Hopsakee/app_starter_gui\n",
    "[docs]: https://Hopsakee.github.io/Hopsakee/app_starter_gui/\n",
    "[pypi]: https://pypi.org/project/Hopsakee/app_starter_gui/\n",
    "[conda]: https://anaconda.org/Hopsakee/Hopsakee/app_starter_gui"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## How to use"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Basic example:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "ename": "ModuleNotFoundError",
     "evalue": "No module named 'app_starter_gui'",
     "output_type": "error",
     "traceback": [
      "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
      "\u001b[0;31mModuleNotFoundError\u001b[0m                       Traceback (most recent call last)",
      "Cell \u001b[0;32mIn[4], line 1\u001b[0m\n\u001b[0;32m----> 1\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m\u001b[38;5;250m \u001b[39m\u001b[38;5;21;01mapp_starter_gui\u001b[39;00m\u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01mcore\u001b[39;00m\u001b[38;5;250m \u001b[39m\u001b[38;5;28;01mimport\u001b[39;00m Button\n",
      "\u001b[0;31mModuleNotFoundError\u001b[0m: No module named 'app_starter_gui'"
     ]
    }
   ],
   "source": [
    "from app_starter_gui.core import Button"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from app_starter_gui.core import Button \n",
    "from app_starter_gui.gradio_app import create_app"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Create some buttons\n",
    "\n",
    "#### In the codebase:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "buttons = [ Button(\"ChatGPT\", \"chatgpt.jpg\", \"https://chat.openai.com\", \"AI\"), Button(\"Google\", \"google.jpg\", \"https://google.com\", \"Search\") ]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Configuration with YAML\n",
    "\n",
    "You can define your buttons in a YAML file (`buttons.yaml`):"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "```yaml\n",
    "- label: ChatGPT\n",
    "  image_url: chatgpt.jpg\n",
    "  link_url: https://chat.openai.com\n",
    "  app_type: AI\n",
    "- label: Google\n",
    "  image_url: google.jpg\n",
    "  link_url: https://google.com\n",
    "  app_type: Search\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Launch the App\n",
    "\n",
    "Load buttons from YAML and create the app:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from app_starter_gui.gradio_app import create_app"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Create and launch app from YAML"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "app = create_app('buttons.yaml')\n",
    "app.launch(share=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Features\n",
    "\n",
    "- Define buttons with labels, images, links, and types\n",
    "- Group buttons by type with automatic styling\n",
    "- Responsive grid layout\n",
    "- Load button configurations from YAML\n",
    "- Customizable CSS for each button type"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "\n",
    "## Customizing Layout\n",
    "\n",
    "The buttons are arranged in a responsive grid layout. You can customize this by modifying the CSS:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from app_starter_gui.core import Button, save_buttons \n",
    "from app_starter_gui.css import generate_css"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Create custom CSS\n",
    "def my_custom_css(buttons):\n",
    "  types = {b.app_type for b in buttons}\n",
    "  return \"\"\"\n",
    "  .button-grid {\n",
    "      display: grid;\n",
    "      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* wider buttons */\n",
    "      gap: 2rem; /* more space between buttons */\n",
    "      padding: 2rem; /* more padding around grid */ \n",
    "  }\n",
    "  \"\"\"\n",
    "\n",
    "# Use custom CSS when creating app\n",
    "app = create_app('buttons.yaml', css_generator=my_custom_css)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Image URLs\n",
    "\n",
    "For button images, you must use either:\n",
    "- URLs to images hosted online (e.g., `https://example.com/image.jpg`)\n",
    "- URLs to images in your GitHub repository (e.g., `https://raw.githubusercontent.com/username/repo/main/images/icon.png`)\n",
    "\n",
    "Local file paths won't work because:\n",
    "1. Gradio needs the images to be web-accessible\n",
    "2. Other users won't have access to files on your local machine\n",
    "\n",
    "Example YAML with proper image URLs:\n",
    "```yaml\n",
    "- label: ChatGPT\n",
    "  image_url: https://raw.githubusercontent.com/your-repo/images/chatgpt-icon.png\n",
    "  link_url: https://chat.openai.com\n",
    "  app_type: AI\n",
    "```"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "python3",
   "language": "python",
   "name": "python3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}