ElevateChat&AIApplications/Part5 --  Frontend Flourish: Craft Immersive AI Experiences Using Streamlit.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Part 5 — Frontend Flourish: Craft Immersive AI Experiences Using Streamlit\n",
    "\n",
    "As we approach the finale, we shift our focus to the frontend. Discover how Streamlit, the dynamic Python library, can breathe life into your AI applications. Build an engaging user interface that brings vector-powered insights to life, visually enhancing user interactions and experiences. Unlock the potential to captivate users with visually appealing dashboards that showcase the transformative impact of vector storage.\n",
    "\n",
    "[Code](code/frontend/home.py)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Understanding the Scenario\n",
    "\n",
    "Imagine you're tasked with creating a chatbot that helps users retrieve relevant information from a knowledge base. To achieve this, we'll integrate Azure Cognitive Search for document retrieval and OpenAI for natural language understanding. The chatbot will be presented using a Streamlit web application, providing an interactive interface for users to ask questions and receive instant responses.\n",
    "\n",
    "### Setting Up the Environment\n",
    "Before we dive into the code, let's make sure our development environment is set up correctly:\n",
    "\n",
    "- Install Streamlit using `pip install streamlit`.\n",
    "- Ensure you have an Azure subscription and access to Azure Cognitive Search.\n",
    "- Obtain API keys and endpoint URLs for both Azure Cognitive Search and OpenAI.\n",
    "\n",
    "### Key Components Explained\n",
    "The code provided in this part comprises several key functions and elements. Let's break them down:\n",
    "\n",
    "#### Displaying Company Logo and Welcome Text\n",
    "The `add_company_logo_and_welcome_text()` function is responsible for showcasing the company logo and a warm welcome message at the top of the web application. This function uses CSS styling to center the logo and applies the Streamlit write() and markdown() methods to display the welcome message.\n",
    "\n",
    "#### Image to Base64 Conversion\n",
    "The image_to_base64() function converts an image (in this case, the company logo) to its base64 representation. This conversion is essential for embedding the image in the HTML code.\n",
    "\n",
    "#### Chatbot Interaction\n",
    "The askdocuments() function facilitates communication between the chatbot and external APIs. It sends a user's question to the API, retrieves and processes the response, and returns the answer. This function actually calls the backend REST API which was explained in the previous part.\n",
    "\n",
    "#### Streamlit Web Application\n",
    "The main() function sets up the Streamlit web application. It invokes the add_company_logo_and_welcome_text() function to display the company logo and welcome message. Users can select different indexes, input their question, and receive responses from the chatbot. \n",
    "\n",
    "#### Building the Streamlit Application\n",
    "The heart of our solution lies in the Streamlit web application. Users can interact with the chatbot through a simple and intuitive interface. Here's a breakdown of how the application works:\n",
    "\n",
    "Users are presented with a selection of indexes to choose from, enabling them to target specific domains or topics.\n",
    "The sidebar allows users to input their Azure Cognitive Search and OpenAI credentials.\n",
    "Upon submitting a question, the chatbot queries the APIs and returns responses, displayed as chat messages.\n",
    "Users can engage in a back-and-forth conversation with the chatbot, asking follow-up questions and receiving immediate answers.\n",
    "\n",
    "\n",
    "### Conclusion\n",
    "\n",
    "In this blog post, we've explored the process of building an interactive AI-powered chatbot using Streamlit, Azure Cognitive Search, and OpenAI. By combining these technologies, we've created a user-friendly interface that enables users to access information effortlessly. The chatbot's ability to understand natural language and retrieve relevant documents from a knowledge base demonstrates the power of AI in enhancing user experiences.\n",
    "\n",
    "The code provided serves as a foundation for creating your own customized chatbot applications. As you continue to explore the capabilities of Streamlit, Azure Cognitive Search, and OpenAI, you'll be able to develop chatbots that cater to specific industries, domains, and user needs.\n",
    "\n",
    "Feel free to modify and expand upon the code to suit your requirements, and let your creativity shine as you embark on your journey to create intelligent and engaging chatbots. Happy coding!\n",
    "\n",
    "\n",
    "\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import streamlit as st\n",
    "import base64\n",
    "import requests\n",
    "import json\n",
    "\n",
    "from PIL import Image\n",
    "from io import BytesIO\n",
    "\n",
    "st.set_page_config(page_title='💬 Customer POC')\n",
    "\n",
    "\n",
    "def add_company_logo_and_welcome_text():\n",
    "    \"\"\"\n",
    "    This function displays the company logo in the center of the page.\n",
    "    \"\"\"\n",
    "    customer_logo = Image.open('yourlogo.png')\n",
    "\n",
    "    # Center the logo using CSS style\n",
    "    st.write(\n",
    "        f'<div style=\"display: flex; justify-content: center;\">'\n",
    "        f'<img src=\"data:image/png;base64,{image_to_base64(customer_logo)}\" width=\"300\">'\n",
    "        '</div>',\n",
    "        unsafe_allow_html=True\n",
    "    )\n",
    "\n",
    "    # Define company name to be used for welcome title --> should be a parameter\n",
    "    company_name = 'YourCompanyName'\n",
    "    # Page title and subtitle\n",
    "    st.markdown(\"<h2 style='text-align: center; color: black;'>Welcome to the {} chatbot</h2>\".format(company_name), unsafe_allow_html=True)\n",
    "    st.markdown(\"<h5 style='text-align: center; color: black;'>Your AI-powered copilot, check some samples</h5> \", unsafe_allow_html=True)\n",
    "\n",
    "\n",
    "def image_to_base64(image):\n",
    "    \"\"\"\n",
    "    Convert an image to its base64 representation.\n",
    "    \"\"\"\n",
    "\n",
    "    buffered = BytesIO()\n",
    "    image.save(buffered, format=\"PNG\")\n",
    "    return base64.b64encode(buffered.getvalue()).decode()\n",
    "\n",
    "\n",
    "\n",
    "def askdocuments(\n",
    "    url,\n",
    "    AZURE_SEARCH_ADMIN_KEY,\n",
    "    AZURE_SEARCH_SERVICE_ENDPOINT,\n",
    "    AZURE_SEARCH_SERVICE_NAME,\n",
    "    AZURE_SEARCH_INDEX_NAME,\n",
    "    AZURE_OPENAI_EMBEDDING_DEPLOYED_MODEL_NAME,\n",
    "    AZURE_OPENAI_EMBEDDING_DEPLOYED_MODEL,\n",
    "    AZURE_OPENAI_API_VERSION,\n",
    "    AZURE_OPENAI_ENDPOINT,\n",
    "    AZURE_OPENAI_API_KEY,\n",
    "    OPENAI_API_TYPE,\n",
    "    OPENAI_DEPLOYMENT_NAME,\n",
    "    OPENAI_MODEL_NAME,\n",
    "    NUMBER_OF_CHUNKS_TO_RETURN,\n",
    "        question):\n",
    "\n",
    "    try:\n",
    "        # Prepare the request data\n",
    "        headers = {\n",
    "            'Content-Type': 'application/json'\n",
    "        }\n",
    "        data = {\n",
    "            'AZURE_SEARCH_ADMIN_KEY': AZURE_SEARCH_ADMIN_KEY,\n",
    "            'AZURE_SEARCH_SERVICE_ENDPOINT': AZURE_SEARCH_SERVICE_ENDPOINT,\n",
    "            'AZURE_SEARCH_SERVICE_NAME': AZURE_SEARCH_SERVICE_NAME,\n",
    "            'AZURE_SEARCH_INDEX_NAME': AZURE_SEARCH_INDEX_NAME,\n",
    "            'AZURE_OPENAI_EMBEDDING_DEPLOYED_MODEL_NAME': AZURE_OPENAI_EMBEDDING_DEPLOYED_MODEL_NAME,\n",
    "            'AZURE_OPENAI_EMBEDDING_DEPLOYED_MODEL': AZURE_OPENAI_EMBEDDING_DEPLOYED_MODEL,\n",
    "            'AZURE_OPENAI_API_VERSION': AZURE_OPENAI_API_VERSION,\n",
    "            'AZURE_OPENAI_ENDPOINT': AZURE_OPENAI_ENDPOINT,\n",
    "            'AZURE_OPENAI_API_KEY': AZURE_OPENAI_API_KEY,\n",
    "            'OPENAI_API_TYPE': OPENAI_API_TYPE,\n",
    "            'OPENAI_DEPLOYMENT_NAME': OPENAI_DEPLOYMENT_NAME,\n",
    "            'OPENAI_MODEL_NAME': OPENAI_MODEL_NAME,\n",
    "            'NUMBER_OF_CHUNKS_TO_RETURN': NUMBER_OF_CHUNKS_TO_RETURN,\n",
    "            'question': question\n",
    "        }\n",
    "\n",
    "        # Make the API call and extract the documents from the response\n",
    "        response = requests.get(url, headers=headers, json=data)\n",
    "        response.raise_for_status()  # Raise an exception for non-2xx status codes\n",
    "        answer = json.loads(response.content)\n",
    "        return answer\n",
    "\n",
    "    except requests.exceptions.RequestException as e:\n",
    "        # Handle any requests-related errors (e.g., network issues, invalid URL)\n",
    "        raise ValueError(f\"Error with the API request: {e}\")\n",
    "\n",
    "    except json.JSONDecodeError as e:\n",
    "        # Handle any JSON decoding errors (e.g., invalid JSON format)\n",
    "        raise ValueError(f\"Error decoding API response as JSON: {e}\")\n",
    "\n",
    "\n",
    "def main():\n",
    "    add_company_logo_and_welcome_text()\n",
    "\n",
    "    st.markdown('#')\n",
    "\n",
    "\n",
    "\n",
    "    user_choice = st.radio(\"Select an index:\", ('<yourownsetting>', '<yourownsetting>'))\n",
    "\n",
    "    with st.sidebar:\n",
    "        st.subheader(\"Settings for Ask your documents\")\n",
    "        st.write(\"Enter your Azure Search API key, endpoint, and index name.\")\n",
    "        url = st.text_input(\"Enter your REST API URL\", value=\"http://localhost:7071/api/AskYourDocuments\")\n",
    "\n",
    "        AZURE_SEARCH_ADMIN_KEY = st.text_input(\"Enter your AZURE_SEARCH_ADMIN_KEY\", type=\"password\", value=\"<yourownsetting>\")\n",
    "        AZURE_SEARCH_SERVICE_ENDPOINT = st.text_input(\"Enter your AZURE_SEARCH_SERVICE_ENDPOINT\", value=\"<yourownsetting>t\")\n",
    "        AZURE_SEARCH_SERVICE_NAME = st.text_input(\"Enter your AZURE_SEARCH_SERVICE_NAME\", value=\"<yourownsetting>\")\n",
    "        AZURE_SEARCH_INDEX_NAME = st.text_input(\"Enter your AZURE_SEARCH_INDEX_NAME\", value=\"<yourownsetting>\")\n",
    "        AZURE_OPENAI_EMBEDDING_DEPLOYED_MODEL_NAME = st.text_input(\"Enter your AZURE_SEARCH_INDEX_NAME\", value=\"text-embedding-ada-002\")\n",
    "        AZURE_OPENAI_EMBEDDING_DEPLOYED_MODEL = st.text_input(\"Enter your AZURE_OPENAI_EMBEDDING_DEPLOYED_MODEL\", value=\"text-embedding-ada-002\")\n",
    "        AZURE_OPENAI_API_VERSION = st.text_input(\"Enter your AZURE_OPENAI_API_VERSION\", value=\"2023-03-15-preview\")\n",
    "        AZURE_OPENAI_ENDPOINT = st.text_input(\"Enter your AZURE_OPENAI_ENDPOINT\", value=\"<yourownsetting>\")\n",
    "        AZURE_OPENAI_API_KEY = st.text_input(\"Enter your AZURE_OPENAI_API_KEY\", type=\"password\", value=\"<yourownsetting>\")\n",
    "        OPENAI_API_TYPE = st.text_input(\"Enter your OPENAI_API_TYPE\", value=\"azure\")\n",
    "        OPENAI_DEPLOYMENT_NAME = st.text_input(\"Enter your OPENAI_DEPLOYMENT_NAME\", value=\"chat\")\n",
    "        OPENAI_MODEL_NAME = st.text_input(\"Enter your OPENAI_MODEL_NAME\", value=\"gpt-35-turbo\")\n",
    "        NUMBER_OF_CHUNKS_TO_RETURN = st.text_input(\"Enter your NUMBER_OF_CHUNKS_TO_RETURN\", value=\"3\")\n",
    "\n",
    "    # Store LLM generated responses\n",
    "    if \"messages\" not in st.session_state.keys():\n",
    "        st.session_state.messages = [{\"role\": \"assistant\", \"content\": \"How may I help you?\"}]\n",
    "\n",
    "        # Display chat messages\n",
    "    for message in st.session_state.messages:\n",
    "        with st.chat_message(message[\"role\"]):\n",
    "            st.write(message[\"content\"])\n",
    "\n",
    "    # User-provided prompt\n",
    "    if prompt := st.chat_input():\n",
    "        st.session_state.messages.append({\"role\": \"user\", \"content\": prompt})\n",
    "        with st.chat_message(\"user\"):\n",
    "            st.write(prompt)\n",
    "\n",
    "    # Generate a new response if last message is not from assistant\n",
    "    if st.session_state.messages[-1][\"role\"] != \"assistant\":\n",
    "        with st.chat_message(\"assistant\"):\n",
    "            with st.spinner(\"Thinking...\"):\n",
    "                response = askdocuments(url=url,\n",
    "                                        AZURE_SEARCH_ADMIN_KEY=AZURE_SEARCH_ADMIN_KEY,\n",
    "                                        AZURE_SEARCH_SERVICE_ENDPOINT=AZURE_SEARCH_SERVICE_ENDPOINT,\n",
    "                                        AZURE_SEARCH_SERVICE_NAME=AZURE_SEARCH_SERVICE_NAME,\n",
    "                                        AZURE_SEARCH_INDEX_NAME=AZURE_SEARCH_INDEX_NAME,\n",
    "                                        AZURE_OPENAI_EMBEDDING_DEPLOYED_MODEL_NAME=AZURE_OPENAI_EMBEDDING_DEPLOYED_MODEL_NAME,\n",
    "                                        AZURE_OPENAI_EMBEDDING_DEPLOYED_MODEL=AZURE_OPENAI_EMBEDDING_DEPLOYED_MODEL,\n",
    "                                        AZURE_OPENAI_API_VERSION=AZURE_OPENAI_API_VERSION,\n",
    "                                        AZURE_OPENAI_ENDPOINT=AZURE_OPENAI_ENDPOINT,\n",
    "                                        AZURE_OPENAI_API_KEY=AZURE_OPENAI_API_KEY,\n",
    "                                        OPENAI_API_TYPE=OPENAI_API_TYPE,\n",
    "                                        OPENAI_DEPLOYMENT_NAME=OPENAI_DEPLOYMENT_NAME,\n",
    "                                        OPENAI_MODEL_NAME=OPENAI_MODEL_NAME,\n",
    "                                        NUMBER_OF_CHUNKS_TO_RETURN=NUMBER_OF_CHUNKS_TO_RETURN,\n",
    "                                        question=prompt\n",
    "                                        )\n",
    "\n",
    "                st.write(response['result'])\n",
    "\n",
    "                # Display each document title with a clickable link\n",
    "                for idx, doc in enumerate(response['source_documents']):\n",
    "                    doc_title = doc[\"title\"]\n",
    "                    doc_page_content = doc.get(\"page_content\", \"Content not available\")\n",
    "\n",
    "                    # Display the title as a clickable link\n",
    "                    button_key = f\"doc_button_{idx}\"\n",
    "                    if st.button(doc_title, key=button_key, help=doc_page_content):\n",
    "                        pass  # You can add additional code here if needed\n",
    "\n",
    "        message = {\"role\": \"assistant\", \"content\": response['result']}\n",
    "        st.session_state.messages.append(message)\n",
    "\n",
    "\n",
    "if __name__ == \"__main__\":\n",
    "    main()\n"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python"
  },
  "orig_nbformat": 4
 },
 "nbformat": 4,
 "nbformat_minor": 2
}