LAB 6 - AI Application.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "adbf511d-14d2-4b64-893c-de6234aff00e",
   "metadata": {},
   "source": [
    "<img src=\"static/event-image-small.jpg\" alt=\"drawing\" width=\"800\"/> \n",
    "\n",
    "This lab will build upon all that we've learned in this workshop. We will \n",
    "look how to use tools like langchain and nemo guardrails, in addition to \n",
    "h2oGPT and vector databases like what's found in h2oGPTe to create an application \n",
    "for stakeholders of our project. \n",
    "\n",
    "We will introduce H2O Wave as a no-code framework for building AI applications \n",
    "using only Python. Finally, we will deploy our Wave application to the AI AppStore\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "63f56514",
   "metadata": {},
   "source": [
    "# AI Application Template\n",
    "\n",
    "The following cells walk through the anatomy of an AI Application using\n",
    "open source H2O Wave (but other frameworks like streamlit, shiny, react are all\n",
    "applicable).\n",
    "\n",
    "```python\n",
    "import asyncio\n",
    "\n",
    "from h2o_wave import app, Q, ui, on, handle_on, data, copy_expando, main\n",
    "from h2ogpte import H2OGPTE\n",
    "from loguru import logger\n",
    "import json\n",
    "\n",
    "rag_url = 'https://h2ogpte.genai-training.h2o.ai'\n",
    "rag_key = None\n",
    "NAME = 'John Doe'\n",
    "TITLE = 'Senior Analyst'\n",
    "SYSTEM_PROMPT = \"Hello, I'm an AI bot with access to your LinkedIn profile. How can I assist you today? Whether \" \\\n",
    "                \"it's updating your professional summary, connecting with new contacts, job search advice, \" \\\n",
    "                \"or anything related to your career, I'm here to help. Just let me know what you need, and \" \\\n",
    "                \"I'll provide personalized assistance based on your LinkedIn information.\"\n",
    "COLLECTION_NAME = \"MyProfile\"\n",
    "\n",
    "@app('/')\n",
    "async def serve(q: Q):\n",
    "    copy_expando(q.args, q.client)\n",
    "\n",
    "    # First time a browser comes to the app\n",
    "    if not q.client.initialized:\n",
    "        await init(q)\n",
    "        q.client.initialized = True\n",
    "\n",
    "    # Other browser interactions\n",
    "    elif not await handle_on(q):\n",
    "        q.page[\"my_card\"] = {}\n",
    "    await q.page.save()\n",
    "\n",
    "async def init(q: Q) -> None:\n",
    "    q.page['meta'] = ui.meta_card(\n",
    "        box='',\n",
    "        title='AI Enhanced Career Development',\n",
    "        theme='lighting',\n",
    "        layouts=[\n",
    "            ui.layout(\n",
    "                breakpoint='s',\n",
    "                min_height='100vh',\n",
    "                max_width='1200px',\n",
    "                zones=[\n",
    "                    ui.zone('header'),\n",
    "                    ui.zone('content', size='0', zones=[\n",
    "                        ui.zone('vertical', size='1', ),\n",
    "                        ui.zone('collection_zone', size='1', direction=ui.ZoneDirection.ROW),\n",
    "                        ui.zone('horizontal', size='1', direction=ui.ZoneDirection.ROW),\n",
    "                        ui.zone('grid', direction=ui.ZoneDirection.ROW, wrap='stretch', justify='center')\n",
    "                    ]),\n",
    "                    ui.zone(name='footer'),\n",
    "                ]\n",
    "            )\n",
    "        ]\n",
    "    )\n",
    "    q.page['header'] = ui.header_card(\n",
    "        box='header',\n",
    "        title='Personal AI Assistant',\n",
    "        subtitle=\"\",\n",
    "        image='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYiPLBie36OVSxyLYJAFQrykIDPkkft-0cBA&usqp=CAU',\n",
    "        items=[ui.persona(title=NAME, subtitle=TITLE, caption='Online', size='m',\n",
    "                          image='https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&h=750&w=1260')]\n",
    "    )\n",
    "    q.page['footer'] = ui.footer_card(\n",
    "        box='footer',\n",
    "        caption='Made with love using [H2O Wave](https://wave.h2o.ai).'\n",
    "    )\n",
    "    await home(q)\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "562e49fa",
   "metadata": {},
   "source": [
    "# Cards, Buttons, and Triggers\n",
    "\n",
    "```python\n",
    "\n",
    "@on()\n",
    "async def home(q: Q):\n",
    "    q.page['image'] = ui.tall_info_card(\n",
    "        box=ui.box('vertical', size='0'), title='', name='image_card',\n",
    "        caption='Personal AI Assistant',\n",
    "        image_height='600px',\n",
    "        image='https://images.pexels.com/photos/8386440/pexels-photo-8386440.jpeg')\n",
    "    \n",
    "    q.page['find_collection'] = ui.form_card(box=ui.box('collection_zone', size='1'),\n",
    "        items=[ui.inline(items=[\n",
    "            ui.textbox(name=\"api_key\", width=\"90%\", value=rag_key, placeholder=\"Paste your API key here!\"),\n",
    "            ui.button(name=\"launch\", label=\"Launch\", primary=True, width=\"10%\")])])\n",
    "\n",
    "@on()\n",
    "async def launch(q):\n",
    "    # Log into RAG system\n",
    "    h2ogpte = H2OGPTE(address=rag_url, api_key=q.args.api_key)\n",
    "    q.client.h2ogpte = h2ogpte\n",
    "    collections = h2ogpte.list_recent_collections(0, 1000)\n",
    "    collection_id = [i.id for i in collections if i.name == COLLECTION_NAME][0]\n",
    "    \n",
    "    # ask h2ogpte for your name\n",
    "    NAME = h2ogpte.answer_question(\"What is this person's name?\")\n",
    "    \n",
    "    # Inspect and collect all text chunks\n",
    "    chunks = []\n",
    "    for chunk_id in range(1, 100):  # TODO: get number of chunks from collection\n",
    "        try:\n",
    "            chunk = h2ogpte.get_chunks(collection_id, [chunk_id])\n",
    "            chunks.append(chunk[0].text)\n",
    "        except:\n",
    "            break\n",
    "\n",
    "    print(f\"Number of chunks: {len(chunks)}\", flush=True)\n",
    "\n",
    "    extracted_name = h2ogpte.extract_data(\n",
    "        text_context_list=chunks,\n",
    "        system_prompt = 'You are a helpful AI Assistant and your goal is to extract names',\n",
    "        prompt_extract= \"Return only the name of the person this profile belongs to as a JSON\"\n",
    "    )\n",
    "\n",
    "    name_json = json.loads(extracted_name.content[0])\n",
    "    NAME = name_json['name']\n",
    "    \n",
    "    extracted_title = h2ogpte.extract_data(\n",
    "        text_context_list=chunks,\n",
    "        system_prompt = 'You are a helpful AI Assistant and your goal is to extract professional titles',\n",
    "        prompt_extract= \"Return only the current position title of the person this profile belongs to as a JSON with a single field called title\"\n",
    "    )\n",
    "\n",
    "    title_json = json.loads(extracted_title.content[0])\n",
    "    TITLE = title_json['title']\n",
    "    \n",
    "    q.page['header'] = ui.header_card(\n",
    "        box='header',\n",
    "        title='Personal AI Assistant',\n",
    "        subtitle=\"\",\n",
    "        image='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYiPLBie36OVSxyLYJAFQrykIDPkkft-0cBA&usqp=CAU',\n",
    "        items=[ui.persona(title=NAME, subtitle=TITLE, caption='Online', size='m',\n",
    "                          image='https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&h=750&w=1260')]\n",
    "    )\n",
    "    \n",
    "    # Start chat session\n",
    "    q.client.chat_session_id = h2ogpte.create_chat_session(collection_id)\n",
    "    q.page['chatbot'] = ui.chatbot_card(box='horizontal',\n",
    "                            data=data('content from_user', t='list',\n",
    "                             rows=[[\"Welcome! What would you like to accomplish today using **{}**?\".format(COLLECTION_NAME), False]], ),\n",
    "                            name='chatbot_name')\n",
    "\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7d81bfc7",
   "metadata": {},
   "source": [
    "# Chatbot\n",
    "\n",
    "```python\n",
    "\n",
    "@on()\n",
    "async def chatbot_name(q: Q):\n",
    "    \"\"\"Answer the question\"\"\"\n",
    "    question = q.args.chatbot_name\n",
    "    q.page[\"chatbot\"].data += [question, True]\n",
    "    await q.page.save()\n",
    "    q.page[\"chatbot\"].data += [\"<img src='{}' height='40px'/>\".format('https://i.gifer.com/9u7v.gif'), False]\n",
    "    await q.page.save()\n",
    "    output = await q.run(get_chat_answer, q.client.h2ogpte, q.client.chat_session_id, question)\n",
    "    await q.page.save()\n",
    "    stream = \"\"\n",
    "    final_output = f\"\"\"{output} <br/>\"\"\"\n",
    "    # remove the last line\n",
    "    q.page['chatbot'].data[-1] = [stream, False]\n",
    "    for w in final_output.split('/n'):\n",
    "        await asyncio.sleep(0.3)\n",
    "        stream += w + \" \"\n",
    "        q.page[\"chatbot\"].data[-1] = [stream, False]\n",
    "        await q.page.save()\n",
    "\n",
    "def get_chat_answer(h2ogpte, chat_session_id, question):\n",
    "    with h2ogpte.connect(chat_session_id) as session:\n",
    "        reply = session.query(question, timeout=10600,\n",
    "            system_prompt=\"Hello, I'm an AI bot with access to your LinkedIn profile. How can I assist you today? Whether it's updating your professional summary, connecting with new contacts, job search advice, or anything related to your career, I'm here to help. Just let me know what you need, and I'll provide personalized assistance based on your LinkedIn information\")\n",
    "        answer = reply.content\n",
    "    return answer\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ff9d7853",
   "metadata": {},
   "source": [
    "# Putting it all together\n",
    "\n",
    "Now that we've walked through the anatomy of the application, we can deploy our\n",
    "application to be securely hosted in the AI Appstore. Since Wave is open source,\n",
    "it can be deployed virtually anywhere, but the AI Appstore is an ideal location\n",
    "as it provides enterprise grade features for hosting, authentication, and resource\n",
    "handling due to it's use of kubernetes.\n",
    "\n",
    "In this repository you will find a directory called `app-template`. Within it, \n",
    "you should find a total of three files: `app.py`, `app.toml`, and `requirements.txt`.\n",
    "\n",
    "These are the three files that the AI Appstore needs in order to host your application.\n",
    "\n",
    "- `app.py`: this is your application as a python script;\n",
    "- `app.toml`: configuration file that tells the app store information about your app;\n",
    "- `requirements.txt`: dependencies that the app requires.\n",
    "\n",
    "This app has been uploaded to the AI App Store and is accessible at: \n",
    "https://genai-world.h2o.ai/v1/latestapp/ai.h2o.wave.personal-assistant\n",
    "\n",
    "Simply add your h2oGPTe API Key in the beginning of your application. Once this is complete, you can follow the\n",
    "instructions below to deploy your application to the AI Appstore\n",
    "\n",
    "The full documentation for deployment can be found here: https://docs.h2o.ai/h2o-ai-cloud/developerguide/importing-wave-app\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "61b07049",
   "metadata": {},
   "source": [
    "# 🎉 **CONGRATULATIONS!** You have completed this lab!\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "12f8ee03",
   "metadata": {},
   "source": [
    "# 📚 **EXTENDED TASKS**\n",
    "\n",
    "For the adventurous, you could take your app template, compress it and upload it\n",
    "to the AI Appstore via the UI. \n",
    "\n",
    "You could also use the H2O CLI to deploy and test your app programmatically with the\n",
    "`h2o bundle test` or `h2o bundle deploy` commands."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "674dbd31",
   "metadata": {},
   "source": [
    "# My Apps\n",
    "\n",
    "\n",
    "<img src=\"static/upload-app1.png\" alt=\"drawing\" width=\"800\"/> \n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "14889b00",
   "metadata": {},
   "source": [
    "# Import App \n",
    "\n",
    "\n",
    "<img src=\"static/upload-app2.png\" alt=\"drawing\" width=\"800\"/> \n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9d659192",
   "metadata": {},
   "source": [
    "# Import App \n",
    "\n",
    "\n",
    "<img src=\"static/upload-app3.png\" alt=\"drawing\" width=\"800\"/> \n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6dab5b3b",
   "metadata": {},
   "source": [
    "# Set to Private\n",
    "\n",
    "\n",
    "<img src=\"static/upload-app4.png\" alt=\"drawing\" width=\"800\"/> \n"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "h2oworld",
   "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.13"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}