Hugging Face's logo

Spaces:
Agrimr
/
AIQA2
Running

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

kk

Browse files
Files changed (1) hide show
  1. index.html +128 -55
index.html CHANGED
@@ -1,57 +1,130 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1">
6
- <title>Gradio-Lite: Serverless Gradio Running Entirely in Your Browser</title>
7
- <meta name="description" content="Gradio-Lite: Serverless Gradio Running Entirely in Your Browser">
8
-
9
- <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
10
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
11
-
12
- <style>
13
- html, body {
14
- margin: 0;
15
- padding: 0;
16
- height: 100%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  }
18
- </style>
19
- </head>
20
- <body>
21
- <gradio-lite>
22
- <gradio-file name="app.py" entrypoint>
23
- import gradio as gr
24
-
25
- from filters import as_gray
26
-
27
- def process(input_image):
28
- output_image = as_gray(input_image)
29
- return output_image
30
-
31
- demo = gr.Interface(
32
- process,
33
- "image",
34
- "image",
35
- examples=["lion.jpg", "logo.png"],
36
- )
37
-
38
- demo.launch()
39
- </gradio-file>
40
-
41
- <gradio-file name="filters.py">
42
- from skimage.color import rgb2gray
43
-
44
- def as_gray(image):
45
- return rgb2gray(image)
46
- </gradio-file>
47
-
48
- <gradio-file name="lion.jpg" url="https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/test_data/lion.jpg" />
49
- <gradio-file name="logo.png" url="https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png" />
50
-
51
- <gradio-requirements>
52
- # Same syntax as requirements.txt
53
- scikit-image
54
- </gradio-requirements>
55
- </gradio-lite>
56
- </body>
57
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>