Spaces:

sangambhamare
/

TruthDetection

Sleeping

App Files Files Community

sangambhamare commited on Jul 28, 2025

Commit

15ebcb6

verified ·

1 Parent(s): c5f9fbf

Delete interactive_report.html

Browse files

Files changed (1) hide show

interactive_report.html +0 -313

interactive_report.html DELETED Viewed

@@ -1,313 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Truth Detection</title>
-    <!-- Tailwind CSS CDN -->
-    <script src="https://cdn.tailwindcss.com"></script>
-    <!-- Inter font from Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
-    <style>
-        body {
-            font-family: 'Inter', sans-serif;
-            background-color: #f0f2f5; /* Light gray background */
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-            margin: 0;
-            padding: 20px;
-            box-sizing: border-box;
-        }
-        .container {
-            background-color: #ffffff;
-            border-radius: 1.5rem; /* More rounded corners */
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Softer shadow */
-            padding: 2.5rem; /* Increased padding */
-            max-width: 900px; /* Max width for better readability */
-            width: 100%;
-            display: flex;
-            flex-direction: column;
-            gap: 2rem; /* Space between sections */
-        }
-        .dashboard-card {
-            background-color: #f8fafd; /* Lighter background for cards */
-            border-radius: 1rem;
-            padding: 1.5rem;
-            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); /* Inner shadow for depth */
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-        }
-        .upload-area {
-            border: 3px dashed #cbd5e1; /* Dashed border */
-            border-radius: 1rem;
-            padding: 2.5rem;
-            text-align: center;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            background-color: #fdfefe; /* Very light background */
-        }
-        .upload-area:hover {
-            border-color: #6366f1; /* Purple on hover */
-            background-color: #eff6ff; /* Light blue on hover */
-        }
-        .upload-area.dragover {
-            border-color: #6366f1;
-            background-color: #eff6ff;
-        }
-        .file-input-label {
-            display: block;
-            cursor: pointer;
-            color: #4f46e5; /* Purple text for link */
-            font-weight: 600;
-            margin-top: 0.5rem;
-        }
-        .file-input-label:hover {
-            text-decoration: underline;
-        }
-        .predict-button {
-            background-color: #4f46e5; /* Purple button */
-            color: white;
-            padding: 0.75rem 1.5rem;
-            border-radius: 0.75rem; /* Rounded button */
-            font-weight: 600;
-            transition: background-color 0.3s ease, transform 0.2s ease;
-            box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3); /* Button shadow */
-        }
-        .predict-button:hover {
-            background-color: #4338ca; /* Darker purple on hover */
-            transform: translateY(-2px); /* Slight lift effect */
-        }
-        .predict-button:active {
-            transform: translateY(0);
-            box-shadow: 0 2px 5px rgba(79, 70, 229, 0.3);
-        }
-        .result-box {
-            background-color: #ecfdf5; /* Light green for true, light red for false */
-            border-left: 6px solid #10b981; /* Green border for true */
-            border-radius: 0.75rem;
-            padding: 1.5rem;
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            font-weight: 600;
-            color: #065f46; /* Dark green text */
-            transition: all 0.3s ease;
-        }
-        .result-box.false {
-            background-color: #fef2f2; /* Light red */
-            border-left-color: #ef4444; /* Red border */
-            color: #991b1b; /* Dark red text */
-        }
-        .message-box {
-            background-color: #fffbeb; /* Light yellow for info/warnings */
-            border-left: 6px solid #f59e0b;
-            border-radius: 0.75rem;
-            padding: 1rem;
-            color: #92400e;
-            font-weight: 500;
-            margin-top: 1rem;
-            display: none; /* Hidden by default */
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <!-- Header -->
-        <header class="text-center">
-            <h1 class="text-4xl font-extrabold text-gray-800 mb-2">Truth Detection</h1>
-            <p class="text-gray-600 text-lg">Upload an audio file to predict the truthfulness of a narrated story.</p>
-        </header>
-        <!-- Dashboard Section -->
-        <section class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div class="dashboard-card">
-                <p class="text-5xl font-bold text-green-600">91%</p>
-                <p class="text-gray-600 text-lg mt-2">Accuracy</p>
-            </div>
-            <div class="dashboard-card">
-                <p class="text-5xl font-bold text-blue-600">15+</p>
-                <p class="text-gray-600 text-lg mt-2">Languages Used</p>
-            </div>
-        </section>
-        <!-- Upload Section -->
-        <section>
-            <h2 class="text-2xl font-bold text-gray-800 mb-4">Upload Audio</h2>
-            <div id="uploadArea" class="upload-area">
-                <input type="file" id="audioFileInput" accept="audio/*" class="hidden">
-                <p class="text-gray-500 text-lg">Drag & drop your audio file here, or</p>
-                <label for="audioFileInput" class="file-input-label">browse to upload</label>
-                <p id="fileNameDisplay" class="text-gray-700 font-medium mt-2"></p>
-            </div>
-            <div id="messageBox" class="message-box"></div>
-            <button id="predictButton" class="predict-button w-full mt-6 opacity-50 cursor-not-allowed" disabled>
-                Analyze Truthfulness
-            </button>
-        </section>
-        <!-- Results Section -->
-        <section id="resultsSection" class="hidden">
-            <h2 class="text-2xl font-bold text-gray-800 mb-4">Prediction Result</h2>
-            <div id="predictionResult" class="result-box">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-                <span id="predictionText" class="text-xl">The story is likely TRUE.</span>
-            </div>
-        </section>
-    </div>
-    <script>
-        // Get references to DOM elements
-        const audioFileInput = document.getElementById('audioFileInput');
-        const fileNameDisplay = document.getElementById('fileNameDisplay');
-        const uploadArea = document.getElementById('uploadArea');
-        const predictButton = document.getElementById('predictButton');
-        const resultsSection = document.getElementById('resultsSection');
-        const predictionResult = document.getElementById('predictionResult');
-        const predictionText = document.getElementById('predictionText');
-        const messageBox = document.getElementById('messageBox');
-        let uploadedFile = null; // Variable to store the uploaded file
-        // Function to display messages in the message box
-        function showMessage(message, type = 'info') {
-            messageBox.textContent = message;
-            messageBox.className = 'message-box block'; // Show the box
-            if (type === 'error') {
-                messageBox.style.borderColor = '#ef4444';
-                messageBox.style.color = '#991b1b';
-                messageBox.style.backgroundColor = '#fef2f2';
-            } else { // info or default
-                messageBox.style.borderColor = '#f59e0b';
-                messageBox.style.color = '#92400e';
-                messageBox.style.backgroundColor = '#fffbeb';
-            }
-        }
-        // Function to hide the message box
-        function hideMessage() {
-            messageBox.style.display = 'none';
-        }
-        // Handle file selection via input
-        audioFileInput.addEventListener('change', (event) => {
-            if (event.target.files.length > 0) {
-                uploadedFile = event.target.files[0];
-                fileNameDisplay.textContent = `Selected file: ${uploadedFile.name}`;
-                predictButton.disabled = false;
-                predictButton.classList.remove('opacity-50', 'cursor-not-allowed');
-                hideMessage(); // Hide any previous messages
-            } else {
-                uploadedFile = null;
-                fileNameDisplay.textContent = '';
-                predictButton.disabled = true;
-                predictButton.classList.add('opacity-50', 'cursor-not-allowed');
-            }
-            resultsSection.classList.add('hidden'); // Hide results when a new file is selected
-        });
-        // Handle drag and drop
-        uploadArea.addEventListener('dragover', (event) => {
-            event.preventDefault(); // Prevent default to allow drop
-            uploadArea.classList.add('dragover');
-        });
-        uploadArea.addEventListener('dragleave', () => {
-            uploadArea.classList.remove('dragover');
-        });
-        uploadArea.addEventListener('drop', (event) => {
-            event.preventDefault();
-            uploadArea.classList.remove('dragover');
-            if (event.dataTransfer.files.length > 0) {
-                const file = event.dataTransfer.files[0];
-                // Check if the dropped file is an audio file
-                if (file.type.startsWith('audio/')) {
-                    uploadedFile = file;
-                    fileNameDisplay.textContent = `Selected file: ${uploadedFile.name}`;
-                    predictButton.disabled = false;
-                    predictButton.classList.remove('opacity-50', 'cursor-not-allowed');
-                    hideMessage(); // Hide any previous messages
-                } else {
-                    uploadedFile = null;
-                    fileNameDisplay.textContent = '';
-                    predictButton.disabled = true;
-                    predictButton.classList.add('opacity-50', 'cursor-not-allowed');
-                    showMessage('Please upload an audio file.', 'error');
-                }
-            }
-            resultsSection.classList.add('hidden'); // Hide results when a new file is dropped
-        });
-        // Modified prediction on button click to simulate API call
-        predictButton.addEventListener('click', async () => {
-            if (uploadedFile) {
-                predictButton.textContent = 'Analyzing...';
-                predictButton.disabled = true;
-                predictButton.classList.add('opacity-50', 'cursor-not-allowed');
-                resultsSection.classList.add('hidden'); // Hide previous results during analysis
-                hideMessage(); // Hide any previous messages
-                try {
-                    // Create FormData to send the audio file
-                    const formData = new FormData();
-                    formData.append('audio_file', uploadedFile);
-                    // Simulate fetching from a backend endpoint
-                    // In a real application, replace '/predict-truth' with your actual backend API endpoint
-                    // And the response would come from your Python Gradio app or a custom Flask/FastAPI endpoint
-                    const response = await new Promise(resolve => setTimeout(() => {
-                        // Simulate a random prediction result from the backend
-                        const simulatedPrediction = Math.random() > 0.5 ? 'True Story' : 'Deceptive Story';
-                        resolve({
-                            ok: true,
-                            json: () => Promise.resolve({ prediction: simulatedPrediction })
-                        });
-                    }, 2000)); // Simulate 2-second network delay
-                    if (response.ok) {
-                        const data = await response.json();
-                        const prediction = data.prediction;
-                        if (prediction === 'True Story') {
-                            predictionText.textContent = 'The story is likely TRUE.';
-                            predictionResult.classList.remove('false');
-                            predictionResult.style.borderColor = '#10b981'; // Green border
-                            predictionResult.querySelector('svg').style.color = '#10b981'; // Green icon
-                            predictionResult.style.backgroundColor = '#ecfdf5'; // Light green background
-                            predictionResult.style.color = '#065f46'; // Dark green text
-                        } else {
-                            predictionText.textContent = 'The story is likely FALSE (deceptive).';
-                            predictionResult.classList.add('false');
-                            predictionResult.style.borderColor = '#ef4444'; // Red border
-                            predictionResult.querySelector('svg').style.color = '#ef4444'; // Red icon
-                            predictionResult.style.backgroundColor = '#fef2f2'; // Light red background
-                            predictionResult.style.color = '#991b1b'; // Dark red text
-                        }
-                        resultsSection.classList.remove('hidden'); // Show results section
-                    } else {
-                        showMessage('Prediction failed. Please try again.', 'error');
-                        console.error('Backend response not OK:', response.status, response.statusText);
-                    }
-                } catch (error) {
-                    showMessage('An error occurred during analysis. Please try again.', 'error');
-                    console.error('Error during fetch:', error);
-                } finally {
-                    predictButton.textContent = 'Analyze Truthfulness'; // Reset button text
-                    predictButton.disabled = false;
-                    predictButton.classList.remove('opacity-50', 'cursor-not-allowed');
-                }
-            } else {
-                showMessage('Please upload an audio file first.', 'error');
-            }
-        });
-    </script>
-</body>
-</html>