Spaces:

Agrimr
/

AIQA2

Running

App Files Files Community

Agrimr commited on Dec 8, 2023

Commit

faa9512

1 Parent(s): 6067652

njn

Browse files

Files changed (2) hide show

index (1).html +130 -0
style.css +166 -0

index (1).html ADDED Viewed

	@@ -0,0 +1,130 @@

+<!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>&copy; Team AIQA &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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>

style.css ADDED Viewed

	@@ -0,0 +1,166 @@

+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(to right bottom, #f8f3eb, #e4d4ae);
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+}
+/*
+.header {
+    background: linear-gradient(to right, #ffdb58, #ffaf00);
+    color: #fff;
+    padding: 5px;
+    text-align: center;
+    width: 100%;
+    position: fixed;
+    top: 0;
+height:60px;
+    z-index: 1000;
+}*/
+/* ... (unchanged styles) ... */
+/* ... (unchanged styles) ... */
+.header {
+    background: linear-gradient(to right, #ffdb58, #ffaf00);
+    color: #fff;
+    padding: 5px;
+    text-align: center;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    height: 60px;
+    z-index: 1000;
+    display: flex;
+    justify-content: space-between; /* Add space between logo and navbar */
+    align-items: center;
+}
+.logo {
+    height: 50px; /* Set the height of the logo */
+    margin-left: 10px; /* Adjust the margin for spacing */
+}
+.navbar {
+    flex-grow: 1; /* Allow the navbar to take up remaining space */
+}
+.navbar h1 {
+    margin: 0; /* Remove default margin for h1 inside navbar */
+    text-align: center; /* Center the text within the navbar */
+}
+/* ... (unchanged styles) ... */
+.container {
+    text-align: center;
+    max-width: 400px;
+width:600px;
+    padding: 20px;
+    background-color: #dec3ba;;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    margin-top: 80px; /* Adjusted to accommodate the fixed header */
+    margin-bottom: 70px; /* Adjusted to add space between content and footer */
+    animation: fadeIn 1s ease-in-out;
+}
+h1 {
+    color: #333;
+}
+textarea {
+    width: 75%;
+    margin-bottom: 10px;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    transition: border-color 0.3s;
+}
+textarea:focus {
+    border-color: #4caf50;
+}
+button {
+    background-color: #4caf50;
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+button:hover {
+    background-color: #45a049;
+}
+#result {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+#result.result-container {
+    margin-top: 10px; /* Adjusted margin-top to add space between the result items and the textarea */
+    padding: 3px; /* Adjusted padding to decrease the height */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.result-item {
+    background-color: #e0e0e0;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    animation: fadeIn 0.5s ease-in-out;
+}
+.chart {
+    margin-top: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+.footer {
+    background: linear-gradient(to right, #ffdb58, #ffaf00);
+    color: #fff;
+    padding: 7px;
+    text-align: center;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    animation: slideUp 0.8s ease-in-out;
+    z-index: 1000;
+}
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@keyframes slideUp {
+    from {
+        transform: translateY(50px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}