Spaces:
Running
Running
| <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> | |
| <div class="container"> | |
| <h1>Sentiment Analysis</h1> | |
| <textarea id="textInput" placeholder="Enter text..."></textarea> | |
| <button onclick="classifySentiment()">Classify</button> | |
| <div id="result" class="result-container"></div> | |
| <canvas id="chart"></canvas> | |
| </div> | |
| <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}</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(75, 192, 192, 0.2)', | |
| borderColor: 'rgba(75, 192, 192, 1)', | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| max: 100 | |
| } | |
| } | |
| } | |
| }); | |
| } else { | |
| resultDiv.textContent = "Unable to determine sentiment."; | |
| } | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |