notebook-7.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 🧑‍🍳 You're still here?"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 🏇 How to get started with a real app using Semantic Kernel\n",
    "\n",
    "Go to https://github.com/microsoft/chat-copilot for a sample backend and frontend application using Semantic Kernel and all of the AI UX patterns that have been used in Bing Chat.\n",
    "\n",
    "![](assets/cc_githubrepo.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "What you'll get is a sample chat app that has a few bells and whistles that will help you quickly learn the concepts that underly LLMs within a TypeScript/React app that will feel familiar to you right away.\n",
    "\n",
    "![](assets/cc_plain.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "\n",
    "The latest AI UX practices are also included — as featured in the LinkedIn Learning course on \"AI UX for Developers\" that is [now available](https://www.linkedin.com/learning/ux-for-ai-design-practices-for-ai-developers/designing-for-ai).\n",
    "\n",
    "![](assets/cc_chatcopilotclip.gif)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 🎁 Examine the behavior of your prompt and token usage\n",
    "\n",
    "![](assets/cc_promptmeter.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 🎁 Test your handmade functions as ChatGPT Plugins\n",
    "\n",
    "![](assets/cc_chatgptplugin.gif)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 🎁 Try out a variety of vector database options\n",
    "\n",
    "![](assets/cc_vectordbs.jpg)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 🎁 Keep running tabs on your overall token usage and experiment with advanced features\n",
    "\n",
    "![](assets/cc_settings.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 🎁 The backend server demonstrates how to connect to a variety of resources like auth, vector dbs, telemetry, content safety, PDF import, and even OCR. "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "```\n",
    "//\n",
    "// # ABBREVIATED Chat Copilot Application Settings\n",
    "{\n",
    "  \"AIService\": {\n",
    "    \"Type\": \"AzureOpenAI\",\n",
    "    \"Endpoint\": \"\", // ignored when AIService is \"OpenAI\"\n",
    "     \"Key\": \"\",\n",
    "    \"Models\": {\n",
    "      \"Completion\": \"gpt-35-turbo\", \n",
    "      \"Embedding\": \"text-embedding-ada-002\",\n",
    "      \"Planner\": \"gpt-35-turbo\" \n",
    "    }\n",
    "  },\n",
    "  //\n",
    "  // Optional Azure Speech service configuration for providing Azure Speech access tokens.\n",
    "  // - Set the Region to the region of your Azure Speech resource (e.g., \"westus\").\n",
    "  // - Set the Key using dotnet's user secrets (see above)\n",
    "  //     (i.e. dotnet user-secrets set \"AzureSpeech:Key\" \"MY_AZURE_SPEECH_KEY\")\n",
    "  //\n",
    "  \"AzureSpeech\": {\n",
    "    \"Region\": \"\"\n",
    "    // \"Key\": \"\"\n",
    "  },\n",
    "  //\n",
    "  // Authorization configuration to gate access to the service.\n",
    "  // - Supported Types are \"None\", \"ApiKey\", or \"AzureAd\".\n",
    "  // - Set ApiKey using dotnet's user secrets (see above)\n",
    "  //     (i.e. dotnet user-secret set \"Authorization:ApiKey\" \"MY_API_KEY\")\n",
    "  //\n",
    "  \"Authorization\": {\n",
    "    \"Type\": \"None\",\n",
    "    \"ApiKey\": \"\",\n",
    "    \"AzureAd\": {\n",
    "      \"Instance\": \"https://login.microsoftonline.com/\",\n",
    "      \"TenantId\": \"\",\n",
    "      \"ClientId\": \"\",\n",
    "      \"Audience\": \"\",\n",
    "      \"Scopes\": \"access_as_user\" // Scopes that the client app requires to access the API\n",
    "    }\n",
    "  },\n",
    "  //\n",
    "  // Chat stores are used for storing chat sessions and messages.\n",
    "  // - Supported Types are \"volatile\", \"filesystem\", or \"cosmos\".\n",
    "  // - Set \"ChatStore:Cosmos:ConnectionString\" using dotnet's user secrets (see above)\n",
    "  //     (i.e. dotnet user-secrets set \"ChatStore:Cosmos:ConnectionString\" \"MY_COSMOS_CONNSTRING\")\n",
    "  //\n",
    "  \"ChatStore\": {\n",
    "    \"Type\": \"volatile\",\n",
    "    \"Filesystem\": {\n",
    "      \"FilePath\": \"./data/chatstore.json\"\n",
    "    },\n",
    "    \"Cosmos\": {\n",
    "      \"Database\": \"CopilotChat\",\n",
    "      \"ChatSessionsContainer\": \"chatsessions\",\n",
    "      \"ChatMessagesContainer\": \"chatmessages\",\n",
    "      \"ChatMemorySourcesContainer\": \"chatmemorysources\",\n",
    "      \"ChatParticipantsContainer\": \"chatparticipants\"\n",
    "      // \"ConnectionString\": // dotnet user-secrets set \"ChatStore:Cosmos:ConnectionString\" \"MY_COSMOS_CONNECTION_STRING\"\n",
    "    }\n",
    "  },\n",
    "  //\n",
    "  // Memory stores are used for storing new memories and retrieving semantically similar memories.\n",
    "  \"MemoryStore\": {\n",
    "    \"Type\": \"volatile\",\n",
    "    \"Qdrant\": {\n",
    "      \"Host\": \"http://localhost\",\n",
    "      \"Port\": \"6333\",\n",
    "      \"VectorSize\": 1536\n",
    "      // \"Key\":  \"\"\n",
    "    },\n",
    "    \"AzureCognitiveSearch\": {\n",
    "      \"Endpoint\": \"\"\n",
    "      // \"Key\": \"\"\n",
    "    },\n",
    "    \"Chroma\": {\n",
    "      \"Host\": \"http://localhost\",\n",
    "      \"Port\": \"8000\"\n",
    "    },\n",
    "    \"Postgres\": {\n",
    "      \"VectorSize\": 1536\n",
    "      // \"ConnectionString\": // dotnet user-secrets set \"MemoryStore:Postgres:ConnectionString\" \"MY_POSTGRES_CONNECTION_STRING\"\n",
    "    }\n",
    "  },\n",
    "  //\n",
    "  // Document import configuration\n",
    "  //\n",
    "  \"DocumentMemory\": {\n",
    "    \"GlobalDocumentCollectionName\": \"global-documents\",\n",
    "    \"ChatDocumentCollectionNamePrefix\": \"chat-documents-\",\n",
    "    \"DocumentLineSplitMaxTokens\": 72,\n",
    "    \"DocumentChunkMaxTokens\": 512,\n",
    "    \"FileSizeLimit\": 4000000,\n",
    "    \"FileCountLimit\": 10\n",
    "  },\n",
    "  //\n",
    "  // OCR support is used for allowing end users to upload images containing text in addition to text based documents.\n",
    "  //  https://learn.microsoft.com/en-us/azure/ai-services/computer-vision/quickstarts-sdk/client-library?tabs=windows%2Cvisual-studio&pivots=programming-language-csharp#optical-character-recognition-ocr-with-computer-vision-api-using-c\n",
    "  //\n",
    "  \"OcrSupport\": {\n",
    "    \"Type\": \"none\",\n",
    "    \"Tesseract\": {\n",
    "      \"Language\": \"eng\",\n",
    "      \"FilePath\": \"./data\"\n",
    "    },\n",
    "    \"AzureFormRecognizer\": {\n",
    "      \"Endpoint\": \"\"\n",
    "      // \"Key\": \"\",\n",
    "    }\n",
    "  },\n",
    "  //\n",
    "  // Application Insights configuration\n",
    "  // - Set \"APPLICATIONINSIGHTS_CONNECTION_STRING\" using dotnet's user secrets (see above)\n",
    "  //     (i.e. dotnet user-secrets set \"APPLICATIONINSIGHTS_CONNECTION_STRING\" \"MY_APPINS_CONNSTRING\")\n",
    "  //\n",
    "  \"APPLICATIONINSIGHTS_CONNECTION_STRING\": null\n",
    "}\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 🔖 There will be more sample apps built around the sample backend service, so stay tuned!"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": ".venv",
   "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.9.6"
  },
  "orig_nbformat": 4
 },
 "nbformat": 4,
 "nbformat_minor": 2
}