{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "\n",
    "from panel.widgets import SpeechToText, GrammarList\n",
    "\n",
    "pn.extension(sizing_mode=\"stretch_width\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "speech_to_text_color = SpeechToText(button_type=\"light\", continuous=True)\n",
    "\n",
    "colors = [\n",
    "    \"aqua\",\n",
    "    \"azure\",\n",
    "    \"beige\",\n",
    "    \"bisque\",\n",
    "    \"black\",\n",
    "    \"blue\",\n",
    "    \"brown\",\n",
    "    \"chocolate\",\n",
    "    \"coral\",\n",
    "    \"crimson\",\n",
    "    \"cyan\",\n",
    "    \"fuchsia\",\n",
    "    \"ghostwhite\",\n",
    "    \"gold\",\n",
    "    \"goldenrod\",\n",
    "    \"gray\",\n",
    "    \"green\",\n",
    "    \"indigo\",\n",
    "    \"ivory\",\n",
    "    \"khaki\",\n",
    "    \"lavender\",\n",
    "    \"lime\",\n",
    "    \"linen\",\n",
    "    \"magenta\",\n",
    "    \"maroon\",\n",
    "    \"moccasin\",\n",
    "    \"navy\",\n",
    "    \"olive\",\n",
    "    \"orange\",\n",
    "    \"orchid\",\n",
    "    \"peru\",\n",
    "    \"pink\",\n",
    "    \"plum\",\n",
    "    \"purple\",\n",
    "    \"red\",\n",
    "    \"salmon\",\n",
    "    \"sienna\",\n",
    "    \"silver\",\n",
    "    \"snow\",\n",
    "    \"tan\",\n",
    "    \"teal\",\n",
    "    \"thistle\",\n",
    "    \"tomato\",\n",
    "    \"turquoise\",\n",
    "    \"violet\",\n",
    "    \"white\",\n",
    "    \"yellow\",\n",
    "]\n",
    "src = \"#JSGF V1.0; grammar colors; public <color> = \" + \" | \".join(colors) + \" ;\"\n",
    "grammar_list = GrammarList()\n",
    "grammar_list.add_from_string(src, 1)\n",
    "\n",
    "speech_to_text_color.grammars = grammar_list"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "colors_html = \"Try \" + \", \".join(\n",
    "    [f\"<span style='background:{color};'>{color}</span>\" for color in colors]\n",
    ")\n",
    "content = f\"\"\"\n",
    "**Tap/click the microphone icon** and **say a color** to change the background color of the app.\n",
    "\n",
    "Please **use Chrome** as it has the best support for the Speech to Text Api.\n",
    "\"\"\"\n",
    "\n",
    "content_panel = pn.pane.Markdown(content)\n",
    "colors_panel = pn.pane.HTML(colors_html)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "app = pn.Column(height=700, css_classes=[\"color-app\"])\n",
    "style_panel = pn.pane.HTML(width=0, height=0, sizing_mode=\"fixed\")\n",
    "\n",
    "result_panel = pn.pane.Markdown()\n",
    "\n",
    "@pn.depends(speech_to_text_color, watch=True)\n",
    "def update_result_panel(results_last):\n",
    "    results_last = results_last.lower()\n",
    "    if results_last in colors:\n",
    "        app.background = results_last\n",
    "        result_panel.object = \"Result received: \" + results_last\n",
    "    else:\n",
    "        app.background = \"white\"\n",
    "        result_panel.object = \"Result received: \" + results_last + \" (Not recognized)\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "app[:] = [\n",
    "    style_panel,\n",
    "    content_panel,\n",
    "    speech_to_text_color,\n",
    "    result_panel,\n",
    "    colors_html,\n",
    "]\n",
    "app"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## App\n",
    "\n",
    "Lets wrap it into nice template that can be served via `panel serve color_speech_recognition.ipynb`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.template.FastListTemplate(\n",
    "    site=\"Panel\", \n",
    "    title=\"Speech Recognition - Color App\", \n",
    "    main=[app], main_max_width=\"768px\"\n",
    ").servable();"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}