Updated explanations and tips

week2/day2.ipynb

@@ -172,6 +172,8 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "# The simplicty of gradio. This might appear in \"light mode\" - I'll show you how to make this in dark mode later.\n",
+    "\n",
     "gr.Interface(fn=shout, inputs=\"textbox\", outputs=\"textbox\").launch()"
    ]
   },
@@ -182,9 +184,55 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "# Adding share=True means that it can be accessed publically\n",
+    "# A more permanent hosting is available using a platform called Spaces from HuggingFace, which we will touch on next week\n",
+    "\n",
     "gr.Interface(fn=shout, inputs=\"textbox\", outputs=\"textbox\", flagging_mode=\"never\").launch(share=True)"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "cd87533a-ff3a-4188-8998-5bedd5ba2da3",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Adding inbrowser=True opens up a new browser window automatically\n",
+    "\n",
+    "gr.Interface(fn=shout, inputs=\"textbox\", outputs=\"textbox\", flagging_mode=\"never\").launch(inbrowser=True)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "b42ec007-0314-48bf-84a4-a65943649215",
+   "metadata": {},
+   "source": [
+    "## Forcing dark mode\n",
+    "\n",
+    "Gradio appears in light mode or dark mode depending on the settings of the browser and computer. There is a way to force gradio to appear in dark mode, but Gradio recommends against this as it should be a user preference (particularly for accessibility reasons). But if you wish to force dark mode for your screens, below is how to do it."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "e8129afa-532b-4b15-b93c-aa9cca23a546",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Define this variable and then pass js=force_dark_mode when creating the Interface\n",
+    "\n",
+    "force_dark_mode = \"\"\"\n",
+    "function refresh() {\n",
+    "    const url = new URL(window.location);\n",
+    "    if (url.searchParams.get('__theme') !== 'dark') {\n",
+    "        url.searchParams.set('__theme', 'dark');\n",
+    "        window.location.href = url.href;\n",
+    "    }\n",
+    "}\n",
+    "\"\"\"\n",
+    "gr.Interface(fn=shout, inputs=\"textbox\", outputs=\"textbox\", flagging_mode=\"never\", js=force_dark_mode).launch()"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -192,6 +240,8 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "# Inputs and Outputs\n",
+    "\n",
     "view = gr.Interface(\n",
     "    fn=shout,\n",
     "    inputs=[gr.Textbox(label=\"Your message:\", lines=6)],\n",
@@ -208,6 +258,8 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "# And now - changing the function from \"shout\" to \"message_gpt\"\n",
+    "\n",
     "view = gr.Interface(\n",
     "    fn=message_gpt,\n",
     "    inputs=[gr.Textbox(label=\"Your message:\", lines=6)],\n",
@@ -224,6 +276,11 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "# Let's use Markdown\n",
+    "# Are you wondering why it makes any difference to set system_message when it's not referred to in the code below it?\n",
+    "# I'm taking advantage of system_message being a global variable, used back in the message_gpt function (go take a look)\n",
+    "# Not a great software engineering practice, but quite sommon during Jupyter Lab R&D!\n",
+    "\n",
     "system_message = \"You are a helpful assistant that responds in markdown\"\n",
     "\n",
     "view = gr.Interface(\n",
@@ -243,6 +300,8 @@
    "outputs": [],
    "source": [
     "# Let's create a call that streams back results\n",
+    "# If you'd like a refresher on Generators (the \"yield\" keyword),\n",
+    "# Please take a look at the Intermediate Python notebook in week1 folder.\n",
     "\n",
     "def stream_gpt(prompt):\n",
     "    messages = [\n",
@@ -334,7 +393,9 @@
     "\n",
     "There's actually a more elegant way to achieve this (which Python people might call more 'Pythonic'):\n",
     "\n",
-    "`yield from result`"
+    "`yield from result`\n",
+    "\n",
+    "I cover this in more detail in the Intermediate Python notebook in the week1 folder - take a look if you'd like more."
    ]
   },
   {
@@ -380,6 +441,26 @@
     "Now you know how - it's simple!"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "92d7c49b-2e0e-45b3-92ce-93ca9f962ef4",
+   "metadata": {},
+   "source": [
+    "<table style=\"margin: 0; text-align: left;\">\n",
+    "    <tr>\n",
+    "        <td style=\"width: 150px; height: 150px; vertical-align: middle;\">\n",
+    "            <img src=\"../important.jpg\" width=\"150\" height=\"150\" style=\"display: block;\" />\n",
+    "        </td>\n",
+    "        <td>\n",
+    "            <h2 style=\"color:#900;\">Before you read the next few cells</h2>\n",
+    "            <span style=\"color:#900;\">\n",
+    "                Try to do this yourself - go back to the company brochure in week1, day5 and add a Gradio UI to the end. Then come and look at the solution.\n",
+    "            </span>\n",
+    "        </td>\n",
+    "    </tr>\n",
+    "</table>"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,