week2/notebooks/day2.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Gradio Day!\n",
    "\n",
    "Today we will build User Interfaces using the outrageously simple Gradio framework.\n",
    "\n",
    "Prepare for joy!\n",
    "\n",
    "Please note: your Gradio screens may appear in 'dark mode' or 'light mode' depending on your computer settings."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "# imports\n",
    "\n",
    "import os\n",
    "import requests\n",
    "from bs4 import BeautifulSoup\n",
    "from typing import List\n",
    "from dotenv import load_dotenv\n",
    "from openai import OpenAI"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "import gradio as gr"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Load the openai model from the github models\n",
    "load_dotenv(override=True)\n",
    "token = os.getenv(\"GITHUB_TOKEN\")\n",
    "endpoint = \"https://models.inference.ai.azure.com\"\n",
    "\n",
    "openai_client = OpenAI(\n",
    "    base_url=endpoint,\n",
    "    api_key=token,\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "system_message = \"You are a helpful assistant\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Let's wrap a call to GPT-4o-mini in a simple function\n",
    "\n",
    "def message_gpt(prompt):\n",
    "    messages = [\n",
    "        {\"role\": \"system\", \"content\": system_message},\n",
    "        {\"role\": \"user\", \"content\": prompt}\n",
    "      ]\n",
    "    completion = openai_client.chat.completions.create(\n",
    "        model=\"gpt-4o-mini\",\n",
    "        messages=messages,\n",
    "    )\n",
    "    return completion.choices[0].message.content"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "\"Today's date is October 6, 2023.\""
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# This can reveal the \"training cut off\", or the most recent date in the training data\n",
    "\n",
    "message_gpt(\"What is today's date?\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## User Interface time!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [],
   "source": [
    "# here's a simple function\n",
    "\n",
    "def shout(text):\n",
    "    print(f\"Shout has been called with input {text}\")\n",
    "    return text.upper()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Shout has been called with input hello\n"
     ]
    },
    {
     "data": {
      "text/plain": [
       "'HELLO'"
      ]
     },
     "execution_count": 10,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "shout(\"hello\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "* Running on local URL:  http://127.0.0.1:7860\n",
      "\n",
      "To create a public link, set `share=True` in `launch()`.\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<div><iframe src=\"http://127.0.0.1:7860/\" width=\"100%\" height=\"500\" allow=\"autoplay; camera; microphone; clipboard-read; clipboard-write;\" frameborder=\"0\" allowfullscreen></iframe></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": []
     },
     "execution_count": 11,
     "metadata": {},
     "output_type": "execute_result"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Shout has been called with input hello\n"
     ]
    }
   ],
   "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()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "* Running on local URL:  http://127.0.0.1:7861\n",
      "\n",
      "To create a public link, set `share=True` in `launch()`.\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<div><iframe src=\"http://127.0.0.1:7861/\" width=\"100%\" height=\"500\" allow=\"autoplay; camera; microphone; clipboard-read; clipboard-write;\" frameborder=\"0\" allowfullscreen></iframe></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": []
     },
     "execution_count": 12,
     "metadata": {},
     "output_type": "execute_result"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Shout has been called with input hello\n"
     ]
    }
   ],
   "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",
   "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": 13,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "* Running on local URL:  http://127.0.0.1:7862\n",
      "\n",
      "To create a public link, set `share=True` in `launch()`.\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<div><iframe src=\"http://127.0.0.1:7862/\" width=\"100%\" height=\"500\" allow=\"autoplay; camera; microphone; clipboard-read; clipboard-write;\" frameborder=\"0\" allowfullscreen></iframe></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": []
     },
     "execution_count": 13,
     "metadata": {},
     "output_type": "execute_result"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Shout has been called with input this is very cool\n"
     ]
    }
   ],
   "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": 14,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "* Running on local URL:  http://127.0.0.1:7863\n",
      "\n",
      "To create a public link, set `share=True` in `launch()`.\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<div><iframe src=\"http://127.0.0.1:7863/\" width=\"100%\" height=\"500\" allow=\"autoplay; camera; microphone; clipboard-read; clipboard-write;\" frameborder=\"0\" allowfullscreen></iframe></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": []
     },
     "execution_count": 14,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# Inputs and Outputs\n",
    "\n",
    "view = gr.Interface(\n",
    "    fn=shout,\n",
    "    inputs=[gr.Textbox(label=\"Your message:\", lines=6)],\n",
    "    outputs=[gr.Textbox(label=\"Response:\", lines=8)],\n",
    "    flagging_mode=\"never\"\n",
    ")\n",
    "view.launch()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "* Running on local URL:  http://127.0.0.1:7864\n",
      "\n",
      "To create a public link, set `share=True` in `launch()`.\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<div><iframe src=\"http://127.0.0.1:7864/\" width=\"100%\" height=\"500\" allow=\"autoplay; camera; microphone; clipboard-read; clipboard-write;\" frameborder=\"0\" allowfullscreen></iframe></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": []
     },
     "execution_count": 15,
     "metadata": {},
     "output_type": "execute_result"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Shout has been called with input hello\n"
     ]
    }
   ],
   "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",
    "    outputs=[gr.Textbox(label=\"Response:\", lines=8)],\n",
    "    flagging_mode=\"never\"\n",
    ")\n",
    "view.launch()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "* Running on local URL:  http://127.0.0.1:7865\n",
      "\n",
      "To create a public link, set `share=True` in `launch()`.\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<div><iframe src=\"http://127.0.0.1:7865/\" width=\"100%\" height=\"500\" allow=\"autoplay; camera; microphone; clipboard-read; clipboard-write;\" frameborder=\"0\" allowfullscreen></iframe></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": []
     },
     "execution_count": 16,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "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",
    "    fn=message_gpt,\n",
    "    inputs=[gr.Textbox(label=\"Your message:\")],\n",
    "    outputs=[gr.Markdown(label=\"Response:\")],\n",
    "    flagging_mode=\"never\"\n",
    ")\n",
    "view.launch()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def stream_gpt(prompt):\n",
    "    messages = [\n",
    "        {\"role\": \"system\", \"content\": system_message},\n",
    "        {\"role\": \"user\", \"content\": prompt}\n",
    "    ]\n",
    "    stream = openai_client.chat.completions.create(\n",
    "        model='gpt-4o-mini',\n",
    "        messages=messages,\n",
    "        stream=True\n",
    "    )\n",
    "    result = \"\"\n",
    "    for chunk in stream:\n",
    "        if chunk.choices and chunk.choices[0].delta.content:  # Check if choices exist and content is not None\n",
    "            result += chunk.choices[0].delta.content\n",
    "            yield result\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "* Running on local URL:  http://127.0.0.1:7867\n",
      "\n",
      "To create a public link, set `share=True` in `launch()`.\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<div><iframe src=\"http://127.0.0.1:7867/\" width=\"100%\" height=\"500\" allow=\"autoplay; camera; microphone; clipboard-read; clipboard-write;\" frameborder=\"0\" allowfullscreen></iframe></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": []
     },
     "execution_count": 20,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "view = gr.Interface(\n",
    "    fn=stream_gpt,\n",
    "    inputs=[gr.Textbox(label=\"Your message:\")],\n",
    "    outputs=[gr.Markdown(label=\"Response:\")],\n",
    "    flagging_mode=\"never\"\n",
    ")\n",
    "view.launch()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Minor improvement\n",
    "\n",
    "I've made a small improvement to this code.\n",
    "\n",
    "Previously, it had these lines:\n",
    "\n",
    "```\n",
    "for chunk in result:\n",
    "  yield chunk\n",
    "```\n",
    "\n",
    "There's actually a more elegant way to achieve this (which Python people might call more 'Pythonic'):\n",
    "\n",
    "`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."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def stream_gpt2(prompt,model_name):\n",
    "    messages = [\n",
    "        {\"role\": \"system\", \"content\": system_message},\n",
    "        {\"role\": \"user\", \"content\": prompt}\n",
    "    ]\n",
    "    stream = openai_client.chat.completions.create(\n",
    "        model=model_name,\n",
    "        messages=messages,\n",
    "        stream=True\n",
    "    )\n",
    "    result = \"\"\n",
    "    for chunk in stream:\n",
    "        if chunk.choices and chunk.choices[0].delta.content:  # Check if choices exist and content is not None\n",
    "            result += chunk.choices[0].delta.content\n",
    "            yield result\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 31,
   "metadata": {},
   "outputs": [],
   "source": [
    "def stream_model(prompt, model):\n",
    "    if model==\"gpt-4o-mini\":\n",
    "        result= stream_gpt2(prompt, model)\n",
    "    elif model == \"gpt-4o\":\n",
    "        result= stream_gpt2(prompt, model)\n",
    "    elif model == \"o1\":\n",
    "        result= stream_gpt2(prompt, model)\n",
    "    elif model == \"o3-mini\":\n",
    "        result= stream_gpt2(prompt, model)\n",
    "    else:\n",
    "        raise ValueError(f\"Unknown model {model}\")\n",
    "    yield from result"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 32,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "* Running on local URL:  http://127.0.0.1:7872\n",
      "\n",
      "To create a public link, set `share=True` in `launch()`.\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<div><iframe src=\"http://127.0.0.1:7872/\" width=\"100%\" height=\"500\" allow=\"autoplay; camera; microphone; clipboard-read; clipboard-write;\" frameborder=\"0\" allowfullscreen></iframe></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": []
     },
     "execution_count": 32,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "view = gr.Interface(\n",
    "    fn=stream_model,\n",
    "    inputs=[gr.Textbox(label=\"Your message:\"), gr.Dropdown([\"gpt-4o-mini\", \"gpt-4o\", \"o1\", \"o3-mini\"], label=\"Select model\")],\n",
    "    outputs=[gr.Markdown(label=\"Response:\")],\n",
    "    flagging_mode=\"never\"\n",
    ")\n",
    "view.launch()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Building a company brochure generator\n",
    "\n",
    "Now you know how - it's simple!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 33,
   "metadata": {},
   "outputs": [],
   "source": [
    "# A class to represent a Webpage\n",
    "\n",
    "class Website:\n",
    "    url: str\n",
    "    title: str\n",
    "    text: str\n",
    "\n",
    "    def __init__(self, url):\n",
    "        self.url = url\n",
    "        response = requests.get(url)\n",
    "        self.body = response.content\n",
    "        soup = BeautifulSoup(self.body, 'html.parser')\n",
    "        self.title = soup.title.string if soup.title else \"No title found\"\n",
    "        for irrelevant in soup.body([\"script\", \"style\", \"img\", \"input\"]):\n",
    "            irrelevant.decompose()\n",
    "        self.text = soup.body.get_text(separator=\"\\n\", strip=True)\n",
    "\n",
    "    def get_contents(self):\n",
    "        return f\"Webpage Title:\\n{self.title}\\nWebpage Contents:\\n{self.text}\\n\\n\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 34,
   "metadata": {},
   "outputs": [],
   "source": [
    "# With massive thanks to Bill G. who noticed that a prior version of this had a bug! Now fixed.\n",
    "\n",
    "system_message = \"You are an assistant that analyzes the contents of a company website landing page \\\n",
    "and creates a short brochure about the company for prospective customers, investors and recruits. Respond in markdown.\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 35,
   "metadata": {},
   "outputs": [],
   "source": [
    "def stream_brochure(company_name, url, model):\n",
    "    prompt = f\"Please generate a company brochure for {company_name}. Here is their landing page:\\n\"\n",
    "    prompt += Website(url).get_contents()\n",
    "    if model == \"gpt-4o-mini\":\n",
    "        result = stream_gpt2(prompt, model)\n",
    "    elif model == \"gpt-4o\":\n",
    "        result = stream_gpt2(prompt, model)\n",
    "    elif model == \"o1\":\n",
    "        result = stream_gpt2(prompt, model)\n",
    "    elif model == \"o3-mini\":\n",
    "        result = stream_gpt2(prompt, model)\n",
    "    else:\n",
    "        raise ValueError(f\"Unknown model {model}\")\n",
    "    yield from result"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 36,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "* Running on local URL:  http://127.0.0.1:7873\n",
      "\n",
      "To create a public link, set `share=True` in `launch()`.\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<div><iframe src=\"http://127.0.0.1:7873/\" width=\"100%\" height=\"500\" allow=\"autoplay; camera; microphone; clipboard-read; clipboard-write;\" frameborder=\"0\" allowfullscreen></iframe></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": []
     },
     "execution_count": 36,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "view = gr.Interface(\n",
    "    fn = stream_brochure,\n",
    "    inputs = [\n",
    "        gr.Textbox(label=\"Company Name:\"),\n",
    "        gr.Textbox(label=\"Landing page URL including http:// or https://\"),\n",
    "        gr.Dropdown([\"gpt-4o-mini\", \"gpt-4o\", \"o1\", \"o3-mini\"], label=\"Select model\")\n",
    "    ],\n",
    "    outputs=[gr.Markdown(label=\"Company Brochure:\")],\n",
    "    flagging_mode=\"never\"\n",
    ")\n",
    "view.launch()"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "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.12.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}