Hugging Face's logo

Spaces:
brestok
/
Poke-Bowl-AI
Sleeping

App Files Community
Poke-Bowl-AI
File size: 4,095 Bytes 
98dceee
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
64fd065
98dceee
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
const initialMessage = ''

const loadingModal = document.getElementById('loadingModal');
const messageHistory = document.getElementById('chatHistory')
let mediaRecorder;
let audioChunks = [];
let socket

function makeLoading() {
    loadingModal.style.visibility = 'visible';
}

function stopLoading() {
    loadingModal.style.visibility = 'hidden';
}

function startCall() {
    const uuid = generateUUID()
    messageHistory.innerHTML = ``
    socket = new WebSocket(`wss://brestok-poke-bowl-ai.hf.space/ws/${uuid}`);
    socket.onopen = () => {
        startRecording()
    };

    socket.onclose = (event) => console.log('WebSocket disconnected', event);
    socket.onerror = (error) => {
        alert('Something was wrong. Try again later.')
        window.location.reload()
    };
    socket.onmessage = (event) => playResponse(event.data);
}

const startRecording = () => {
    showMessage('You can speak!')
    navigator.mediaDevices.getUserMedia({audio: true})
        .then(stream => {
            mediaRecorder = new MediaRecorder(stream);
            try {
                mediaRecorder.ondataavailable = (event) => {
                    audioChunks.push(event.data)

                };
            } catch (e) {
                alert('It is not possible to send an empty message')
            }
            mediaRecorder.start();
        })
        .catch(error => {
            console.error('Error accessing the microphone', error);
        });
};

const stopAndSend = () => {
    makeLoading()
    mediaRecorder.ondataavailable = (event) => {
        audioChunks.push(event.data)
        console.log(audioChunks)

        const audioBlob = new Blob(audioChunks, {type: 'audio/wav'});
        const reader = new FileReader();
        reader.readAsDataURL(audioBlob);
        reader.onloadend = () => {
            let base64String = reader.result;
            base64String = base64String.split(',')[1];
            const dataWS = {
                'audio': base64String,
            }
            console.log(dataWS)
            socket.send(JSON.stringify(dataWS));
            audioChunks = [];
        }
    }
    try {
        mediaRecorder.stop();
    } catch (e) {
        return
    }
}


const playResponse = (data, initMessage = false) => {
    data = JSON.parse(data)
    if (!initMessage) {
        const aiResponse = data['ai_response']
        if (aiResponse.startsWith('https://blue-estate-agency.com/') || aiResponse.startsWith('http://blue-estate-agency.com/')) {
            window.open(aiResponse, '_blank');
        }
    }
    const audioSrc = `data:audio/mp3;base64,${data['voice_response']}`;
    const audio = new Audio(audioSrc);
    stopLoading()
    if (!initMessage) {
        createMessage('User', data['user_query'])
    }
    audio.play();

    audio.onended = () => {
        startRecording()
        if (!initMessage) {
            createMessage('Assistant', data['ai_response'])
        }
    };
}

function endCall() {
    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
        mediaRecorder.stop();
        audioChunks = []
    }
    if (socket && socket.readyState === WebSocket.OPEN) {
        socket.close();
    }
    showMessage('The call is ended')
}

function generateUUID() {
    const arr = new Uint8Array(16);
    window.crypto.getRandomValues(arr);

    arr[6] = (arr[6] & 0x0f) | 0x40;
    arr[8] = (arr[8] & 0x3f) | 0x80;

    return ([...arr].map((b, i) =>
        (i === 4 || i === 6 || i === 8 || i === 10 ? "-" : "") + b.toString(16).padStart(2, "0")
    ).join(""));
}

function showMessage(message_text) {
    const message = document.getElementById('message');
    message.innerText = message_text
    message.style.display = 'block';

    setTimeout(function () {
        message.style.display = 'none';
    }, 2000);
}

function createMessage(type, message) {
    const newMessage = document.createElement('div')
    newMessage.className = 'message rounded-4 bg-white mb-4 mx-4 py-2 px-3 border'
    newMessage.innerHTML = `
    <h5>${type}</h5>
    ${message}
    `
    messageHistory.appendChild(newMessage)
}