Merge pull request #241 from nour-bouzid/new-addition

change things up

.github/workflows/pages.yml

@@ -41,6 +41,8 @@ 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_KEY: ${{secrets.VITE_CHAT_API_KEY}}
+          VITE_CHAT_API_ENDPOINT: ${{secrets.VITE_CHAT_API_ENDPOINT}}
         working-directory: frontend
 
       - name: Upload result of Static Web App build

app.py

@@ -7,21 +7,33 @@
 
 import os
 from datetime import datetime
+import time
 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.environ.get("VITE_CHAT_API_KEY"),
+    api_version="2023-12-01-preview",
+    azure_endpoint = os.environ.get("VITE_CHAT_API_ENDPOINT"),
+    azure_deployment=os.environ.get("AZURE_OPENAI_MODEL_NAME"),
+
+)
+
 
 async def get_container_client():
     """Get a client to interact with the blob storage container."""
@@ -64,6 +76,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 +141,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,
+  chatApiKey,
 } from "../settings";
 
 @Component
@@ -55,6 +61,9 @@ export default class Navbar extends Vue {
   get showVisionButton(): boolean {
     return visionApiKey !== "";
   }
+  get showChatButton(): boolean {
+    return chatApiKey !== "";
+  }
 }
 </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/views/Chat.vue

@@ -0,0 +1,99 @@
+<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';
+  
+  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('http://localhost:8000/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>
+

requirements.txt

@@ -27,3 +27,4 @@ typing_extensions==4.4.0
 urllib3==1.26.13
 uvicorn==0.20.0
 uvloop==0.17.0
+openai==1.12.0