Hugging Face's logo

Spaces:
Agrimr
/
AIQA2
Running

App Files Community
1
Agrimr commited on
Commit
faa9512
•
1 Parent(s): 6067652

njn

Browse files
Files changed (2) hide show
  1. index (1).html +130 -0
  2. style.css +166 -0
index (1).html ADDED
@@ -0,0 +1,130 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Sentiment Analysis Web App</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ </head>
10
+ <body>
11
+ <!--<header class="header">
12
+ <h1>AI BATTLEGROUND 2023</h1>
13
+ </header>-->
14
+ <header class="header">
15
+ <!-- Nagarro Logo -->
16
+ <img src="https://mma.prnewswire.com/media/844192/Nagarro_Logo.jpg" alt="Nagarro Logo" class="logo">
17
+ <!-- Navbar -->
18
+ <nav class="navbar">
19
+ <h1>AI BATTLEGROUND 2023</h1>
20
+ </nav>
21
+ </header>
22
+ <div class="container">
23
+ <h1>Sentiment Analysis</h1>
24
+ <textarea id="textInput" placeholder="Enter text..."></textarea><br>
25
+ <button onclick="classifySentiment()">Classify</button>
26
+ <div id="result" class="result-container"></div>
27
+ <canvas id="chart"></canvas>
28
+ </div>
29
+
30
+ <footer class="footer">
31
+ <p>&copy; Team AIQA &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Designed By Agrim Ray </p>
32
+
33
+ </footer>
34
+
35
+ <script>
36
+ let chart; // Declare chart variable outside the function
37
+
38
+ async function query(data) {
39
+ try {
40
+ const response = await fetch(
41
+ "https://api-inference.huggingface.co/models/ahmedrachid/FinancialBERT-Sentiment-Analysis",
42
+ {
43
+ headers: { Authorization: "Bearer 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" },
44
+ method: "POST",
45
+ body: JSON.stringify(data),
46
+ }
47
+ );
48
+
49
+ if (!response.ok) {
50
+ throw new Error(`HTTP error! Status: ${response.status}`);
51
+ }
52
+
53
+ const result = await response.json();
54
+ return result;
55
+ } catch (error) {
56
+ console.error("Error during API request:", error);
57
+ return { error: "Failed to get predictions from the model." };
58
+ }
59
+ }
60
+
61
+ function classifySentiment() {
62
+ const textInput = document.getElementById("textInput").value;
63
+ const chartCanvas = document.getElementById("chart");
64
+
65
+ if (textInput.trim() === "") {
66
+ alert("Please enter text for sentiment analysis.");
67
+ return;
68
+ }
69
+
70
+ const data = { "inputs": textInput };
71
+
72
+ // Call the query function and handle the response
73
+ query(data).then((response) => {
74
+ console.log(JSON.stringify(response));
75
+
76
+ const resultDiv = document.getElementById("result");
77
+
78
+ if (response && Array.isArray(response) && response.length > 0) {
79
+ const predictions = response[0];
80
+
81
+ // Display the results for each sentiment label and score
82
+ resultDiv.innerHTML = predictions.map((prediction) => {
83
+ return `
84
+ <div class="result-item">
85
+ <p>Sentiment: ${prediction.label}</p>
86
+ <p>Confidence Score: ${(prediction.score*100).toFixed(0)}</p>
87
+ </div>
88
+ `;
89
+ }).join('');
90
+
91
+ // Destroy the existing chart if it exists
92
+ if (chart) {
93
+ chart.destroy();
94
+ }
95
+
96
+ // Create a new bar chart
97
+ const labels = predictions.map(prediction => prediction.label);
98
+ const scores = predictions.map(prediction => prediction.score * 100); // Scale scores to percentage
99
+
100
+ const ctx = chartCanvas.getContext('2d');
101
+ chart = new Chart(ctx, {
102
+ type: 'bar',
103
+ data: {
104
+ labels: labels,
105
+ datasets: [{
106
+ label: 'Confidence Scores (%)',
107
+ data: scores,
108
+ backgroundColor: 'rgba(255, 0, 0, 0.2)', // Red color with 20% opacity
109
+ borderColor: 'rgba(255, 0, 0, 1)', // Red color
110
+ borderWidth: 1
111
+
112
+ }]
113
+ },
114
+ options: {
115
+ scales: {
116
+ y: {
117
+ beginAtZero: true,
118
+ max: 100
119
+ }
120
+ }
121
+ }
122
+ });
123
+ } else {
124
+ resultDiv.textContent = "Unable to determine sentiment.";
125
+ }
126
+ });
127
+ }
128
+ </script>
129
+ </body>
130
+ </html>
style.css ADDED
@@ -0,0 +1,166 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
3
+ background: linear-gradient(to right bottom, #f8f3eb, #e4d4ae);
4
+ margin: 0;
5
+ display: flex;
6
+ flex-direction: column;
7
+ align-items: center;
8
+ justify-content: center;
9
+ min-height: 100vh;
10
+ }
11
+ /*
12
+ .header {
13
+ background: linear-gradient(to right, #ffdb58, #ffaf00);
14
+ color: #fff;
15
+ padding: 5px;
16
+ text-align: center;
17
+ width: 100%;
18
+ position: fixed;
19
+ top: 0;
20
+ height:60px;
21
+ z-index: 1000;
22
+ }*/
23
+ /* ... (unchanged styles) ... */
24
+
25
+ /* ... (unchanged styles) ... */
26
+
27
+ .header {
28
+ background: linear-gradient(to right, #ffdb58, #ffaf00);
29
+ color: #fff;
30
+ padding: 5px;
31
+ text-align: center;
32
+ width: 100%;
33
+ position: fixed;
34
+ top: 0;
35
+ height: 60px;
36
+ z-index: 1000;
37
+ display: flex;
38
+ justify-content: space-between; /* Add space between logo and navbar */
39
+ align-items: center;
40
+ }
41
+
42
+ .logo {
43
+ height: 50px; /* Set the height of the logo */
44
+ margin-left: 10px; /* Adjust the margin for spacing */
45
+ }
46
+
47
+ .navbar {
48
+ flex-grow: 1; /* Allow the navbar to take up remaining space */
49
+ }
50
+
51
+ .navbar h1 {
52
+ margin: 0; /* Remove default margin for h1 inside navbar */
53
+ text-align: center; /* Center the text within the navbar */
54
+ }
55
+
56
+ /* ... (unchanged styles) ... */
57
+
58
+
59
+
60
+
61
+ .container {
62
+ text-align: center;
63
+ max-width: 400px;
64
+ width:600px;
65
+ padding: 20px;
66
+ background-color: #dec3ba;;
67
+ border-radius: 8px;
68
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
69
+ margin-top: 80px; /* Adjusted to accommodate the fixed header */
70
+ margin-bottom: 70px; /* Adjusted to add space between content and footer */
71
+ animation: fadeIn 1s ease-in-out;
72
+ }
73
+
74
+
75
+ h1 {
76
+ color: #333;
77
+ }
78
+
79
+ textarea {
80
+ width: 75%;
81
+ margin-bottom: 10px;
82
+ padding: 8px;
83
+ border: 1px solid #ddd;
84
+ border-radius: 4px;
85
+ transition: border-color 0.3s;
86
+ }
87
+
88
+ textarea:focus {
89
+ border-color: #4caf50;
90
+ }
91
+
92
+ button {
93
+ background-color: #4caf50;
94
+ color: white;
95
+ padding: 10px 15px;
96
+ border: none;
97
+ border-radius: 4px;
98
+ cursor: pointer;
99
+ transition: background-color 0.3s;
100
+ }
101
+
102
+ button:hover {
103
+ background-color: #45a049;
104
+ }
105
+
106
+ #result {
107
+ margin-top: 20px;
108
+ display: flex;
109
+ flex-direction: column;
110
+ align-items: center;
111
+
112
+ }
113
+ #result.result-container {
114
+ margin-top: 10px; /* Adjusted margin-top to add space between the result items and the textarea */
115
+ padding: 3px; /* Adjusted padding to decrease the height */
116
+ display: flex;
117
+ flex-direction: column;
118
+ align-items: center;
119
+ }
120
+ .result-item {
121
+ background-color: #e0e0e0;
122
+ border-radius: 4px;
123
+ margin-bottom: 10px;
124
+ padding: 10px;
125
+ width: 100%;
126
+ box-sizing: border-box;
127
+ animation: fadeIn 0.5s ease-in-out;
128
+ }
129
+
130
+ .chart {
131
+ margin-top: 20px;
132
+ border-radius: 8px;
133
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
134
+ }
135
+
136
+ .footer {
137
+ background: linear-gradient(to right, #ffdb58, #ffaf00);
138
+ color: #fff;
139
+ padding: 7px;
140
+ text-align: center;
141
+ position: fixed;
142
+ bottom: 0;
143
+ width: 100%;
144
+ animation: slideUp 0.8s ease-in-out;
145
+ z-index: 1000;
146
+ }
147
+
148
+ @keyframes fadeIn {
149
+ from {
150
+ opacity: 0;
151
+ }
152
+ to {
153
+ opacity: 1;
154
+ }
155
+ }
156
+
157
+ @keyframes slideUp {
158
+ from {
159
+ transform: translateY(50px);
160
+ opacity: 0;
161
+ }
162
+ to {
163
+ transform: translateY(0);
164
+ opacity: 1;
165
+ }
166
+ }