Hugging Face's logo

Spaces:
Avks
/
linguabot-tutor
Running

App Files Community
linguabot-tutor
File size: 5,203 Bytes
8e477ae
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
 
document.addEventListener('DOMContentLoaded', function() {
    const chatMessages = document.getElementById('chatMessages');
    const messageInput = document.getElementById('messageInput');
    const sendBtn = document.getElementById('sendBtn');
    const attachBtn = document.getElementById('attachBtn');
    const attachmentOptions = document.getElementById('attachmentOptions');
    const audioModeBtn = document.getElementById('audioModeBtn');
    
    // Initial bot message
    addMessage("Hello! I'm your English tutor. How can I help you today? You can ask me about grammar, vocabulary, or practice conversation!", 'bot');
    
    // Send message when clicking send button
    sendBtn.addEventListener('click', sendMessage);
    
    // Send message when pressing Enter
    messageInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendMessage();
        }
    });
    
    // Toggle attachment options
    attachBtn.addEventListener('click', function() {
        attachmentOptions.classList.toggle('hidden');
    });
    
    // Audio mode toggle
    audioModeBtn.addEventListener('click', function() {
        addMessage("Audio mode activated! Let's practice speaking English together. Click the microphone icon to start recording.", 'system');
        audioModeBtn.innerHTML = '<i data-feather="mic-off" class="w-5 h-5 text-red-500"></i>';
        feather.replace();
    });
    
    function sendMessage() {
        const message = messageInput.value.trim();
        if (message) {
            addMessage(message, 'user');
            messageInput.value = '';
            
            // Show typing indicator
            showTypingIndicator();
            
            // Simulate bot response after delay
            setTimeout(() => {
                removeTypingIndicator();
                generateBotResponse(message);
            }, 1500);
        }
    }
    
    function addMessage(text, sender) {
        const messageElement = document.createElement('div');
        messageElement.classList.add('message', sender);
        
        const now = new Date();
        const timeString = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
        
        messageElement.innerHTML = `
            <div class="message-content">${formatMessage(text)}</div>
            <div class="message-time">${timeString}</div>
        `;
        
        chatMessages.appendChild(messageElement);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }
    
    function formatMessage(text) {
        // Simple formatting for line breaks
        return text.replace(/\n/g, '<br>');
    }
    
    function showTypingIndicator() {
        const typingElement = document.createElement('div');
        typingElement.classList.add('typing-indicator');
        typingElement.id = 'typingIndicator';
        typingElement.innerHTML = `
            <div class="typing-dot"></div>
            <div class="typing-dot"></div>
            <div class="typing-dot"></div>
        `;
        chatMessages.appendChild(typingElement);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }
    
    function removeTypingIndicator() {
        const typingIndicator = document.getElementById('typingIndicator');
        if (typingIndicator) {
            typingIndicator.remove();
        }
    }
    
    function generateBotResponse(userMessage) {
        // Convert to lowercase for easier matching
        const msg = userMessage.toLowerCase();
        
        let response = "";
        
        // Grammar-related responses
        if (msg.includes('grammar') || msg.includes('rule')) {
            response = "Grammar is the foundation of language! For example, remember that in English we usually follow Subject-Verb-Object order. Would you like to practice with specific tenses?";
        } 
        // Vocabulary-related responses
        else if (msg.includes('vocabulary') || msg.includes('word') || msg.includes('learn')) {
            response = "Great! Learning vocabulary is key. Try using new words in sentences immediately. For example, if you learn 'fascinating', say 'This book is fascinating!' instead of just memorizing it.";
        }
        // Pronunciation practice
        else if (msg.includes('pronounce') || msg.includes('say') || msg.includes('sound')) {
            response = "Let's practice pronunciation! Try saying: 'The weather is wonderful today.' Focus on the 'th' sound in 'the' and 'weather'. Would you like to record yourself?";
        }
        // Conversation practice
        else if (msg.includes('talk') || msg.includes('conversation') || msg.includes('speak')) {
            response = "Perfect! Let's have a conversation. Tell me about your favorite hobby and why you enjoy it. I'll respond and correct any mistakes gently!";
        }
        // Default response
        else {
            response = "That's interesting! As your English tutor, I can help with grammar explanations, vocabulary building, pronunciation practice, and conversation skills. What would you like to work on?";
        }
        
        addMessage(response, 'bot');
    }
});