Merge pull request #240 from microsoft/add-openai

Add OpenAI Section

.github/workflows/pages.yml

@@ -41,6 +41,7 @@ jobs:
           VITE_FACE_API_ENDPOINT: ${{secrets.VITE_FACE_API_ENDPOINT}}
           VITE_VISION_API_ENDPOINT: ${{secrets.VITE_VISION_API_ENDPOINT}}
           VITE_VISION_API_KEY: ${{secrets.VITE_VISION_API_KEY}}
+          VITE_CHAT_API_ENDPOINT: ${{secrets.VITE_CHAT_API_ENDPOINT}}
         working-directory: frontend
 
       - name: Upload result of Static Web App build

.vuepress/config.yml

@@ -13,5 +13,6 @@ themeConfig:
       "./instructions/day1/ApplicationPart3/",
       "./instructions/day2/Vision/",
       "./instructions/day2/Speech/",
+      "./instructions/day2/Chat/",
     ]
 plugins: [["vuepress-plugin-code-copy", true]]

app.py

@@ -9,19 +9,30 @@
 from datetime import datetime
 from typing import List
 from urllib.parse import quote
-
 import uvicorn
 from azure.core.exceptions import ResourceNotFoundError
 from azure.storage.blob import BlobServiceClient
 from fastapi import Depends, FastAPI, File, HTTPException, Request, UploadFile
 from fastapi.responses import RedirectResponse, StreamingResponse, JSONResponse
 from pydantic import BaseModel
+import openai
+import os
+
+
 
 app = FastAPI()
 cache_header = {"Cache-Control": "max-age=31556952"}
 
 shared_container_client = None
 
+client = openai.AzureOpenAI(
+    api_key=os.getenv("CHAT_API_KEY"),
+    api_version="2023-12-01-preview",
+    azure_endpoint = os.getenv("CHAT_API_ENDPOINT"),
+    azure_deployment=os.getenv("AZURE_OPENAI_MODEL_NAME"),
+
+)
+
 
 async def get_container_client():
     """Get a client to interact with the blob storage container."""
@@ -64,6 +75,9 @@ class Image(BaseModel):
     created_at: datetime = None
     image_url: str
 
+class Prompt(BaseModel):
+    message: str
+
 
 @app.get("/")
 async def redirect_to_docs():
@@ -126,6 +140,23 @@ async def upload(
     return {"filename": file.filename}
 
 
+
+
+@app.post("/chat")
+async def chat(prompt: Prompt):
+    messages = [
+        {"role": "system", "content": "You are a helpful assistant."},
+        {"role": "user", "content": prompt.message}
+    ]
+
+    response = client.chat.completions.create(
+                model="gpt-35-turbo",
+                messages=messages,
+    )
+    return response.choices[0].message.content
+
 if __name__ == "__main__":
     """Run the app locally for testing."""
     uvicorn.run(app, port=8000)
+
+

frontend/src/components/Navbar.vue

@@ -26,6 +26,11 @@
             <b-icon type="is-white" icon="object-group" pack="fas"></b-icon>
           </router-link>
         </b-button>
+        <b-button v-if="showChatButton" rounded type="is-black">
+          <router-link to="/chat">
+            <b-icon type="is-white" icon="comments" pack="fas"></b-icon>
+          </router-link>
+        </b-button>
       </div>
     </template>
   </b-navbar>
@@ -39,6 +44,7 @@ import {
   faceApiEndpoint,
   speechApiKey,
   visionApiKey,
+  chatApiEndpoint,
 } from "../settings";
 
 @Component
@@ -55,6 +61,9 @@ export default class Navbar extends Vue {
   get showVisionButton(): boolean {
     return visionApiKey !== "";
   }
+  get showChatButton(): boolean {
+    return chatApiEndpoint !== "";
+  }
 }
 </script>
 

frontend/src/main.ts

@@ -14,6 +14,7 @@ import {
   faExclamationCircle,
   faArrowLeft,
   faObjectGroup,
+  faComments
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import router from "./router";
@@ -28,7 +29,8 @@ library.add(
   faCheck as any,
   faExclamationCircle as any,
   faArrowLeft as any,
-  faObjectGroup as any
+  faObjectGroup as any,
+  faComments as any
 );
 Vue.use(VueSimpleAlert);
 Vue.use(VueRecord);

frontend/src/router/index.ts

@@ -6,6 +6,7 @@ import Camera from "../views/Camera.vue";
 import FaceAI from "../views/FaceAI.vue";
 import ComputerVision from "../views/ComputerVision.vue";
 import EditProfile from "../views/EditProfile.vue";
+import Chat from "../views/Chat.vue"
 
 Vue.use(VueRouter);
 
@@ -40,6 +41,11 @@ const routes = [
     name: "editprofile",
     component: EditProfile,
   },
+  {
+    path: "/chat",
+    name: "chat",
+    component: Chat,
+  },
 ];
 
 const router = new VueRouter({

frontend/src/settings.ts

@@ -4,6 +4,7 @@ const speechApiKey = import.meta.env.VITE_SPEECH_API_KEY || "";
 const faceApiEndpoint = import.meta.env.VITE_FACE_API_ENDPOINT || "";
 const visionApiKey = import.meta.env.VITE_VISION_API_KEY || "";
 const visionApiEndpoint = import.meta.env.VITE_VISION_API_ENDPOINT || "";
+const chatApiEndpoint = import.meta.env.VITE_CHAT_API_ENDPOINT || "";
 
 export {
   imageApiUrl,
@@ -12,4 +13,5 @@ export {
   speechApiKey,
   visionApiKey,
   visionApiEndpoint,
+  chatApiEndpoint,
 };

frontend/src/views/Chat.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="chat-container">
+
+    <div class="chat-messages" ref="chatMessages">
+      <div class="message" v-for="(message, index) in messages" :key="index" :class="{ 'user-message': message.sender === 'user', 'responder-message': message.sender === 'responder' }">
+        {{ message.content }}
+      </div>
+    </div>
+    <div class="message-box">
+      <input type="text" v-model="newMessage" @keyup.enter="sendMessage" placeholder="Type your message...">
+      <button @click="sendMessage">Send</button>
+    </div>
+  </div>
+</template>
+
+
+
+<script>
+import axios from 'axios';
+import { imageApiUrl } from "../settings";
+
+export default {
+  data() {
+    return {
+      messages: [],
+      newMessage: ''
+    };
+  },
+  methods: {
+    async sendMessage() {
+      if (this.newMessage.trim() === '') return;
+
+      // Add user message to the chat
+      this.messages.push({
+        content: this.newMessage,
+        sender: 'user'
+      });
+
+
+      // Scroll to bottom of chat messages
+      this.$refs.chatMessages.scrollTop = this.$refs.chatMessages.scrollHeight;
+      
+      try {
+        const response = await axios.post(`${imageApiUrl}chat`, {
+          message: this.newMessage
+        });
+        console.log(response)
+        this.messages.push({
+          content: response.data,
+          sender: 'responder'
+        });
+        this.$refs.chatMessages.scrollTop = this.$refs.chatMessages.scrollHeight;
+      } catch (error) {
+        console.error('Error sending message:', error);
+
+      }
+      this.newMessage = '';
+    }
+  }
+};
+</script>
+
+<style scoped>
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 400px;
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.message {
+  margin-bottom: 10px;
+}
+
+.user-message {
+  text-align: right;
+}
+
+.responder-message {
+  text-align: left;
+  color: rgb(10, 90, 10);
+}
+
+.message-box {
+  display: flex;
+  padding: 10px;
+}
+
+.message-box input[type="text"] {
+  flex: 1;
+  padding: 5px;
+}
+
+.message-box button {
+  padding: 5px 10px;
+}
+</style>

instructions/day2/Chat/README.md

@@ -0,0 +1,80 @@
+# Challenge 7: Chat Bot
+
+⏲️ _est. time to complete: 30 min._ ⏲️
+
+## Here is what you will learn 🎯
+
+In this challenge you will learn how to:
+
+- Create an OpenAI service in Azure
+- Deploy an OpenAI model and connect it to your app
+- Pass the API key to your app using GitHub Secrets
+- Start chatting with model powered assistant in the app
+
+## Getting started
+- Navigate to your **Resource Group** we created on Day 1 during the previous challenges again
+- Create a new **Resource** and search for **Azure OpenAI**
+
+    ![Screenshot of how to create a resource](./images/resource-azure-openai.png)
+
+## Create OpenAI Azure service
+
+-  Select **Azure OpenAI** and hit **Create**.
+-  Your subscription and resource group should already be set. Select **westeurope** as region and **Standard S0**.
+- Give the resource a unique name.
+- Hit **Next** and in network you should select "All networks, including the internet, can access this resource."
+- Hit **Next** twice and create the resource
+  ![Screenshot of Azure Portal create page for openAI Azure](./images/resource-azure-openai-settings.png)
+  ![Screenshot of Azure Portal create page for openAI Azure, networking](./images/resource-azure-openai-network.png)
+
+## Deploying openAI Large Language Model 
+- Go to the Azure openAI resource you created and click on **Model deployments**
+- Next, click on **Create new deployment** here we will choose the OpenAI model we want to deploy
+- Select model **gpt-35-turbo** and model version **Auto-update to default**
+- Give a unique name to your deployment name then click on create  
+
+  ![Screenshot of Gpt turbo model deployment](./images/gpt-turbo-deployment.png)
+
+Congratulations! You just deployed an instance of the openAI gpt turbo model, we will later add this model to our Milligram app to build a chat bot. For now you can actually test it out inside azure and ask it a few questions. Go to the model you deployed and click on **Open in Playground**, there you can chat with the chat assistant. You can also change the parameters of the model under **Configuration > Parameters**
+
+![Screenshot of Gpt turbo model playground](./images/gpt-playground.png)
+
+## Azure OpenAI credentials
+In order to connect our user interface with the openAI model, we need to integrate the openAI credentials in the process. For this, there are 2 options. We can add our keys in the Azure web app (Option 1) or we can automate it by adding the keys in our github workflow.
+
+### Option 1: Add OpenAI Azure credentials to web app
+Go back to Azure and open the Milligram web app again:
+- Go to **environment variables**  
+- Create new variable with name **CHAT_API_KEY** and paste Key 1
+- Create another variable with name **CHAT_API_ENDPOINT** and paste the endpoint url
+- Finally create another variable with name **AZURE_OPENAI_MODEL_NAME** And paste the name you chose when you deployed the gpt turbo model.
+
+![Screenshot of Gpt turbo model playground](./images/milligram-env-vars.png)
+
+### Option 2: Integrate OpenAI Azure credentials into GitHub Secret 
+Similar to what we did in the challenges on Day 1 we now want to add the secret keys to Github 
+- Go to the Azure openAI resource dashboard and click on **Keys and Endpoint**
+- On Github Go to your repository, **Settings > Secrets and Variables > Actions** then click on **create new repository secret**
+- Create new secret with name **CHAT_API_KEY** and paste Key 1
+- Create another secret with name **CHAT_API_ENDPOINT** and paste the endpoint url
+- Finally create another secret with name **AZURE_OPENAI_MODEL_NAME** And paste the name you chose when you deployed the gpt turbo model.
+
+Now we also want to add the secrets to our github workflow:  
+
+1. Add the following code snippet under `subscription-id` around line 74 in the file located at **.github/workflows/main_milligram.yml**
+```
+      - uses: azure/appservice-settings@v1
+        with:
+          app-name: 'milligram'
+          slot-name: 'Production'  # Optional and needed only if the settings have to be configured on the specific deployment slot
+          app-settings-json: '[{ "name": "CHAT_API_KEY", "value": "${{ secrets.CHAT_API_KEY }}", "slotSetting": false }, { "name": "CHAT_API_ENDPOINT", "value":  "${{ secrets.CHAT_API_ENDPOINT }}", "slotSetting": false }, { "name": "AZURE_OPENAI_MODEL_NAME", "value": "${{ secrets.AZURE_OPENAI_MODEL_NAME }}", "slotSetting": false }]'
+        id: settings
+```
+
+## Run Frontend Pipeline again
+
+- Navigate to **Actions** > **Pages** and **Run workflow**
+
+Click on the frontend link displayed under the deploy step under your pipeline `https://<yourgithubhandle>.github.io/...` or open the app on your phone.
+
+Our frontend application should now have a new button with a chat symbol that allows us to chat with our assistant. The assistant is powered by the model we deployed through the Azure OpenAI service. Have a chat with your bot 🎉

requirements.txt

@@ -23,7 +23,8 @@ requests-oauthlib==1.3.1
 six==1.16.0
 sniffio==1.3.0
 starlette==0.22.0
-typing_extensions==4.4.0
+typing_extensions==4.10.0
 urllib3==1.26.13
 uvicorn==0.20.0
 uvloop==0.17.0
+openai==1.12.0