Spaces:

TanmayTomar
/

FORENSIC-TOOLKIT

Sleeping

App Files Files Community

TanmayTomar commited on Sep 21

Commit

056851b

verified ·

1 Parent(s): 0cec2c9

Upload 3 files

Browse files

Files changed (3) hide show

frontend_by_gemini/index.html +60 -0
frontend_by_gemini/script.js +180 -0
frontend_by_gemini/style.css +285 -0

frontend_by_gemini/index.html ADDED Viewed

	@@ -0,0 +1,60 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Digital Forensics Toolkit</title>
+    <!-- FIXED: Correct path to CSS file -->
+    <link rel="stylesheet" href="/static/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+</head>
+<body>
+    <div class="background-gradient"></div>
+    <header class="animate-on-scroll fade-in">
+        <h1>🛡️ Digital Forensics Toolkit</h1>
+        <p>An evidence-based platform to analyze text and images for misinformation.</p>
+    </header>
+    <main class="container animate-on-scroll slide-up">
+        <form id="analysis-form">
+            <div class="input-group">
+                <label for="text-input">Analyze Text or URL</label>
+                <textarea id="text-input" name="text_input" rows="4" placeholder="Paste a news article, claim, or URL here..."></textarea>
+            </div>
+            <div class="separator"><span>OR</span></div>
+            <div class="input-group">
+                <label for="image-input" class="file-label">
+                    <i class="fas fa-cloud-upload-alt"></i>
+                    <span id="file-label-text">Click to Upload an Image</span>
+                </label>
+                <input type="file" id="image-input" name="image_file" accept="image/png, image/jpeg">
+            </div>
+            <button type="submit" class="btn-analyze" id="analyze-btn">
+                <span class="btn-text">Analyze</span>
+                <i class="fas fa-arrow-right"></i>
+            </button>
+        </form>
+        <div id="results-container"></div>
+        <div id="loader" class="loader-hidden">
+            <div class="scanner-line"></div>
+            <p>Analyzing... This may take a moment.</p>
+        </div>
+    </main>
+    <footer class="animate-on-scroll fade-in">
+        <p>A GenAI Hackathon Project</p>
+    </footer>
+    <!-- FIXED: Correct path to JS file -->
+    <script src="/static/script.js"></script>
+</body>
+</html>

frontend_by_gemini/script.js ADDED Viewed

	@@ -0,0 +1,180 @@

+document.addEventListener('DOMContentLoaded', () => {
+    // --- Scroll-triggered Animations ---
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('visible');
+            }
+        });
+    }, { threshold: 0.1 });
+    document.querySelectorAll('.animate-on-scroll').forEach(element => {
+        observer.observe(element);
+    });
+    // --- Form & API Logic ---
+    const form = document.getElementById('analysis-form');
+    const analyzeBtn = document.getElementById('analyze-btn');
+    const loader = document.getElementById('loader');
+    const resultsContainer = document.getElementById('results-container');
+    const imageInput = document.getElementById('image-input');
+    const fileLabelText = document.getElementById('file-label-text');
+    imageInput.addEventListener('change', () => {
+        if (imageInput.files.length > 0) {
+            fileLabelText.textContent = `File selected: ${imageInput.files[0].name}`;
+        } else {
+            fileLabelText.textContent = 'Click to Upload an Image';
+        }
+    });
+    form.addEventListener('submit', async (event) => {
+        event.preventDefault();
+        const textInput = document.getElementById('text-input').value;
+        const imageFile = imageInput.files[0];
+        if (!textInput.trim() && !imageFile) {
+            alert("Please provide text or an image.");
+            return;
+        }
+        loader.classList.remove('loader-hidden');
+        resultsContainer.innerHTML = '';
+        analyzeBtn.disabled = true;
+        const formData = new FormData();
+        // Append data only if it exists to avoid sending empty fields
+        if(textInput.trim()) formData.append('text_input', textInput);
+        if(imageFile) formData.append('image_file', imageFile);
+        try {
+            // FIXED: Use the full, absolute URL for the API endpoint
+            const response = await fetch('http://127.0.0.1:8080/analyze', {
+                method: 'POST',
+                body: formData
+            });
+            const result = await response.json();
+            if (!response.ok) {
+                throw new Error(result.detail || `HTTP error! Status: ${response.status}`);
+            }
+            // FIXED: Directly use the result object as it's the main data
+            displayResults(result);
+        } catch (error) {
+            console.error('Analysis error:', error);
+            resultsContainer.innerHTML = `<div class="result-card error-card"><p><strong>Error:</strong> ${error.message}</p></div>`;
+        } finally {
+            loader.classList.add('loader-hidden');
+            analyzeBtn.disabled = false;
+        }
+    });
+    // --- Dynamic Result Display Function ---
+    function displayResults(data) {
+        resultsContainer.innerHTML = '';
+        let delay = 0;
+        // This function creates a new card and adds it to the DOM with a delay
+        const addCard = (card) => {
+            if(card) {
+                resultsContainer.appendChild(card);
+                setTimeout(() => card.classList.add('visible'), delay);
+                delay += 200;
+            }
+        };
+        // Handle different report types
+        if (data.final_verdict) { // Text-only report
+            addCard(createTextCard(data));
+        } else { // Image report (which can contain text analysis)
+            addCard(createImageManipulationCard(data.image_manipulation_report));
+            addCard(createReverseImageSearchCard(data.reverse_image_search_report));
+            addCard(createImageContentCard(data.in_image_content_report));
+            if (data.extracted_text_analysis_report && data.extracted_text_analysis_report.final_verdict) {
+                addCard(createExtractedTextCard(data.extracted_text_analysis_report));
+            }
+        }
+    }
+    // --- Helper functions to create HTML for each card ---
+    function createTextCard(report) {
+        if (!report) return null;
+        const card = document.createElement('div');
+        card.className = 'result-card animate-on-scroll fade-in';
+        let sourcesHtml = '';
+        if (report.source && Object.keys(report.source).length > 0) {
+            sourcesHtml = Object.entries(report.source).map(([source, url]) =>
+                `<div class="evidence-item"><strong>${source}</strong><br><a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a></div>`
+            ).join('');
+        }
+        card.innerHTML = `
+            <h3><i class="fas fa-file-alt"></i> Text Analysis Report</h3>
+            <p><strong>Verdict:</strong> <span class="verdict--${report.final_verdict?.toLowerCase()}">${report.final_verdict || 'N/A'}</span></p>
+            <p><strong>Explanation:</strong> ${report.explanation || 'N/A'}</p>
+            ${sourcesHtml ? `<div class="sources-section"><h4>Sources:</h4>${sourcesHtml}</div>` : ''}
+        `;
+        return card;
+    }
+    function createImageManipulationCard(report) {
+        if (!report) return null;
+        const card = document.createElement('div');
+        card.className = 'result-card animate-on-scroll fade-in';
+        // FIXED: Use the correct path for the ELA image
+        const elaLink = report.ela_image_path ? `<p><strong>ELA Analysis Image:</strong> <a href="/results/${report.ela_image_path}" target="_blank">View ELA Result</a></p>` : '';
+        card.innerHTML = `
+            <h3><i class="fas fa-shield-alt"></i> Image Manipulation Analysis</h3>
+            <p><strong>AI-Generated Score:</strong> ${report.ai_generated_score_percent?.toFixed(2) || '0.00'}%</p>
+            <p><strong>Classic Edit Score (ELA):</strong> ${report.classic_edit_score_percent?.toFixed(2) || '0.00'}%</p>
+            ${elaLink}
+        `;
+        return card;
+    }
+    function createImageContentCard(report) {
+        if (!report) return null;
+        const card = document.createElement('div');
+        card.className = 'result-card animate-on-scroll fade-in';
+        let contentHtml = '';
+        if (report['Safe Search']) {
+            const ss = report['Safe Search'];
+            contentHtml += `<p><strong>Safe Search:</strong> Adult: ${ss.adult}, Violence: ${ss.violence}</p>`;
+        }
+        if (report['Identified Entities']) {
+            contentHtml += `<p><strong>Identified Entities:</strong> ${report['Identified Entities'].join(', ')}</p>`;
+        }
+        card.innerHTML = `
+            <h3><i class="fas fa-search"></i> Image Content Analysis</h3>
+            ${contentHtml || '<p>No specific content detected.</p>'}
+        `;
+        return card;
+    }
+    function createReverseImageSearchCard(report) {
+        if (!report) return null;
+        const card = document.createElement('div');
+        card.className = 'result-card animate-on-scroll fade-in';
+        let matchesHtml = '<p>No online matches found.</p>';
+        if (report['Reverse Image Matches'] && report['Reverse Image Matches'].length > 0) {
+            matchesHtml = report['Reverse Image Matches'].map(match =>
+                `<div class="evidence-item"><strong>${match.title}</strong><br><a href="${match.url}" target="_blank" rel="noopener noreferrer">${match.url}</a></div>`
+            ).join('');
+        }
+        card.innerHTML = `
+            <h3><i class="fas fa-globe"></i> Reverse Image Search</h3>
+            ${matchesHtml}
+        `;
+        return card;
+    }
+    function createExtractedTextCard(report) {
+        if (!report) return null;
+        // Re-use the text card creation logic
+        const card = createTextCard(report);
+        card.querySelector('h3').innerHTML = `<i class="fas fa-file-text"></i> Extracted Text Analysis`;
+        return card;
+    }
+});

frontend_by_gemini/style.css ADDED Viewed

	@@ -0,0 +1,285 @@

+/* --- Variables & Global Styles --- */
+:root {
+    --primary-color: #00bfff; /* Deep Sky Blue */
+    --accent-color: #ff4757; /* Vibrant Red */
+    --dark-bg: #0d0c22; /* Deep Indigo */
+    --light-bg-transparent: rgba(26, 26, 46, 0.4);
+    --border-color: rgba(255, 255, 255, 0.1);
+    --text-color: #f0f0f0;
+    --text-muted: #a0a0a0;
+    --font-family-heading: 'Poppins', sans-serif;
+    --font-family-body: 'Roboto', sans-serif;
+}
+body {
+    font-family: var(--font-family-body);
+    background-color: var(--dark-bg);
+    color: var(--text-color);
+    line-height: 1.6;
+    margin: 0;
+    padding: 2rem;
+    overflow-x: hidden;
+}
+/* --- Animated Background --- */
+.background-gradient {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background: linear-gradient(315deg, var(--primary-color), var(--dark-bg), var(--accent-color));
+    background-size: 400% 400%;
+    animation: gradient-flow 15s ease infinite;
+}
+@keyframes gradient-flow {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+/* --- Main Container & Glassmorphism --- */
+.container {
+    max-width: 800px;
+    margin: 2rem auto;
+    padding: 2.5rem;
+    background: var(--light-bg-transparent);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-radius: 20px;
+    border: 1px solid var(--border-color);
+    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
+}
+header {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+header h1 {
+    font-family: var(--font-family-heading);
+    color: #fff;
+    text-shadow: 0 0 10px var(--primary-color);
+}
+header p {
+    color: var(--text-muted);
+}
+/* --- Form & Upgraded Inputs --- */
+#analysis-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+.input-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+}
+textarea {
+    width: 100%;
+    padding: 0.75rem;
+    background-color: rgba(0,0,0,0.2);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    color: var(--text-color);
+    font-size: 1rem;
+    resize: vertical;
+    transition: border-color 0.3s, box-shadow 0.3s;
+}
+textarea:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 15px rgba(0, 191, 255, 0.5);
+}
+.separator {
+    text-align: center;
+    color: var(--text-muted);
+    font-weight: 600;
+    position: relative;
+}
+.separator span {
+    background: #1a1a2e;
+    padding: 0 10px;
+}
+.separator::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    background: var(--border-color);
+    left: 0;
+    top: 50%;
+    z-index: -1;
+}
+/* Custom File Input */
+input[type="file"] {
+    display: none;
+}
+.file-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    border: 2px dashed var(--border-color);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.3s, border-color 0.3s;
+}
+.file-label:hover {
+    background-color: rgba(0, 191, 255, 0.1);
+    border-color: var(--primary-color);
+}
+.file-label i {
+    margin-right: 0.75rem;
+    font-size: 1.5rem;
+    color: var(--primary-color);
+}
+/* Upgraded Button */
+.btn-analyze {
+    padding: 1rem 1.5rem;
+    font-size: 1.1rem;
+    font-weight: 600;
+    font-family: var(--font-family-heading);
+    color: #fff;
+    background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    box-shadow: 0 5px 15px rgba(255, 71, 87, 0.3);
+}
+.btn-analyze:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 25px rgba(0, 191, 255, 0.5);
+}
+.btn-analyze:disabled {
+    background: #555;
+    cursor: not-allowed;
+    transform: translateY(0);
+    box-shadow: none;
+}
+/* --- Results & Upgraded Loader --- */
+#results-container {
+    margin-top: 2rem;
+}
+.loader-hidden {
+    display: none;
+}
+#loader {
+    text-align: center;
+    padding: 2rem;
+}
+#loader p {
+    margin-top: 1rem;
+    color: var(--primary-color);
+    font-weight: 500;
+}
+.scanner-line {
+    width: 100%;
+    height: 3px;
+    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
+    animation: scan 2s infinite;
+    border-radius: 3px;
+}
+@keyframes scan {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+/* --- Result Card Styling --- */
+.result-card {
+    background: var(--light-bg-transparent);
+    padding: 1.5rem;
+    border-radius: 12px;
+    margin-bottom: 1.5rem;
+    border: 1px solid var(--border-color);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+}
+.error-card {
+    border-color: var(--accent-color);
+    background: rgba(255, 71, 87, 0.1);
+}
+.result-card h3 {
+    margin-bottom: 1rem;
+    color: var(--primary-color);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+.result-card p {
+    margin-bottom: 0.5rem;
+}
+.result-card .evidence-item {
+    background-color: rgba(0,0,0,0.2);
+    padding: 0.75rem;
+    border-radius: 6px;
+    margin-top: 0.5rem;
+    border: 1px solid var(--border-color);
+    font-size: 0.9rem;
+}
+.result-card .sources-section {
+    margin-top: 1rem;
+}
+.result-card .sources-section h4 {
+    color: var(--primary-color);
+    margin-bottom: 0.5rem;
+    font-size: 1rem;
+}
+.result-card .verdict--true {
+    color: #4CAF50;
+    font-weight: bold;
+}
+.result-card .verdict--false {
+    color: #f44336;
+    font-weight: bold;
+}
+.result-card .verdict--neutral {
+    color: #ff9800;
+    font-weight: bold;
+}
+.result-card .verdict--unverifiable {
+    color: #9e9e9e;
+    font-weight: bold;
+}
+/* --- Scroll Animations --- */
+.animate-on-scroll {
+    opacity: 0;
+    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
+}
+.animate-on-scroll.fade-in {
+    transform: translateY(30px);
+}
+.animate-on-scroll.slide-up {
+    transform: translateY(50px);
+}
+.animate-on-scroll.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+footer {
+    text-align: center;
+    margin-top: 3rem;
+    color: var(--text-muted);
+    font-size: 0.9rem;
+}
+/* --- Responsive --- */
+@media (max-width: 600px) {
+    body { padding: 0.5rem; }
+    .container { padding: 1.5rem; margin: 1rem; }
+    header h1 { font-size: 1.8rem; }
+}