Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Cyberbullying Detection</title> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: Arial, sans-serif; | |
| background-color: black; | |
| color: white; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| } | |
| header { | |
| background-color: #000; | |
| color: red; | |
| padding: 15px 20px; | |
| font-size: 24px; | |
| text-align: center; | |
| } | |
| main { | |
| flex: 1; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| } | |
| .container { | |
| width: 100%; | |
| max-width: 700px; | |
| background-color: #1e1e1e; | |
| padding: 30px; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1); | |
| } | |
| h1 { | |
| text-align: center; | |
| margin-top: 0; | |
| color: #fff; | |
| } | |
| textarea { | |
| width: 100%; | |
| height: 150px; | |
| padding: 10px; | |
| margin: 10px 0; | |
| border-radius: 5px; | |
| border: 1px solid #ccc; | |
| font-family: Arial, sans-serif; | |
| resize: vertical; | |
| } | |
| .button-group { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 10px; | |
| } | |
| button { | |
| padding: 10px 20px; | |
| font-size: 16px; | |
| background-color: #4CAF50; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| width: 48%; | |
| } | |
| #clearBtn { | |
| background-color: #f44336; | |
| } | |
| button:hover { | |
| opacity: 0.9; | |
| } | |
| #result { | |
| margin-top: 20px; | |
| display: none; | |
| } | |
| #error { | |
| color: #f44336; | |
| margin-top: 10px; | |
| } | |
| footer { | |
| background-color: #000; | |
| color: red; | |
| text-align: center; | |
| padding: 10px 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| Paculan & Coloso | |
| </header> | |
| <main> | |
| <div class="container"> | |
| <h1>Cyberbullying Detection</h1> | |
| <form id="predictionForm" method="post"> | |
| <textarea id="inputText" placeholder="Enter text here..."></textarea> | |
| <div class="button-group"> | |
| <button type="submit">Get Prediction</button> | |
| <button type="button" id="clearBtn">Clear</button> | |
| </div> | |
| </form> | |
| <!-- Error message section --> | |
| <div id="error"></div> | |
| <!-- Prediction result section --> | |
| <div id="result"> | |
| <h3>Prediction Result:</h3> | |
| <p id="prediction"></p> | |
| <p id="confidence"></p> | |
| <p id="triggers"></p> | |
| </div> | |
| </div> | |
| </main> | |
| <footer> | |
| © 2025 Paculan & Coloso Research Worx. | |
| </footer> | |
| <script> | |
| const form = document.getElementById('predictionForm'); | |
| const inputText = document.getElementById('inputText'); | |
| const predictionEl = document.getElementById('prediction'); | |
| const confidenceEl = document.getElementById('confidence'); | |
| const triggersEl = document.getElementById('triggers'); | |
| const resultBox = document.getElementById('result'); | |
| const errorBox = document.getElementById('error'); | |
| // Handle form submission | |
| form.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const text = inputText.value.trim(); | |
| if (!text) { | |
| errorBox.textContent = "Please enter text before submitting."; | |
| resultBox.style.display = "none"; | |
| return; | |
| } | |
| // Clear previous error messages | |
| errorBox.textContent = ""; | |
| // Fetch prediction from Flask backend | |
| fetch('http://127.0.0.1:5000/predict', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ text: text }) | |
| }) | |
| .then(response => { | |
| if (!response.ok) throw new Error("Server error"); | |
| return response.json(); | |
| }) | |
| .then(data => { | |
| // Update the result section | |
| predictionEl.textContent = "Label: " + data.label; | |
| confidenceEl.textContent = "Confidence: " + data.confidence; | |
| triggersEl.textContent = "Detected Triggers: " + (data.triggers.length ? data.triggers.join(', ') : "None"); | |
| resultBox.style.display = "block"; | |
| }) | |
| .catch(error => { | |
| errorBox.textContent = "Something went wrong. Please try again."; | |
| console.error(error); | |
| resultBox.style.display = "none"; | |
| }); | |
| }); | |
| // Handle clearing the form | |
| document.getElementById('clearBtn').addEventListener('click', function () { | |
| inputText.value = ''; | |
| predictionEl.textContent = ''; | |
| confidenceEl.textContent = ''; | |
| triggersEl.textContent = ''; | |
| resultBox.style.display = 'none'; | |
| errorBox.textContent = ''; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |