Spaces:

Agrimr
/

myappinterfaceapi

Running

App Files Files Community

Agrimr commited on Dec 7, 2023

Commit

aa369f9

•

1 Parent(s): eaa439e

Upload 2 files

Browse files

Files changed (2) hide show

index.html +121 -0
style.css +84 -7

index.html ADDED Viewed

	@@ -0,0 +1,121 @@

+<!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>
+    <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</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 CHANGED Viewed

@@ -1,26 +1,56 @@
 body {
-    font-family: Arial, sans-serif;
-    background-color: #f4f4f4;
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 100vh;
-    margin: 0;
 }
 .container {
     text-align: center;
     max-width: 400px;
     padding: 20px;
-    background-color: white;
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 textarea {
-    width: 100%;
     margin-bottom: 10px;
     padding: 8px;
 }
 button {
@@ -30,6 +60,7 @@ button {
     border: none;
     border-radius: 4px;
     cursor: pointer;
 }
 button:hover {
@@ -41,8 +72,15 @@ button:hover {
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 .result-item {
     background-color: #e0e0e0;
     border-radius: 4px;
@@ -50,4 +88,43 @@ button:hover {
     padding: 10px;
     width: 100%;
     box-sizing: border-box;
 }

 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;
+}
 .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: 50px; /* 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 {
     border: none;
     border-radius: 4px;
     cursor: pointer;
+    transition: background-color 0.3s;
 }
 button:hover {
     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;
     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;
+    }
 }