Upload 5 files

.env

@@ -0,0 +1,7 @@
+AI_SERVICE_ENDPOINT=https://iti109-sectionb.cognitiveservices.azure.com/
+AI_SERVICE_KEY=2ou0CMAjUutj0D4In8U8AkxEIXtCrvYFOBMhqSW4rZ7x6yZ033GdJQQJ99ALACqBBLyXJ3w3AAAaACOGtVJj
+QA_PROJECT_NAME=ITI109-SectionB-FAQ
+QA_DEPLOYMENT_NAME=production
+TRANSLATOR_KEY=25ooP3rvvZbd9FhLzc4NEzV5vKhDrXa7n2hYGDfBel2zQQDdJh9TJQQJ99ALACqBBLyXJ3w3AAAbACOGtt5Z
+TRANSLATOR_ENDPOINT=https://api.cognitive.microsofttranslator.com/
+TRANSLATOR_REGION=southeastasia

Dockerfile

@@ -0,0 +1,17 @@
+# Use an official Python runtime as the base image
+FROM python:3.9
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy all project files to the container
+COPY . /app
+
+# Install dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Expose the port Flask will run on
+EXPOSE 7860
+
+# Command to start the application
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "Web-Chatbot-app:app"]

Web-Chatbot-Multilingual-app.py

@@ -0,0 +1,111 @@
+from flask import Flask, render_template, request, jsonify
+import requests
+from dotenv import load_dotenv
+import os
+import json
+
+# import namespaces
+from azure.core.credentials import AzureKeyCredential
+from azure.ai.language.questionanswering import QuestionAnsweringClient
+
+from azure.ai.translation.text import *
+from azure.ai.translation.text.models import InputTextItem
+
+app = Flask(__name__)
+
+# Get Configuration Settings
+load_dotenv()
+# Settings for QnA
+ai_endpoint = os.getenv('AI_SERVICE_ENDPOINT')
+ai_key = os.getenv('AI_SERVICE_KEY')
+ai_project_name = os.getenv('QA_PROJECT_NAME')
+ai_deployment_name = os.getenv('QA_DEPLOYMENT_NAME')
+# SEttings for Translator
+translator_endpoint = os.getenv('TRANSLATOR_ENDPOINT')
+translator_region = os.getenv('TRANSLATOR_REGION')
+translator_key = os.getenv('TRANSLATOR_KEY')
+
+# Create client using endpoint and key
+credential = AzureKeyCredential(ai_key)
+ai_client = QuestionAnsweringClient(endpoint=ai_endpoint, credential=credential)
+
+@app.route('/')
+def home():
+    return render_template('index.html')  # HTML file for the web interface
+
+@app.route('/ask', methods=['POST'])
+def ask_bot():
+    user_question = request.json.get("question", "")
+    
+    if not user_question:
+        return jsonify({"error": "No question provided"}), 400
+
+    # Detect the language of the input text
+    detected_language  = detect_language(user_question)
+
+    # If the detected language is not English, translate the question to English; else continue to get the answer
+    if detected_language != 'en':
+        # Translate the question into English
+        translated_question = translate_text(user_question, 'en')    
+        try:
+            response = ai_client.get_answers(question=translated_question,
+                                            project_name=ai_project_name,
+                                            deployment_name=ai_deployment_name)
+            
+            bot_response = response.answers[0].answer if response.answers else "No response from bot"
+
+            # Translate the answer back to the original language
+            translated_answer = translate_text(response.answers[0].answer, detected_language)
+            return jsonify({"answer": translated_answer})
+        except requests.exceptions.RequestException as e:
+            return jsonify({"error": str(e)}), 500
+                
+    else:
+        # No translation needed
+        try:
+            response = ai_client.get_answers(question=user_question,
+                                            project_name=ai_project_name,
+                                            deployment_name=ai_deployment_name)
+                    
+            bot_response = response.answers[0].answer if response.answers else "No response from bot"
+            return jsonify({"answer": bot_response})
+        except requests.exceptions.RequestException as e:
+            return jsonify({"error": str(e)}), 500
+
+
+def detect_language(question):
+    # Detects the language of the input text.
+    path = '/detect?api-version=3.0'
+    url = f"{translator_endpoint}{path}"
+    headers = {
+        'Ocp-Apim-Subscription-Key': translator_key,
+        'Ocp-Apim-Subscription-Region': translator_region,
+        'Content-type': 'application/json'
+    }
+    body = [{'text': question}]
+    
+    response = requests.post(url, headers=headers, json=body)
+    response.raise_for_status()
+    detected_language = response.json()[0]['language']
+    return detected_language
+
+def translate_text(question, target_language):
+    #Translates the text into the target language.
+   
+    path = '/translate'
+    url = f"{translator_endpoint}{path}"
+    headers = {
+        'Ocp-Apim-Subscription-Key': translator_key,
+        'Ocp-Apim-Subscription-Region': translator_region,
+        'Content-type': 'application/json'
+    }
+    params = {'api-version': '3.0', 'to': target_language}
+    body = [{'text': question}]
+    
+    response = requests.post(url, headers=headers, params=params, json=body)
+    response.raise_for_status()
+    translated_text = response.json()[0]['translations'][0]['text']
+    return translated_text
+
+if __name__ == '__main__':
+    app.run(debug=True)

requirements.txt

@@ -0,0 +1,6 @@
+Flask
+requests
+azure-ai-language-questionanswering
+azure-core
+python-dotenv
+gunicorn

templates/index.html

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Asian Food Chatbot</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f9;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
+        .chat-container {
+            width: 400px;
+            background-color: #fff;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+        .chat-header {
+            background-color: #007bff;
+            color: #fff;
+            padding: 10px;
+            text-align: center;
+            font-size: 1.2em;
+        }
+        .chat-messages {
+            flex: 1;
+            padding: 10px;
+            overflow-y: auto;
+        }
+        .chat-input {
+            display: flex;
+            border-top: 1px solid #ddd;
+        }
+        .chat-input input {
+            flex: 1;
+            padding: 10px;
+            border: none;
+            border-radius: 0;
+            outline: none;
+        }
+        .chat-input button {
+            padding: 10px;
+            background-color: #007bff;
+            color: #fff;
+            border: none;
+            cursor: pointer;
+        }
+        .chat-input button:hover {
+            background-color: #0056b3;
+        }
+        .message {
+            margin-bottom: 10px;
+        }
+        .message.user {
+            text-align: right;
+        }
+        .message.bot {
+            text-align: left;
+        }
+        .message .text {
+            display: inline-block;
+            padding: 10px;
+            border-radius: 8px;
+            max-width: 70%;
+        }
+        .message.user .text {
+            background-color: #007bff;
+            color: #fff;
+        }
+        .message.bot .text {
+            background-color: #f1f1f1;
+            color: #333;
+        }
+    </style>
+</head>
+<body>
+    <div class="chat-container">
+        <div class="chat-header">Asian Food Chatbot</div>
+        <div class="chat-messages" id="chat-messages"></div>
+        <div class="chat-input">
+            <input type="text" id="user-input" placeholder="Type a message...">
+            <button onclick="sendMessage()">Send</button>
+        </div>
+    </div>
+
+    <script>
+        function sendMessage() {
+            const userInput = document.getElementById('user-input');
+            const message = userInput.value.trim();
+            if (message) {
+                addMessage('user', message);
+                userInput.value = '';
+                
+                // Call the /ask endpoint of the Flask server
+                fetch('/ask', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ question: message })
+                })
+                .then(response => response.json())
+                .then(data => {
+                    addMessage('bot', data.answer);
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    addMessage('bot', 'Error: Unable to retrieve answer');
+                });
+            }
+        }
+
+        function addMessage(sender, text) {
+            const chatMessages = document.getElementById('chat-messages');
+            const messageElement = document.createElement('div');
+            messageElement.classList.add('message', sender);
+            const textElement = document.createElement('div');
+            textElement.classList.add('text');
+            textElement.textContent = text;
+            messageElement.appendChild(textElement);
+            chatMessages.appendChild(messageElement);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+    </script>
+</body>
+</html>