Spaces:

VoltIC
/

Hate-Speech-Detection

Sleeping

App Files Files Community

VoltIC commited on Jan 1

Commit

5e338b8

verified ·

1 Parent(s): fdb058b

Upload 3 files

Browse files

Files changed (3) hide show

templates/index.html +90 -0
templates/script.js +189 -0
templates/style.css +302 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,90 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hate Speech Detection System</title>
+    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1><i class="fas fa-shield-alt"></i> Hate Speech Detector</h1>
+            <p>Analyze text content to detect hate speech, offensive language, or neutral content</p>
+        </div>
+        <div class="main-content">
+            <div class="input-section">
+                <h2>Enter Text to Analyze</h2>
+                <div class="text-input-container">
+                    <textarea id="textInput" placeholder="Type or paste your text here... Minimum 10 characters."></textarea>
+                    <div class="char-count">
+                        <span id="charCount">0</span> characters
+                    </div>
+                </div>
+                <div class="controls">
+                    <button class="btn analyze-btn" id="analyzeBtn" disabled>
+                        <i class="fas fa-search"></i> Analyze Text
+                    </button>
+                    <button class="btn clear-btn" id="clearBtn">
+                        <i class="fas fa-eraser"></i> Clear
+                    </button>
+                </div>
+            </div>
+            <div class="loading" id="loading">
+                <div class="spinner"></div>
+                <p>Analyzing text...</p>
+            </div>
+            <div class="results-section" id="resultsSection" style="display: none;">
+                <h2>Analysis Results</h2>
+                <div class="result-card">
+                    <div class="classification">
+                        <h3>Classification</h3>
+                        <div class="class-badge" id="classBadge">Class 0</div>
+                    </div>
+                    <div class="confidence">
+                        <h4>Confidence</h4>
+                        <div class="confidence-bar">
+                            <div class="confidence-fill" id="confidenceFill" style="width: 0%"></div>
+                        </div>
+                        <div class="confidence-value" id="confidenceValue">0%</div>
+                    </div>
+                    <div class="details">
+                        <h4>Class Information</h4>
+                        <div class="class-info" id="classInfo">
+                            <div class="info-item">
+                                <h5>Class 0: Hate Speech</h5>
+                                <p>Attacks based on race, religion, gender, etc.</p>
+                            </div>
+                            <div class="info-item">
+                                <h5>Class 1: Offensive Language</h5>
+                                <p>Insulting or inappropriate content</p>
+                            </div>
+                            <div class="info-item">
+                                <h5>Class 2: Neither</h5>
+                                <p>Normal, non-offensive content</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="footer">
+            <p>Powered by Machine Learning |
+                <a href="#" id="modelInfoBtn">Model Info</a> |
+                <a href="#" id="testBtn">Test Connection</a>
+            </p>
+        </div>
+    </div>
+    <script src="/script.js"></script>
+</body>
+</html>

templates/script.js ADDED Viewed

	@@ -0,0 +1,189 @@

+console.log("script.js loaded!");
+const textInput = document.getElementById('textInput');
+const charCount = document.getElementById('charCount');
+const analyzeBtn = document.getElementById('analyzeBtn');
+const clearBtn = document.getElementById('clearBtn');
+const loading = document.getElementById('loading');
+const resultsSection = document.getElementById('resultsSection');
+const API_URL = '/api/analyze';
+const HEALTH_URL = '/api/health';
+console.log("API URL:", API_URL);
+console.log("Health URL:", HEALTH_URL);
+window.addEventListener('DOMContentLoaded', async () => {
+    console.log("Testing server connection...");
+    try {
+        const response = await fetch(HEALTH_URL);
+        const data = await response.json();
+        console.log("Server response:", data);
+        if (data.status === 'healthy') {
+            console.log("Server is connected!");
+            document.body.insertAdjacentHTML('beforeend',
+                '<div style="position:fixed; top:10px; right:10px; background:green; color:white; padding:5px; border-radius:3px;">Connected</div>'
+            );
+        }
+    } catch (error) {
+        console.error("Server connection failed:", error);
+        document.body.insertAdjacentHTML('beforeend',
+            '<div style="position:fixed; top:10px; right:10px; background:red; color:white; padding:5px; border-radius:3px;">Server Error</div>'
+        );
+        alert(`Cannot connect to server!\n\nMake sure Flask is running:\n1. Open terminal\n2. Run: python app.py\n3. Check for errors\n\nError: ${error.message}`);
+    }
+});
+if (textInput && charCount) {
+    textInput.addEventListener('input', function() {
+        const count = this.value.length;
+        charCount.textContent = count;
+        if (analyzeBtn) {
+            analyzeBtn.disabled = count < 10;
+        }
+    });
+}
+if (clearBtn) {
+    clearBtn.addEventListener('click', function() {
+        if (textInput) textInput.value = '';
+        if (charCount) charCount.textContent = '0';
+        if (resultsSection) resultsSection.style.display = 'none';
+        if (analyzeBtn) analyzeBtn.disabled = true;
+    });
+}
+if (analyzeBtn) {
+    analyzeBtn.addEventListener('click', async function() {
+        console.log("Analyze button clicked");
+        if (!textInput) {
+            alert("Text input not found!");
+            return;
+        }
+        const text = textInput.value.trim();
+        console.log("Text to analyze:", text.substring(0, 50) + "...");
+        if (text.length < 10) {
+            alert('Please enter at least 10 characters.');
+            return;
+        }
+        if (loading) loading.style.display = 'block';
+        if (resultsSection) resultsSection.style.display = 'none';
+        try {
+            console.log("📡 Sending request to:", API_URL);
+            const response = await fetch(API_URL, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json'
+                },
+                body: JSON.stringify({
+                    text: text,
+                    test: "test from frontend"
+                })
+            });
+            console.log("Response status:", response.status);
+            console.log("Response headers:", [...response.headers.entries()]);
+            const result = await response.json();
+            console.log("Response data:", result);
+            if (!response.ok) {
+                throw new Error(result.error || `HTTP ${response.status}`);
+            }
+            displayResults(result);
+        } catch (error) {
+            console.error("Analysis failed:", error);
+            alert(`Analysis failed:\n${error.message}\n\nCheck console for details.`);
+            const mockResult = {
+                class: Math.floor(Math.random() * 3),
+                confidence: 75 + Math.random() * 20,
+                probabilities: {
+                    class_0: 0.3,
+                    class_1: 0.3,
+                    class_2: 0.4
+                },
+                test: "Using mock data - server offline"
+            };
+            displayResults(mockResult);
+        } finally {
+            if (loading) loading.style.display = 'none';
+        }
+    });
+}
+function displayResults(result) {
+    console.log("Displaying results:", result);
+    let classBadge = document.getElementById('classBadge');
+    let confidenceFill = document.getElementById('confidenceFill');
+    let confidenceValue = document.getElementById('confidenceValue');
+    if (!classBadge) {
+        console.warn("Results elements not found, creating them...");
+        resultsSection.innerHTML = `
+            <h2>Analysis Results</h2>
+            <div class="result-card">
+                <div class="classification">
+                    <h3>Classification</h3>
+                    <div class="class-badge" id="classBadge">Class ${result.class}</div>
+                </div>
+                <div class="confidence">
+                    <h4>Confidence</h4>
+                    <div class="confidence-bar">
+                        <div class="confidence-fill" id="confidenceFill" style="width: ${result.confidence}%"></div>
+                    </div>
+                    <div class="confidence-value" id="confidenceValue">${result.confidence.toFixed(1)}%</div>
+                </div>
+                <div class="details">
+                    <h4>Raw Result Data:</h4>
+                    <pre style="background: white; padding: 10px; border-radius: 5px; overflow: auto;">
+${JSON.stringify(result, null, 2)}
+                    </pre>
+                </div>
+            </div>
+        `;
+    } else {
+        const classNames = ['Hate Speech', 'Offensive Language', 'Neither'];
+        const classColors = ['class-0', 'class-1', 'class-2'];
+        classBadge.textContent = classNames[result.class];
+        classBadge.className = `class-badge ${classColors[result.class]}`;
+        if (confidenceFill) {
+            confidenceFill.style.width = `${result.confidence}%`;
+        }
+        if (confidenceValue) {
+            confidenceValue.textContent = `${result.confidence.toFixed(1)}%`;
+        }
+    }
+    if (resultsSection) {
+        resultsSection.style.display = 'block';
+        resultsSection.scrollIntoView({ behavior: 'smooth' });
+    }
+}
+if (textInput) {
+    textInput.addEventListener('keydown', function(e) {
+        if (e.ctrlKey && e.key === 'Enter' && analyzeBtn && !analyzeBtn.disabled) {
+            analyzeBtn.click();
+        }
+    });
+}
+console.log("script.js setup complete!");

templates/style.css ADDED Viewed

	@@ -0,0 +1,302 @@

+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+.container {
+    width: 100%;
+    max-width: 800px;
+    background: white;
+    border-radius: 15px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+}
+.header {
+    background: linear-gradient(to right, #4a00e0, #8e2de2);
+    color: white;
+    padding: 25px;
+    text-align: center;
+}
+.header h1 {
+    font-size: 2.2rem;
+    margin-bottom: 10px;
+}
+.header p {
+    opacity: 0.9;
+    line-height: 1.5;
+}
+.main-content {
+    padding: 30px;
+}
+.input-section {
+    margin-bottom: 30px;
+}
+.input-section h2 {
+    color: #333;
+    margin-bottom: 15px;
+    font-size: 1.4rem;
+}
+.text-input-container {
+    position: relative;
+}
+textarea {
+    width: 100%;
+    height: 180px;
+    padding: 15px;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    font-size: 16px;
+    font-family: inherit;
+    resize: vertical;
+    transition: border-color 0.3s;
+}
+textarea:focus {
+    outline: none;
+    border-color: #4a00e0;
+}
+.char-count {
+    text-align: right;
+    margin-top: 5px;
+    color: #666;
+    font-size: 14px;
+}
+.controls {
+    display: flex;
+    gap: 15px;
+    margin-top: 20px;
+}
+.btn {
+    flex: 1;
+    padding: 15px;
+    border: none;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}
+.analyze-btn {
+    background: linear-gradient(to right, #4a00e0, #8e2de2);
+    color: white;
+}
+.analyze-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(74, 0, 224, 0.3);
+}
+.analyze-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+}
+.clear-btn {
+    background: #f0f0f0;
+    color: #666;
+}
+.clear-btn:hover {
+    background: #e0e0e0;
+}
+.results-section {
+    margin-top: 30px;
+}
+.results-section h2 {
+    color: #333;
+    margin-bottom: 15px;
+    font-size: 1.4rem;
+}
+.result-card {
+    background: #f9f9f9;
+    border-radius: 8px;
+    padding: 25px;
+    border-left: 5px solid #4a00e0;
+}
+.classification {
+    margin-bottom: 20px;
+}
+.classification h3 {
+    margin-bottom: 10px;
+    color: #333;
+}
+.class-badge {
+    display: inline-block;
+    padding: 8px 20px;
+    border-radius: 20px;
+    font-weight: 600;
+    font-size: 16px;
+}
+.class-0 {
+    background: #ff4d4d;
+    color: white;
+}
+.class-1 {
+    background: #ff9800;
+    color: white;
+}
+.class-2 {
+    background: #4caf50;
+    color: white;
+}
+.confidence {
+    margin: 20px 0;
+}
+.confidence h4 {
+    margin-bottom: 10px;
+    color: #666;
+}
+.confidence-bar {
+    height: 10px;
+    background: #e0e0e0;
+    border-radius: 5px;
+    overflow: hidden;
+    margin-bottom: 5px;
+}
+.confidence-fill {
+    height: 100%;
+    background: linear-gradient(to right, #4a00e0, #8e2de2);
+    border-radius: 5px;
+    transition: width 0.5s;
+}
+.confidence-value {
+    text-align: right;
+    font-weight: 600;
+    color: #4a00e0;
+}
+.details {
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 1px solid #e0e0e0;
+}
+.details h4 {
+    margin-bottom: 15px;
+    color: #666;
+}
+.class-info {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+}
+.info-item {
+    background: white;
+    padding: 15px;
+    border-radius: 6px;
+    border: 1px solid #e0e0e0;
+}
+.info-item h5 {
+    color: #4a00e0;
+    margin-bottom: 5px;
+}
+.info-item p {
+    color: #666;
+    font-size: 14px;
+}
+.loading {
+    display: none;
+    text-align: center;
+    padding: 30px;
+}
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #4a00e0;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 15px;
+}
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+.footer {
+    text-align: center;
+    padding: 20px;
+    color: #666;
+    font-size: 14px;
+    border-top: 1px solid #e0e0e0;
+    background: #f9f9f9;
+}
+.footer a {
+    color: #4a00e0;
+    text-decoration: none;
+    font-weight: 600;
+}
+.footer a:hover {
+    text-decoration: underline;
+}
+@media (max-width: 600px) {
+    .container {
+        margin: 10px;
+        padding: 15px;
+    }
+    .main-content {
+        padding: 20px;
+    }
+    .controls {
+        flex-direction: column;
+    }
+    .class-info {
+        grid-template-columns: 1fr;
+    }
+}