| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes"> |
| <meta name="apple-mobile-web-app-capable" content="yes"> |
| <meta name="mobile-web-app-capable" content="yes"> |
| <title>TextAuth Forensics — Evidence-Based Text Authenticity Analysis</title> |
| <style> |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| -webkit-tap-highlight-color: transparent; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
| |
| :root { |
| --primary: #06b6d4; |
| --primary-dark: #0891b2; |
| --secondary: #3b82f6; |
| --success: #10b981; |
| --warning: #f59e0b; |
| --danger: #ef4444; |
| --bg-dark: #0f172a; |
| --bg-darker: #020617; |
| --bg-panel: rgba(30, 41, 59, 0.95); |
| --text-primary: #f1f5f9; |
| --text-secondary: #94a3b8; |
| --text-muted: #64748b; |
| --border: rgba(71, 85, 105, 0.5); |
| } |
| |
| html { |
| font-size: 16px; |
| scroll-behavior: smooth; |
| -webkit-text-size-adjust: 100%; |
| text-size-adjust: 100%; |
| } |
| |
| body { |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); |
| color: var(--text-primary); |
| line-height: 1.6; |
| min-height: 100vh; |
| overflow-x: hidden; |
| position: relative; |
| width: 100%; |
| } |
| |
| |
| body, .landing-page, .analysis-interface { |
| max-width: 100vw; |
| overflow-x: hidden; |
| } |
| |
| |
| h1, h2, h3, h4 { |
| font-weight: 600; |
| line-height: 1.3; |
| word-wrap: break-word; |
| overflow-wrap: break-word; |
| } |
| |
| p, span, div { |
| word-wrap: break-word; |
| overflow-wrap: break-word; |
| } |
| |
| |
| .header { |
| background: rgba(15, 23, 42, 0.98); |
| backdrop-filter: blur(10px); |
| padding: 0.75rem 1rem; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| border-bottom: 1px solid var(--border); |
| position: sticky; |
| top: 0; |
| z-index: 1000; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| min-height: 60px; |
| } |
| |
| .logo { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| font-size: 1.1rem; |
| font-weight: 700; |
| color: #fff; |
| text-decoration: none; |
| flex-shrink: 1; |
| min-width: 0; |
| } |
| |
| .logo-icon { |
| width: 32px; |
| height: 32px; |
| min-width: 32px; |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); |
| border-radius: 8px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1.1rem; |
| box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3); |
| } |
| |
| .logo span { |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| .nav-links { |
| display: flex; |
| gap: 1rem; |
| align-items: center; |
| } |
| |
| .nav-link { |
| color: var(--text-secondary); |
| text-decoration: none; |
| font-weight: 500; |
| transition: color 0.3s; |
| cursor: pointer; |
| font-size: 0.9rem; |
| white-space: nowrap; |
| padding: 0.5rem 0.25rem; |
| } |
| |
| .nav-link:hover { |
| color: var(--primary); |
| } |
| |
| .try-btn { |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); |
| color: #fff; |
| padding: 0.625rem 1.25rem; |
| border-radius: 8px; |
| font-weight: 600; |
| border: none; |
| cursor: pointer; |
| transition: transform 0.3s, box-shadow 0.3s; |
| text-decoration: none; |
| display: inline-block; |
| font-size: 0.95rem; |
| white-space: nowrap; |
| touch-action: manipulation; |
| } |
| |
| .try-btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 20px rgba(6, 182, 212, 0.4); |
| } |
| |
| |
| .landing-page { |
| display: block; |
| width: 100%; |
| padding-bottom: 2rem; |
| } |
| |
| .hero { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 3rem 1rem 2rem; |
| text-align: center; |
| } |
| |
| .hero-title { |
| font-size: 2.25rem; |
| font-weight: 800; |
| margin-bottom: 1rem; |
| background: linear-gradient(135deg, #fff 0%, var(--primary) 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| line-height: 1.2; |
| padding: 0 0.5rem; |
| } |
| |
| .hero-subtitle { |
| font-size: 1.1rem; |
| color: var(--text-secondary); |
| margin-bottom: 1rem; |
| padding: 0 0.5rem; |
| } |
| |
| .hero-description { |
| font-size: 1rem; |
| color: var(--text-muted); |
| max-width: 700px; |
| margin: 0 auto 2rem; |
| padding: 0 1rem; |
| } |
| |
| .accuracy-badge { |
| display: inline-block; |
| background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(6, 182, 212, 0.2) 100%); |
| border: 2px solid var(--success); |
| padding: 0.75rem 1.5rem; |
| border-radius: 12px; |
| font-size: 1.1rem; |
| font-weight: 700; |
| color: var(--success); |
| margin-bottom: 2rem; |
| } |
| |
| .stats-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); |
| gap: 1rem; |
| max-width: 1000px; |
| margin: 3rem auto; |
| padding: 0 1rem; |
| } |
| |
| .stat-card { |
| background: var(--bg-panel); |
| padding: 1.5rem; |
| border-radius: 16px; |
| border: 1px solid var(--border); |
| text-align: center; |
| } |
| |
| .stat-value { |
| font-size: 2rem; |
| font-weight: 800; |
| color: var(--primary); |
| margin-bottom: 0.5rem; |
| } |
| |
| .stat-label { |
| color: var(--text-secondary); |
| font-size: 0.85rem; |
| line-height: 1.4; |
| } |
| |
| |
| .features-section { |
| max-width: 1200px; |
| margin: 4rem auto; |
| padding: 0 1rem; |
| } |
| |
| .section-title { |
| font-size: 1.75rem; |
| font-weight: 700; |
| text-align: center; |
| margin-bottom: 1rem; |
| padding: 0 0.5rem; |
| } |
| |
| .section-subtitle { |
| text-align: center; |
| color: var(--text-secondary); |
| font-size: 1rem; |
| margin-bottom: 3rem; |
| padding: 0 0.5rem; |
| } |
| |
| .features-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| gap: 1.5rem; |
| } |
| |
| .feature-card { |
| background: var(--bg-panel); |
| padding: 2rem; |
| border-radius: 16px; |
| border: 1px solid var(--border); |
| transition: transform 0.3s, box-shadow 0.3s; |
| } |
| |
| .feature-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 30px rgba(6, 182, 212, 0.2); |
| } |
| |
| .feature-icon { |
| font-size: 2rem; |
| margin-bottom: 1rem; |
| } |
| |
| .feature-title { |
| font-size: 1.25rem; |
| font-weight: 700; |
| margin-bottom: 1rem; |
| color: #fff; |
| } |
| |
| .feature-description { |
| color: var(--text-secondary); |
| line-height: 1.6; |
| font-size: 0.95rem; |
| } |
| |
| |
| .metrics-info { |
| max-width: 1200px; |
| margin: 4rem auto; |
| padding: 0 1rem; |
| } |
| |
| .metric-card { |
| background: var(--bg-panel); |
| padding: 1.5rem; |
| border-radius: 12px; |
| border: 1px solid var(--border); |
| margin-bottom: 1rem; |
| display: grid; |
| grid-template-columns: auto 1fr; |
| gap: 1.5rem; |
| align-items: center; |
| } |
| |
| .metric-icon-box { |
| width: 60px; |
| height: 60px; |
| min-width: 60px; |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); |
| border-radius: 10px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1.5rem; |
| } |
| |
| .metric-content h3 { |
| font-size: 1.1rem; |
| margin-bottom: 0.5rem; |
| color: #fff; |
| display: flex; |
| flex-wrap: wrap; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .metric-weight { |
| display: inline-block; |
| background: rgba(6, 182, 212, 0.2); |
| padding: 0.25rem 0.5rem; |
| border-radius: 6px; |
| font-size: 0.8rem; |
| color: var(--primary); |
| font-weight: 600; |
| white-space: nowrap; |
| } |
| |
| .metric-content p { |
| color: var(--text-secondary); |
| font-size: 0.9rem; |
| line-height: 1.5; |
| } |
| |
| |
| .analysis-interface { |
| display: none; |
| max-width: 100%; |
| margin: 1rem auto; |
| padding: 0 1rem 1rem; |
| width: 100%; |
| } |
| |
| .interface-grid { |
| display: grid; |
| grid-template-columns: 1fr; |
| gap: 1.5rem; |
| align-items: start; |
| width: 100%; |
| } |
| |
| .panel { |
| background: var(--bg-panel); |
| border-radius: 16px; |
| padding: 1.5rem; |
| border: 1px solid var(--border); |
| backdrop-filter: blur(10px); |
| overflow: hidden; |
| display: flex; |
| flex-direction: column; |
| width: 100%; |
| min-height: 600px; |
| max-height: 90vh; |
| } |
| |
| .panel-content { |
| flex: 1; |
| overflow-y: auto; |
| padding: 0.5rem 0; |
| -webkit-overflow-scrolling: touch; |
| } |
| |
| .panel-title { |
| font-size: 1.25rem; |
| font-weight: 700; |
| margin-bottom: 1.25rem; |
| color: #fff; |
| } |
| |
| |
| .input-tabs { |
| display: flex; |
| gap: 0.75rem; |
| margin-bottom: 1.25rem; |
| flex-wrap: wrap; |
| } |
| |
| .input-tab { |
| flex: 1; |
| min-width: 140px; |
| padding: 0.75rem 0.5rem; |
| background: rgba(51, 65, 85, 0.6); |
| border: none; |
| border-radius: 8px; |
| color: var(--text-secondary); |
| cursor: pointer; |
| font-size: 0.9rem; |
| font-weight: 600; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 0.5rem; |
| transition: all 0.3s; |
| text-align: center; |
| touch-action: manipulation; |
| } |
| |
| .input-tab.active { |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); |
| color: #fff; |
| } |
| |
| .input-tab:hover:not(.active) { |
| background: rgba(71, 85, 105, 0.8); |
| } |
| |
| .tab-content { |
| display: none; |
| } |
| |
| .tab-content.active { |
| display: block; |
| } |
| |
| |
| .text-input { |
| width: 100%; |
| min-height: 300px; |
| max-height: 50vh; |
| padding: 1rem; |
| background: rgba(15, 23, 42, 0.8); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| color: var(--text-primary); |
| font-size: 0.95rem; |
| line-height: 1.6; |
| resize: vertical; |
| font-family: inherit; |
| -webkit-appearance: none; |
| -moz-appearance: none; |
| appearance: none; |
| } |
| |
| .text-input::placeholder { |
| color: var(--text-muted); |
| } |
| |
| .text-input:focus { |
| outline: none; |
| border-color: var(--primary); |
| } |
| |
| |
| .file-upload-area { |
| border: 2px dashed var(--border); |
| border-radius: 8px; |
| padding: 2rem 1rem; |
| text-align: center; |
| cursor: pointer; |
| transition: all 0.3s; |
| background: rgba(15, 23, 42, 0.5); |
| touch-action: manipulation; |
| } |
| |
| .file-upload-area:hover { |
| border-color: var(--primary); |
| background: rgba(6, 182, 212, 0.05); |
| } |
| |
| .file-upload-area.drag-over { |
| border-color: var(--primary); |
| background: rgba(6, 182, 212, 0.1); |
| } |
| |
| .file-upload-icon { |
| font-size: 2.5rem; |
| margin-bottom: 0.75rem; |
| } |
| |
| .file-input { |
| display: none; |
| } |
| |
| .file-name-display { |
| margin-top: 1rem; |
| padding: 0.75rem; |
| background: rgba(6, 182, 212, 0.1); |
| border-radius: 6px; |
| color: var(--primary); |
| display: none; |
| font-size: 0.9rem; |
| word-break: break-all; |
| } |
| |
| |
| .options-section { |
| margin: 1.25rem 0; |
| padding: 1rem; |
| background: rgba(51, 65, 85, 0.3); |
| border-radius: 8px; |
| } |
| |
| .option-row { |
| display: flex; |
| flex-direction: column; |
| gap: 0.5rem; |
| margin-bottom: 1rem; |
| } |
| |
| .option-row:last-child { |
| margin-bottom: 0; |
| } |
| |
| .option-label { |
| font-size: 0.9rem; |
| color: var(--text-secondary); |
| flex: 1; |
| margin-bottom: 0.25rem; |
| } |
| |
| select { |
| background: rgba(15, 23, 42, 0.8); |
| border: 1px solid var(--border); |
| padding: 0.75rem; |
| border-radius: 6px; |
| color: var(--text-primary); |
| font-size: 0.9rem; |
| cursor: pointer; |
| width: 100%; |
| max-width: 100%; |
| -webkit-appearance: none; |
| -moz-appearance: none; |
| appearance: none; |
| background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); |
| background-repeat: no-repeat; |
| background-position: right 0.75rem center; |
| background-size: 1rem; |
| padding-right: 2.5rem; |
| } |
| |
| select:focus { |
| outline: none; |
| border-color: var(--primary); |
| } |
| |
| .checkbox-wrapper { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 0.25rem 0; |
| } |
| |
| input[type="checkbox"] { |
| width: 20px; |
| height: 20px; |
| min-width: 20px; |
| cursor: pointer; |
| -webkit-appearance: none; |
| -moz-appearance: none; |
| appearance: none; |
| background: rgba(15, 23, 42, 0.8); |
| border: 1px solid var(--border); |
| border-radius: 4px; |
| position: relative; |
| } |
| |
| input[type="checkbox"]:checked { |
| background: var(--primary); |
| border-color: var(--primary); |
| } |
| |
| input[type="checkbox"]:checked::after { |
| content: "✓"; |
| position: absolute; |
| color: white; |
| font-size: 14px; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| } |
| |
| .checkbox-wrapper span { |
| font-size: 0.85rem; |
| color: var(--text-muted); |
| line-height: 1.4; |
| } |
| |
| |
| .analyze-btn { |
| width: 100%; |
| padding: 1rem; |
| margin-top: 1.25rem; |
| background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); |
| color: #fff; |
| border: none; |
| border-radius: 8px; |
| font-size: 1rem; |
| font-weight: 700; |
| cursor: pointer; |
| transition: all 0.3s; |
| touch-action: manipulation; |
| } |
| |
| .analyze-btn:hover:not(:disabled) { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 25px rgba(6, 182, 212, 0.3); |
| } |
| |
| .analyze-btn:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| transform: none; |
| } |
| |
| .action-buttons { |
| display: flex; |
| gap: 0.75rem; |
| margin-top: 1.25rem; |
| flex-wrap: wrap; |
| } |
| |
| .action-btn { |
| flex: 1; |
| min-width: 120px; |
| padding: 0.75rem; |
| background: rgba(51, 65, 85, 0.6); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| color: var(--text-primary); |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 0.5rem; |
| font-size: 0.9rem; |
| touch-action: manipulation; |
| } |
| |
| .action-btn:hover { |
| background: var(--primary); |
| border-color: var(--primary); |
| transform: translateY(-2px); |
| } |
| |
| .action-btn.refresh { |
| background: rgba(245, 158, 11, 0.2); |
| border-color: var(--warning); |
| color: var(--warning); |
| } |
| |
| .action-btn.refresh:hover { |
| background: var(--warning); |
| color: var(--bg-darker); |
| } |
| |
| |
| .report-tabs { |
| display: flex; |
| gap: 0.5rem; |
| margin-bottom: 1.25rem; |
| border-bottom: 1px solid var(--border); |
| padding-bottom: 0.5rem; |
| overflow-x: auto; |
| -webkit-overflow-scrolling: touch; |
| scrollbar-width: none; |
| } |
| |
| .report-tabs::-webkit-scrollbar { |
| display: none; |
| } |
| |
| .report-tab { |
| padding: 0.75rem 0.5rem; |
| background: none; |
| border: none; |
| color: var(--text-secondary); |
| cursor: pointer; |
| font-size: 0.9rem; |
| font-weight: 600; |
| border-bottom: 3px solid transparent; |
| transition: all 0.3s; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| white-space: nowrap; |
| flex-shrink: 0; |
| touch-action: manipulation; |
| } |
| |
| .report-tab.active { |
| color: var(--primary); |
| border-bottom-color: var(--primary); |
| } |
| |
| .report-content { |
| display: none; |
| } |
| |
| .report-content.active { |
| display: block; |
| } |
| |
| |
| .empty-state { |
| text-align: center; |
| padding: 3rem 1rem; |
| } |
| |
| .empty-icon { |
| width: 60px; |
| height: 60px; |
| margin: 0 auto 1.25rem; |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 2rem; |
| } |
| |
| .empty-title { |
| font-size: 1.25rem; |
| font-weight: 700; |
| margin-bottom: 0.75rem; |
| color: #fff; |
| } |
| |
| .empty-description { |
| color: var(--text-secondary); |
| line-height: 1.6; |
| font-size: 0.95rem; |
| } |
| |
| |
| .loading { |
| text-align: center; |
| padding: 2rem 1rem; |
| } |
| |
| .spinner { |
| width: 50px; |
| height: 50px; |
| border: 4px solid rgba(71, 85, 105, 0.3); |
| border-top-color: var(--primary); |
| border-radius: 50%; |
| animation: spin 1s linear infinite; |
| margin: 0 auto 1rem; |
| } |
| |
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
| |
| |
| .result-summary { |
| text-align: center; |
| padding: 1.5rem 0; |
| } |
| |
| .gauge-container { |
| width: 220px; |
| height: 220px; |
| margin: 0 auto 1.5rem; |
| position: relative; |
| max-width: 100%; |
| } |
| |
| .gauge-circle { |
| width: 100%; |
| height: 100%; |
| border-radius: 50%; |
| background: conic-gradient(var(--gauge-color) 0deg, var(--gauge-color) var(--gauge-degree), rgba(51, 65, 85, 0.3) var(--gauge-degree)); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); |
| } |
| |
| .gauge-inner { |
| width: 170px; |
| height: 170px; |
| background: var(--bg-panel); |
| border-radius: 50%; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .gauge-value { |
| font-size: 2.5rem; |
| font-weight: 800; |
| color: var(--gauge-color); |
| } |
| |
| .gauge-label { |
| font-size: 0.85rem; |
| color: var(--text-secondary); |
| margin-top: 0.25rem; |
| } |
| |
| .result-info-grid { |
| display: grid; |
| grid-template-columns: 1fr; |
| gap: 1rem; |
| margin: 1.5rem 0; |
| } |
| |
| .info-card { |
| background: rgba(51, 65, 85, 0.3); |
| padding: 1.25rem; |
| border-radius: 10px; |
| border: 1px solid var(--border); |
| } |
| |
| .info-label { |
| font-size: 0.8rem; |
| color: var(--text-secondary); |
| margin-bottom: 0.5rem; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
| |
| .info-value { |
| font-size: 1.2rem; |
| font-weight: 700; |
| color: #fff; |
| } |
| |
| .confidence-badge { |
| display: inline-block; |
| padding: 0.4rem 1rem; |
| border-radius: 6px; |
| font-size: 0.85rem; |
| font-weight: 600; |
| } |
| |
| .confidence-high { |
| background: rgba(16, 185, 129, 0.2); |
| color: var(--success); |
| } |
| |
| .confidence-medium { |
| background: rgba(245, 158, 11, 0.2); |
| color: var(--warning); |
| } |
| |
| .confidence-low { |
| background: rgba(239, 68, 68, 0.2); |
| color: var(--danger); |
| } |
| |
| |
| .reasoning-box { |
| background: rgba(51, 65, 85, 0.4); |
| padding: 1.25rem; |
| border-radius: 10px; |
| border-left: 4px solid var(--primary); |
| margin-top: 1.5rem; |
| } |
| |
| .reasoning-title { |
| font-weight: 700; |
| margin-bottom: 1rem; |
| color: var(--primary); |
| font-size: 1rem; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .reasoning-text { |
| color: var(--text-secondary); |
| line-height: 1.7; |
| font-size: 0.9rem; |
| } |
| |
| |
| .reasoning-box.enhanced { |
| background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%); |
| border: 1px solid rgba(71, 85, 105, 0.5); |
| border-radius: 12px; |
| padding: 1.25rem; |
| margin-top: 1.5rem; |
| backdrop-filter: blur(10px); |
| } |
| |
| .reasoning-header { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| margin-bottom: 1rem; |
| flex-wrap: wrap; |
| } |
| |
| .reasoning-icon { |
| font-size: 1.25rem; |
| } |
| |
| .reasoning-title { |
| font-size: 1rem; |
| font-weight: 700; |
| color: var(--primary); |
| flex: 1; |
| } |
| |
| .confidence-tag { |
| padding: 0.25rem 0.75rem; |
| border-radius: 20px; |
| font-size: 0.75rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| white-space: nowrap; |
| } |
| |
| .high-confidence { |
| background: rgba(16, 185, 129, 0.2); |
| color: var(--success); |
| border: 1px solid rgba(16, 185, 129, 0.3); |
| } |
| |
| .medium-confidence { |
| background: rgba(245, 158, 11, 0.2); |
| color: var(--warning); |
| border: 1px solid rgba(245, 158, 11, 0.3); |
| } |
| |
| .low-confidence { |
| background: rgba(239, 68, 68, 0.2); |
| color: var(--danger); |
| border: 1px solid rgba(239, 68, 68, 0.3); |
| } |
| |
| .verdict-summary { |
| display: flex; |
| flex-direction: column; |
| gap: 0.75rem; |
| margin-bottom: 1.25rem; |
| padding: 1rem; |
| background: rgba(51, 65, 85, 0.3); |
| border-radius: 8px; |
| } |
| |
| .verdict-text { |
| font-size: 1.1rem; |
| font-weight: 800; |
| color: var(--warning); |
| text-align: center; |
| } |
| |
| .probability { |
| color: var(--text-secondary); |
| font-size: 0.9rem; |
| text-align: center; |
| } |
| |
| .probability-value { |
| color: var(--text-primary); |
| font-weight: 700; |
| } |
| |
| .metrics-breakdown { |
| margin-bottom: 1.25rem; |
| } |
| |
| .breakdown-header { |
| font-size: 0.85rem; |
| font-weight: 600; |
| color: var(--text-secondary); |
| margin-bottom: 1rem; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| text-align: center; |
| } |
| |
| .metric-indicator { |
| display: flex; |
| flex-direction: column; |
| gap: 0.5rem; |
| padding: 0.75rem; |
| margin-bottom: 0.5rem; |
| border-radius: 8px; |
| transition: all 0.2s ease; |
| } |
| |
| .metric-indicator:hover { |
| background: rgba(51, 65, 85, 0.4); |
| } |
| |
| .metric-name { |
| font-weight: 400; |
| color: var(--text-primary); |
| font-size: 0.9rem; |
| } |
| |
| .metric-details { |
| display: flex; |
| gap: 0.75rem; |
| align-items: center; |
| flex-wrap: wrap; |
| } |
| |
| .verdict-badge { |
| padding: 0.2rem 0.6rem; |
| border-radius: 6px; |
| font-size: 0.7rem; |
| font-weight: 700; |
| text-transform: uppercase; |
| min-width: 60px; |
| text-align: center; |
| } |
| |
| .synthetic-badge { |
| background: rgba(239, 68, 68, 0.2); |
| color: var(--danger); |
| border: 1px solid rgba(239, 68, 68, 0.3); |
| } |
| |
| .authentic-badge { |
| background: rgba(16, 185, 129, 0.2); |
| color: var(--success); |
| border: 1px solid rgba(16, 185, 129, 0.3); |
| } |
| |
| .confidence, .weight { |
| font-size: 0.75rem; |
| color: var(--text-muted); |
| } |
| |
| .agreement-indicator { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 0.75rem; |
| background: rgba(16, 185, 129, 0.1); |
| border: 1px solid rgba(16, 185, 129, 0.2); |
| border-radius: 8px; |
| color: var(--success); |
| font-size: 0.9rem; |
| } |
| |
| .agreement-icon { |
| font-weight: 700; |
| } |
| |
| .agreement-text { |
| font-size: 0.85rem; |
| font-weight: 600; |
| } |
| |
| |
| .download-actions { |
| display: flex; |
| flex-direction: column; |
| gap: 0.75rem; |
| margin-top: 1.5rem; |
| } |
| |
| .download-btn { |
| width: 100%; |
| padding: 0.75rem; |
| background: rgba(51, 65, 85, 0.6); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| color: var(--text-primary); |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 0.5rem; |
| font-size: 0.9rem; |
| touch-action: manipulation; |
| } |
| |
| .download-btn:hover { |
| background: var(--primary); |
| border-color: var(--primary); |
| transform: translateY(-2px); |
| } |
| |
| |
| .metrics-grid { |
| display: grid; |
| grid-template-columns: 1fr; |
| gap: 1rem; |
| } |
| |
| .metric-result-card { |
| background: rgba(51, 65, 85, 0.4); |
| padding: 1.25rem; |
| border-radius: 10px; |
| border: 1px solid var(--border); |
| } |
| |
| .metric-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 0.75rem; |
| flex-wrap: wrap; |
| gap: 0.5rem; |
| } |
| |
| .metric-name { |
| font-weight: 700; |
| color: #fff; |
| font-size: 1rem; |
| } |
| |
| .metric-score { |
| font-size: 1.5rem; |
| font-weight: 800; |
| } |
| |
| .metric-verdict { |
| display: inline-block; |
| padding: 0.25rem 0.75rem; |
| border-radius: 6px; |
| font-size: 0.7rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| margin-top: 0.5rem; |
| } |
| |
| .verdict-synthetic { |
| background: rgba(239, 68, 68, 0.2); |
| color: var(--danger); |
| } |
| |
| .verdict-authentic { |
| background: rgba(16, 185, 129, 0.2); |
| color: var(--success); |
| } |
| |
| .verdict-uncertain { |
| background: rgba(245, 158, 11, 0.2); |
| color: var(--warning); |
| } |
| |
| .metric-description { |
| font-size: 0.8rem; |
| color: var(--text-secondary); |
| line-height: 1.5; |
| margin-top: 0.75rem; |
| } |
| |
| |
| .highlight-legend { |
| display: flex; |
| gap: 1rem; |
| margin-bottom: 1.25rem; |
| padding: 1rem; |
| background: rgba(51, 65, 85, 0.4); |
| border-radius: 8px; |
| flex-wrap: wrap; |
| justify-content: center; |
| } |
| |
| .legend-item { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .legend-color { |
| width: 20px; |
| height: 20px; |
| min-width: 20px; |
| border-radius: 4px; |
| } |
| |
| .legend-label { |
| font-size: 0.85rem; |
| color: var(--text-secondary); |
| } |
| |
| .highlighted-text { |
| background: rgba(15, 23, 42, 0.8); |
| padding: 1.25rem; |
| border-radius: 10px; |
| border: 1px solid var(--border); |
| line-height: 1.7; |
| font-size: 0.9rem; |
| max-height: 60vh; |
| overflow-y: auto; |
| -webkit-overflow-scrolling: touch; |
| } |
| |
| |
| .footer { |
| max-width: 1200px; |
| margin: 4rem auto 0; |
| padding: 2rem 1rem; |
| border-top: 1px solid var(--border); |
| text-align: center; |
| color: var(--text-muted); |
| font-size: 0.9rem; |
| } |
| |
| |
| .metrics-carousel-container { |
| display: flex; |
| flex-direction: column; |
| height: 100%; |
| } |
| |
| .metrics-carousel-content { |
| flex: 1; |
| padding: 0; |
| display: flex; |
| align-items: flex-start; |
| justify-content: flex-start; |
| overflow-y: auto; |
| -webkit-overflow-scrolling: touch; |
| padding: 0.5rem; |
| } |
| |
| .metric-slide { |
| display: none; |
| width: 100%; |
| padding: 0.5rem; |
| } |
| |
| .metric-slide.active { |
| display: block; |
| } |
| |
| .metrics-carousel-nav { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 1rem 0.5rem; |
| border-top: 1px solid var(--border); |
| background: rgba(15, 23, 42, 0.8); |
| flex-wrap: wrap; |
| gap: 0.5rem; |
| } |
| |
| .carousel-btn { |
| padding: 0.75rem 1rem; |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); |
| color: #fff; |
| border: none; |
| border-radius: 8px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: transform 0.3s, box-shadow 0.3s; |
| font-size: 0.9rem; |
| touch-action: manipulation; |
| flex: 1; |
| min-width: 120px; |
| } |
| |
| .carousel-btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 20px rgba(6, 182, 212, 0.4); |
| } |
| |
| .carousel-btn:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| transform: none; |
| } |
| |
| .carousel-position { |
| font-size: 0.85rem; |
| color: var(--text-secondary); |
| font-weight: 600; |
| text-align: center; |
| flex-basis: 100%; |
| order: -1; |
| } |
| |
| |
| .verdict-text { |
| font-size: 1.1rem !important; |
| } |
| |
| .domain-text { |
| font-size: 1rem !important; |
| } |
| |
| .verdict-hybrid { |
| background: rgba(168, 85, 247, 0.2); |
| color: #a855f7; |
| border: 1px solid rgba(168, 85, 247, 0.3); |
| } |
| |
| |
| .reasoning-bullet-points { |
| margin: 1.25rem 0; |
| line-height: 1.6; |
| text-align: left; |
| } |
| |
| .bullet-point { |
| margin-bottom: 0.75rem; |
| padding-left: 0.5rem; |
| color: var(--text-secondary); |
| font-size: 0.9rem; |
| text-align: left; |
| line-height: 1.5; |
| } |
| |
| .bullet-point:last-child { |
| margin-bottom: 0; |
| } |
| |
| .bullet-point strong { |
| color: var(--text-primary); |
| } |
| |
| |
| .single-progress-gauge { |
| width: 200px; |
| height: 200px; |
| margin: 0 auto 1.5rem; |
| position: relative; |
| border-radius: 50%; |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); |
| } |
| |
| .single-progress-gauge .gauge-inner { |
| position: absolute; |
| width: 150px; |
| height: 150px; |
| background: var(--bg-panel); |
| border-radius: 50%; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .single-progress-gauge .gauge-value { |
| font-size: 2.5rem; |
| font-weight: 800; |
| } |
| |
| .single-progress-gauge .gauge-label { |
| font-size: 0.8rem; |
| color: var(--text-secondary); |
| margin-top: 0.25rem; |
| } |
| |
| |
| |
| |
| @media (min-width: 768px) { |
| .header { |
| padding: 1rem 1.5rem; |
| } |
| |
| .logo { |
| font-size: 1.25rem; |
| gap: 0.75rem; |
| } |
| |
| .logo-icon { |
| width: 36px; |
| height: 36px; |
| min-width: 36px; |
| font-size: 1.25rem; |
| } |
| |
| .nav-link { |
| font-size: 0.95rem; |
| padding: 0.5rem; |
| } |
| |
| .hero { |
| padding: 4rem 1.5rem 3rem; |
| } |
| |
| .hero-title { |
| font-size: 2.75rem; |
| } |
| |
| .hero-subtitle { |
| font-size: 1.25rem; |
| } |
| |
| .stats-grid { |
| grid-template-columns: repeat(3, 1fr); |
| gap: 1.5rem; |
| } |
| |
| .section-title { |
| font-size: 2rem; |
| } |
| |
| .section-subtitle { |
| font-size: 1.1rem; |
| } |
| |
| .features-grid { |
| grid-template-columns: repeat(2, 1fr); |
| gap: 2rem; |
| } |
| |
| .metric-card { |
| padding: 1.75rem; |
| gap: 1.75rem; |
| } |
| |
| .metric-icon-box { |
| width: 70px; |
| height: 70px; |
| min-width: 70px; |
| font-size: 1.75rem; |
| } |
| |
| .analysis-interface { |
| padding: 0 1.5rem 1.5rem; |
| } |
| |
| .panel { |
| padding: 1.75rem; |
| min-height: 650px; |
| } |
| |
| .interface-grid { |
| gap: 2rem; |
| } |
| |
| .result-info-grid { |
| grid-template-columns: repeat(3, 1fr); |
| } |
| |
| .option-row { |
| flex-direction: row; |
| align-items: center; |
| gap: 1rem; |
| } |
| |
| .option-label { |
| margin-bottom: 0; |
| min-width: 160px; |
| } |
| |
| select { |
| max-width: 200px; |
| } |
| |
| .download-actions { |
| flex-direction: row; |
| } |
| |
| .action-buttons { |
| flex-wrap: nowrap; |
| } |
| |
| .metrics-grid { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| |
| .carousel-position { |
| flex-basis: auto; |
| order: 0; |
| } |
| |
| .highlight-legend { |
| justify-content: flex-start; |
| } |
| } |
| |
| |
| @media (min-width: 1024px) { |
| .interface-grid { |
| grid-template-columns: 1fr 1fr; |
| } |
| |
| .hero { |
| padding: 5rem 2rem 4rem; |
| } |
| |
| .hero-title { |
| font-size: 3.25rem; |
| } |
| |
| .features-grid { |
| grid-template-columns: repeat(3, 1fr); |
| } |
| |
| .metric-card { |
| grid-template-columns: 80px 1fr; |
| gap: 2rem; |
| } |
| |
| .panel { |
| height: 750px; |
| } |
| |
| .download-actions { |
| flex-direction: row; |
| } |
| |
| .nav-links { |
| gap: 2rem; |
| } |
| } |
| |
| |
| @media (min-width: 1200px) { |
| .hero-title { |
| font-size: 3.5rem; |
| } |
| |
| .features-grid { |
| grid-template-columns: repeat(3, 1fr); |
| gap: 2.5rem; |
| } |
| |
| .panel { |
| height: 800px; |
| } |
| |
| .single-progress-gauge { |
| width: 220px; |
| height: 220px; |
| } |
| |
| .single-progress-gauge .gauge-inner { |
| width: 170px; |
| height: 170px; |
| } |
| } |
| |
| |
| @media (max-width: 480px) { |
| .logo span { |
| display: none; |
| } |
| |
| .logo-icon { |
| margin-right: 0; |
| } |
| |
| .nav-links { |
| gap: 0.5rem; |
| } |
| |
| .nav-link { |
| font-size: 0.8rem; |
| padding: 0.5rem 0.25rem; |
| } |
| |
| .try-btn { |
| padding: 0.5rem 1rem; |
| font-size: 0.85rem; |
| } |
| |
| .hero-title { |
| font-size: 1.75rem; |
| } |
| |
| .hero-subtitle { |
| font-size: 1rem; |
| } |
| |
| .stats-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .feature-card { |
| padding: 1.5rem; |
| } |
| |
| .metric-card { |
| grid-template-columns: 1fr; |
| text-align: center; |
| gap: 1rem; |
| } |
| |
| .metric-icon-box { |
| margin: 0 auto; |
| } |
| |
| .panel { |
| padding: 1.25rem; |
| } |
| |
| .input-tab { |
| min-width: 120px; |
| font-size: 0.85rem; |
| } |
| |
| .text-input { |
| min-height: 250px; |
| } |
| |
| .file-upload-area { |
| padding: 1.5rem 1rem; |
| } |
| |
| .file-upload-icon { |
| font-size: 2rem; |
| } |
| |
| .action-btn { |
| min-width: 100%; |
| } |
| |
| .carousel-btn { |
| min-width: 100%; |
| margin-bottom: 0.5rem; |
| } |
| |
| .carousel-position { |
| order: -1; |
| margin-bottom: 0.5rem; |
| } |
| |
| .metrics-carousel-nav { |
| flex-direction: column; |
| } |
| } |
| |
| |
| @media (orientation: landscape) and (max-height: 500px) { |
| .panel { |
| min-height: 400px; |
| max-height: 85vh; |
| } |
| |
| .text-input { |
| min-height: 200px; |
| max-height: 40vh; |
| } |
| |
| .highlighted-text { |
| max-height: 40vh; |
| } |
| |
| .hero { |
| padding: 2rem 1rem 1.5rem; |
| } |
| |
| .hero-title { |
| font-size: 2rem; |
| margin-bottom: 0.75rem; |
| } |
| |
| .stats-grid { |
| margin: 2rem auto; |
| } |
| } |
| |
| |
| @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
| .logo-icon, .metric-icon-box, .empty-icon, .gauge-circle, .single-progress-gauge { |
| -webkit-backface-visibility: hidden; |
| backface-visibility: hidden; |
| transform: translateZ(0); |
| } |
| } |
| |
| |
| @media print { |
| .header, .footer, .try-btn, .action-buttons, .download-actions, .report-tabs { |
| display: none !important; |
| } |
| |
| .panel { |
| border: none; |
| box-shadow: none; |
| height: auto; |
| min-height: auto; |
| max-height: none; |
| } |
| |
| body { |
| background: white; |
| color: black; |
| } |
| |
| .highlighted-text { |
| background: white; |
| border: 1px solid #ccc; |
| } |
| } |
| |
| |
| @media (prefers-reduced-motion: reduce) { |
| * { |
| animation-duration: 0.01ms !important; |
| animation-iteration-count: 1 !important; |
| transition-duration: 0.01ms !important; |
| } |
| |
| .spinner { |
| animation: none !important; |
| } |
| } |
| |
| |
| @media (prefers-color-scheme: dark) { |
| :root { |
| --text-primary: #f1f5f9; |
| --text-secondary: #94a3b8; |
| --text-muted: #64748b; |
| } |
| } |
| |
| </style> |
| </head> |
| <body> |
| |
| <div class="header"> |
| <a href="#" class="logo" onclick="showLanding(); return false;"> |
| <div class="logo-icon">🔍</div> |
| <span>TextAuth Forensics</span> |
| </a> |
| <div class="nav-links"> |
| <a href="#features" class="nav-link">Features</a> |
| <a href="#metrics" class="nav-link">Forensic Signals</a> |
| <a href="#" class="nav-link" onclick="showAnalysis(); return false;">Try It Now</a> |
| </div> |
| </div> |
|
|
| |
| <div class="landing-page" id="landing-page"> |
| |
| <section class="hero"> |
| <h1 class="hero-title">Evidence-Based Text Forensics Platform</h1> |
| <p class="hero-subtitle">Analyzing Content Authenticity Through Linguistic & Statistical Evidence</p> |
| <p class="hero-description"> |
| A forensic analysis system that evaluates textual evidence using multiple statistical, |
| linguistic, and semantic signals to assess content authenticity across education, |
| publishing, hiring, and research domains. |
| </p> |
| <button class="try-btn" onclick="showAnalysis()"> Try It Now → </button> |
| </section> |
|
|
| |
| <div class="stats-grid"> |
| <div class="stat-card"> |
| <div class="stat-value">Low</div> |
| <div class="stat-label">False-Positive Bias (Domain-Calibrated)</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-value">6</div> |
| <div class="stat-label">Total Forensic Signals</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-value">10s</div> |
| <div class="stat-label">Average Processing Time</div> |
| </div> |
| </div> |
|
|
| |
| <section class="features-section" id="features"> |
| <h2 class="section-title">Why Choose Our Platform?</h2> |
| <p class="section-subtitle"> |
| Advanced technology meets practical application |
| </p> |
| <div class="features-grid"> |
| <div class="feature-card"> |
| <div class="feature-icon">🎯</div> |
| <h3 class="feature-title">Domain-Aware Analysis</h3> |
| <p class="feature-description"> |
| Calibrated thresholds for Academic, Technical, Creative, and Casual content types with specialized analysis algorithms for each domain. |
| </p> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-icon">🔬</div> |
| <h3 class="feature-title">6-Signal Evidence Ensemble</h3> |
| <p class="feature-description"> |
| Combines perplexity, entropy, structural, linguistic, semantic, and perturbation-stability signals to form a multi-angle forensic evidence profile |
| </p> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-icon">💡</div> |
| <h3 class="feature-title">Explainable Results</h3> |
| <p class="feature-description"> |
| Sentence-level highlighting with confidence scores and detailed forensic reasoning for each assessment. |
| </p> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-icon">🚀</div> |
| <h3 class="feature-title">Fast Processing</h3> |
| <p class="feature-description"> |
| Analyze short texts in 1.2 seconds, medium documents in 3.5 seconds with parallel metric computation. |
| </p> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-icon">📄</div> |
| <h3 class="feature-title">Multi-Format Support</h3> |
| <p class="feature-description"> |
| Upload and analyze TXT, PDF, DOCX, DOC, and Markdown files with automatic text extraction. |
| </p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="metrics-info" id="metrics"> |
| <h2 class="section-title">Forensic Signals Explained</h2> |
| <p class="section-subtitle"> |
| Understanding the science behind the forensic evaluation |
| </p> |
| <div class="metric-card"> |
| <div class="metric-icon-box">📊</div> |
| <div class="metric-content"> |
| <h3>Perplexity <span class="metric-weight">Weight: 25%</span></h3> |
| <p>Measures how predictable the text is using reference language model. Model-generated or algorithmically assisted text typically exhibits lower perplexity (more predictable) than human writing, which tends to be more varied and surprising.</p> |
| </div> |
| </div> |
| <div class="metric-card"> |
| <div class="metric-icon-box">🎲</div> |
| <div class="metric-content"> |
| <h3>Entropy <span class="metric-weight">Weight: 20%</span></h3> |
| <p>Calculates token-level diversity and unpredictability in text sequences. Human writing shows higher entropy with more varied word choices, while algorithmically generated text tends toward more uniform token distributions.</p> |
| </div> |
| </div> |
| <div class="metric-card"> |
| <div class="metric-icon-box">📈</div> |
| <div class="metric-content"> |
| <h3>Structural Analysis <span class="metric-weight">Weight: 15%</span></h3> |
| <p>Analyzes sentence length variance, punctuation patterns, and lexical burstiness. Human writing exhibits more variation in sentence structure and rhythm compared to algorithmically generated text, which often shows more uniform patterns.</p> |
| </div> |
| </div> |
| <div class="metric-card"> |
| <div class="metric-icon-box">📝</div> |
| <div class="metric-content"> |
| <h3>Linguistic Analysis <span class="metric-weight">Weight: 15%</span></h3> |
| <p>Evaluates POS tag diversity, syntactic complexity, and grammatical patterns. Examines the richness of language structures and whether they match natural human linguistic variation.</p> |
| </div> |
| </div> |
| <div class="metric-card"> |
| <div class="metric-icon-box">🧠</div> |
| <div class="metric-content"> |
| <h3>Semantic Analysis <span class="metric-weight">Weight: 15%</span></h3> |
| <p>Assesses semantic coherence, repetition patterns, and contextual consistency. Identifies semantic consistency patterns that often differ between human-authored and algorithmically generated text.</p> |
| </div> |
| </div> |
| <div class="metric-card"> |
| <div class="metric-icon-box">🔍</div> |
| <div class="metric-content"> |
| <h3>Multi-Perturbation Stability <span class="metric-weight">Weight: 10%</span></h3> |
| <p>Tests text stability under random perturbations. Algorithmically generated text tends to maintain higher likelihood scores even when slightly modified, while human text shows more variation.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="footer"> |
| <p>© 2025 Evidence-Based Text Forensics Platform</p> |
| <p style="margin-top: 1rem;">Evidence-first text forensics with explainable decisions.</p> |
| </footer> |
| </div> |
|
|
| |
| <div class="analysis-interface" id="analysis-interface"> |
| <div class="interface-grid"> |
| |
| <div class="panel"> |
| <h2 class="panel-title">Submit Content for Analysis</h2> |
| <div class="panel-content"> |
| <div class="input-tabs"> |
| <button class="input-tab active" data-tab="paste"> |
| 📋 Paste Text |
| </button> |
| <button class="input-tab" data-tab="upload"> |
| 📁 Upload File |
| </button> |
| </div> |
| <div id="paste-tab" class="tab-content active"> |
| <textarea |
| id="text-input" |
| class="text-input" |
| placeholder="Paste your text here for analysis... |
| The more text you provide (minimum 50 characters), the more reliable the forensic evaluation will be." |
| ></textarea> |
| </div> |
| <div id="upload-tab" class="tab-content"> |
| <div class="file-upload-area" id="file-upload-area"> |
| <input type="file" id="file-input" class="file-input" accept=".txt,.pdf,.docx,.doc,.md"> |
| <div class="file-upload-icon">📄</div> |
| <div style="font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem;"> |
| Click to upload or drag and drop |
| </div> |
| <div style="color: var(--text-muted); font-size: 0.9rem;"> |
| Supported formats: TXT, PDF, DOCX, DOC, MD |
| </div> |
| <div style="color: var(--text-muted); font-size: 0.85rem; margin-top: 0.5rem;"> |
| Maximum file size: 10MB |
| </div> |
| </div> |
| <div id="file-name-display" class="file-name-display"></div> |
| </div> |
| <div class="options-section"> |
| <div class="option-row"> |
| <label class="option-label">Content Domain:</label> |
| <select id="domain-select"> |
| <option value="">Auto-detect</option> |
| <option value="academic">Academic</option> |
| <option value="technical_doc">Technical/Medical</option> |
| <option value="creative">Creative Writing</option> |
| <option value="social_media">Social Media</option> |
| </select> |
| </div> |
| <div class="option-row"> |
| <label class="option-label">Enable Sentence Highlighting:</label> |
| <div class="checkbox-wrapper"> |
| <input type="checkbox" id="enable-highlighting" checked> |
| <span style="font-size: 0.85rem; color: var(--text-muted);">Show suspicious sentences</span> |
| </div> |
| </div> |
| |
| <div class="option-row"> |
| <label class="option-label">Sentence-Level Analysis:</label> |
| <div class="checkbox-wrapper"> |
| <input type="checkbox" id="use-sentence-level" checked> |
| <span style="font-size: 0.85rem; color: var(--text-muted);">More accurate but slower analysis</span> |
| </div> |
| </div> |
| <div class="option-row"> |
| <label class="option-label">Include Metrics Summary:</label> |
| <div class="checkbox-wrapper"> |
| <input type="checkbox" id="include-metrics-summary" checked> |
| <span style="font-size: 0.85rem; color: var(--text-muted);">Show text analysis statistics</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div style="display: flex; flex-direction: column; gap: 1rem;"> |
| <button id="analyze-btn" class="analyze-btn"> |
| 🔍 Analyze Text |
| </button> |
| <div class="action-buttons"> |
| <button id="refresh-btn" class="action-btn refresh"> |
| 🔄 Refresh |
| </button> |
| <button id="try-next-btn" class="action-btn"> |
| ➕ Try Next |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="panel"> |
| <h2 class="panel-title">Analysis Report</h2> |
| <div class="panel-content"> |
| <div class="report-tabs"> |
| <button class="report-tab active" data-report="summary"> |
| 📊 Summary |
| </button> |
| <button class="report-tab" data-report="highlighted"> |
| 📝 Highlighted Text |
| </button> |
| <button class="report-tab" data-report="metrics"> |
| ℹ️ Detailed Metrics |
| </button> |
| </div> |
| |
| |
| <div id="summary-report" class="report-content active"> |
| <div class="empty-state"> |
| <div class="empty-icon">✓</div> |
| <h3 class="empty-title">Ready for Analysis</h3> |
| <p class="empty-description"> |
| Paste text or upload a document to begin evidence-based forensic analysis. |
| Our multi-signal ensemble will provide detailed, explainable insights. |
| </p> |
| </div> |
| </div> |
| |
| |
| <div id="highlighted-report" class="report-content"> |
| <div class="empty-state"> |
| <div class="empty-icon">📝</div> |
| <p class="empty-description"> |
| Run an analysis to see sentence-level highlighting |
| </p> |
| </div> |
| </div> |
| |
| |
| <div id="metrics-report" class="report-content"> |
| <div class="empty-state"> |
| <div class="empty-icon">📊</div> |
| <p class="empty-description"> |
| Run an analysis to see detailed metric breakdowns |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const API_BASE = ''; |
| let currentAnalysisData = null; |
| let currentMetricIndex = 0; |
| let totalMetrics = 0; |
| |
| |
| function showLanding() { |
| document.getElementById('landing-page').style.display = 'block'; |
| document.getElementById('analysis-interface').style.display = 'none'; |
| window.scrollTo(0, 0); |
| } |
| |
| function showAnalysis() { |
| document.getElementById('landing-page').style.display = 'none'; |
| document.getElementById('analysis-interface').style.display = 'block'; |
| window.scrollTo(0, 0); |
| resetAnalysisInterface(); |
| } |
| |
| |
| function resetAnalysisInterface() { |
| |
| document.getElementById('text-input').value = ''; |
| |
| document.getElementById('file-input').value = ''; |
| document.getElementById('file-name-display').style.display = 'none'; |
| document.getElementById('file-name-display').innerHTML = ''; |
| |
| document.querySelectorAll('.input-tab').forEach(t => t.classList.remove('active')); |
| document.querySelector('.input-tab[data-tab="paste"]').classList.add('active'); |
| document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); |
| document.getElementById('paste-tab').classList.add('active'); |
| |
| document.getElementById('domain-select').value = ''; |
| document.getElementById('enable-highlighting').checked = true; |
| document.getElementById('use-sentence-level').checked = true; |
| document.getElementById('include-metrics-summary').checked = true; |
| |
| document.querySelectorAll('.report-tab').forEach(t => t.classList.remove('active')); |
| document.querySelector('.report-tab[data-report="summary"]').classList.add('active'); |
| document.querySelectorAll('.report-content').forEach(content => content.classList.remove('active')); |
| document.getElementById('summary-report').classList.add('active'); |
| |
| document.getElementById('summary-report').innerHTML = ` |
| <div class="empty-state"> |
| <div class="empty-icon">✓</div> |
| <h3 class="empty-title">Ready for Analysis</h3> |
| <p class="empty-description"> |
| Paste text or upload a document to begin evidence-based forensic analysis. |
| Our multi-signal ensemble will provide detailed, explainable insights. |
| </p> |
| </div> |
| `; |
| document.getElementById('highlighted-report').innerHTML = ` |
| <div class="empty-state"> |
| <div class="empty-icon">📝</div> |
| <p class="empty-description"> |
| Run an analysis to see sentence-level highlighting |
| </p> |
| </div> |
| `; |
| document.getElementById('metrics-report').innerHTML = ` |
| <div class="empty-state"> |
| <div class="empty-icon">📊</div> |
| <p class="empty-description"> |
| Run an analysis to see detailed metric breakdowns |
| </p> |
| </div> |
| `; |
| |
| currentAnalysisData = null; |
| currentMetricIndex = 0; |
| totalMetrics = 0; |
| } |
| |
| |
| document.querySelectorAll('.input-tab').forEach(tab => { |
| tab.addEventListener('click', () => { |
| const tabName = tab.dataset.tab; |
| document.querySelectorAll('.input-tab').forEach(t => t.classList.remove('active')); |
| tab.classList.add('active'); |
| document.querySelectorAll('#paste-tab, #upload-tab').forEach(content => { |
| content.classList.remove('active'); |
| }); |
| document.getElementById(`${tabName}-tab`).classList.add('active'); |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.report-tab').forEach(tab => { |
| tab.addEventListener('click', () => { |
| const reportName = tab.dataset.report; |
| document.querySelectorAll('.report-tab').forEach(t => t.classList.remove('active')); |
| tab.classList.add('active'); |
| document.querySelectorAll('.report-content').forEach(content => { |
| content.classList.remove('active'); |
| }); |
| document.getElementById(`${reportName}-report`).classList.add('active'); |
| }); |
| }); |
| |
| |
| const fileInput = document.getElementById('file-input'); |
| const fileUploadArea = document.getElementById('file-upload-area'); |
| const fileNameDisplay = document.getElementById('file-name-display'); |
| |
| fileUploadArea.addEventListener('click', () => { |
| fileInput.click(); |
| }); |
| |
| fileInput.addEventListener('change', (e) => { |
| handleFileSelect(e.target.files[0]); |
| }); |
| |
| |
| fileUploadArea.addEventListener('dragover', (e) => { |
| e.preventDefault(); |
| fileUploadArea.classList.add('drag-over'); |
| }); |
| |
| fileUploadArea.addEventListener('dragleave', () => { |
| fileUploadArea.classList.remove('drag-over'); |
| }); |
| |
| fileUploadArea.addEventListener('drop', (e) => { |
| e.preventDefault(); |
| fileUploadArea.classList.remove('drag-over'); |
| const file = e.dataTransfer.files[0]; |
| if (file) { |
| fileInput.files = e.dataTransfer.files; |
| handleFileSelect(file); |
| } |
| }); |
| |
| function handleFileSelect(file) { |
| if (!file) return; |
| const allowedTypes = ['.txt', '.pdf', '.docx', '.doc', '.md']; |
| const fileExt = '.' + file.name.split('.').pop().toLowerCase(); |
| if (!allowedTypes.includes(fileExt)) { |
| alert('Unsupported file type. Please upload: TXT, PDF, DOCX, DOC, or MD files.'); |
| return; |
| } |
| if (file.size > 10 * 1024 * 1024) { |
| alert('File size exceeds 10MB limit.'); |
| return; |
| } |
| fileNameDisplay.style.display = 'block'; |
| fileNameDisplay.innerHTML = ` |
| <strong>Selected file:</strong> ${file.name} |
| <span style="color: var(--text-muted);">(${formatFileSize(file.size)})</span> |
| `; |
| } |
| |
| function formatFileSize(bytes) { |
| if (bytes < 1024) return bytes + ' B'; |
| if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'; |
| return (bytes / (1024 * 1024)).toFixed(1) + ' MB'; |
| } |
| |
| |
| document.getElementById('analyze-btn').addEventListener('click', async () => { |
| const activeTab = document.querySelector('.input-tab.active').dataset.tab; |
| const textInput = document.getElementById('text-input').value.trim(); |
| const fileInput = document.getElementById('file-input').files[0]; |
| |
| if (activeTab === 'paste' && !textInput) { |
| alert('Please paste some text to analyze (minimum 50 characters).'); |
| return; |
| } |
| if (activeTab === 'paste' && textInput.length < 50) { |
| alert('Text must be at least 50 characters long for accurate analysis.'); |
| return; |
| } |
| if (activeTab === 'upload' && !fileInput) { |
| alert('Please select a file to upload.'); |
| return; |
| } |
| |
| await performAnalysis(activeTab, textInput, fileInput); |
| }); |
| |
| |
| document.getElementById('refresh-btn').addEventListener('click', () => { |
| resetAnalysisInterface(); |
| }); |
| |
| |
| document.getElementById('try-next-btn').addEventListener('click', () => { |
| resetAnalysisInterface(); |
| }); |
| |
| async function performAnalysis(mode, text, file) { |
| const analyzeBtn = document.getElementById('analyze-btn'); |
| analyzeBtn.disabled = true; |
| analyzeBtn.innerHTML = '⏳ Analyzing...'; |
| showLoading(); |
| |
| try { |
| let response; |
| if (mode === 'paste') { |
| response = await analyzeText(text); |
| } else { |
| response = await analyzeFile(file); |
| } |
| currentAnalysisData = response; |
| displayResults(response); |
| } catch (error) { |
| console.error('Analysis error:', error); |
| showError(error.message || 'Analysis failed. Please try again.'); |
| } finally { |
| analyzeBtn.disabled = false; |
| analyzeBtn.innerHTML = '🔍 Analyze Text'; |
| } |
| } |
| |
| async function analyzeText(text) { |
| const domain = document.getElementById('domain-select').value || null; |
| const enableHighlighting = document.getElementById('enable-highlighting').checked; |
| const useSentenceLevel = document.getElementById('use-sentence-level').checked; |
| const includeMetricsSummary = document.getElementById('include-metrics-summary').checked; |
| |
| const response = await fetch(`${API_BASE}/api/analyze`, { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ |
| text: text, |
| domain: domain, |
| enable_highlighting: enableHighlighting, |
| use_sentence_level: useSentenceLevel, |
| include_metrics_summary: includeMetricsSummary, |
| skip_expensive_metrics: false |
| }) |
| }); |
| |
| if (!response.ok) { |
| const error = await response.json(); |
| throw new Error(error.error || 'Analysis failed'); |
| } |
| return await response.json(); |
| } |
| |
| async function analyzeFile(file) { |
| const domain = document.getElementById('domain-select').value || null; |
| const useSentenceLevel = document.getElementById('use-sentence-level').checked; |
| const includeMetricsSummary = document.getElementById('include-metrics-summary').checked; |
| |
| const formData = new FormData(); |
| formData.append('file', file); |
| if (domain) formData.append('domain', domain); |
| formData.append('use_sentence_level', useSentenceLevel.toString()); |
| formData.append('include_metrics_summary', includeMetricsSummary.toString()); |
| formData.append('skip_expensive_metrics', 'false'); |
| |
| const response = await fetch(`${API_BASE}/api/analyze/file`, { |
| method: 'POST', |
| body: formData |
| }); |
| |
| if (!response.ok) { |
| const error = await response.json(); |
| throw new Error(error.error || 'File analysis failed'); |
| } |
| return await response.json(); |
| } |
| |
| function showLoading() { |
| document.getElementById('summary-report').innerHTML = ` |
| <div class="loading"> |
| <div class="spinner"></div> |
| <p style="color: var(--text-secondary);">Analyzing content using multi-signal forensic evaluation...</p> |
| <p style="color: var(--text-muted); font-size: 0.9rem; margin-top: 0.5rem;"> |
| This may take a few seconds |
| </p> |
| </div> |
| `; |
| } |
| |
| function showError(message) { |
| document.getElementById('summary-report').innerHTML = ` |
| <div class="empty-state"> |
| <div class="empty-icon" style="background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);">⚠️</div> |
| <h3 class="empty-title">Analysis Failed</h3> |
| <p class="empty-description">${message}</p> |
| </div> |
| `; |
| } |
| |
| function displayResults(data) { |
| console.log('Response data:', data); |
| |
| const detection = data.detection_result; |
| if (!detection) { |
| showError('Invalid response structure. Please check the API response format.'); |
| console.error('Full response:', data); |
| return; |
| } |
| |
| |
| const ensemble = detection.ensemble_result || detection.ensemble; |
| const prediction = detection.prediction || {}; |
| const metrics = detection.metric_results || detection.metrics; |
| const analysis = detection.analysis || {}; |
| |
| |
| displaySummary(ensemble, prediction, analysis, data.reasoning); |
| |
| |
| if (data.highlighted_html) { |
| displayHighlightedText(data.highlighted_html); |
| } else { |
| document.getElementById('highlighted-report').innerHTML = ` |
| <div class="empty-state"> |
| <p class="empty-description">Highlighting not available for this analysis</p> |
| </div> |
| `; |
| } |
| |
| |
| if (metrics && Object.keys(metrics).length > 0) { |
| displayMetricsCarousel(metrics, analysis, ensemble); |
| } else { |
| document.getElementById('metrics-report').innerHTML = ` |
| <div class="empty-state"> |
| <p class="empty-description">Metric details not available</p> |
| </div> |
| `; |
| } |
| } |
| |
| function displaySummary(ensemble, prediction, analysis, reasoning) { |
| |
| const { |
| syntheticProbability, |
| authenticProbability, |
| hybridProbability, |
| verdict, |
| confidence, |
| domain, |
| isSynthetic, |
| gaugeColor, |
| gaugeDegree, |
| confidenceLevel, |
| confidenceClass |
| } = extractSummaryData(ensemble, analysis); |
| |
| document.getElementById('summary-report').innerHTML = ` |
| <div class="result-summary"> |
| ${createGaugeSection(syntheticProbability, authenticProbability, hybridProbability, gaugeColor, gaugeDegree)} |
| ${createInfoGrid(verdict, confidence, confidenceClass, domain, hybridProbability)} |
| ${createEnhancedReasoningHTML(ensemble, analysis, reasoning)} |
| ${createDownloadActions()} |
| </div> |
| `; |
| } |
| |
| |
| function extractSummaryData(ensemble, analysis) { |
| const syntheticProbability = ensemble.synthetic_probability !== undefined |
| ? (ensemble.synthetic_probability * 100).toFixed(0) |
| : '0'; |
| |
| const authenticProbability = ensemble.authentic_probability !== undefined |
| ? (ensemble.authentic_probability * 100).toFixed(0) |
| : '0'; |
| |
| const hybridProbability = ensemble.hybrid_probability !== undefined |
| ? (ensemble.hybrid_probability * 100).toFixed(0) |
| : '0'; |
| |
| const verdict = ensemble.final_verdict || 'Unknown'; |
| |
| const confidence = ensemble.overall_confidence !== undefined |
| ? (ensemble.overall_confidence * 100).toFixed(1) |
| : '0'; |
| |
| const domain = analysis.domain || 'general'; |
| |
| const isSynthetic = verdict.toLowerCase().includes('synthetic'); |
| |
| const gaugeColor = isSynthetic |
| ? 'var(--danger)' |
| : 'var(--success)'; |
| |
| const gaugeDegree = parseFloat(syntheticProbability) * 3.6; |
| |
| const confidenceLevel = getConfidenceLevel(parseFloat(confidence)); |
| const confidenceClass = getConfidenceClass(confidenceLevel); |
| |
| return { |
| syntheticProbability, |
| authenticProbability, |
| hybridProbability, |
| verdict, |
| confidence, |
| domain, |
| isSynthetic, |
| gaugeColor, |
| gaugeDegree, |
| confidenceLevel, |
| confidenceClass |
| }; |
| } |
| |
| |
| function getConfidenceLevel(confidence) { |
| if (confidence >= 70) return 'HIGH'; |
| if (confidence >= 40) return 'MEDIUM'; |
| return 'LOW'; |
| } |
| |
| |
| function getConfidenceClass(confidenceLevel) { |
| const classMap = { |
| 'HIGH': 'confidence-high', |
| 'MEDIUM': 'confidence-medium', |
| 'LOW': 'confidence-low' |
| }; |
| return classMap[confidenceLevel] || 'confidence-low'; |
| } |
| |
| |
| function formatModelName(modelName) { |
| return modelName.replace(/_/g, ' ').replace(/-/g, ' ').toUpperCase(); |
| } |
| |
| |
| function createGaugeSection(syntheticProbability, authenticProbability, hybridProbability, gaugeColor, gaugeDegree) { |
| |
| const synthetic = parseFloat(syntheticProbability); |
| const authentic = parseFloat(authenticProbability); |
| const hybrid = parseFloat(hybridProbability); |
| |
| |
| let maxValue, maxColor, maxLabel; |
| |
| if (synthetic >= authentic && synthetic >= hybrid) { |
| maxValue = synthetic; |
| maxColor = 'var(--danger)'; |
| maxLabel = 'Synthetic Probability'; |
| } else if (authentic >= synthetic && authentic >= hybrid) { |
| maxValue = authentic; |
| maxColor = 'var(--success)'; |
| maxLabel = 'Authentic Probability'; |
| } else { |
| maxValue = hybrid; |
| maxColor = 'var(--primary)'; |
| maxLabel = 'Hybrid Probability'; |
| } |
| |
| console.log('Selected:', { maxValue, maxLabel }); |
| |
| |
| const progressDegree = (maxValue / 100) * 360; |
| |
| return ` |
| <div class="gauge-container"> |
| <div class="single-progress-gauge" style=" |
| background: conic-gradient( |
| ${maxColor} 0deg, |
| ${maxColor} ${progressDegree}deg, |
| rgba(51, 65, 85, 0.3) ${progressDegree}deg, |
| rgba(51, 65, 85, 0.3) 360deg |
| ); |
| "> |
| <div class="gauge-inner"> |
| <div class="gauge-value" style="color: ${maxColor}">${maxValue}%</div> |
| <div class="gauge-label">${maxLabel}</div> |
| </div> |
| </div> |
| </div> |
| <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin: 1.5rem 0;"> |
| <div style="text-align: center; padding: 1rem; background: rgba(239, 68, 68, 0.1); border-radius: 8px; border: 1px solid rgba(239, 68, 68, 0.3);"> |
| <div style="font-size: 0.85rem; color: var(--danger); margin-bottom: 0.25rem; font-weight: 600;">Synthetic</div> |
| <div style="font-size: 1.4rem; font-weight: 700; color: var(--danger);">${syntheticProbability}%</div> |
| </div> |
| <div style="text-align: center; padding: 1rem; background: rgba(16, 185, 129, 0.1); border-radius: 8px; border: 1px solid rgba(16, 185, 129, 0.3);"> |
| <div style="font-size: 0.85rem; color: var(--success); margin-bottom: 0.25rem; font-weight: 600;">Authentic</div> |
| <div style="font-size: 1.4rem; font-weight: 700; color: var(--success);">${authenticProbability}%</div> |
| </div> |
| <div style="text-align: center; padding: 1rem; background: rgba(6, 182, 212, 0.1); border-radius: 8px; border: 1px solid rgba(6, 182, 212, 0.3);"> |
| <div style="font-size: 0.85rem; color: var(--primary); margin-bottom: 0.25rem; font-weight: 600;">Hybrid</div> |
| <div style="font-size: 1.4rem; font-weight: 700; color: var(--primary);">${hybridProbability}%</div> |
| </div> |
| </div> |
| <style> |
| .single-progress-gauge { |
| width: 220px; |
| height: 220px; |
| margin: 0 auto 2rem; |
| position: relative; |
| border-radius: 50%; |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); |
| } |
| |
| .gauge-inner { |
| position: absolute; |
| width: 170px; |
| height: 170px; |
| background: var(--bg-panel); |
| border-radius: 50%; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .gauge-value { |
| font-size: 3rem; |
| font-weight: 800; |
| } |
| |
| .gauge-label { |
| font-size: 0.9rem; |
| color: var(--text-secondary); |
| margin-top: 0.25rem; |
| } |
| </style> |
| `; |
| } |
| |
| |
| |
| function createInfoGrid(verdict, confidence, confidenceClass, domain, hybridProbability) { |
| const hybridContentInfo = hybridProbability > 10 ? |
| `<div style="margin-top: 0.5rem; font-size: 0.85rem; color: var(--primary);"> |
| 🔀 ${hybridProbability}% Hybrid Content Detected |
| </div>` : ''; |
| |
| return ` |
| <div class="result-info-grid"> |
| <div class="info-card"> |
| <div class="info-label">Verdict</div> |
| <div class="info-value verdict-text">${verdict}</div> |
| ${hybridContentInfo} |
| </div> |
| <div class="info-card"> |
| <div class="info-label">Confidence Level</div> |
| <div class="info-value"> |
| <span class="confidence-badge ${confidenceClass}">${confidence}%</span> |
| </div> |
| </div> |
| <div class="info-card"> |
| <div class="info-label">Content Domain</div> |
| <div class="info-value domain-text">${formatDomainName(domain)}</div> |
| </div> |
| </div> |
| `; |
| } |
| |
| |
| function createDownloadActions() { |
| return ` |
| <div class="download-actions"> |
| <button class="download-btn" onclick="downloadReport('json')"> |
| 📄 Download JSON |
| </button> |
| <button class="download-btn" onclick="downloadReport('pdf')"> |
| 📑 Download PDF Report |
| </button> |
| </div> |
| `; |
| } |
| |
| |
| function formatDomainName(domain) { |
| return domain.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' '); |
| } |
| |
| function createEnhancedReasoningHTML(ensemble, analysis, reasoning) { |
| |
| if (reasoning && reasoning.summary) { |
| |
| const bulletPoints = formatSummaryAsBulletPoints(reasoning.summary, ensemble, analysis); |
| |
| const dominantLabel = |
| ensemble.hybrid_probability > ensemble.synthetic_probability && |
| ensemble.hybrid_probability > ensemble.authentic_probability |
| ? 'Hybrid Probability' |
| : ensemble.synthetic_probability > ensemble.authentic_probability |
| ? 'Synthetic Probability' |
| : 'Authentic Probability'; |
| |
| const dominantValue = |
| Math.max( |
| ensemble.synthetic_probability, |
| ensemble.authentic_probability, |
| ensemble.hybrid_probability |
| ); |
| |
| |
| let processedIndicators = []; |
| if (reasoning.key_indicators && reasoning.key_indicators.length > 0) { |
| processedIndicators = reasoning.key_indicators.map(indicator => { |
| let processedIndicator = indicator; |
| |
| |
| processedIndicator = processedIndicator.replace(/*/g, '*') |
| .replace(/*/g, '*'); |
| |
| |
| processedIndicator = processedIndicator.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>') |
| .replace(/\*([^*]+)\*/g, '<strong>$1</strong>'); |
| |
| |
| processedIndicator = processedIndicator.replace(/\*\*/g, '') |
| .replace(/\*(?![^<]*>)/g, ''); |
| |
| |
| processedIndicator = processedIndicator.replace(/_/g, ' '); |
| |
| |
| return processedIndicator; |
| }); |
| } |
| |
| return ` |
| <div class="reasoning-box enhanced"> |
| <div class="reasoning-header"> |
| <div class="reasoning-icon">💡</div> |
| <div class="reasoning-title">Forensic Reasoning</div> |
| <div class="confidence-tag ${ensemble.overall_confidence >= 0.7 ? 'high-confidence' : ensemble.overall_confidence >= 0.4 ? 'medium-confidence' : 'low-confidence'}"> |
| ${ensemble.overall_confidence >= 0.7 ? 'High Confidence' : ensemble.overall_confidence >= 0.4 ? 'Medium Confidence' : 'Low Confidence'} |
| </div> |
| </div> |
| <div class="verdict-summary"> |
| <div class="verdict-text">${ensemble.final_verdict}</div> |
| ${dominantLabel}: |
| <span class="probability-value">${(dominantValue * 100).toFixed(2)}%</span> |
| </div> |
| <div class="reasoning-bullet-points"> |
| ${bulletPoints} |
| </div> |
| ${processedIndicators.length > 0 ? ` |
| <div class="metrics-breakdown"> |
| <div class="breakdown-header" style="text-align: center; font-weight: 700; color: var(--text-secondary); margin-bottom: 1rem;"> |
| KEY INDICATORS |
| </div> |
| ${processedIndicators.map(indicator => { |
| // Split indicator into metric name and sub-metric details |
| const colonIndex = indicator.indexOf(':'); |
| if (colonIndex !== -1) { |
| const metricName = indicator.substring(0, colonIndex).trim(); |
| const metricDetails = indicator.substring(colonIndex + 1).trim(); |
| |
| return ` |
| <div style="margin-bottom: 1rem; text-align: left;"> |
| <div style="font-weight: 700; color: #fff; text-align: center; margin-bottom: 0.5rem; font-size: 1rem;"> |
| ${metricName} |
| </div> |
| <div style="color: var(--text-secondary); font-size: 0.9rem; line-height: 1.4; text-align: left;"> |
| ${metricDetails} |
| </div> |
| </div> |
| `; |
| } else { |
| // If no colon, treat as general indicator |
| return ` |
| <div style="margin-bottom: 1rem; text-align: left;"> |
| <div style="color: var(--text-secondary); font-size: 0.9rem; line-height: 1.4;"> |
| ${indicator} |
| </div> |
| </div> |
| `; |
| } |
| }).join('')} |
| </div> |
| ` : ''} |
| ${ensemble.consensus_level > 0.7 ? ` |
| <div class="agreement-indicator"> |
| <div class="agreement-icon">✓</div> |
| <div class="agreement-text">Strong metric consensus (${(ensemble.consensus_level * 100).toFixed(1)}%)</div> |
| </div> |
| ` : ''} |
| </div> |
| `; |
| } |
| |
| return ` |
| <div class="reasoning-box"> |
| <div class="reasoning-title">💡 Forensic Reasoning</div> |
| <p class="reasoning-text" style="text-align: left;"> |
| Analysis based on a multi-signal forensic ensemble with domain-aware calibration. |
| The system evaluated linguistic, statistical, and semantic evidence patterns |
| to assess content authenticity with ${(ensemble.overall_confidence * 100).toFixed(1)}% confidence. |
| </p> |
| </div> |
| `; |
| } |
| |
| |
| function formatSummaryAsBulletPoints(summary, ensemble, analysis) { |
| let processedSummary = summary; |
| |
| |
| processedSummary = processedSummary.replace(/*/g, '*') |
| .replace(/*/g, '*'); |
| |
| |
| processedSummary = processedSummary.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>') |
| .replace(/\*([^*]+)\*/g, '<strong>$1</strong>'); |
| |
| |
| processedSummary = processedSummary.replace(/\*\*/g, '') |
| .replace(/\*(?![^<]*>)/g, ''); |
| |
| |
| const sentences = processedSummary.split(/\.\s+/); |
| |
| |
| const bulletPoints = []; |
| |
| |
| const confidenceLevel = ensemble.overall_confidence >= 0.7 ? 'High Confidence' : |
| ensemble.overall_confidence >= 0.4 ? 'Medium Confidence' : 'Low Confidence'; |
| bulletPoints.push(`<div class="bullet-point">• ${confidenceLevel}</div>`); |
| |
| |
| bulletPoints.push(`<div class="bullet-point">• ${ensemble.final_verdict}</div>`); |
| |
| |
| bulletPoints.push(`<div class="bullet-point">• Synthetic Probability: ${(ensemble.synthetic_probability * 100).toFixed(2)}%</div>`); |
| |
| |
| sentences.forEach(sentence => { |
| if (sentence.trim() && |
| !sentence.includes('confidence') && |
| !sentence.includes(ensemble.final_verdict) && |
| !sentence.includes('Synthetic probability')) { |
| |
| let cleanSentence = sentence.trim(); |
| if (!cleanSentence.endsWith('.')) { |
| cleanSentence += '.'; |
| } |
| bulletPoints.push(`<div class="bullet-point">• ${cleanSentence}</div>`); |
| } |
| }); |
| |
| return bulletPoints.join(''); |
| } |
| |
| function displayHighlightedText(html) { |
| document.getElementById('highlighted-report').innerHTML = ` |
| ${createDefaultLegend()} |
| <div class="highlighted-text"> |
| ${html} |
| </div> |
| ${getHighlightStyles()} |
| `; |
| } |
| |
| function createDefaultLegend() { |
| return ` |
| <div class="highlight-legend"> |
| <div class="legend-item"> |
| <div class="legend-color" style="background: #dcfce7;"></div> |
| <div class="legend-label">Authentic</div> |
| </div> |
| <div class="legend-item"> |
| <div class="legend-color" style="background: #fef9c3;"></div> |
| <div class="legend-label">Uncertain</div> |
| </div> |
| <div class="legend-item"> |
| <div class="legend-color" style="background: #fee2e2;"></div> |
| <div class="legend-label">Synthetic</div> |
| </div> |
| <div class="legend-item"> |
| <div class="legend-color" style="background: #e9d5ff;"></div> |
| <div class="legend-label">Hybrid</div> |
| </div> |
| </div> |
| `; |
| } |
| |
| function getHighlightStyles() { |
| return ` |
| <style> |
| #highlighted-report .highlight { |
| padding: 2px 4px; |
| margin: 0 1px; |
| border-radius: 3px; |
| cursor: help; |
| transition: all 0.2s; |
| border-bottom: 2px solid transparent; |
| color: #000000 !important; |
| font-weight: 500; |
| } |
| #highlighted-report .highlight:hover { |
| transform: translateY(-1px); |
| box-shadow: 0 4px 12px rgba(0,0,0,0.15); |
| z-index: 10; |
| text-shadow: 0 1px 1px rgba(255,255,255,0.8); |
| } |
| #highlighted-report .very-high-synthetic { |
| background-color: #fee2e2 !important; |
| border-bottom-color: #ef4444 !important; |
| } |
| #highlighted-report .high-synthetic { |
| background-color: #fed7aa !important; |
| border-bottom-color: #f97316 !important; |
| } |
| #highlighted-report .medium-synthetic { |
| background-color: #fef3c7 !important; |
| border-bottom-color: #f59e0b !important; |
| } |
| #highlighted-report .uncertain { |
| background-color: #fef9c3 !important; |
| border-bottom-color: #fbbf24 !important; |
| } |
| #highlighted-report .medium-authentic { |
| background-color: #ecfccb !important; |
| border-bottom-color: #a3e635 !important; |
| } |
| #highlighted-report .high-authentic { |
| background-color: #bbf7d0 !important; |
| border-bottom-color: #4ade80 !important; |
| } |
| #highlighted-report .very-high-authentic { |
| background-color: #dcfce7 !important; |
| border-bottom-color: #22c55e !important; |
| } |
| #highlighted-report .hybrid-content { |
| background-color: #e9d5ff !important; |
| border-bottom-color: #a855f7 !important; |
| background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(168, 85, 247, 0.1) 5px, rgba(168, 85, 247, 0.1) 10px) !important; |
| } |
| </style> |
| `; |
| } |
| |
| function displayMetricsCarousel(metrics, analysis, ensemble) { |
| const metricOrder = ['structural', 'perplexity', 'entropy', 'semantic_analysis', 'linguistic', 'multi_perturbation_stability']; |
| const availableMetrics = metricOrder.filter(key => metrics[key]); |
| totalMetrics = availableMetrics.length; |
| |
| if (totalMetrics === 0) { |
| document.getElementById('metrics-report').innerHTML = ` |
| <div class="empty-state"> |
| <p class="empty-description">No metric details available</p> |
| </div> |
| `; |
| return; |
| } |
| |
| let carouselHTML = ` |
| <div class="metrics-carousel-container"> |
| <div class="metrics-carousel-content"> |
| `; |
| |
| availableMetrics.forEach((metricKey, index) => { |
| const metric = metrics[metricKey]; |
| if (!metric) return; |
| |
| const syntheticProb = (metric.synthetic_probability * 100).toFixed(1); |
| const authenticProb = (metric.authentic_probability * 100).toFixed(1); |
| const hybridProb = (metric.hybrid_probability * 100).toFixed(1); |
| const confidence = (metric.confidence * 100).toFixed(1); |
| const weight = ensemble.metric_contributions && ensemble.metric_contributions[metricKey] ? |
| (ensemble.metric_contributions[metricKey].weight * 100).toFixed(1) : '0.0'; |
| |
| |
| let verdictText, verdictClass; |
| if (metric.hybrid_probability > 0.3) { |
| verdictText = 'Hybrid'; |
| verdictClass = 'verdict-hybrid'; |
| } else if (metric.synthetic_probability >= 0.6) { |
| verdictText = 'Synthetic'; |
| verdictClass = 'verdict-synthetic'; |
| } else if (metric.synthetic_probability >= 0.4) { |
| verdictText = 'Uncertain'; |
| verdictClass = 'verdict-uncertain'; |
| } else { |
| verdictText = 'Authentic'; |
| verdictClass = 'verdict-authentic'; |
| } |
| |
| carouselHTML += ` |
| <div class="metric-slide ${index === 0 ? 'active' : ''}" data-metric-index="${index}"> |
| <div class="metric-result-card"> |
| <div class="metric-header"> |
| <div class="metric-name">${formatMetricName(metricKey)}</div> |
| </div> |
| <div class="metric-description"> |
| ${getMetricDescription(metricKey)} |
| </div> |
| |
| <!-- Probability Display with Hybrid --> |
| <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin: 1rem 0;"> |
| <div style="text-align: center;"> |
| <div style="font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.25rem;">Synthetic</div> |
| <div style="background: rgba(51, 65, 85, 0.5); height: 8px; border-radius: 4px; overflow: hidden;"> |
| <div style="background: var(--danger); height: 100%; width: ${syntheticProb}%; transition: width 0.5s;"></div> |
| </div> |
| <div style="font-size: 0.85rem; font-weight: 600; margin-top: 0.25rem;">${syntheticProb}%</div> |
| </div> |
| <div style="text-align: center;"> |
| <div style="font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.25rem;">Authentic</div> |
| <div style="background: rgba(51, 65, 85, 0.5); height: 8px; border-radius: 4px; overflow: hidden;"> |
| <div style="background: var(--success); height: 100%; width: ${authenticProb}%; transition: width 0.5s;"></div> |
| </div> |
| <div style="font-size: 0.85rem; font-weight: 600; margin-top: 0.25rem;">${authenticProb}%</div> |
| </div> |
| <div style="text-align: center;"> |
| <div style="font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.25rem;">Hybrid</div> |
| <div style="background: rgba(51, 65, 85, 0.5); height: 8px; border-radius: 4px; overflow: hidden;"> |
| <div style="background: var(--primary); height: 100%; width: ${hybridProb}%; transition: width 0.5s;"></div> |
| </div> |
| <div style="font-size: 0.85rem; font-weight: 600; margin-top: 0.25rem;">${hybridProb}%</div> |
| </div> |
| </div> |
| |
| <div style="display: flex; justify-content: space-between; align-items: center; margin: 0.75rem 0;"> |
| <span class="metric-verdict ${verdictClass}">${verdictText}</span> |
| <span style="font-size: 0.85rem; color: var(--text-secondary);">Confidence: ${confidence}% | Weight: ${weight}%</span> |
| </div> |
| |
| ${metric.details && Object.keys(metric.details).length > 0 ? renderMetricDetails(metricKey, metric.details) : '<div style="color: var(--text-muted); font-size: 0.85rem; margin-top: 1rem; text-align: center; padding: 1rem;">No detailed metrics available for this metric</div>'} |
| </div> |
| </div> |
| `; |
| }); |
| |
| carouselHTML += ` |
| </div> |
| <div class="metrics-carousel-nav"> |
| <button class="carousel-btn prev-btn" onclick="navigateMetrics(-1)" ${currentMetricIndex === 0 ? 'disabled' : ''}>← Previous</button> |
| <div class="carousel-position">${currentMetricIndex + 1} / ${totalMetrics}</div> |
| <button class="carousel-btn next-btn" onclick="navigateMetrics(1)" ${currentMetricIndex === totalMetrics - 1 ? 'disabled' : ''}>Next →</button> |
| </div> |
| </div> |
| `; |
| |
| document.getElementById('metrics-report').innerHTML = carouselHTML; |
| updateCarouselButtons(); |
| } |
| |
| function navigateMetrics(direction) { |
| const newMetricIndex = currentMetricIndex + direction; |
| if (newMetricIndex >= 0 && newMetricIndex < totalMetrics) { |
| currentMetricIndex = newMetricIndex; |
| updateMetricCarousel(); |
| } |
| } |
| |
| function updateMetricCarousel() { |
| const slides = document.querySelectorAll('.metric-slide'); |
| slides.forEach((slide, index) => { |
| if (index === currentMetricIndex) { |
| slide.classList.add('active'); |
| } else { |
| slide.classList.remove('active'); |
| } |
| }); |
| updateCarouselButtons(); |
| |
| const positionElement = document.querySelector('.carousel-position'); |
| if (positionElement) { |
| positionElement.textContent = `${currentMetricIndex + 1} / ${totalMetrics}`; |
| } |
| } |
| |
| function updateCarouselButtons() { |
| const prevBtn = document.querySelector('.prev-btn'); |
| const nextBtn = document.querySelector('.next-btn'); |
| if (prevBtn) { |
| prevBtn.disabled = currentMetricIndex === 0; |
| } |
| if (nextBtn) { |
| nextBtn.disabled = currentMetricIndex === totalMetrics - 1; |
| } |
| } |
| |
| function renderMetricDetails(metricName, details) { |
| |
| if (!details || Object.keys(details).length === 0) { |
| return ''; |
| } |
| |
| let detailsHTML = '<div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border);">'; |
| detailsHTML += '<div style="font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.75rem;">📈 Detailed Metrics:</div>'; |
| detailsHTML += '<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; font-size: 0.85rem;">'; |
| |
| |
| Object.keys(details).forEach(key => { |
| if (details[key] !== undefined && details[key] !== null) { |
| let value = details[key]; |
| let displayValue; |
| |
| |
| if (typeof value === 'number') { |
| |
| if (value >= 0 && value <= 1 && !Number.isInteger(value)) { |
| |
| displayValue = (value * 100).toFixed(2) + '%'; |
| } else if (Number.isInteger(value)) { |
| |
| displayValue = value; |
| } else { |
| |
| displayValue = value.toFixed(2); |
| } |
| } else if (typeof value === 'boolean') { |
| displayValue = value ? 'Yes' : 'No'; |
| } else { |
| displayValue = String(value); |
| } |
| |
| |
| const label = key |
| .replace(/_/g, ' ') |
| .replace(/\b\w/g, c => c.toUpperCase()); |
| |
| detailsHTML += ` |
| <div style="background: rgba(15, 23, 42, 0.6); padding: 0.5rem; border-radius: 6px;"> |
| <div style="color: var(--text-muted); font-size: 0.75rem; margin-bottom: 0.25rem;">${label}</div> |
| <div style="color: var(--primary); font-weight: 700;">${displayValue}</div> |
| </div> |
| `; |
| } |
| }); |
| |
| detailsHTML += '</div></div>'; |
| return detailsHTML; |
| } |
| |
| function getMetricDescription(metricName) { |
| const descriptions = { |
| structural: 'Analyzes sentence structure, length patterns, and statistical features.', |
| perplexity: 'Measures text predictability using language model cross-entropy.', |
| entropy: 'Evaluates token diversity and sequence unpredictability.', |
| semantic_analysis: 'Examines semantic coherence, topic consistency, and logical flow.', |
| linguistic: 'Assesses grammatical patterns, syntactic complexity, and style markers.', |
| multi_perturbation_stability: 'Tests text stability under perturbation using curvature analysis.' |
| }; |
| return descriptions[metricName] || 'Metric analysis complete.'; |
| } |
| |
| function formatMetricName(name) { |
| const names = { |
| structural: 'Structural Analysis', |
| perplexity: 'Perplexity', |
| entropy: 'Entropy', |
| semantic_analysis: 'Semantic Analysis', |
| linguistic: 'Linguistic Analysis', |
| multi_perturbation_stability: 'Multi-Perturbation Stability' |
| }; |
| return names[name] || name.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' '); |
| } |
| |
| async function downloadReport(format) { |
| if (!currentAnalysisData) { |
| alert('No analysis data available'); |
| return; |
| } |
| |
| try { |
| const analysisId = currentAnalysisData.analysis_id; |
| const timestamp = new Date().toISOString().replace(/[:.]/g, '-'); |
| |
| |
| if (format === 'json') { |
| const data = { |
| ...currentAnalysisData, |
| download_timestamp: new Date().toISOString(), |
| report_version: '2.0.0' |
| }; |
| const blob = new Blob([JSON.stringify(data, null, 2)], { |
| type: 'application/json' |
| }); |
| const filename = `text-forensics-report-${analysisId}-${timestamp}.json`; |
| await downloadBlob(blob, filename); |
| return; |
| } |
| |
| |
| const activeTab = document.querySelector('.input-tab.active').dataset.tab; |
| let textToSend = ''; |
| if (activeTab === 'paste') { |
| textToSend = document.getElementById('text-input').value; |
| } else { |
| textToSend = currentAnalysisData.detection_result?.processed_text?.text || |
| 'Uploaded file content - see analysis for details'; |
| } |
| |
| |
| const formData = new FormData(); |
| formData.append('analysis_id', analysisId); |
| formData.append('text', textToSend); |
| formData.append('formats', format); |
| formData.append('include_highlights', document.getElementById('enable-highlighting').checked.toString()); |
| |
| const response = await fetch(`${API_BASE}/api/report/generate`, { |
| method: 'POST', |
| body: formData |
| }); |
| |
| if (!response.ok) { |
| throw new Error('Report generation failed'); |
| } |
| |
| const result = await response.json(); |
| if (result.reports && result.reports[format]) { |
| const filename = result.reports[format]; |
| const downloadResponse = await fetch(`${API_BASE}/api/report/download/${filename}`); |
| if (!downloadResponse.ok) { |
| throw new Error('Failed to download file'); |
| } |
| const blob = await downloadResponse.blob(); |
| const downloadFilename = `text-forensics-report-${format}-report-${analysisId}-${timestamp}.${format}`; |
| await downloadBlob(blob, downloadFilename); |
| } else { |
| alert('Report file not available'); |
| } |
| } catch (error) { |
| console.error('Download error:', error); |
| alert('Failed to download report. Please try again.'); |
| } |
| } |
| |
| async function downloadBlob(blob, filename) { |
| try { |
| const url = URL.createObjectURL(blob); |
| const a = document.createElement('a'); |
| a.href = url; |
| a.download = filename; |
| a.style.display = 'none'; |
| document.body.appendChild(a); |
| a.click(); |
| setTimeout(() => { |
| document.body.removeChild(a); |
| URL.revokeObjectURL(url); |
| showDownloadSuccess(filename); |
| }, 100); |
| } catch (error) { |
| console.error('Download failed:', error); |
| alert('Download failed. Please try again.'); |
| } |
| } |
| |
| function showDownloadSuccess(filename) { |
| const notification = document.createElement('div'); |
| notification.style.cssText = ` |
| position: fixed; |
| top: 20px; |
| right: 20px; |
| background: var(--success); |
| color: white; |
| padding: 1rem 1.5rem; |
| border-radius: 8px; |
| font-weight: 600; |
| box-shadow: 0 4px 12px rgba(0,0,0,0.3); |
| z-index: 10000; |
| animation: slideIn 0.3s ease; |
| `; |
| notification.innerHTML = ` |
| <div style="display: flex; align-items: center; gap: 0.5rem;"> |
| <span>✓</span> |
| <span>Downloaded: ${filename}</span> |
| </div> |
| `; |
| document.body.appendChild(notification); |
| |
| if (!document.querySelector('#download-animation')) { |
| const style = document.createElement('style'); |
| style.id = 'download-animation'; |
| style.textContent = ` |
| @keyframes slideIn { |
| from { transform: translateX(100%); opacity: 0; } |
| to { transform: translateX(0); opacity: 1; } |
| } |
| `; |
| document.head.appendChild(style); |
| } |
| |
| setTimeout(() => { |
| if (notification.parentNode) { |
| notification.parentNode.removeChild(notification); |
| } |
| }, 3000); |
| } |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| const href = this.getAttribute('href'); |
| if (href !== '#') { |
| e.preventDefault(); |
| const target = document.querySelector(href); |
| if (target) { |
| target.scrollIntoView({ behavior: 'smooth', block: 'start' }); |
| } |
| } |
| }); |
| }); |
| |
| |
| showLanding(); |
| </script> |
| </body> |
| </html> |
