Spaces:
Running
Running
File size: 4,928 Bytes
aa369f9 2f90eb0 aa369f9 2f90eb0 aa369f9 98057db 14914af aa369f9 |
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>© Team AIQA 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>
|