File size: 5,127 Bytes
5e6ee7b
 
 
 
 
 
 
 
 
 
b7453ff
 
5e6ee7b
 
 
 
 
 
 
 
 
 
b7453ff
5e6ee7b
 
 
 
 
 
401ad90
 
5e6ee7b
 
 
 
 
 
401ad90
5e6ee7b
 
 
 
 
 
401ad90
5e6ee7b
 
 
 
 
 
 
 
 
 
401ad90
5e6ee7b
 
 
 
b7453ff
5e6ee7b
 
 
 
 
 
 
 
401ad90
 
5e6ee7b
 
401ad90
 
 
 
 
 
6f055e9
401ad90
5e6ee7b
 
 
 
 
401ad90
 
5e6ee7b
 
401ad90
6f055e9
5e6ee7b
401ad90
5e6ee7b
 
401ad90
 
 
5e6ee7b
401ad90
5e6ee7b
401ad90
5e6ee7b
401ad90
5e6ee7b
 
 
 
 
 
401ad90
5e6ee7b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
401ad90
5e6ee7b
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
let isRecording = false;
let recognition;
let responsesHistory = {}; // Holds all responses per prompt
let currentIndex = {};     // Track current response index

function initSpeechRecognition() {
    // Check for SpeechRecognition compatibility
    if (!('SpeechRecognition' in window || 'webkitSpeechRecognition' in window)) {
        alert("Speech recognition is not supported in your browser.");
        return;
    }

    window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    recognition = new SpeechRecognition();
    recognition.lang = 'en-US';
    recognition.interimResults = false;
    recognition.maxAlternatives = 1;

    recognition.onresult = function (event) {
        const transcript = event.results[0][0].transcript;
        sendMessageFromVoice(transcript);
    };

    recognition.onerror = function (event) {
        console.log("Speech recognition error:", event.error);
        alert("Error in speech recognition: " + event.error);
    };

    recognition.onend = function () {
        isRecording = false;
        micIcon.textContent = 'mic';
    };
}

const micIcon = document.getElementById('mic-icon');
micIcon.addEventListener('click', function () {
    if (isRecording) {
        recognition.stop();
        isRecording = false;
        micIcon.textContent = 'mic';
    } else {
        recognition.start();
        isRecording = true;
        micIcon.textContent = 'mic_off';
    }
});

function appendMessage(text, className) {
    const chatbox = document.getElementById('chatbox');
    const messageDiv = document.createElement('div');
    messageDiv.className = 'message ' + className;
    messageDiv.innerHTML = text;
    chatbox.appendChild(messageDiv);
    chatbox.scrollTop = chatbox.scrollHeight;
}

function sendMessageFromVoice(message) {
    appendMessage(message, 'user');
    fetchMessageFromAI(message);
}

function sendMessage() {
    const userInput = document.getElementById('user-input');
    const message = userInput.value.trim();
    if (message === '') return;
    appendMessage(message, 'user');
    userInput.value = '';
    fetchMessageFromAI(message);
}

function fetchMessageFromAI(message) {
    const typingIndicator = document.getElementById('typing-indicator');
    typingIndicator.style.display = 'flex';

    fetch('/message', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ text: message }) // Sending message text as JSON
    })
        .then(response => {
            if (!response.ok) {
                throw new Error(`Server error: ${response.statusText}`);
            }
            return response.json();
        })
        .then(data => {
            typingIndicator.style.display = 'none';

            if (data.response) {
                // Add the AI's response to the chatbox
                addAIResponse(data.response, message);
            } else {
                console.error("No response from the server.");
                appendMessage("No response from the AI.", 'ai');
            }
        })
        .catch(error => {
            typingIndicator.style.display = 'none';
            console.error('Error:', error);
            appendMessage("An error occurred. Please try again later.", 'ai');
        });
}

function addAIResponse(responseText, userPrompt) {
    const responseId = Date.now();
    responsesHistory[responseId] = [responseText];
    currentIndex[responseId] = 0;
    renderAIResponse(responseText, responseId, userPrompt);
}

function renderAIResponse(responseText, responseId, userPrompt) {
    const chatbox = document.getElementById('chatbox');
    const messageDiv = document.createElement('div');
    messageDiv.className = 'message ai';
    messageDiv.dataset.responseId = responseId;
    messageDiv.dataset.userPrompt = userPrompt; // Store the prompt

    const responseTextDiv = document.createElement('div');
    responseTextDiv.className = 'response-text';
    responseTextDiv.innerHTML = responseText;
    messageDiv.appendChild(responseTextDiv);

    const iconsDiv = document.createElement('div');
    iconsDiv.className = 'icons';

    const speakerIcon = document.createElement('span');
    speakerIcon.className = 'material-icons';
    speakerIcon.innerText = 'volume_up';
    speakerIcon.onclick = () => speakText(responseId);

    const copyIcon = document.createElement('span');
    copyIcon.className = 'material-icons';
    copyIcon.innerText = 'content_copy';
    copyIcon.onclick = () => copyResponse(responseId);

    const regenerateIcon = document.createElement('span');
    regenerateIcon.className = 'material-icons';
    regenerateIcon.innerText = 'replay';
    regenerateIcon.onclick = () => regenerateResponse(responseId, responseTextDiv, iconsDiv);

    iconsDiv.appendChild(speakerIcon);
    iconsDiv.appendChild(copyIcon);
    iconsDiv.appendChild(regenerateIcon);
    messageDiv.appendChild(iconsDiv);
    chatbox.appendChild(messageDiv);
    chatbox.scrollTop = chatbox.scrollHeight;
}

document.addEventListener('DOMContentLoaded', initSpeechRecognition);