Spaces:

wookimchye
/

ITI109-SectionB-PartA-Speech

Sleeping

App Files Files Community

wookimchye commited on Jan 5

Commit

859f5d5

verified ·

1 Parent(s): 70ace2b

Upload 5 files

Browse files

Files changed (5) hide show

.env +6 -0
Dockerfile +17 -0
Web-Chatbot-Speech-En-app.py +64 -0
requirements.txt +7 -0
templates/index.html +99 -0

.env ADDED Viewed

	@@ -0,0 +1,6 @@

+AI_SERVICE_ENDPOINT=https://iti109-sectionb.cognitiveservices.azure.com/
+AI_SERVICE_KEY=2ou0CMAjUutj0D4In8U8AkxEIXtCrvYFOBMhqSW4rZ7x6yZ033GdJQQJ99ALACqBBLyXJ3w3AAAaACOGtVJj
+QA_PROJECT_NAME=ITI109-SectionB-FAQ
+QA_DEPLOYMENT_NAME=production
+SPEECH_KEY=BHMIZNZ8xH7JQHXaGAoaOlwdx3bjxvhyuLxpHumSiRPXxpo1Rpb5JQQJ99BAACqBBLyXJ3w3AAAYACOGvOBV
+SPEECH_REGION=southeastasia

Dockerfile ADDED Viewed

	@@ -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-Speech-En-app:app"]

Web-Chatbot-Speech-En-app.py ADDED Viewed

	@@ -0,0 +1,64 @@

+from flask import Flask, render_template, request, jsonify, send_file
+import requests
+from dotenv import load_dotenv
+import os
+# import namespaces
+from azure.core.credentials import AzureKeyCredential
+from azure.ai.language.questionanswering import QuestionAnsweringClient
+from azure.cognitiveservices.speech import SpeechConfig, SpeechSynthesizer, AudioConfig
+from azure.cognitiveservices.speech.audio import AudioOutputConfig
+app = Flask(__name__)
+# Azure Bot Service configuration
+AZURE_BOT_ENDPOINT = "https://iti109-sectionb.cognitiveservices.azure.com/"
+AZURE_BOT_KEY = "2ou0CMAjUutj0D4In8U8AkxEIXtCrvYFOBMhqSW4rZ7x6yZ033GdJQQJ99ALACqBBLyXJ3w3AAAaACOGtVJj"
+# Get Configuration Settings
+load_dotenv()
+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')
+speech_key = os.getenv('SPEECH_KEY')
+speech_region = os.getenv('SPEECH_REGION')
+# 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
+    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"
+        # Text-to-Speech
+        speech_config = SpeechConfig(subscription=speech_key, region=speech_region)
+        audio_config = AudioConfig(filename="response.wav")
+        synthesizer = SpeechSynthesizer(speech_config=speech_config, audio_config=audio_config)
+        synthesizer.speak_text(bot_response)
+        return jsonify({"answer": bot_response, "audio": "/response.wav"})
+    except requests.exceptions.RequestException as e:
+        return jsonify({"error": str(e)}), 500
+@app.route('/response.wav')
+def get_audio():
+    return send_file("response.wav", mimetype="audio/wav")
+if __name__ == '__main__':
+    app.run(debug=True)

requirements.txt ADDED Viewed

	@@ -0,0 +1,7 @@

+Flask
+requests
+azure-ai-language-questionanswering
+azure-cognitiveservices-speech
+azure-core
+python-dotenv
+gunicorn

templates/index.html ADDED Viewed

	@@ -0,0 +1,99 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Asian Food QnA Chatbot</title>
+    <style>
+        #user-input {
+            width: 50%;
+            max-width: 600px;
+        }
+    </style>
+    <script>
+        let recognition;
+        function startSpeechRecognition() {
+            if (!('webkitSpeechRecognition' in window)) {
+                alert('Speech Recognition not supported in this browser.');
+                return;
+            }
+            recognition = new webkitSpeechRecognition();
+            recognition.continuous = false;
+            recognition.interimResults = false;
+            recognition.lang = 'en-US';
+            recognition.onstart = function () {
+                document.getElementById("speech-status").textContent = "Listening...";
+            };
+            recognition.onresult = function (event) {
+                const speechResult = event.results[0][0].transcript;
+                document.getElementById("user-input").value = speechResult;
+                askBot(speechResult);
+            };
+            recognition.onerror = function (event) {
+                alert("Speech Recognition Error: " + event.error);
+            };
+            recognition.onend = function () {
+                document.getElementById("speech-status").textContent = "";
+            };
+            recognition.start();
+        }
+        async function askBot(question) {
+            const responseBox = document.getElementById("response-box");
+            responseBox.textContent = "Waiting for response...";
+            try {
+                const response = await fetch('/ask', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ question })
+                });
+                const data = await response.json();
+                if (data.error) {
+                    responseBox.textContent = "Error: " + data.error;
+                } else {
+                    responseBox.innerHTML = "You: " + question + "<br>" + "Bot: " + data.answer;
+                    //responseBox.textContent = data.answer;
+                    const audioUrl = data.audio + "?t=" + new Date().getTime(); // Add a timestamp to prevent caching
+                    const audio = new Audio(audioUrl);
+                    audio.play();
+                    document.getElementById("user-input").value = "";
+                }
+            } catch (error) {
+                responseBox.textContent = "Error: Unable to process the request.";
+            }
+        }
+        function handleFormSubmit(event) {
+            event.preventDefault();
+            const question = document.getElementById("user-input").value;
+            if (question.trim()) {
+                askBot(question);
+            }
+        }
+    </script>
+</head>
+<body>
+    <h1>Asian Food QnA Chatbot - English</h1>
+    <form onsubmit="handleFormSubmit(event)">
+        <input type="text" id="user-input"  placeholder="Type your question here..." required>
+        <button type="submit">Ask</button>
+    </form>
+    <button onclick="startSpeechRecognition()">🎤 Speak</button>
+    <span id="speech-status" style="color: green; margin-left: 10px;"></span>
+    <div id="response-box" style="margin-top: 20px; font-weight: bold;">Response:</div>
+</body>
+</html>