week2/notes/day2.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Day 2 - Building AI UIs with Gradio: Quick Prototyping for LLM Engineers\n",
    "\n",
    "### Summary\n",
    "\n",
    "This lecture introduces Gradio, a tool for creating user interfaces for machine learning models, specifically focusing on its application with large language models (LLMs) like GPT, Claude, and Gemini. The session aims to demonstrate how to quickly build and deploy interactive prototypes for business applications.\n",
    "\n",
    "### Highlights\n",
    "\n",
    "- 🚀 Gradio, part of Hugging Face, simplifies UI creation for machine learning models.\n",
    "- 💡 It allows data scientists and LLM engineers to rapidly prototype and share applications.\n",
    "- 🛠️ The lecture will cover building UIs for API calls to various LLMs and for a brochure application.\n",
    "- 📈 Streaming and markdown will be integrated into the UI for enhanced functionality.\n",
    "- 🤝 Gradio is a tool acquired by Hugging Face to facilitate the development of machine learning apps.\n",
    "\n",
    "### Code Examples\n",
    "\n",
    "```python\n",
    "import gradio as gr\n",
    "\n",
    "def greet(name):\n",
    "return \"Hello \" + name\n",
    "\n",
    "iface = gr.Interface(fn=greet, inputs=\"text\", outputs=\"text\")\n",
    "iface.launch() 1\n",
    "```\n",
    "\n",
    "# Day 2 - Gradio Tutorial: Create Interactive AI Interfaces for OpenAI GPT Models\n",
    "\n",
    "### **Summary**\n",
    "\n",
    "This lecture introduces Gradio, a simple framework for building user interfaces. It demonstrates how to create basic UIs, integrate them with functions (including LLM calls), and share them via public URLs. The session highlights the ease of use and powerful capabilities of Gradio for rapid prototyping and collaboration.\n",
    "\n",
    "### **Highlights**\n",
    "\n",
    "- 🎉 Introduction to Gradio for building user interfaces easily.\n",
    "- 💻 Demonstration of creating a simple UI to uppercase text using the `shout` function.\n",
    "- 🌐 Explanation of how Gradio runs a local web server, enabling both local and public sharing of UIs.\n",
    "- 🔗 Showing how to share UIs via public URLs using `share=True`.\n",
    "- 🛠️ Example of creating a more configurable UI with labeled text boxes for input and output.\n",
    "- 🤖 Integration of Gradio with an LLM (GPT-4 mini) to build a UI that interacts with the model.\n",
    "- 🚀 Emphasizing the simplicity and power of Gradio for rapid prototyping and collaboration.\n",
    "\n",
    "### **Code Examples**\n",
    "\n",
    "```python\n",
    "  import gradio as gr\n",
    "\n",
    "  def shout(text):\n",
    "      return text.upper()\n",
    "\n",
    "  gr.Interface(fn=shout, inputs=\"text\", outputs=\"text\", allow_flagging=\"never\").launch(share=True)\n",
    "\n",
    "```\n",
    "\n",
    "```python\n",
    "  import gradio as gr\n",
    "  import os\n",
    "  import openai\n",
    "  from dotenv import load_dotenv\n",
    "\n",
    "  load_dotenv()\n",
    "  openai.api_key = os.getenv(\"OPENAI_API_KEY\")\n",
    "\n",
    "  system_message = \"You are a helpful assistant.\"\n",
    "\n",
    "  def message_gpt(prompt):\n",
    "      messages = [\n",
    "          {\"role\": \"system\", \"content\": system_message},\n",
    "          {\"role\": \"user\", \"content\": prompt}\n",
    "      ]\n",
    "      completion = openai.ChatCompletion.create(model=\"gpt-4\", messages=messages)\n",
    "      return completion.choices[0].message.content\n",
    "\n",
    "  gr.Interface(fn=message_gpt, inputs=gr.Textbox(lines=6, label=\"Your Message\"), outputs=gr.Textbox(lines=8, label=\"Response\")).launch(share=True)\n",
    "\n",
    "```\n",
    "\n",
    "# Day 2 - Implementing Streaming Responses with GPT and Claude in Gradio UI\n",
    "\n",
    "### **Summary**\n",
    "\n",
    "This lecture builds upon the previous one, demonstrating how to enhance Gradio interfaces with markdown formatting and streaming capabilities for LLM responses. It showcases the ease of integrating these features and provides examples using both GPT-4 and Claude models.\n",
    "\n",
    "### **Highlights**\n",
    "\n",
    "- 📝 Integration of markdown formatting in Gradio outputs for cleaner, structured LLM responses.\n",
    "- ⏩ Implementation of streaming LLM responses in Gradio using generator functions.\n",
    "- 🔄 Explanation of cumulative result streaming to prevent output flickering in Gradio.\n",
    "- 🤖 Demonstration of streaming with both GPT-4 and Claude models, highlighting API differences.\n",
    "- 💡 Emphasizing Gradio's automatic handling of generators for streaming output.\n",
    "- 🎨 Showcasing the creation of user-friendly interfaces with formatted and real-time responses.\n",
    "- 🚀 Preparing to add model selection capabilities in the next session.\n",
    "\n",
    "### **Code Examples**\n",
    "\n",
    "```python\n",
    "  import gradio as gr\n",
    "  import os\n",
    "  import openai\n",
    "  from dotenv import load_dotenv\n",
    "\n",
    "  load_dotenv()\n",
    "  openai.api_key = os.getenv(\"OPENAI_API_KEY\")\n",
    "\n",
    "  system_message = \"You are a helpful assistant.\"\n",
    "\n",
    "  def stream_gpt(prompt):\n",
    "      messages = [\n",
    "          {\"role\": \"system\", \"content\": system_message},\n",
    "          {\"role\": \"user\", \"content\": prompt}\n",
    "      ]\n",
    "      completion = openai.ChatCompletion.create(model=\"gpt-4\", messages=messages, stream=True)\n",
    "      result = \"\"\n",
    "      for chunk in completion:\n",
    "          if chunk.choices[0].delta.content:\n",
    "              result += chunk.choices[0].delta.content\n",
    "              yield result\n",
    "\n",
    "  gr.Interface(fn=stream_gpt, inputs=\"text\", outputs=\"markdown\").launch(share=True)\n",
    "\n",
    "```\n",
    "\n",
    "```python\n",
    "  import gradio as gr\n",
    "  import anthropic\n",
    "  import os\n",
    "  from dotenv import load_dotenv\n",
    "\n",
    "  load_dotenv()\n",
    "  anthropic_api_key = os.getenv(\"ANTHROPIC_API_KEY\")\n",
    "\n",
    "  client = anthropic.Anthropic(api_key=anthropic_api_key)\n",
    "  system_message = \"You are a helpful assistant.\"\n",
    "\n",
    "  def stream_claude(prompt):\n",
    "      messages = [\n",
    "          {\"role\": \"user\", \"content\": prompt}\n",
    "      ]\n",
    "      full_prompt = f\"{anthropic.HUMAN_PROMPT} {prompt} {anthropic.AI_PROMPT}\"\n",
    "      with client.completions.stream(\n",
    "          prompt=full_prompt,\n",
    "          stop_sequences=[anthropic.HUMAN_PROMPT],\n",
    "          model=\"claude-2\",\n",
    "          max_tokens_to_sample=1000,\n",
    "          system=system_message,\n",
    "      ) as stream:\n",
    "          result = \"\"\n",
    "          for text in stream.text:\n",
    "              result += text\n",
    "              yield result\n",
    "\n",
    "  gr.Interface(fn=stream_claude, inputs=\"text\", outputs=\"markdown\").launch(share=True)\n",
    "\n",
    "```\n",
    "\n",
    "# Day 2 - Building a Multi-Model AI Chat Interface with Gradio: GPT vs Claude\n",
    "\n",
    "### Summary\n",
    "\n",
    "This lecture demonstrates how to create a versatile user interface using Gradio that allows users to select between different language models (GPT-4 and Claude) for generating company brochures from website landing pages. It also provides ideas for extending the functionality of the application.\n",
    "\n",
    "### Highlights\n",
    "\n",
    "- 🔄 Creating a hybrid generator function (`stream_model`) to switch between GPT-4 and Claude models.\n",
    "- 💻 Building a Gradio interface with a dropdown to select between GPT-4 and Claude for generating responses.\n",
    "- 📄 Integrating the company brochure generator from a previous lab into a Gradio interface.\n",
    "- 🌐 Using `requests` and `BeautifulSoup` to scrape website content for brochure generation.\n",
    "- 🤖 Generating company brochures using both GPT-4 and Claude models, showcasing different output styles.\n",
    "- 💡 Suggesting enhancements like adding Gemini integration and tone selection for brochure generation.\n",
    "- 🚀 Emphasizing the simplicity and effectiveness of Gradio for building complex applications.\n",
    "\n",
    "### Code Examples\n",
    "\n",
    "```python\n",
    "import gradio as gr\n",
    "  import os\n",
    "  import openai\n",
    "  import anthropic\n",
    "  from dotenv import load_dotenv\n",
    "  import requests\n",
    "  from bs4 import BeautifulSoup\n",
    "\n",
    "  load_dotenv()\n",
    "  openai.api_key = os.getenv(\"OPENAI_API_KEY\")\n",
    "  anthropic_api_key = os.getenv(\"ANTHROPIC_API_KEY\")\n",
    "  client = anthropic.Anthropic(api_key=anthropic_api_key)\n",
    "\n",
    "  class Website:\n",
    "      def __init__(self, url):\n",
    "          self.url = url\n",
    "          self.title, self.text = self.get_context()\n",
    "\n",
    "      def get_context(self):\n",
    "          response = requests.get(self.url)\n",
    "          soup = BeautifulSoup(response.text, 'html.parser')\n",
    "          title = soup.title.string if soup.title else \"No Title Found\"\n",
    "          for script in soup([\"script\", \"style\"]):\n",
    "              script.decompose()\n",
    "          text = soup.get_text()\n",
    "          lines = (line.strip() for line in text.splitlines())\n",
    "          chunks = (phrase.strip() for line in lines for phrase in line.split(\"  \"))\n",
    "          text = '\\n'.join(chunk for chunk in chunks if chunk)\n",
    "          return title, text\n",
    "\n",
    "  system_prompt = \"You are an assistant that analyzes the contents of a company website landing page and creates a short brochure. Respond in markdown.\"\n",
    "\n",
    "  def stream_gpt(prompt):\n",
    "      messages = [{\"role\": \"system\", \"content\": system_prompt}, {\"role\": \"user\", \"content\": prompt}]\n",
    "      completion = openai.ChatCompletion.create(model=\"gpt-4\", messages=messages, stream=True)\n",
    "      result = \"\"\n",
    "      for chunk in completion:\n",
    "          if chunk.choices[0].delta.content:\n",
    "              result += chunk.choices[0].delta.content\n",
    "              yield result\n",
    "\n",
    "  def stream_claude(prompt):\n",
    "      full_prompt = f\"{anthropic.HUMAN_PROMPT} {prompt} {anthropic.AI_PROMPT}\"\n",
    "      with client.completions.stream(prompt=full_prompt, stop_sequences=[anthropic.HUMAN_PROMPT], model=\"claude-2\", max_tokens_to_sample=1000, system=system_prompt) as stream:\n",
    "          result = \"\"\n",
    "          for text in stream.text:\n",
    "              result += text\n",
    "              yield result\n",
    "\n",
    "  def stream_model(prompt, model):\n",
    "      if model == \"GPT\":\n",
    "          return stream_gpt(prompt)\n",
    "      elif model == \"Claude\":\n",
    "          return stream_claude(prompt)\n",
    "      else:\n",
    "          raise ValueError(\"Invalid model selected.\")\n",
    "\n",
    "  def stream_brochure(company_name, url, model):\n",
    "      website = Website(url)\n",
    "      prompt = f\"Please generate a company brochure for {company_name}. Here is their landing page: {website.text}\"\n",
    "      return stream_model(prompt, model)\n",
    "\n",
    "  gr.Interface(fn=stream_brochure, inputs=[\"text\", \"text\", gr.Dropdown([\"GPT\", \"Claude\"], label=\"Select Model\")], outputs=\"markdown\").launch(share=True)\n",
    "```\n",
    "\n",
    "# Day 2 - Building Advanced AI UIs: From OpenAI API to Chat Interfaces with Gradio\n",
    "\n",
    "### **Summary**\n",
    "\n",
    "This lecture concludes the section on building user interfaces with Gradio, highlighting the skills acquired in integrating LLMs and creating interactive applications. It sets the stage for the next phase, which will focus on building chat UIs, enhancing prompt context, and developing a customer support assistant.\n",
    "\n",
    "### **Highlights**\n",
    "\n",
    "- 🎉 Congratulations on acquiring skills in using LLM APIs and building UIs with Gradio.\n",
    "- 💻 Review of the functionalities developed, including model selection and dynamic content generation.\n",
    "- 🚀 Preview of the next lecture, which will cover building chat UIs and enhancing prompt context.\n",
    "- 🤖 Introduction to the upcoming project: developing a customer support assistant.\n",
    "- 💡 Preparation for exploring more complex UI interactions and practical applications of LLMs.\n",
    "- 🌟 Encouragement to continue learning and applying the newly acquired skills."
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}