File size: 4,748 Bytes
ecf6723
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b21db85
4b1fa0c
b21db85
2a75355
 
ecf6723
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1712c87
 
 
 
ecf6723
 
 
 
 
 
 
 
 
 
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
document.addEventListener('DOMContentLoaded', () => {
    const inputText = document.getElementById('inputText');
    const analyzeBtn = document.getElementById('analyzeBtn');
    const resultCard = document.getElementById('resultCard');
    const resultLabel = document.getElementById('resultLabel');
    const resultMessage = document.getElementById('resultMessage');
    const confidenceScore = document.getElementById('confidenceScore');
    const loader = document.querySelector('.loader');
    const btnText = document.querySelector('.btn-text');
    const charCount = document.querySelector('.char-count');
    const examplesGrid = document.getElementById('examplesGrid');

    // Hindi Examples
    const examples = [
        "बांग्लादेश की शानदार वापसी, भारत को 314 रन पर रोका #INDvBAN #CWC19",
        "जल बिना मछली जिंदा रह सकती मगर बीजेपी टीवी धार्मिक विवादों बहस दिखाये बिना जिंदा नही रह सकती",
        "राजधानी दिल्ली में गर्मी का कहर जारी आज शाम हल्की बारिश की संभावना।",
        "इन लोगों को मार डालना चाहिए।",
        "धार्मिक पदों पर बैठे कुछ लोग अपने को भगवान समझ लेते हैं,कुछ लोग नत मस्तक हो उन्हें भगवान का दर्जा दिलाने के लिए अपना समय बर्बाद करते हैं,",
        "नफरत करनी है उतनी कर लो रंडवो बाजारू रंडी कि औलादो।।"
    ];

    // Populate Examples
    examples.forEach(text => {
        const chip = document.createElement('div');
        chip.className = 'example-chip';
        chip.textContent = text;
        chip.onclick = () => {
            inputText.value = text;
            updateCharCount();
            analyzeText();
        };
        examplesGrid.appendChild(chip);
    });

    // Character Count
    inputText.addEventListener('input', updateCharCount);

    function updateCharCount() {
        const length = inputText.value.length;
        charCount.textContent = `${length} / 500`;
        if (length > 500) {
            charCount.style.color = 'var(--danger)';
        } else {
            charCount.style.color = 'var(--text-dim)';
        }
    }

    // Analyze Text
    analyzeBtn.addEventListener('click', analyzeText);

    async function analyzeText() {
        const text = inputText.value.trim();
        if (!text) return;

        // UI Loading State
        setLoading(true);
        resultCard.classList.add('hidden');

        try {
            const response = await fetch('/predict', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ text: text }),
            });

            if (!response.ok) {
                throw new Error('API Error');
            }

            const data = await response.json();
            showResult(data);

        } catch (error) {
            console.error('Error:', error);
            alert('An error occurred while analyzing the text. Please try again.');
        } finally {
            setLoading(false);
        }
    }

    function setLoading(isLoading) {
        if (isLoading) {
            analyzeBtn.disabled = true;
            loader.classList.remove('hidden');
            btnText.textContent = 'Analyzing...';
        } else {
            analyzeBtn.disabled = false;
            loader.classList.add('hidden');
            btnText.textContent = 'Analyze Text';
        }
    }

    function showResult(data) {
        resultCard.classList.remove('hidden', 'hate', 'non-hate');

        // Add class based on result
        if (data.is_hate) {
            resultCard.classList.add('non-hate');
            resultLabel.textContent = 'Non-Hate Speech ';
            resultMessage.textContent = 'This content appears to be safe.';
        } else {
            resultCard.classList.add('hate');
            resultLabel.textContent = 'Hate Speech Detected';
            resultMessage.textContent = 'This content contains toxic or hateful language.';
        }

        // Format confidence score
        const scorePercent = (data.score * 100).toFixed(1);
        confidenceScore.textContent = `Confidence: ${scorePercent}%`;
    }
});