File size: 4,928 Bytes
6067652
20c115a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6067652
20c115a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sentiment Analysis Web App</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <!--<header class="header">
        <h1>AI BATTLEGROUND 2023</h1>
    </header>-->
<header class="header">
        <!-- Nagarro Logo -->
        <img src="https://mma.prnewswire.com/media/844192/Nagarro_Logo.jpg" alt="Nagarro Logo" class="logo">
        <!-- Navbar -->
        <nav class="navbar">
            <h1>AI BATTLEGROUND 2023</h1>
        </nav>
    </header>
    <div class="container">
        <h1>Sentiment Analysis</h1>
        <textarea id="textInput" placeholder="Enter text..."></textarea><br>
        <button onclick="classifySentiment()">Classify</button>
        <div id="result" class="result-container"></div>
        <canvas id="chart"></canvas>
    </div>
	
    <footer class="footer">
        <p>&copy; Team AIQA &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Designed By Agrim Ray </p>
        
    </footer>

    <script>
        let chart;  // Declare chart variable outside the function

        async function query(data) {
            try {
                const response = await fetch(
                    "https://api-inference.huggingface.co/models/ahmedrachid/FinancialBERT-Sentiment-Analysis",
                    {
                        headers: { Authorization: "Bearer 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" },
                        method: "POST",
                        body: JSON.stringify(data),
                    }
                );

                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }

                const result = await response.json();
                return result;
            } catch (error) {
                console.error("Error during API request:", error);
                return { error: "Failed to get predictions from the model." };
            }
        }

        function classifySentiment() {
            const textInput = document.getElementById("textInput").value;
            const chartCanvas = document.getElementById("chart");

            if (textInput.trim() === "") {
                alert("Please enter text for sentiment analysis.");
                return;
            }

            const data = { "inputs": textInput };

            // Call the query function and handle the response
            query(data).then((response) => {
                console.log(JSON.stringify(response));

                const resultDiv = document.getElementById("result");

                if (response && Array.isArray(response) && response.length > 0) {
                    const predictions = response[0];

                    // Display the results for each sentiment label and score
                    resultDiv.innerHTML = predictions.map((prediction) => {
                        return `
                            <div class="result-item">
                                <p>Sentiment: ${prediction.label}</p>
                                <p>Confidence Score: ${(prediction.score*100).toFixed(0)}</p>
                            </div>
                        `;
                    }).join('');

                    // Destroy the existing chart if it exists
                    if (chart) {
                        chart.destroy();
                    }

                    // Create a new bar chart
                    const labels = predictions.map(prediction => prediction.label);
                    const scores = predictions.map(prediction => prediction.score * 100); // Scale scores to percentage

                    const ctx = chartCanvas.getContext('2d');
                    chart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: labels,
                            datasets: [{
                                label: 'Confidence Scores (%)',
                                data: scores,
                                backgroundColor: 'rgba(255, 0, 0, 0.2)', // Red color with 20% opacity
            borderColor: 'rgba(255, 0, 0, 1)', // Red color
            borderWidth: 1

                            }]
                        },
                        options: {
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    max: 100
                                }
                            }
                        }
                    });
                } else {
                    resultDiv.textContent = "Unable to determine sentiment.";
                }
            });
        }
    </script>
</body>
</html>