Spaces:
Sleeping
Sleeping
| <html lang="id"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Detector Pro</title> | |
| <link id="app-style" rel="stylesheet" href="template/style.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script> | |
| </head> | |
| <body> | |
| <!-- IKLAN PRODUK DI BACKGROUND --> | |
| <div class="ads-container left"> | |
| <div class="ad-card">🚀 Deteksi Gambar AI<br><small id="ad-accuracy-text">Akurasi 99.9%</small></div> | |
| <div class="ad-card">🎬 File Terdeteksi<br><small id="ad-detected-count">Total: -</small></div> | |
| <div class="ad-card">🛡️ Amankan Bisnis Anda<br><small>Dari Konten Palsu</small></div> | |
| </div> | |
| <div class="ads-container right"> | |
| <div class="ad-card">⭐ Versi Premium<br><small>Bebas Limit Upload</small></div> | |
| <div class="ad-card">📊 Dashboard Analitik<br><small>Pantau Semua Scan</small></div> | |
| <div class="ad-card">🔗 API Access<br><small>Integrasikan ke Web Anda</small></div> | |
| </div> | |
| <!-- LOADING SCREEN (POLKADOT THEME) --> | |
| <div id="loading-screen" class="polka-dot-bg"> | |
| <div class="loading-content"> | |
| <div class="logo-big" style="margin-bottom: 20px;"><img src="images/logo.png" alt="Logo" style="width: 80px; height: 80px; filter: drop-shadow(0 2px 10px rgba(255,215,0,0.3));"></div> | |
| <h1>AI DETECTOR PRO</h1> | |
| <div class="loader-bar"><div class="loader-fill"></div></div> | |
| <p>Mempersiapkan Otak Neural...</p> | |
| </div> | |
| </div> | |
| <!-- HALAMAN AUTH (LANDING PAGE & GUEST WORKSPACE) --> | |
| <div id="auth-page" class="page hidden" style="flex-direction: column; justify-content: flex-start;"> | |
| <!-- Top Navigation Header --> | |
| <header class="landing-header"> | |
| <div class="landing-logo" style="display: flex; align-items: center; gap: 8px;"><img src="images/logo.png" alt="Logo" style="height: 32px;"> AI Detector Pro</div> | |
| <button class="btn-login-trigger" onclick="openAuthModal()">🔑 <span class="full-text">Masuk / Daftar</span><span class="short-text">Masuk</span></button> | |
| </header> | |
| <!-- Main Grid Workspace --> | |
| <div class="landing-container"> | |
| <!-- Left Column: App Information & Global Stats --> | |
| <div class="landing-info-card"> | |
| <h1 class="landing-title">Verifikasi Keaslian Gambar Anda</h1> | |
| <p class="landing-subtitle">Sistem forensik bertenaga AI untuk mendeteksi gambar palsu (AI-generated) dan gambar asli kamera digital.</p> | |
| <!-- Landing Stats Grid --> | |
| <div class="landing-stats-grid"> | |
| <div class="landing-stat-card"> | |
| <h3 id="landing-stat-total">-</h3> | |
| <p>Total Gambar Dites</p> | |
| </div> | |
| <div class="landing-stat-card"> | |
| <h3 id="landing-stat-correct">-</h3> | |
| <p>Klasifikasi Benar</p> | |
| </div> | |
| <div class="landing-stat-card"> | |
| <h3 id="landing-stat-wrong">-</h3> | |
| <p>Klasifikasi Salah</p> | |
| </div> | |
| <div class="landing-stat-card"> | |
| <h3 id="landing-stat-accuracy" style="color: var(--yellow-main);">-</h3> | |
| <p>Akurasi Model</p> | |
| </div> | |
| </div> | |
| <!-- Features list --> | |
| <div class="landing-features"> | |
| <div class="feature-item"> | |
| <span class="feature-icon">🤖</span> | |
| <div> | |
| <h4>Double Model Ensemble (v4)</h4> | |
| <p>Analisis multi-model canggih untuk hasil deteksi yang lebih akurat dan tepercaya.</p> | |
| </div> | |
| </div> | |
| <div class="feature-item"> | |
| <span class="feature-icon">⚡</span> | |
| <div> | |
| <h4>Deteksi Kilat & Cepat</h4> | |
| <p>Proses analisis forensik citra cepat dalam waktu kurang dari 0.5 detik.</p> | |
| </div> | |
| </div> | |
| <div class="feature-item"> | |
| <span class="feature-icon">🌙</span> | |
| <div> | |
| <h4>Analisis Kondisi Citra</h4> | |
| <p>Deteksi otomatis pencahayaan rendah (low-light) dan mode monokrom.</p> | |
| </div> | |
| </div> | |
| <div class="feature-item"> | |
| <span class="feature-icon">📲</span> | |
| <div> | |
| <h4>Akses Mobile Instan</h4> | |
| <p>Gunakan smartphone Anda untuk mengakses aplikasi deteksi forensik ini secara instan di mana saja.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dedicated QR Card --> | |
| <div class="landing-qr-card" onclick="openQrModal()" style="cursor: pointer; margin-top: 25px; padding: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 215, 0, 0.15); border-radius: 16px; display: flex; align-items: center; gap: 16px; transition: 0.3s; box-shadow: 0 8px 32px rgba(0,0,0,0.2);" onmouseover="this.style.background='rgba(255,215,0,0.05)'; this.style.borderColor='rgba(255,215,0,0.3)'; this.style.transform='translateY(-2px)'" onmouseout="this.style.background='rgba(255,255,255,0.03)'; this.style.borderColor='rgba(255,215,0,0.15)'; this.style.transform='none'"> | |
| <div style="background: white; padding: 6px; border-radius: 12px; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 15px rgba(0,0,0,0.2); overflow: hidden;"> | |
| <img src="images/qr-code.png" alt="QR Code Scan" style="width: 100%; height: 100%; object-fit: contain;"> | |
| </div> | |
| <div style="flex: 1;"> | |
| <h4 style="color: var(--yellow-main); font-size: 14px; font-weight: 700; margin: 0 0 6px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;"> | |
| <span>Pindai QR Akses Mobile</span> | |
| <span style="font-size: 10px; color: var(--yellow-main); font-weight: 600; background: rgba(255, 215, 0, 0.15); padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(255, 215, 0, 0.25); white-space: nowrap;">Perbesar 🔍</span> | |
| </h4> | |
| <p style="font-size: 12px; color: rgba(255, 255, 255, 0.65); margin: 0; line-height: 1.45;">Pindai QR code ini menggunakan HP Anda untuk membuka aplikasi secara cepat di mobile.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column: Scan Workspace --> | |
| <div class="landing-scan-card"> | |
| <div class="scan-header"> | |
| <h3>🖼️ Mulai Pindai Gambar</h3> | |
| <div id="landing-guest-quota" class="quota-badge"> | |
| ⏳ Sisa Scan Gratis: <span id="landing-quota-left">5</span>/5 | |
| </div> | |
| </div> | |
| <div class="upload-container"> | |
| <input type="file" id="landing-input-image" accept="image/png, image/jpeg, image/webp" hidden> | |
| <div class="upload-box" onclick="document.getElementById('landing-input-image').click()" style="position: relative; overflow: hidden; padding: 0; min-height: 220px; display: flex; flex-direction: column; justify-content: center; align-items: center;"> | |
| <!-- Placeholder state (visible when no file is chosen) --> | |
| <div id="landing-upload-placeholder" style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center;"> | |
| <span class="upload-icon" style="font-size: 40px; margin-bottom: 12px; display: block; filter: drop-shadow(0 4px 10px rgba(255,215,0,0.2));">📁</span> | |
| <p style="font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.8); margin: 0 0 6px 0;">Klik untuk upload gambar</p> | |
| <small style="color: rgba(255,255,255,0.5); font-size: 11px;">Maksimal ukuran file: 10MB</small> | |
| </div> | |
| <!-- Preview state (visible when file is chosen) --> | |
| <div id="landing-upload-preview" class="hidden" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;"> | |
| <img id="landing-preview-img" src="" alt="Preview" style="width: 100%; height: 100%; object-fit: contain; display: block;"> | |
| <div id="landing-preview-bg" style="display: none;"></div> | |
| </div> | |
| </div> | |
| <button class="btn-scan" style="width: 100%; margin-top: 15px;" onclick="scanLandingFile()">🔍 PINDAI GAMBAR</button> | |
| </div> | |
| <!-- Result Box for Landing Page --> | |
| <div id="landing-result-image" class="result-box hidden" style="margin-top: 20px;"></div> | |
| </div> | |
| </div> | |
| <!-- AUTH MODAL OVERLAY --> | |
| <div id="auth-modal" class="modal-overlay hidden" onclick="closeAuthModalOnOverlay(event)"> | |
| <div class="auth-box" onclick="event.stopPropagation()"> | |
| <span class="close-modal-btn" onclick="closeAuthModal()">×</span> | |
| <h2 style="display: flex; align-items: center; justify-content: center; gap: 8px;"><img src="images/logo.png" alt="Logo" style="height: 32px;"> AI Detector Pro</h2> | |
| <div class="tabs" style="margin-top: 15px;"> | |
| <button id="tab-login" class="tab-btn active" onclick="switchTab('login')">Login</button> | |
| <button id="tab-register" class="tab-btn" onclick="switchTab('register')">Register</button> | |
| </div> | |
| <!-- Form Login --> | |
| <form id="form-login" class="auth-form" onsubmit="handleLogin(event)"> | |
| <input type="text" id="login-user" placeholder="Username" required> | |
| <input type="password" id="login-pass" placeholder="Password" required> | |
| <button type="submit" class="btn-primary">MASUK</button> | |
| <p id="login-error" class="error-text"></p> | |
| </form> | |
| <!-- Form Register --> | |
| <form id="form-register" class="auth-form hidden" onsubmit="handleRegister(event)"> | |
| <input type="text" id="reg-name" placeholder="Nama Lengkap" required> | |
| <input type="text" id="reg-user" placeholder="Username" required> | |
| <input type="password" id="reg-pass" placeholder="Password" required> | |
| <button type="submit" class="btn-primary">DAFTAR</button> | |
| <p id="reg-error" class="error-text"></p> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- QR MODAL OVERLAY --> | |
| <div id="qr-modal" class="modal-overlay hidden" onclick="closeQrModalOnOverlay(event)"> | |
| <div class="auth-box" style="text-align: center; max-width: 320px;" onclick="event.stopPropagation()"> | |
| <span class="close-modal-btn" onclick="closeQrModal()">×</span> | |
| <h3 style="color: var(--yellow-main); margin-bottom: 15px; font-size: 18px; display: flex; align-items: center; justify-content: center; gap: 8px;">📲 Akses Mobile</h3> | |
| <img src="images/qr-code.png" alt="QR Code Scan" style="width: 100%; max-width: 220px; border-radius: 12px; border: 3px solid var(--yellow-main); padding: 8px; background: white; margin: 10px auto; display: block; box-shadow: 0 10px 25px rgba(255,215,0,0.25);"> | |
| <p style="font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.5; margin-top: 12px;">Pindai kode QR di atas menggunakan kamera HP Anda untuk mengakses aplikasi di perangkat mobile secara instan.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- HALAMAN UTAMA APLIKASI --> | |
| <div id="main-app" class="page hidden"> | |
| <nav class="sidebar"> | |
| <div class="logo-small" style="margin-bottom: 20px;"><img src="images/logo.png" alt="Logo" style="height: 48px; filter: drop-shadow(0 2px 10px rgba(255,215,0,0.3));"></div> | |
| <ul> | |
| <li class="nav-item active" onclick="showSection('dashboard')"> | |
| <span class="nav-icon"> | |
| <svg class="nav-svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> | |
| <polyline points="9 22 9 12 15 12 15 22"></polyline> | |
| </svg> | |
| </span> | |
| <span>Dashboard</span> | |
| </li> | |
| <li class="nav-item" onclick="showSection('scan-image')"> | |
| <span class="nav-icon"> | |
| <svg class="nav-svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M3 7V5a2 2 0 0 1 2-2h2"></path> | |
| <path d="M17 3h2a2 2 0 0 1 2 2v2"></path> | |
| <path d="M21 17v2a2 2 0 0 1-2 2h-2"></path> | |
| <path d="M7 21H5a2 2 0 0 1-2-2v-2"></path> | |
| <line x1="7" y1="12" x2="17" y2="12"></line> | |
| <rect x="9" y="9" width="6" height="6" rx="0.5" fill="currentColor" fill-opacity="0.25" stroke="none"></rect> | |
| </svg> | |
| </span> | |
| <span>Scan</span> | |
| </li> | |
| <li id="menu-batch-test" class="nav-item" onclick="showSection('batch-test')"> | |
| <span class="nav-icon"> | |
| <svg class="nav-svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect> | |
| <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path> | |
| </svg> | |
| </span> | |
| <span>Batch</span> | |
| </li> | |
| <li id="menu-history" class="nav-item" onclick="showSection('history')"> | |
| <span class="nav-icon"> | |
| <svg class="nav-svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> | |
| <polyline points="14 2 14 8 20 8"></polyline> | |
| <line x1="16" y1="13" x2="8" y2="13"></line> | |
| <line x1="16" y1="17" x2="8" y2="17"></line> | |
| <polyline points="10 9 9 9 8 9"></polyline> | |
| </svg> | |
| </span> | |
| <span>History</span> | |
| </li> | |
| <li id="menu-accuracy" class="nav-item" onclick="showSection('accuracy')"> | |
| <span class="nav-icon"> | |
| <svg class="nav-svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <circle cx="12" cy="12" r="10"></circle> | |
| <circle cx="12" cy="12" r="6"></circle> | |
| <circle cx="12" cy="12" r="2"></circle> | |
| </svg> | |
| </span> | |
| <span>Akurasi</span> | |
| </li> | |
| </ul> | |
| <div class="sidebar-qr-container desktop-only-nav" style="margin: 20px 24px; padding: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 215, 0, 0.15); border-radius: 12px; text-align: center; cursor: pointer;" onclick="openQrModal()"> | |
| <img src="images/qr-code.png" alt="QR Code Scan" style="width: 100%; max-width: 100px; border-radius: 8px; border: 2px solid var(--yellow-main); padding: 4px; background: white; margin-bottom: 8px;"> | |
| <p style="font-size: 10px; color: rgba(255,255,255,0.7); font-weight: 600; margin: 0;">Pindai QR Akses Mobile 🔍</p> | |
| </div> | |
| <button class="btn-logout" onclick="handleLogout()"> | |
| <span class="nav-icon"> | |
| <svg class="nav-svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> | |
| <circle cx="12" cy="7" r="4"></circle> | |
| </svg> | |
| </span> | |
| <span>Logout</span> | |
| </button> | |
| </nav> | |
| <main class="content"> | |
| <header style="display: flex; justify-content: space-between; align-items: center;"> | |
| <div> | |
| <h2>Selamat Datang, <span id="user-name">User</span></h2> | |
| <div id="user-trust-container" style="margin-top: 4px; font-size: 12px; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 6px;"> | |
| 🛡️ Skor Kredibilitas: <b id="user-trust-score" style="color: var(--yellow-main)">50</b>/100 | |
| <span id="user-trust-badge" style="font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: 4px; background: rgba(255,215,0,0.15); color: var(--yellow-main); border: 1px solid rgba(255,215,0,0.2);">Standar</span> | |
| </div> | |
| <div id="guest-scan-container" style="display: none; margin-top: 4px; font-size: 12px; color: rgba(255,255,255,0.6); align-items: center; gap: 6px;"> | |
| ⏳ Sisa Scan Gratis: <b id="guest-scan-remaining" style="color: var(--yellow-main)">5</b>/5 | |
| </div> | |
| </div> | |
| <div id="api-status-indicator" style="display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 20px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); transition: 0.3s;"> | |
| <span id="api-status-dot" style="width: 8px; height: 8px; border-radius: 50%; background: #ff4757; box-shadow: 0 0 8px #ff4757; transition: 0.3s;"></span> | |
| <span id="api-status-text" style="color: rgba(255, 255, 255, 0.75);">API Offline</span> | |
| </div> | |
| </header> | |
| <!-- DASHBOARD SECTION --> | |
| <section id="sec-dashboard" class="section active"> | |
| <div class="stats-grid" id="dashboard-stats"> | |
| <div class="stat-card blue"><h3>-</h3><p>Total Test</p></div> | |
| <div class="stat-card yellow"><h3>-</h3><p>Benar</p></div> | |
| <div class="stat-card blue"><h3>-</h3><p>Salah</p></div> | |
| <div class="stat-card yellow"><h3>-</h3><p>Akurasi</p></div> | |
| </div> | |
| <div id="dashboard-learning" class="info-box" style="margin-bottom:20px"> | |
| Data pembelajaran: <b>-</b> gambar | |
| </div> | |
| <div class="info-box"> | |
| <h3>Cara Menggunakan:</h3> | |
| <ol style="margin-bottom: 15px;"> | |
| <li><b>Scan Gambar</b> — upload 1 foto, lihat hasil REAL/AI, konfirmasi Benar/Salah</li> | |
| <li><b>Batch Test</b> — pilih folder berisi subfolder <b>real/</b> dan <b>fake/</b>, scan massal</li> | |
| <li><b>Akurasi</b> — lihat statistik lengkap + download feedback ZIP buat training</li> | |
| </ol> | |
| <div style="padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; gap: 8px;"> | |
| <span style="font-size: 16px;">🤖</span> | |
| <span style="font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.85);"> | |
| Active Model: <span style="color: var(--yellow-main);">Ensemble v4 (Epoch 8 + Epoch 14)</span> | |
| </span> | |
| </div> | |
| </div> | |
| <!-- DASHBOARD QUICK ACTIONS (Poin 3) --> | |
| <div style="display: flex; gap: 15px; margin-top: 20px; flex-wrap: wrap;"> | |
| <button class="btn-scan" style="flex: 1; min-width: 200px; padding: 15px; font-size: 14px; font-weight: 700; background: linear-gradient(135deg, #1e3c72, #2a5298); color: #ffffff !important; border: 1px solid rgba(30, 60, 114, 0.2); border-radius: 12px; box-shadow: 0 4px 15px rgba(30, 60, 114, 0.25);" onclick="showSection('scan-image')"> | |
| 🖼️ MULAI SCAN GAMBAR | |
| </button> | |
| <button id="dashboard-btn-batch-test" class="btn-scan" style="flex: 1; min-width: 200px; padding: 15px; font-size: 14px; font-weight: 700; background: linear-gradient(135deg, #001f3f, #003366); color: #ffffff !important; border: 1px solid rgba(255,215,0,0.3); border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 31, 63, 0.25);" onclick="showSection('batch-test')"> | |
| 📁 MULAI BATCH TEST | |
| </button> | |
| </div> | |
| </section> | |
| <!-- SCAN GAMBAR SECTION --> | |
| <section id="sec-scan-image" class="section"> | |
| <div class="upload-container"> | |
| <input type="file" id="input-image" accept="image/png, image/jpeg, image/webp" hidden> | |
| <div class="upload-box" onclick="document.getElementById('input-image').click()" style="position: relative; overflow: hidden; padding: 0; min-height: 220px; display: flex; flex-direction: column; justify-content: center; align-items: center;"> | |
| <!-- Placeholder state (visible when no file is chosen) --> | |
| <div id="upload-placeholder" style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center;"> | |
| <span class="upload-icon" style="font-size: 40px; margin-bottom: 12px; display: block; filter: drop-shadow(0 4px 10px rgba(255,215,0,0.2));">📁</span> | |
| <p style="font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.8); margin: 0 0 6px 0;">Klik untuk upload gambar</p> | |
| <small style="color: rgba(255,255,255,0.5); font-size: 11px;">Maksimal ukuran file: 10MB</small> | |
| </div> | |
| <!-- Preview state (visible when file is chosen) --> | |
| <div id="upload-preview" class="hidden" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;"> | |
| <img id="preview-img" src="" alt="Preview" style="width: 100%; height: 100%; object-fit: contain; display: block;"> | |
| <div id="preview-bg" style="display: none;"></div> | |
| </div> | |
| </div> | |
| <button class="btn-scan" onclick="scanFile()">🔍 SCAN GAMBAR</button> | |
| </div> | |
| <div id="result-image" class="result-box hidden"></div> | |
| </section> | |
| <!-- BATCH TEST SECTION --> | |
| <section id="sec-batch-test" class="section"> | |
| <div class="upload-container"> | |
| <div class="info-box" style="margin-bottom:20px"> | |
| <h3>Batch Test</h3> | |
| <p>Pilih folder yang berisi subfolder <b>real</b> dan <b>fake</b> (atau <b>ai</b>). Sistem akan scan semua gambar dan membandingkan hasil deteksi dengan label folder.</p> | |
| </div> | |
| <input type="file" id="input-batch" webkitdirectory multiple hidden> | |
| <div class="upload-box" onclick="document.getElementById('input-batch').click()"> | |
| <span class="upload-icon">📂</span> | |
| <p>Klik untuk pilih folder</p> | |
| <small id="batch-folder-name">Belum ada folder dipilih</small> | |
| </div> | |
| <div id="batch-file-list" style="width:100%;max-width:600px;margin-bottom:15px"></div> | |
| <button class="btn-scan" onclick="startBatchScan()">🔍 MULAI BATCH TEST</button> | |
| </div> | |
| <div id="batch-progress" class="hidden" style="margin-top:20px;text-align:center;color:var(--yellow-main)">⏳ Memproses...</div> | |
| <div id="batch-result" class="hidden" style="margin-top:20px"></div> | |
| </section> | |
| <!-- HISTORY SECTION --> | |
| <section id="sec-history" class="section"> | |
| <div style="display:flex;gap:10px;align-items:center;margin-bottom:15px;flex-wrap:wrap"> | |
| <button class="btn-refresh" onclick="loadHistory()">🔄 Refresh History</button> | |
| <span id="history-count" style="color:rgba(255,255,255,0.5);font-size:13px"></span> | |
| </div> | |
| <div class="table-wrap"> | |
| <table class="history-table"> | |
| <thead> | |
| <tr><th>File</th><th>Tipe</th><th>Ukuran</th><th>Sumber</th><th>Akurasi</th><th>Status</th><th>Tanggal</th></tr> | |
| </thead> | |
| <tbody id="history-body"> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <!-- ACCURACY SECTION --> | |
| <section id="sec-accuracy" class="section"> | |
| <!-- TOOLBAR AKURASI (TIME FILTER, DOWNLOAD FEEDBACK, RESET STATS) --> | |
| <div style="display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap;align-items:center;"> | |
| <button class="btn-refresh" onclick="loadAccuracyReport()">🔄 Refresh</button> | |
| <select id="accuracy-time-filter" onchange="loadAccuracyReport()" title="Filter Rentang Waktu" aria-label="Filter Rentang Waktu" style="padding: 10px 15px; border-radius: 8px; background: rgba(0, 31, 63, 0.7); color: white; border: 1px solid var(--yellow-main); cursor: pointer; font-size: 14px; font-weight: 600; outline: none; transition: 0.3s;"> | |
| <option value="all">📅 Semua Waktu</option> | |
| <option value="today">📅 Hari Ini</option> | |
| <option value="week">📅 Minggu Ini</option> | |
| <option value="month">📅 Bulan Ini</option> | |
| </select> | |
| <button id="btn-download-feedback" class="btn-scan" style="display:none; padding:10px 20px;font-size:14px;background: linear-gradient(135deg, #1e3c72, #2a5298);border: 1px solid rgba(255,215,0,0.3);" onclick="downloadFeedback()">⬇️ Download Feedback</button> | |
| </div> | |
| <div id="accuracy-summary" style="margin-bottom:20px"></div> | |
| <!-- ROW 1 CHART: DONUT & STACKED BAR --> | |
| <div class="chart-grid"> | |
| <div class="info-box"><canvas id="chart-donut" height="200"></canvas></div> | |
| <div class="info-box"><canvas id="chart-bar" height="200"></canvas></div> | |
| </div> | |
| <!-- ROW 2 CHART: CONFUSION MATRIX & CONFIDENCE DISTRIBUTION CURVE --> | |
| <div class="chart-grid" style="margin-top: 20px;"> | |
| <!-- Sisi Kiri Bawah: Confusion Matrix 2x2 --> | |
| <div class="info-box" style="display: flex; flex-direction: column; justify-content: space-between;"> | |
| <h3 style="color: var(--yellow-main); margin-bottom: 15px; font-size: 16px; text-align: center;">📊 Confusion Matrix (2x2)</h3> | |
| <div style="display: grid; grid-template-columns: 80px 1fr 1fr; gap: 8px; text-align: center; font-size: 12px; font-weight: bold; flex: 1; align-content: center;"> | |
| <div></div> | |
| <div style="background: rgba(255,255,255,0.05); padding: 8px; border-radius: 6px; color: var(--yellow-light);">Prediksi REAL</div> | |
| <div style="background: rgba(255,255,255,0.05); padding: 8px; border-radius: 6px; color: var(--yellow-light);">Prediksi AI</div> | |
| <div style="background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--yellow-light); min-height: 50px;">Aktual REAL</div> | |
| <div id="cm-tn" style="background: rgba(46, 213, 115, 0.12); border: 1px solid var(--success); color: var(--success); padding: 12px 6px; border-radius: 8px; font-size: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center;">0<br><span style="font-size: 9px; opacity: 0.8; font-weight: normal; margin-top: 3px;">TN (True Real)</span></div> | |
| <div id="cm-fp" style="background: rgba(255, 71, 87, 0.12); border: 1px solid var(--danger); color: var(--danger); padding: 12px 6px; border-radius: 8px; font-size: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center;">0<br><span style="font-size: 9px; opacity: 0.8; font-weight: normal; margin-top: 3px;">FP (False AI)</span></div> | |
| <div style="background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--yellow-light); min-height: 50px;">Aktual AI</div> | |
| <div id="cm-fn" style="background: rgba(255, 71, 87, 0.12); border: 1px solid var(--danger); color: var(--danger); padding: 12px 6px; border-radius: 8px; font-size: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center;">0<br><span style="font-size: 9px; opacity: 0.8; font-weight: normal; margin-top: 3px;">FN (False Real)</span></div> | |
| <div id="cm-tp" style="background: rgba(46, 213, 115, 0.12); border: 1px solid var(--success); color: var(--success); padding: 12px 6px; border-radius: 8px; font-size: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center;">0<br><span style="font-size: 9px; opacity: 0.8; font-weight: normal; margin-top: 3px;">TP (True AI)</span></div> | |
| </div> | |
| </div> | |
| <!-- Sisi Kanan Bawah: Distribusi Skor Confidence --> | |
| <div class="info-box"> | |
| <canvas id="chart-confidence" height="200"></canvas> | |
| </div> | |
| </div> | |
| <!-- NEW FAILURE LOG / TABLE RIWAYAT SALAH TEBAK --> | |
| <div class="info-box" style="margin-top: 20px;"> | |
| <h3 style="color: var(--danger); margin-bottom: 15px; display: flex; align-items: center; gap: 8px; font-size: 16px;"> | |
| 📋 Riwayat Salah Tebak (Failure Log / Mismatch List) | |
| </h3> | |
| <div class="table-wrap"> | |
| <table class="history-table" style="font-size: 13px;"> | |
| <thead> | |
| <tr> | |
| <th>Nama File</th> | |
| <th>Ground Truth (Aktual)</th> | |
| <th>Prediksi Model</th> | |
| <th>Skor Confidence</th> | |
| <th>Tanggal</th> | |
| </tr> | |
| </thead> | |
| <tbody id="failure-log-body"> | |
| <tr><td colspan="5" style="text-align:center;padding:20px;color:rgba(255,255,255,0.3)">Loading data...</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <script src="script.js?v=1.0.9"></script> | |
| </body> | |
| </html> | |