Spaces:

wookimchye
/

ITI109-English-Speech-Chatbot

Sleeping

App Files Files Community

wookimchye commited on Jan 4

Commit

bb4b1d6

verified ·

1 Parent(s): a7c7570

Upload 5 files

Browse files

Files changed (5) hide show

.env +6 -0
Dockerfile +17 -0
Web-Chatbot-Speech-En-app.py +70 -0
requirements.txt +7 -0
templates/index.html +154 -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,70 @@

+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
+# Create a Flask app
+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)
+# Web Interface
+@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", "") # Get the question from the request
+    if not user_question:
+        return jsonify({"error": "No question provided"}), 400 # Return an error if no question is provided
+    try:
+        # Get the answer from the bot
+        response = ai_client.get_answers(question=user_question,
+                                         project_name=ai_project_name,
+                                         deployment_name=ai_deployment_name)
+        # Get the answer from the response
+        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) # Create a speech config
+        audio_config = AudioConfig(filename="response.wav") # Save the audio to a file
+        synthesizer = SpeechSynthesizer(speech_config=speech_config, audio_config=audio_config) # Create a synthesizer
+        synthesizer.speak_text(bot_response)
+        # Return the answer from the bot
+        return jsonify({"answer": bot_response, "audio": "/response.wav"})
+    except requests.exceptions.RequestException as e:
+        return jsonify({"error": str(e)}), 500
+# Return the audio file
+@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,154 @@

+<!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: 500px;
+            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>
+     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+     <script src="https://aka.ms/csspeech/jsbrowserpackageraw"></script>
+</head>
+<body>
+    <div class="chat-container">
+        <div class="chat-header">Asian Food Chatbot - English only</div>
+        <div class="chat-messages" id="chat-messages"></div>
+        <div class="chat-input">
+            <input type="text" id="question" placeholder="Type a message...">
+            <button onclick="askQuestion()">Ask</button>
+            <button onclick="startListening()" style="background-color:green">🎤 Speak</button>
+        </div>
+    </div>
+    <audio id="audio" controls style="display:none;"></audio>
+    <script>
+        const speechKey = 'BHMIZNZ8xH7JQHXaGAoaOlwdx3bjxvhyuLxpHumSiRPXxpo1Rpb5JQQJ99BAACqBBLyXJ3w3AAAYACOGvOBV';
+        const speechRegion = 'southeastasia';
+        function askQuestion() {
+            const question = document.getElementById('question').value;
+            if (!question) return;
+            axios.post('/ask', { question })
+                .then(response => {
+                    console.log("Response:", response.data); // Debugging log
+                    const chatMessages = document.getElementById('chat-messages');
+                    const userMessage = document.createElement('div');
+                    userMessage.textContent = `You: ${question}`;
+                    chatMessages.appendChild(userMessage);
+                    const botMessage = document.createElement('div');
+                    botMessage.textContent = `Bot: ${response.data.answer}`;
+                    botMessage.style.marginBottom = "10px"; // Add margin-bottom for spacing
+                    chatMessages.appendChild(botMessage);
+                    const audioElement = document.getElementById('audio');
+                    audioElement.src = response.data.audio + '?t=' + new Date().getTime();
+                    audioElement.style.display = 'block';
+                    audioElement.play();
+                    document.getElementById('question').value = '';
+                })
+                .catch(error => {
+                    console.error("Error:", error); // Debugging log
+                });
+        }
+        function startListening() {
+            const speechConfig = SpeechSDK.SpeechConfig.fromSubscription(speechKey, speechRegion);
+            const audioConfig = SpeechSDK.AudioConfig.fromDefaultMicrophoneInput();
+            const recognizer = new SpeechSDK.SpeechRecognizer(speechConfig, audioConfig);
+            recognizer.recognizeOnceAsync(result => {
+                if (result.reason === SpeechSDK.ResultReason.RecognizedSpeech) {
+                    console.log("Recognized Text:", result.text); // Debugging log
+                    document.getElementById('question').value = result.text;
+                    askQuestion();
+                } else {
+                    console.error("Speech Recognition Error:", result.errorDetails); // Debugging log
+                }
+            }, err => {
+                console.error("Error recognizing speech:", err); // Debugging log
+            });
+        }
+    </script>
+</body>
+</html>