{
"cells": [
{
"cell_type": "markdown",
"id": "8ec2fef2",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"# Prototyping a Basic Chatbot UI\n",
"* **Created by:** Eric Martinez\n",
"* **For:** Software Engineering 2\n",
"* **At:** University of Texas Rio-Grande Valley"
]
},
{
"cell_type": "markdown",
"id": "e989bbe3",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"## Tools and Concepts"
]
},
{
"cell_type": "markdown",
"id": "368cda1a",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"#### Gradio\n",
"\n",
"Gradio is an open-source Python library that allows developers to create and prototype user interfaces (UIs) and APIs for machine learning applications and LLMs quickly and easily. Three reasons it is a great tool are:\n",
"\n",
"* Simple and intuitive: Gradio makes it easy to create UIs with minimal code, allowing developers to focus on their models.\n",
"* Versatile: Gradio supports a wide range of input and output types, making it suitable for various machine learning tasks.\n",
"* Shareable: Gradio interfaces can be shared with others, enabling collaboration and easy access to your models."
]
},
{
"cell_type": "markdown",
"id": "e2888a24",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"#### Chatbots\n",
"\n",
"Chatbots are AI-powered conversational agents designed to interact with users through natural language. LLMs have the potential to revolutionize chatbots by providing more human-like, accurate, and context-aware responses, leading to more engaging and useful interactions."
]
},
{
"cell_type": "markdown",
"id": "6f24bac1",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"#### Example: Gradio Interface\n"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "4ecdb50a",
"metadata": {
"slideshow": {
"slide_type": "fragment"
}
},
"outputs": [],
"source": [
"!pip -q install --upgrade gradio"
]
},
{
"cell_type": "code",
"execution_count": 3,
"id": "0b28a4e7",
"metadata": {
"slideshow": {
"slide_type": "fragment"
}
},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"Running on local URL: http://127.0.0.1:7882\n",
"Running on public URL: https://d807b00726b10425a4.gradio.live\n",
"\n",
"This share link expires in 72 hours. For free permanent hosting and GPU upgrades (NEW!), check out Spaces: https://huggingface.co/spaces\n"
]
},
{
"data": {
"text/html": [
""
],
"text/plain": [
""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"import gradio as gr\n",
" \n",
"def do_something_cool(first_name, last_name):\n",
" return f\"{first_name} {last_name} is so cool\"\n",
" \n",
"with gr.Blocks() as app:\n",
" first_name_box = gr.Textbox(label=\"First Name\")\n",
" last_name_box = gr.Textbox(label=\"Last Name\")\n",
" output_box = gr.Textbox(label=\"Output\", interactive=False)\n",
" btn = gr.Button(value =\"Send\")\n",
" btn.click(do_something_cool, inputs = [first_name_box, last_name_box], outputs = [output_box])\n",
" app.launch(share=True)\n"
]
},
{
"cell_type": "markdown",
"id": "c1b1b69e",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"#### Example: Basic Gradio Chatbot Interface / Just the look"
]
},
{
"cell_type": "markdown",
"id": "ea2878bb",
"metadata": {
"slideshow": {
"slide_type": "fragment"
}
},
"source": [
"Version with minimal comments"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "a6f1cca3",
"metadata": {
"slideshow": {
"slide_type": "fragment"
}
},
"outputs": [],
"source": [
"import gradio as gr\n",
"\n",
"def chat(message, history):\n",
" history = history or []\n",
" # Set a simple AI reply (replace this with a call to an LLM for a more sophisticated response)\n",
" ai_reply = \"hello\" \n",
" history.append((message, ai_reply))\n",
" return None, history, history\n",
" \n",
"with gr.Blocks() as app:\n",
" with gr.Tab(\"Conversation\"):\n",
" with gr.Row():\n",
" with gr.Column():\n",
" chatbot = gr.Chatbot(label=\"Conversation\")\n",
" message = gr.Textbox(label=\"Message\")\n",
" history_state = gr.State()\n",
" btn = gr.Button(value =\"Send\")\n",
" btn.click(chat, inputs = [message, history_state], outputs = [message, chatbot, history_state])\n",
" app.launch(share=True)\n"
]
},
{
"cell_type": "markdown",
"id": "5cc72efb",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Version with more comments"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "44debca6",
"metadata": {
"slideshow": {
"slide_type": "fragment"
}
},
"outputs": [],
"source": [
"import gradio as gr\n",
"\n",
"# Define the chat function that processes user input and generates an AI response\n",
"def chat(message, history):\n",
" # If history is empty, initialize it as an empty list\n",
" history = history or []\n",
" # Set a simple AI reply (replace this with a call to an LLM for a more sophisticated response)\n",
" ai_reply = \"hello\"\n",
" # Append the user message and AI reply to the conversation history\n",
" history.append((message, ai_reply))\n",
" # Return the updated history and display it in the chatbot interface\n",
" return None, history, history\n",
"\n",
"# Create a Gradio Blocks interface\n",
"with gr.Blocks() as app:\n",
" # Create a tab for the conversation\n",
" with gr.Tab(\"Conversation\"):\n",
" # Create a row for the input components\n",
" with gr.Row():\n",
" # Create a column for the input components\n",
" with gr.Column():\n",
" # Create a chatbot component to display the conversation\n",
" chatbot = gr.Chatbot(label=\"Conversation\")\n",
" # Create a textbox for user input\n",
" message = gr.Textbox(label=\"Message\")\n",
" # Create a state variable to store the conversation history\n",
" history_state = gr.State()\n",
" # Create a button to send the user's message\n",
" btn = gr.Button(value=\"Send\")\n",
" # Connect the button click event to the chat function, passing in the input components and updating the output components\n",
" btn.click(chat, inputs=[message, history_state], outputs=[message, chatbot, history_state])\n",
" # Launch the Gradio interface and make it shareable\n",
" app.launch(share=True)"
]
},
{
"cell_type": "markdown",
"id": "3b660170",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Sweet! That wasn't too bad, not much code to make a cool little UI!"
]
}
],
"metadata": {
"celltoolbar": "Slideshow",
"kernelspec": {
"display_name": "Python 3 (ipykernel)",
"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.10.8"
}
},
"nbformat": 4,
"nbformat_minor": 5
}