Upload 8 files

app.py

@@ -0,0 +1,190 @@
+from flask import Flask, request, jsonify, render_template
+from dotenv import load_dotenv
+from groq import Groq
+import os
+import uuid
+from gtts import gTTS
+import io
+import base64
+import speech_recognition as sr
+import tempfile
+import json
+
+try:
+    import pyaudio
+except ImportError:
+    print("Warning: PyAudio not available, speech functionality will be limited")
+
+# Initialize Flask app
+app = Flask(__name__, static_folder='static')
+
+# Load environment variables
+load_dotenv()
+
+# Groq API Configuration
+GROQ_API_KEY = os.getenv("GROQ_API_KEY")
+client = Groq(api_key=GROQ_API_KEY)
+MODEL = "llama3-70b-8192"
+
+# Initialize speech recognition
+recognizer = sr.Recognizer()
+
+# Store conversation history
+conversations = {}
+
+def load_base_prompt():
+    try:
+        with open("base_prompt.txt", "r") as file:
+            return file.read().strip()
+    except FileNotFoundError:
+        print("Error: base_prompt.txt file not found.")
+        return "You are a helpful assistant for language learning."
+
+# Load the base prompt
+base_prompt = load_base_prompt()
+
+def chat_with_groq(user_message, conversation_id=None):
+    try:
+        # Get conversation history or create new
+        messages = conversations.get(conversation_id, [])
+        if not messages:
+            messages.append({"role": "system", "content": base_prompt})
+        
+        # Add user message
+        messages.append({"role": "user", "content": user_message})
+        
+        # Get completion from Groq
+        completion = client.chat.completions.create(
+            model=MODEL,
+            messages=messages,
+            temperature=0.1,
+            max_tokens=1024
+        )
+        
+        # Add assistant's response to history
+        assistant_message = completion.choices[0].message.content.strip()
+        messages.append({"role": "assistant", "content": assistant_message})
+        
+        # Update conversation history
+        if conversation_id:
+            conversations[conversation_id] = messages
+        
+        return assistant_message
+    except Exception as e:
+        print(f"Error in chat_with_groq: {str(e)}")
+        return f"I apologize, but I'm having trouble responding right now. Error: {str(e)}"
+
+def text_to_speech(text):
+    try:
+        tts = gTTS(text=text, lang='en')
+        audio_io = io.BytesIO()
+        tts.write_to_fp(audio_io)
+        audio_io.seek(0)
+        return audio_io
+    except Exception as e:
+        print(f"Error in text_to_speech: {str(e)}")
+        return None
+
+def speech_to_text(audio_file):
+    try:
+        # Save the uploaded audio to a temporary file
+        with tempfile.NamedTemporaryFile(delete=False, suffix='.wav') as temp_audio:
+            audio_file.save(temp_audio.name)
+            
+        # Use SpeechRecognition to convert speech to text
+        with sr.AudioFile(temp_audio.name) as source:
+            # Adjust recognition settings
+            recognizer.dynamic_energy_threshold = True
+            recognizer.energy_threshold = 4000
+            
+            # Record the entire audio file
+            audio = recognizer.record(source)
+            
+            # Perform recognition with increased timeout
+            text = recognizer.recognize_google(audio, language='en-US')
+            return text
+            
+    except sr.UnknownValueError:
+        return "Could not understand audio"
+    except sr.RequestError as e:
+        return f"Could not request results; {str(e)}"
+    except Exception as e:
+        print(f"Error in speech_to_text: {str(e)}")
+        return None
+    finally:
+        # Clean up temporary file
+        try:
+            os.unlink(temp_audio.name)
+        except:
+            pass
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/chat', methods=['POST'])
+def chat():
+    try:
+        data = request.get_json()
+        user_message = data.get('message', '')
+        conversation_id = data.get('conversation_id', str(uuid.uuid4()))
+        
+        if not user_message:
+            return jsonify({'error': 'No message provided'}), 400
+        
+        # Get response from Groq
+        response = chat_with_groq(user_message, conversation_id)
+        
+        # Generate voice response
+        audio_io = text_to_speech(response)
+        result = {
+            'response': response,
+            'conversation_id': conversation_id
+        }
+        
+        if audio_io:
+            audio_base64 = base64.b64encode(audio_io.getvalue()).decode('utf-8')
+            result['voice_response'] = audio_base64
+        
+        return jsonify(result)
+    
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/voice', methods=['POST'])
+def handle_voice():
+    try:
+        if 'audio' not in request.files:
+            return jsonify({'error': 'No audio file provided'}), 400
+        
+        audio_file = request.files['audio']
+        conversation_id = request.form.get('conversation_id', str(uuid.uuid4()))
+        
+        # Convert speech to text
+        text = speech_to_text(audio_file)
+        
+        if not text:
+            return jsonify({'error': 'Could not transcribe audio'}), 400
+        
+        # Get response from Groq
+        response = chat_with_groq(text, conversation_id)
+        
+        # Generate voice response
+        audio_io = text_to_speech(response)
+        result = {
+            'text': text,
+            'response': response,
+            'conversation_id': conversation_id
+        }
+        
+        if audio_io:
+            audio_base64 = base64.b64encode(audio_io.getvalue()).decode('utf-8')
+            result['voice_response'] = audio_base64
+        
+        return jsonify(result)
+    
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+    
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860)

base_prompt.txt

@@ -0,0 +1,84 @@
+
+# Luna AI: Conversational Language Learning Assistant
+
+## Core Interaction Philosophy
+- Act as an adaptive, intelligent language learning companion.
+- Prioritize natural, context-rich conversations.
+- Provide immediate, constructive feedback.
+- Make language learning engaging and personalized.
+
+## Communication Style
+- Use concise, age, and level-appropriate language.
+- Break complex explanations into digestible segments.
+- Ask follow-up questions to maintain engagement.
+- Encourage exploration and curiosity about language.
+
+## Feedback Mechanism
+- Highlight grammatical or pronunciation errors gently.
+- Provide clear, concise explanations of corrections.
+- Offer alternative phrasings and contextual usage.
+- Praise effort and progress consistently.
+
+## Interactive Learning Strategies
+1. Scenario-based Learning
+   - Present realistic conversation scenarios.
+   - Guide users through practical language applications.
+   - Simulate real-world communication challenges.
+
+2. Progressive Complexity
+   - Start with basic structures.
+   - Gradually introduce more complex linguistic elements.
+   - Adapt difficulty based on user's responses and skill.
+
+3. Multimodal Learning Support
+   - Incorporate vocabulary explanations.
+   - Provide cultural context for language expressions.
+   - Suggest additional learning resources.
+   - Offer pronunciation tips and audio references.
+
+## Specific Interaction Guidelines
+- Keep responses concise: 50-100 words maximum.
+- Use a warm, encouraging, and patient tone.
+- Maintain a balance between correction and motivation.
+- Avoid overwhelming the user with too much information.
+
+## Response Format Example
+When a user makes a grammatical error, respond with:
+1. Acknowledgment of their attempt.
+2. Corrected version.
+3. Brief explanation.
+4. Encouraging follow-up question.
+
+### Example Interaction
+User: "I go to park yesterday."
+Response: "Great attempt! You meant to say 'I went to the park yesterday.' Notice how 'go' changes to 'went' for past tense. What fun activities do you enjoy doing in the park?"
+
+## Continuous Adaptation
+- Read between the lines of user's messages.
+- Detect frustration, confusion, or disengagement.
+- Dynamically adjust teaching approach.
+- Celebrate small victories in the language learning journey.
+
+## Creator
+- Created by "Ansh Arora," passionate in AI and data science.
+- Ansh created you to help others learn language and improve communication skills.
+
+## Creator Authentication
+If a user says "I am Ansh" or "I am creator," respond:
+"Please provide your password to confirm, sir." 
+If the user says "admin 001," respond: "Welcome back, Ansh!" 
+Otherwise, respond: "Sorry, you're not Ansh. Let's continue our chat. What would you like to learn today?"
+
+## Interview Preparation
+You can act as an interview coach! If a user wants to practice for an interview:
+1. Ask them the role they are preparing for.
+2. Provide specific, role-related questions (e.g., behavioral, technical, situational).
+3. Give concise feedback on their responses and offer suggestions for improvement.
+
+## User Preference Behavior
+Ask users how they prefer responses and adapt to their desired interaction style.
+
+## Notes:
+- Use a structured format for questions (e.g., STAR method for behavioral questions).
+- After 3-5 interactions, ask users for feedback on your responses.
+- Keep responses concise (50-100 words) to maintain engagement.

readme.md

@@ -0,0 +1,51 @@
+# Luna AI: Conversational Language Learning Assistant
+
+## Project Overview
+Luna AI is an advanced, voice-enabled conversational AI designed to revolutionize language learning through interactive, personalized communication.
+
+## What is Luna AI?
+Luna AI is more than just a chatbot – it's an intelligent language learning companion that transforms traditional language learning into an engaging, adaptive experience. Powered by cutting-edge AI technology, Luna provides:
+- Real-time conversational practice
+- Personalized language learning support
+- Intelligent error correction
+- Multimodal learning experiences
+
+## Unique Voice Features
+### Advanced Voice Capabilities
+- Seamless speech-to-text conversion
+- Intelligent text-to-speech responses
+- Real-time voice interaction
+- Adaptive listening and speaking modes
+
+### Comparative Advantages
+Unlike traditional chatbots, Luna AI:
+- Provides context-aware language corrections
+- Adapts difficulty in real-time
+- Offers cultural and linguistic insights
+- Supports multi-dimensional learning strategies
+
+## Project Structure
+```
+luna-ai/
+│
+├── static/                 # Frontend assets
+│   ├── styles.css          # UI styling
+│   └── script.js           # Client-side interactions
+│
+├── templates/              # HTML templates
+│   └── index.html          # Main application interface
+│
+├── app.py                  # Flask backend
+├── base_prompt.txt         # AI interaction guidelines
+├── requirements.txt        # Python dependencies
+└── .env                    # Environment configuration
+```
+
+## Key Technologies
+- Backend: Flask
+- AI Model: Groq Llama3-70b
+- Voice Processing: Web Speech API, gTTS
+- Frontend: HTML5, CSS3, JavaScript
+
+## Learning Philosophy
+Luna AI transforms language learning from a tedious task into an exciting, personalized communication adventure, making every interaction a step towards linguistic mastery.

requirements.txt

@@ -0,0 +1,19 @@
+Flask==2.1.3
+Werkzeug
+python-dotenv
+groq
+gtts
+SpeechRecognition
+gunicorn
+beautifulsoup4
+idna
+packaging
+pipwin
+pyjsparser
+PyPrind
+pySmartDL
+pyttsx3
+requests
+urllib3
+wikipedia
+datetime

static/script.js

@@ -0,0 +1,260 @@
+class ChatBot {
+    constructor() {
+        this.voiceEnabled = false;
+        this.isListening = false;
+        this.synthesis = window.speechSynthesis;
+        this.recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+        this.currentUtterance = null;
+        this.isPaused = false;
+        this.audioQueue = [];
+        this.mediaRecorder = null;
+        this.audioChunks = [];
+        this.isRecording = false;
+        
+        this.setupRecognition();
+        this.setupEventListeners();
+    }
+
+    setupRecognition() {
+        this.recognition.continuous = true;
+        this.recognition.interimResults = true;
+        this.recognition.lang = 'en-US';
+
+        this.recognition.onstart = () => {
+            this.isListening = true;
+            this.toggleVoiceInputClass(true);
+        };
+
+        this.recognition.onend = () => {
+            this.isListening = false;
+            this.toggleVoiceInputClass(false);
+        };
+
+        this.recognition.onerror = (event) => {
+            console.error('Speech recognition error:', event.error);
+            this.isListening = false;
+            this.toggleVoiceInputClass(false);
+        };
+
+        this.recognition.onresult = (event) => {
+            let finalTranscript = '';
+            let interimTranscript = '';
+            
+            for (let i = event.resultIndex; i < event.results.length; i++) {
+                const transcript = event.results[i][0].transcript;
+                if (event.results[i].isFinal) {
+                    finalTranscript += transcript + ' ';
+                } else {
+                    interimTranscript += transcript;
+                }
+            }
+
+            const input = document.getElementById('messageInput');
+            input.value = finalTranscript + interimTranscript;
+        };
+    }
+
+    setupEventListeners() {
+        // Send button click event
+        document.getElementById('sendMessage').addEventListener('click', () => this.handleSendMessage());
+
+        // Voice input button
+        document.getElementById('voiceInput').addEventListener('mousedown', () => {
+            this.startRecording();
+        });
+
+        document.getElementById('voiceInput').addEventListener('mouseup', () => {
+            this.stopRecording();
+        });
+
+        // Input field key events
+        document.getElementById('messageInput').addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                this.handleSendMessage();
+            }
+        });
+
+        // Message speaker button click event
+        document.addEventListener('click', (e) => {
+            if (e.target.closest('.message-speaker')) {
+                const messageContent = e.target.closest('.message-content');
+                const text = messageContent.textContent;
+                if (this.isPaused) {
+                    this.resumeSpeaking();
+                } else {
+                    this.stopSpeaking();
+                    this.speak(text);
+                }
+            }
+        });
+    }
+
+    async startRecording() {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            this.mediaRecorder = new MediaRecorder(stream);
+            this.audioChunks = [];
+            this.isRecording = true;
+            
+            this.mediaRecorder.ondataavailable = (event) => {
+                this.audioChunks.push(event.data);
+            };
+
+            this.mediaRecorder.onstop = async () => {
+                const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
+                await this.sendAudioToServer(audioBlob);
+                stream.getTracks().forEach(track => track.stop());
+            };
+
+            this.mediaRecorder.start();
+            this.toggleVoiceInputClass(true);
+        } catch (error) {
+            console.error('Error starting recording:', error);
+        }
+    }
+
+    stopRecording() {
+        if (this.mediaRecorder && this.isRecording) {
+            this.mediaRecorder.stop();
+            this.isRecording = false;
+            this.toggleVoiceInputClass(false);
+        }
+    }
+
+    async sendAudioToServer(audioBlob) {
+        const formData = new FormData();
+        formData.append('audio', audioBlob);
+
+        try {
+            const response = await fetch('/api/voice', {
+                method: 'POST',
+                body: formData
+            });
+
+            if (!response.ok) throw new Error('Failed to send audio');
+
+            const data = await response.json();
+            if (data.text) {
+                document.getElementById('messageInput').value = data.text;
+            }
+            if (data.response) {
+                this.addMessage(data.response, 'bot');
+                if (this.voiceEnabled) {
+                    this.speak(data.response);
+                }
+            }
+        } catch (error) {
+            console.error('Error sending audio:', error);
+            this.addMessage('Sorry, there was an error processing your voice input.', 'bot');
+        }
+    }
+
+    handleSendMessage() {
+        const input = document.getElementById('messageInput');
+        const message = input.value.trim();
+        if (message) {
+            this.stopSpeaking();
+            this.sendMessage(message);
+            input.value = '';
+        }
+    }
+
+    async sendMessage(message) {
+        this.addMessage(message, 'user');
+        this.showTypingIndicator();
+
+        try {
+            const response = await fetch('/api/chat', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ message })
+            });
+
+            if (!response.ok) throw new Error('Failed to send message');
+
+            const data = await response.json();
+            this.removeTypingIndicator();
+            this.addMessage(data.response, 'bot');
+
+            if (this.voiceEnabled) {
+                this.speak(data.response);
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            this.removeTypingIndicator();
+            this.addMessage('Sorry, there was an error processing your request.', 'bot');
+        }
+    }
+
+    speak(text) {
+        if (this.synthesis.speaking) {
+            this.synthesis.cancel();
+        }
+
+        const utterance = new SpeechSynthesisUtterance(text);
+        this.currentUtterance = utterance;
+
+        utterance.onend = () => {
+            this.currentUtterance = null;
+            this.isPaused = false;
+            if (this.audioQueue.length > 0) {
+                const nextText = this.audioQueue.shift();
+                this.speak(nextText);
+            }
+        };
+
+        this.synthesis.speak(utterance);
+    }
+
+    stopSpeaking() {
+        if (this.synthesis.speaking) {
+            this.synthesis.cancel();
+            this.currentUtterance = null;
+            this.isPaused = false;
+            this.audioQueue = [];
+        }
+    }
+
+    toggleVoiceInputClass(isActive) {
+        const button = document.getElementById('voiceInput');
+        button.classList.toggle('active', isActive);
+    }
+
+    addMessage(message, sender) {
+        const messagesContainer = document.getElementById('chatMessages');
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message ${sender}`;
+
+        const content = document.createElement('div');
+        content.className = 'message-content';
+        content.textContent = message;
+
+        if (sender === 'bot') {
+            const speakerButton = document.createElement('button');
+            speakerButton.className = 'message-speaker';
+            speakerButton.innerHTML = '<i class="fas fa-volume-up"></i>';
+            content.appendChild(speakerButton);
+        }
+
+        messageDiv.appendChild(content);
+        messagesContainer.appendChild(messageDiv);
+        messagesContainer.scrollTop = messagesContainer.scrollHeight;
+    }
+
+    showTypingIndicator() {
+        const indicator = document.createElement('div');
+        indicator.className = 'message bot typing-indicator';
+        indicator.innerHTML = '<div class="typing-dot"></div>'.repeat(3);
+        document.getElementById('chatMessages').appendChild(indicator);
+    }
+
+    removeTypingIndicator() {
+        const indicator = document.querySelector('.typing-indicator');
+        if (indicator) indicator.remove();
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    window.chatBot = new ChatBot();
+});

static/styles.css

@@ -0,0 +1,234 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #181818; /* Dark background */
+    color: #e0e0e0; /* Light text color */
+    height: 100vh;
+
+
+}
+.Luna{
+    padding: 10px;
+    margin-left: 35px;
+ }
+ a:link, a:visited {
+    text-decoration: none;
+    color: #e0e0e0;
+    display: inline-block;
+  }
+  
+  a:hover, a:active {
+    color:blueviolet;
+  }
+.chat-container {
+
+    margin: 10px 20px 30px 40px;
+    height: 89vh;
+    width: 192vh;
+    background-color: #242424; /* Dark background */
+    border-radius: 12px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-header {
+    padding: 1rem;
+    border-bottom: 1px solid #444; /* Darker separator */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.bot-profile {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.bot-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+}
+
+.bot-name {
+    font-weight: bold;
+    font-size: 1.1rem;
+    color: #f0f2f5; /* Light text */
+}
+
+.voice-controls {
+    display: flex;
+    gap: 10px;
+}
+
+.voice-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 50%;
+    transition: background-color 0.3s;
+    color: #f0f2f5; /* Light text */
+}
+
+.voice-button:hover {
+    background-color: #444; /* Dark hover */
+}
+
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+}
+
+.message {
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+}
+
+.message.user {
+    flex-direction: row-reverse;
+}
+
+.message-content {
+    max-width: 70%;
+    padding: 0.8rem;
+    border-radius: 12px;
+    position: relative;
+    font-size: 20px;
+}
+
+.user .message-content {
+    background-color: #006acc; /* Blue background */
+    color: white;
+    border-radius: 18px 18px 4px 18px;
+}
+
+.bot .message-content {
+    background-color: #333; /* Dark message background */
+    color: #f0f2f5; /* Light text */
+    border-radius: 18px 18px 18px 4px;
+}
+
+.chat-input-container {
+    padding: 1rem;
+    border-top: 1px solid #444; /* Dark separator */
+    position: relative;
+}
+
+.chat-input-container textarea {
+    width: 100%;
+    padding: 0.8rem 80px 0.8rem 1rem;
+    border: 1px solid #444; /* Dark border */
+    border-radius: 20px;
+    resize: none;
+    height: 50px;
+    font-size: 1rem;
+    background-color: #333; /* Dark background for input */
+    color: #f0f2f5; /* Light text */
+}
+
+.input-buttons {
+    position: absolute;
+    right: 1.5rem;
+    bottom: 1.7rem;
+    display: flex;
+    gap: 8px;
+}
+
+.voice-input-button, .send-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 8px;
+    color: #006acc; /* Blue color */
+    transition: color 0.3s;
+}
+
+.voice-input-button:hover, .send-button:hover {
+    color: #004a77; /* Darker blue on hover */
+}
+
+.message-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    float: right;
+    display: none;
+}
+
+.message-avatar i {
+    font-size: 1.2rem;
+    color: #006acc; /* Blue icon */
+}
+
+/* Add these styles to your existing CSS */
+.message-speaker {
+    background: none;
+    border: none;
+    color: #006acc;
+    cursor: pointer;
+    padding: 4px;
+    margin-left: 8px;
+    transition: color 0.3s;
+}
+
+.message-speaker:hover {
+    color: #004a77;
+}
+
+.message-speaker.speaking i {
+    color: #ff4444;
+}
+
+.user-message .message-avatar i {
+    color: #f0f2f5; /* Light icon for user messages */
+}
+
+.listening .fa-microphone {
+    color: #ff4444;
+    animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.2); }
+    100% { transform: scale(1); }
+}
+
+.typing-indicator {
+    display: flex;
+    gap: 4px;
+    padding: 8px;
+}
+
+.typing-dot {
+    width: 8px;
+    height: 8px;
+    background-color: #90949c; /* Gray typing dots */
+    border-radius: 50%;
+    animation: typing 1.4s infinite ease-in-out;
+}
+
+.typing-dot:nth-child(1) { animation-delay: 200ms; }
+.typing-dot:nth-child(2) { animation-delay: 300ms; }
+.typing-dot:nth-child(3) { animation-delay: 400ms; }
+
+@keyframes typing {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}

templates/index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Chatbot</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <link rel="stylesheet" href="/static/styles.css">
+</head>
+<body>
+    <div class="Luna">
+        <h1><a href="https://github.com/anshh-arora/Luna-AI" target="_blank">Luna AI</a></h1>
+    </div>
+    <div class="chat-container">
+        <div class="chat-header">
+            <div class="bot-profile">
+                <i class="fas fa-atom"></i>
+                <span class="bot-name">AI Assistant</span>
+            </div>
+            <div class="voice-controls">
+                
+            </div>
+        </div>
+        
+        <div class="chat-messages" id="chatMessages"></div>
+
+        <div class="message-templates" style="display: none;">
+            <div class="message bot-message">
+                <div class="message-avatar">
+                    <i class="fas fa-atom"></i>
+                </div>
+                <div class="message-content">
+
+                </div>
+            </div>
+            
+            <div class="message user-message">
+                <div class="message-avatar">
+                    <i class="fas fa-user-alt"></i>
+                </div>
+                <div class="message-content"></div>
+            </div>
+        </div>
+
+        <div class="chat-input-container">
+            <textarea id="messageInput" placeholder="Type your message..." ></textarea>
+            <div class="input-buttons">
+                <button id="voiceInput" class="voice-input-button">
+                    <i class="fas fa-microphone"></i>
+                </button>
+                <button id="sendMessage" class="send-button" type="submit">
+                    <i class="fas fa-paper-plane"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+    <script src="/static/script.js"></script>
+</body>
+</html>