Spaces:

Agrimr
/

myappinterfaceapi

Running

98057db over 2 years ago

4.93 kB

	<!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(
	"/static-proxy?url=https%3A%2F%2Fapi-inference.huggingface.co%2Fmodels%2Fahmedrachid%2FFinancialBERT-Sentiment-Analysis%26quot%3B%3C%2Fspan%3E%2C%3C%2Fspan%3E%3C!----%3E%3C%2Ftd%3E%3C%2Ftr%3E%3Ctr id="L42">		{
	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>