Hugging Face's logo

Spaces:
adechandra1987
/
eyebotIndoBert
Sleeping

App Files Community
eyebotIndoBert
File size: 4,618 Bytes 
403d36c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
function sendMessage() {
    const userInput = document.getElementById('userInput');
    const chatlog = document.getElementById('chatlog');
    const messageText = userInput.value.trim();

    if (messageText === '') return;

    // Tambahkan pesan pengguna ke chatlog
    const userMessage = document.createElement('div');
    userMessage.className = 'chat-message user-message';
    userMessage.innerHTML = `

        <span class="message-sender">Anda:</span>

        <span class="message-text">${messageText}</span>

    `;
    chatlog.appendChild(userMessage);

    // Tambahkan indikator "sedang mengetik"
    const typingIndicator = document.createElement('div');
    typingIndicator.className = 'chat-message bot-message typing-indicator';
    typingIndicator.innerHTML = `

        <span class="message-sender">EyeBot:</span>

        <span class="message-text">Sedang mengetik...</span>

    `;
    chatlog.appendChild(typingIndicator);

    // Scroll ke bawah
    chatlog.scrollTop = chatlog.scrollHeight;

    // Kirim pesan ke server
    fetch('/predict', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ message: messageText })
    })
    .then(response => response.json())
    // .then(data => {
    //     // Hapus indikator "sedang mengetik"
    //     chatlog.removeChild(typingIndicator);

    //     // Tambahkan respons bot ke chatlog
    //     const botMessage = document.createElement('div');
    //     botMessage.className = 'chat-message bot-message';
    //     botMessage.innerHTML = `
    //         <span class="message-sender">EyeBot:</span>
    //         <span class="message-text">${data.answer}</span>
    //     `;
    //     chatlog.appendChild(botMessage);

    //     // Scroll ke bawah
    //     chatlog.scrollTop = chatlog.scrollHeight;
    // })
    .then(data => {
    // Hapus indikator "sedang mengetik"
    chatlog.removeChild(typingIndicator);

    // Tambahkan respons bot ke chatlog
    const botMessage = document.createElement('div');
    botMessage.className = 'chat-message bot-message';
    botMessage.innerHTML = `

        <span class="message-sender">EyeBot:</span>

        <span class="message-text">${data.answer}</span>

        <span class="predicted-tag">Predicted Tag: ${data.predicted_tag} (${data.probabilities[data.predicted_tag].toFixed(4)})</span>

        <button class="toggle-probs">Show Probabilities</button>

        <div class="probabilities" style="display: none;">

            Probabilities for each tag:<br>

            ${Object.entries(data.probabilities).map(([tag, prob]) => `Tag: ${tag}, Prob: ${prob.toFixed(4)}`).join('<br>')}

            <br>Max Prob: ${data.probabilities[data.predicted_tag].toFixed(4)}, Predicted Tag: ${data.predicted_tag}

        </div>

    `;
    chatlog.appendChild(botMessage);

    // Tambahkan event listener untuk tombol toggle
    const toggleButton = botMessage.querySelector('.toggle-probs');
    const probsDiv = botMessage.querySelector('.probabilities');
     toggleButton.addEventListener('click', () => {
        if (probsDiv.style.display === 'none') {
            probsDiv.style.display = 'block';
            toggleButton.textContent = 'Hide Probabilities';
        } else {
            probsDiv.style.display = 'none';
            toggleButton.textContent = 'Show Probabilities';
        }
    });

    // Scroll ke bawah
    chatlog.scrollTop = chatlog.scrollHeight;
})
    .catch(error => {
        console.error('Error:', error);
        // Hapus indikator "sedang mengetik"
        chatlog.removeChild(typingIndicator);

        const errorMessage = document.createElement('div');
        errorMessage.className = 'chat-message bot-message';
        errorMessage.innerHTML = `

            <span class="message-sender">EyeBot:</span>

            <span class="message-text">Maaf, terjadi kesalahan. Silakan coba lagi.</span>

        `;
        chatlog.appendChild(errorMessage);

        // Scroll ke bawah
        chatlog.scrollTop = chatlog.scrollHeight;
    });

    // Kosongkan input
    userInput.value = '';
}

function clearChat() {
    const chatlog = document.getElementById('chatlog');
    chatlog.innerHTML = `

        <div class="chat-message bot-message">

            <span class="message-sender">EyeBot:</span>

            <span class="message-text">Halo! Saya EyeBot, siap membantu Anda dengan informasi kesehatan mata. Apa yang bisa saya bantu?</span>

        </div>

    `;
}