Spaces:

VIDraft
/

TeXray-backup

Sleeping

App Files Files Community

seawolf2357 commited on Mar 1

Commit

3037806

verified ·

1 Parent(s): 82f37e9

Create index.html

Browse files

Files changed (1) hide show

index.html +709 -0

index.html ADDED Viewed

	@@ -0,0 +1,709 @@

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title> TeXray </title>
+<link href="https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
+<style>
+/* ═══════════════════════════════════════════════════════════════
+   TeXray — Premium Dark Glassmorphism
+   ═══════════════════════════════════════════════════════════════ */
+*{margin:0;padding:0;box-sizing:border-box;}
+:root{
+    --bg-deep:#03030a;
+    --bg:#07071a;
+    --surface:rgba(14,14,38,0.65);
+    --surface-solid:#0c0c24;
+    --glass:rgba(18,18,50,0.45);
+    --glass2:rgba(24,24,60,0.55);
+    --glass-border:rgba(80,80,160,0.12);
+    --glass-border-hover:rgba(120,120,200,0.22);
+    --card-glow:rgba(100,80,220,0.06);
+    --text:#e8e8f4;
+    --text-dim:#9898c0;
+    --text-muted:#5a5a88;
+    --accent:#8b7aff;
+    --accent-bright:#a594ff;
+    --accent-glow:rgba(139,122,255,0.15);
+    --accent-glow2:rgba(139,122,255,0.08);
+    --teal:#3dd6c8;
+    --teal-glow:rgba(61,214,200,0.12);
+    --rose:#ff6b8a;
+    --rose-glow:rgba(255,107,138,0.12);
+    --amber:#ffb347;
+    --amber-glow:rgba(255,179,71,0.12);
+    --sky:#54b5ff;
+    --radius:16px;
+    --radius-sm:10px;
+    --radius-xs:6px;
+    --font-display:'Sora','Noto Sans KR',sans-serif;
+    --font-body:'Noto Sans KR','Sora',sans-serif;
+    --font-mono:'JetBrains Mono',monospace;
+    --transition:0.3s cubic-bezier(0.4,0,0.2,1);
+}
+html{scroll-behavior:smooth;}
+body{
+    font-family:var(--font-body);
+    background:var(--bg-deep);
+    color:var(--text);
+    min-height:100vh;
+    overflow-x:hidden;
+    -webkit-font-smoothing:antialiased;
+}
+::-webkit-scrollbar{width:6px;}
+::-webkit-scrollbar-track{background:transparent;}
+::-webkit-scrollbar-thumb{background:rgba(139,122,255,0.25);border-radius:10px;}
+::-webkit-scrollbar-thumb:hover{background:rgba(139,122,255,0.4);}
+::selection{background:rgba(139,122,255,0.3);color:#fff;}
+/* ═══ CANVAS BACKGROUND ═══ */
+#mesh-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0.5;}
+.noise-overlay{
+    position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0.025;
+    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+    background-size:128px;
+}
+.vignette{
+    position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;
+    background:radial-gradient(ellipse 70% 60% at 50% 50%,transparent 0%,var(--bg-deep) 100%);
+}
+/* ═══ LAYOUT ═══ */
+.app-wrapper{
+    position:relative;z-index:2;
+    display:flex;flex-direction:column;
+    min-height:100vh;
+    max-width:900px;
+    margin:0 auto;
+    padding:32px 24px 48px;
+}
+/* ═══ HEADER ═══ */
+.header{text-align:center;padding:48px 0 36px;animation:headerIn 1s ease-out;}
+@keyframes headerIn{from{opacity:0;transform:translateY(-24px);}to{opacity:1;transform:translateY(0);}}
+.header-eyebrow{
+    font-family:var(--font-mono);font-size:11px;font-weight:500;
+    letter-spacing:5px;text-transform:uppercase;
+    color:var(--accent);margin-bottom:12px;opacity:0.7;
+}
+.header-title{
+    font-family:var(--font-display);font-size:52px;font-weight:800;
+    line-height:1.15;letter-spacing:-1.5px;margin-bottom:14px;
+    position:relative;display:inline-block;
+}
+.header-title .gradient-text{
+    background:linear-gradient(135deg,#a594ff 0%,#54b5ff 35%,#3dd6c8 65%,#a594ff 100%);
+    background-size:200% 200%;
+    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
+    animation:shimmer 6s ease-in-out infinite;
+}
+@keyframes shimmer{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
+.header-subtitle{
+    font-size:14.5px;color:var(--text-dim);line-height:1.7;letter-spacing:0.2px;
+    max-width:520px;margin:0 auto 20px;
+}
+.header-subtitle b{color:var(--text);font-weight:600;}
+.pill-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;animation:fadeUp 1s 0.3s ease-out both;}
+@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
+.pill{
+    padding:5px 14px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
+    border:1px solid var(--glass-border);border-radius:24px;
+    font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--text-muted);
+    transition:var(--transition);
+}
+.pill:hover{border-color:var(--glass-border-hover);color:var(--text-dim);}
+/* ═══ NAV TABS ═══ */
+.nav{
+    display:flex;gap:4px;
+    background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
+    border:1px solid var(--glass-border);border-radius:14px;padding:4px;
+    margin-bottom:28px;position:sticky;top:12px;z-index:100;
+    animation:fadeUp 1s 0.4s ease-out both;
+}
+.nav-item{
+    flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
+    padding:13px 8px;border-radius:var(--radius-sm);cursor:pointer;
+    font-size:13px;font-weight:600;color:var(--text-muted);
+    transition:var(--transition);position:relative;user-select:none;
+}
+.nav-item:hover{color:var(--text-dim);background:rgba(139,122,255,0.06);}
+.nav-item.active{
+    color:#fff;
+    background:linear-gradient(135deg,rgba(139,122,255,0.9),rgba(100,80,220,0.95));
+    box-shadow:0 4px 20px rgba(139,122,255,0.3),inset 0 1px 0 rgba(255,255,255,0.12);
+}
+.nav-icon{font-size:15px;}
+/* ═══ PANELS ═══ */
+.panel{display:none;animation:panelReveal 0.45s ease-out;}
+.panel.active{display:block;}
+@keyframes panelReveal{from{opacity:0;transform:translateY(16px) scale(0.995);}to{opacity:1;transform:translateY(0) scale(1);}}
+/* ═══ GLASS CARD ═══ */
+.card{
+    background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
+    border:1px solid var(--glass-border);border-radius:var(--radius);
+    padding:28px;margin-bottom:20px;position:relative;overflow:hidden;
+    transition:border-color 0.4s,box-shadow 0.4s;
+}
+.card::before{
+    content:'';position:absolute;top:0;left:0;right:0;height:1px;
+    background:linear-gradient(90deg,transparent,rgba(139,122,255,0.2),transparent);
+    opacity:0;transition:opacity 0.4s;
+}
+.card:hover{border-color:var(--glass-border-hover);box-shadow:0 8px 40px var(--card-glow);}
+.card:hover::before{opacity:1;}
+.card-header{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
+.card-icon{
+    width:38px;height:38px;border-radius:var(--radius-sm);
+    display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
+}
+.card-icon.purple{background:var(--accent-glow);border:1px solid rgba(139,122,255,0.2);}
+.card-icon.teal{background:var(--teal-glow);border:1px solid rgba(61,214,200,0.2);}
+.card-icon.rose{background:var(--rose-glow);border:1px solid rgba(255,107,138,0.2);}
+.card-icon.amber{background:var(--amber-glow);border:1px solid rgba(255,179,71,0.2);}
+.card-title{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-0.3px;}
+.card-desc{
+    font-size:12.5px;color:var(--text-muted);line-height:1.65;
+    margin-bottom:18px;padding-left:50px;
+}
+/* ═══ TEXTAREA ═══ */
+.input-group{margin-bottom:18px;}
+.textarea-wrap{position:relative;}
+textarea{
+    width:100%;min-height:200px;padding:18px 20px 32px;
+    background:rgba(8,8,28,0.6);border:1px solid var(--glass-border);
+    border-radius:var(--radius-sm);color:var(--text);
+    font-family:var(--font-body);font-size:14px;line-height:1.8;
+    resize:vertical;outline:none;
+    transition:border-color 0.35s,box-shadow 0.35s;
+}
+textarea:focus{
+    border-color:rgba(139,122,255,0.4);
+    box-shadow:0 0 0 3px var(--accent-glow),0 4px 20px rgba(0,0,0,0.3);
+}
+textarea::placeholder{color:var(--text-muted);font-size:13px;}
+.char-counter{
+    position:absolute;bottom:10px;right:16px;
+    font-family:var(--font-mono);font-size:10px;color:var(--text-muted);
+    background:rgba(8,8,28,0.7);padding:2px 8px;border-radius:4px;pointer-events:none;
+}
+/* ═══ BUTTONS ═══ */
+.btn-group{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
+.btn{
+    padding:11px 22px;border:none;border-radius:var(--radius-sm);cursor:pointer;
+    font-family:var(--font-body);font-weight:600;font-size:13px;
+    transition:all 0.25s cubic-bezier(0.4,0,0.2,1);
+    position:relative;overflow:hidden;letter-spacing:0.2px;
+}
+.btn-primary{
+    background:linear-gradient(135deg,var(--accent),#6854e0);color:#fff;
+    box-shadow:0 4px 20px rgba(139,122,255,0.25),inset 0 1px 0 rgba(255,255,255,0.1);
+}
+.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(139,122,255,0.35),inset 0 1px 0 rgba(255,255,255,0.15);}
+.btn-primary:active{transform:translateY(0);box-shadow:0 2px 12px rgba(139,122,255,0.2);}
+.btn-primary:disabled{opacity:0.45;cursor:not-allowed;transform:none!important;}
+.btn-primary::after{
+    content:'';position:absolute;inset:0;
+    background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,0.25) 0%,transparent 60%);
+    opacity:0;transition:opacity 0.5s;
+}
+.btn-primary:active::after{opacity:1;transition:none;}
+.btn-ghost{
+    padding:9px 16px;background:rgba(255,255,255,0.03);color:var(--text-muted);
+    border:1px solid var(--glass-border);font-size:12px;border-radius:var(--radius-xs);
+}
+.btn-ghost:hover{background:rgba(139,122,255,0.08);color:var(--text-dim);border-color:var(--glass-border-hover);}
+/* ═══ LOADING ═══ */
+.loader{display:none;text-align:center;padding:48px 24px;}
+.loader.active{display:block;}
+.loader-ring{
+    width:44px;height:44px;
+    border:3px solid rgba(139,122,255,0.1);border-top-color:var(--accent);
+    border-radius:50%;animation:ring-spin 0.9s linear infinite;
+    margin:0 auto 16px;position:relative;
+}
+.loader-ring::after{
+    content:'';position:absolute;inset:4px;
+    border:2px solid transparent;border-top-color:var(--teal);
+    border-radius:50%;animation:ring-spin 1.4s linear infinite reverse;
+}
+@keyframes ring-spin{to{transform:rotate(360deg);}}
+.loader-text{font-size:13px;color:var(--text-dim);animation:breathe 2s ease-in-out infinite;}
+.loader-dots{display:inline-flex;gap:4px;margin-top:8px;}
+.loader-dots span{
+    width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:0.3;
+    animation:dotPulse 1.2s ease-in-out infinite;
+}
+.loader-dots span:nth-child(2){animation-delay:0.15s;}
+.loader-dots span:nth-child(3){animation-delay:0.3s;}
+@keyframes dotPulse{0%,100%{opacity:0.2;transform:scale(0.8);}50%{opacity:1;transform:scale(1.2);}}
+@keyframes breathe{0%,100%{opacity:1;}50%{opacity:0.5;}}
+/* ═══ RESULT ═══ */
+.result-html{border-radius:var(--radius);overflow:hidden;margin-top:16px;animation:resultIn 0.5s ease-out;}
+.result-html:empty{display:none;}
+@keyframes resultIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
+.log-box{
+    background:rgba(8,8,28,0.7);border:1px solid var(--glass-border);
+    border-radius:var(--radius-xs);padding:14px 18px;
+    font-family:var(--font-mono);font-size:11px;color:var(--text-muted);
+    line-height:1.7;white-space:pre-wrap;margin-top:10px;backdrop-filter:blur(8px);
+}
+.log-box:empty{display:none;}
+/* ═══ HUMANIZER RESULT ═══ */
+.result-card{
+    background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
+    border:1px solid rgba(61,214,200,0.2);border-radius:var(--radius);
+    padding:24px;position:relative;overflow:hidden;
+}
+.result-card::before{
+    content:'';position:absolute;top:0;left:0;right:0;height:2px;
+    background:linear-gradient(90deg,var(--teal),var(--accent),var(--teal));
+}
+.result-card-title{
+    display:flex;align-items:center;gap:8px;
+    font-family:var(--font-display);font-size:15px;font-weight:700;
+    color:var(--teal);margin-bottom:14px;
+}
+.converted-text{
+    background:rgba(8,8,28,0.5);border:1px solid var(--glass-border);
+    border-radius:var(--radius-sm);padding:18px 20px;
+    font-size:14px;line-height:1.9;position:relative;
+    white-space:pre-wrap;min-height:60px;color:var(--text);
+}
+.copy-btn{
+    position:absolute;top:10px;right:10px;
+    background:var(--glass2);backdrop-filter:blur(10px);
+    border:1px solid var(--glass-border);color:var(--text-muted);
+    padding:5px 12px;border-radius:var(--radius-xs);cursor:pointer;
+    font-family:var(--font-mono);font-size:10px;font-weight:600;
+    transition:all 0.25s;letter-spacing:0.5px;text-transform:uppercase;
+}
+.copy-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
+.copy-btn.copied{background:var(--teal);color:#fff;border-color:var(--teal);}
+/* ═══ FOOTER ═══ */
+.footer{
+    text-align:center;margin-top:56px;padding:28px 0;
+    border-top:1px solid var(--glass-border);
+    animation:fadeUp 1s 0.6s ease-out both;
+}
+.footer-brand{font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--text-muted);letter-spacing:0.5px;margin-bottom:6px;}
+.footer-tech{font-family:var(--font-mono);font-size:10px;color:rgba(90,90,136,0.6);letter-spacing:1px;}
+.footer-line{
+    width:40px;height:2px;
+    background:linear-gradient(90deg,transparent,var(--accent-glow2),var(--accent),var(--accent-glow2),transparent);
+    margin:12px auto;border-radius:2px;
+}
+/* ═══ RESULTS TABLE OVERRIDE ═══ */
+.result-html table{border-collapse:collapse;width:100%;}
+.result-html td,.result-html th{padding:8px 12px;border:1px solid var(--glass-border);}
+.result-html th{background:rgba(139,122,255,0.08);}
+/* ═══ STATUS DOT ═══ */
+.status-dot{
+    width:6px;height:6px;border-radius:50%;background:var(--teal);
+    display:inline-block;animation:statusPulse 2s ease-in-out infinite;margin-right:4px;
+}
+@keyframes statusPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(61,214,200,0.4);}50%{opacity:0.7;box-shadow:0 0 0 4px rgba(61,214,200,0);}}
+/* ═══ FILE UPLOAD ═══ */
+.file-drop{
+    border:2px dashed var(--glass-border);border-radius:var(--radius);
+    padding:32px;text-align:center;cursor:pointer;transition:all 0.3s;
+    background:rgba(8,8,28,0.4);position:relative;
+}
+.file-drop:hover,.file-drop.dragover{
+    border-color:var(--accent);background:var(--accent-glow);
+}
+.file-drop-icon{font-size:32px;margin-bottom:8px;}
+.file-drop-text{font-size:13px;color:var(--text-muted);}
+.file-drop-hint{font-size:10px;color:var(--text-muted);margin-top:6px;opacity:0.6;}
+.file-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;}
+.file-info{display:none;padding:12px 16px;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-sm);margin-top:10px;font-size:12px;color:var(--text-dim);}
+.file-info.active{display:flex;align-items:center;gap:10px;}
+.file-info-name{font-weight:600;color:var(--text);}
+.file-info-size{color:var(--text-muted);font-family:var(--font-mono);font-size:10px;}
+.file-remove{cursor:pointer;color:var(--rose);font-size:14px;margin-left:auto;}
+/* ═══ RESPONSIVE ═══ */
+@media(max-width:640px){
+    .app-wrapper{padding:16px 12px 32px;}
+    .header{padding:32px 0 24px;}
+    .header-title{font-size:32px;letter-spacing:-0.5px;}
+    .header-subtitle{font-size:13px;}
+    .nav{flex-wrap:wrap;position:static;}
+    .nav-item{font-size:11px;padding:10px 6px;}
+    .nav-icon{font-size:13px;}
+    .card{padding:20px 16px;}
+    .card-desc{padding-left:0;margin-top:8px;}
+    textarea{min-height:160px;font-size:13px;padding:14px 16px 28px;}
+    .btn{padding:10px 16px;font-size:12px;}
+    .btn-group{gap:6px;}
+}
+</style>
+</head>
+<body>
+<!-- Background -->
+<canvas id="mesh-canvas"></canvas>
+<div class="noise-overlay"></div>
+<div class="vignette"></div>
+<div class="app-wrapper">
+    <!-- Header -->
+    <header class="header">
+        <div class="header-eyebrow">AI Text Detector</div>
+        <h1 class="header-title"><span class="gradient-text">TeXray</span></h1>
+        <p class="header-subtitle">
+            <b>5축 앙상블 탐지</b> · <b>품질 측정</b> · <b>LLM 교차검증</b> · <b>Adversarial Humanizer</b> · <b>표절 검사</b> · <b>문서 분석</b>
+        </p>
+        <div class="pill-row">
+            <span class="pill">GPT-OSS 120B</span>
+            <span class="pill">Qwen3 32B</span>
+            <span class="pill">Kimi-K2</span>
+            <span class="pill">Brave + KCI + arXiv</span>
+            <span class="pill">PDF·DOCX·HWP</span>
+            <span class="pill"><span class="status-dot"></span>v4.0</span>
+        </div>
+    </header>
+    <!-- Nav -->
+    <nav class="nav">
+        <div class="nav-item active" data-tab="detect" onclick="switchTab('detect')"><span class="nav-icon">🔍</span><span>AI 분석</span></div>
+        <div class="nav-item" data-tab="highlight" onclick="switchTab('highlight')"><span class="nav-icon">🎨</span><span>하이라이트</span></div>
+        <div class="nav-item" data-tab="humanize" onclick="switchTab('humanize')"><span class="nav-icon">⚔️</span><span>AI→인간</span></div>
+        <div class="nav-item" data-tab="plagiarism" onclick="switchTab('plagiarism')"><span class="nav-icon">📋</span><span>표절</span></div>
+        <div class="nav-item" data-tab="document" onclick="switchTab('document')"><span class="nav-icon">📄</span><span>문서</span></div>
+    </nav>
+    <!-- Panel 1 -->
+    <div class="panel active" id="panel-detect">
+        <div class="card">
+            <div class="card-header"><div class="card-icon purple">📄</div><div class="card-title">AI 텍스트 분석</div></div>
+            <div class="card-desc">5축 앙상블(통계·문체·반복·구조·지문) + 6항목 품질 측정 + LLM 3모델 교차검증으로 정밀 판별합니다.</div>
+            <div class="input-group"><div class="textarea-wrap">
+                <textarea id="input-detect" placeholder="AI 판별할 텍스트를 입력하세요 (최소 50자)" oninput="uc('input-detect','count-detect')"></textarea>
+                <div class="char-counter" id="count-detect">0자</div>
+            </div></div>
+            <div class="btn-group">
+                <button class="btn btn-primary" id="btn-detect" onclick="runDetect()">🚀 AI 판별 + 품질 분석</button>
+                <button class="btn btn-ghost" onclick="ls('input-detect','ai')">📝 AI 예시</button>
+                <button class="btn btn-ghost" onclick="ls('input-detect','human')">✍️ 인간 예시</button>
+            </div>
+        </div>
+        <div class="loader" id="loader-detect"><div class="loader-ring"></div><div class="loader-text">5축 분석 + LLM 교차검증 중</div><div class="loader-dots"><span></span><span></span><span></span></div></div>
+        <div class="result-html" id="result-detect"></div><div class="log-box" id="log-detect"></div>
+    </div>
+    <!-- Panel 2 -->
+    <div class="panel" id="panel-highlight">
+        <div class="card">
+            <div class="card-header"><div class="card-icon teal">🎨</div><div class="card-title">문장별 하이라이트</div></div>
+            <div class="card-desc">탭1과 동일한 기준으로 문장별 AI 확률을 색상으로 표시합니다. 마우스 오버 시 판정 근거를 확인하세요.</div>
+            <div class="input-group"><div class="textarea-wrap">
+                <textarea id="input-highlight" placeholder="문장별 AI 확률 색상 표시 (최소 30자)" oninput="uc('input-highlight','count-highlight')"></textarea>
+                <div class="char-counter" id="count-highlight">0자</div>
+            </div></div>
+            <div class="btn-group">
+                <button class="btn btn-primary" id="btn-highlight" onclick="runHighlight()">🎨 하이라이트 분석</button>
+                <button class="btn btn-ghost" onclick="ls('input-highlight','ai')">📝 AI 예시</button>
+            </div>
+        </div>
+        <div class="loader" id="loader-highlight"><div class="loader-ring"></div><div class="loader-text">문장 분석 중</div><div class="loader-dots"><span></span><span></span><span></span></div></div>
+        <div class="result-html" id="result-highlight"></div>
+    </div>
+    <!-- Panel 3 -->
+    <div class="panel" id="panel-humanize">
+        <div class="card">
+            <div class="card-header"><div class="card-icon rose">⚔️</div><div class="card-title">Adversarial Humanizer v2</div></div>
+            <div class="card-desc">탐지기 vs 변환기 자기대전 루프. 최대 3라운드 반복 최적화 — 규칙/LLM/LLM+규칙 매 라운드 경쟁.</div>
+            <div class="input-group"><div class="textarea-wrap">
+                <textarea id="input-humanize" placeholder="AI가 작성한 텍스트를 입력하세요 (최소 50자)" oninput="uc('input-humanize','count-humanize')"></textarea>
+                <div class="char-counter" id="count-humanize">0자</div>
+            </div></div>
+            <div class="btn-group">
+                <button class="btn btn-primary" id="btn-humanize" onclick="runHumanize()">⚔️ 적대적 변환 + 검증</button>
+                <button class="btn btn-ghost" onclick="ls('input-humanize','ai')">📝 AI 예시</button>
+            </div>
+        </div>
+        <div class="loader" id="loader-humanize"><div class="loader-ring"></div><div class="loader-text">규칙 → LLM → 3-way 비교 → 검증</div><div class="loader-dots"><span></span><span></span><span></span></div></div>
+        <div id="result-humanize-area" style="display:none;">
+            <div class="result-card">
+                <div class="result-card-title">✅ 변환 완료</div>
+                <div class="converted-text" id="result-humanize-text"><button class="copy-btn" onclick="copyText()">COPY</button></div>
+            </div>
+            <div class="log-box" id="result-humanize-log"></div>
+            <div class="result-html" id="result-humanize-compare"></div>
+        </div>
+    </div>
+    <!-- Panel 4 -->
+    <div class="panel" id="panel-plagiarism">
+        <div class="card">
+            <div class="card-header"><div class="card-icon amber">📋</div><div class="card-title">표절 검사</div></div>
+            <div class="card-desc">Brave Search 병렬(최대 20) + KCI · RISS · arXiv 학술DB + Gemini Google Search 통합 검사. API 키 없이도 자체 크롤링으로 작동합니다.</div>
+            <div class="input-group"><div class="textarea-wrap">
+                <textarea id="input-plagiarism" placeholder="표절 검사할 텍스트를 입력하세요 (최소 50자)" oninput="uc('input-plagiarism','count-plagiarism')"></textarea>
+                <div class="char-counter" id="count-plagiarism">0자</div>
+            </div></div>
+            <div class="btn-group">
+                <button class="btn btn-primary" id="btn-plagiarism" onclick="runPlagiarism()">📋 표절 검사 시작</button>
+                <button class="btn btn-ghost" onclick="ls('input-plagiarism','ai')">📝 AI 예시</button>
+            </div>
+        </div>
+        <div class="loader" id="loader-plagiarism"><div class="loader-ring"></div><div class="loader-text">웹검색 + 학술DB + 보고서 생성</div><div class="loader-dots"><span></span><span></span><span></span></div></div>
+        <div id="result-plagiarism-area" style="display:none;">
+            <div class="result-html" id="result-plagiarism"></div>
+            <div class="log-box" id="result-plagiarism-log"></div>
+        </div>
+    </div>
+    <!-- Panel 5: Document Analysis -->
+    <div class="panel" id="panel-document">
+        <div class="card">
+            <div class="card-header"><div class="card-icon" style="background:rgba(84,181,255,0.12);border:1px solid rgba(84,181,255,0.2);">📄</div><div class="card-title">문서 AI 분석</div></div>
+            <div class="card-desc">PDF · DOCX · HWP · HWPX · TXT 문서를 업로드하면 섹션별 AI 탐지 히트맵 보고서를 생성합니다.</div>
+            <div class="file-drop" id="file-drop" onclick="document.getElementById('file-input').click()">
+                <input type="file" id="file-input" accept=".pdf,.docx,.hwp,.hwpx,.txt,.md,.csv" onchange="handleFile(this)">
+                <div class="file-drop-icon">📂</div>
+                <div class="file-drop-text">클릭하거나 파일을 드래그하세요</div>
+                <div class="file-drop-hint">PDF · DOCX · HWP · HWPX · TXT · MD · CSV</div>
+            </div>
+            <div class="file-info" id="file-info">
+                <span>📎</span>
+                <span class="file-info-name" id="file-name"></span>
+                <span class="file-info-size" id="file-size"></span>
+                <span class="file-remove" onclick="clearFile()">✕</span>
+            </div>
+            <div style="margin-top:14px;">
+                <button class="btn btn-primary" id="btn-document" onclick="runDocument()">📄 문서 AI 분석</button>
+            </div>
+        </div>
+        <div class="loader" id="loader-document"><div class="loader-ring"></div><div class="loader-text">문서 추출 + 섹션별 분석 중</div><div class="loader-dots"><span></span><span></span><span></span></div></div>
+        <div id="result-document-area" style="display:none;">
+            <div class="result-html" id="result-document"></div>
+            <div class="log-box" id="result-document-log"></div>
+        </div>
+    </div>
+    <footer class="footer">
+        <div class="footer-brand">TeXray</div>
+        <div class="footer-line"></div>
+        <div class="footer-tech">KIWI · GROQ · BRAVE · KCI · RISS · ARXIV · GEMINI</div>
+    </footer>
+</div>
+<script>
+/* ═══ MESH GRADIENT CANVAS (WebGL) ═══ */
+(function(){
+    const c=document.getElementById('mesh-canvas');
+    const gl=c.getContext('webgl')||c.getContext('experimental-webgl');
+    if(!gl){
+        c.style.background='radial-gradient(ellipse at 20% 20%,rgba(139,122,255,0.08),transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(61,214,200,0.06),transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(255,107,138,0.04),transparent 40%)';
+        return;
+    }
+    function resize(){c.width=window.innerWidth;c.height=window.innerHeight;gl.viewport(0,0,c.width,c.height);}
+    resize();window.addEventListener('resize',resize);
+    const vs=`attribute vec2 p;void main(){gl_Position=vec4(p,0,1);}`;
+    const fs=`
+    precision mediump float;
+    uniform float t;
+    uniform vec2 r;
+    void main(){
+        vec2 u=gl_FragCoord.xy/r;
+        float n=sin(u.x*3.+t*0.3)*cos(u.y*2.5+t*0.2)*0.5+0.5;
+        float n2=cos(u.x*2.-t*0.15)*sin(u.y*3.5+t*0.25)*0.5+0.5;
+        float n3=sin((u.x+u.y)*2.+t*0.18)*0.5+0.5;
+        vec3 c1=vec3(0.545,0.478,1.0)*n*0.12;
+        vec3 c2=vec3(0.24,0.84,0.78)*n2*0.08;
+        vec3 c3=vec3(1.0,0.42,0.54)*n3*0.05;
+        float v=smoothstep(0.0,0.3,u.y)*smoothstep(1.0,0.7,u.y);
+        gl_FragColor=vec4((c1+c2+c3)*v,1.0);
+    }`;
+    function compile(src,type){const s=gl.createShader(type);gl.shaderSource(s,src);gl.compileShader(s);return s;}
+    const prog=gl.createProgram();
+    gl.attachShader(prog,compile(vs,gl.VERTEX_SHADER));
+    gl.attachShader(prog,compile(fs,gl.FRAGMENT_SHADER));
+    gl.linkProgram(prog);gl.useProgram(prog);
+    const buf=gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER,buf);
+    gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),gl.STATIC_DRAW);
+    const pLoc=gl.getAttribLocation(prog,'p');
+    gl.enableVertexAttribArray(pLoc);
+    gl.vertexAttribPointer(pLoc,2,gl.FLOAT,false,0,0);
+    const tLoc=gl.getUniformLocation(prog,'t');
+    const rLoc=gl.getUniformLocation(prog,'r');
+    let start=performance.now();
+    function frame(){
+        const elapsed=(performance.now()-start)/1000;
+        gl.uniform1f(tLoc,elapsed);
+        gl.uniform2f(rLoc,c.width,c.height);
+        gl.drawArrays(gl.TRIANGLE_STRIP,0,4);
+        requestAnimationFrame(frame);
+    }
+    frame();
+})();
+/* ═══ API ═══ */
+const B=window.location.origin;
+const SA=`인공지능 기술은 현대 사회에서 매우 중요한 역할을 하고 있습니다. 특히 자연어 처리 분야에서의 발전은 눈부신 성과를 거두고 있습니다. 이러한 기술의 발전은 다양한 산업 분야에 긍정적인 영향을 미치고 있으며, 향후 더욱 발전할 것으로 예상됩니다.\n\n또한 생성형 AI의 등장으로 콘텐츠 제작 방식이 크게 변화하고 있습니다. 이를 통해 기업들은 효율적인 콘텐츠 생산이 가능해졌으며, 개인 사용자들도 다양한 창작 활동에 AI를 활용할 수 있게 되었습니다. 따라서 AI 리터러시의 중요성이 더욱 부각되고 있습니다.\n\n나아가 AI 윤리와 규제에 대한 논의도 활발히 진행되고 있습니다.`;
+const SH=`아 진짜 요즘 AI 때문에 머리 아프다ㅋㅋㅋ 어제 chatgpt한테 레포트 써달라고 했는데 완전 교과서 같은 글만 써줘서 그냥 내가 다시 썼음;;\n\n근데 생각해보면 AI가 쓴 글이랑 사람이 쓴 글이 확실히 다르긴 해. 뭔가... 너무 깔끔하달까?\n\n교수님이 AI 탐지기 돌린다고 해서 좀 무서운데 ㅠㅠ 걱정된다 진심으로.`;
+function switchTab(t){
+    document.querySelectorAll('.nav-item').forEach(e=>e.classList.remove('active'));
+    document.querySelectorAll('.panel').forEach(e=>e.classList.remove('active'));
+    document.querySelector(`[data-tab="${t}"]`).classList.add('active');
+    document.getElementById(`panel-${t}`).classList.add('active');
+}
+function uc(a,b){document.getElementById(b).textContent=document.getElementById(a).value.length+'자';}
+function ls(id,t){const e=document.getElementById(id);e.value=t==='ai'?SA:SH;e.dispatchEvent(new Event('input'));}
+function sw(id){document.getElementById(id).classList.add('active');}
+function hw(id){document.getElementById(id).classList.remove('active');}
+async function gc(api,data){
+    const urls=[`${B}/gradio/gradio_api/call${api}`,`${B}/gradio/api${api}`,`${B}/gradio_api/call${api}`,`${B}/api${api}`];
+    for(const u of urls){
+        try{
+            const r=await fetch(u,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({data})});
+            if(!r.ok)continue;
+            const j=await r.json();if(!j.event_id)continue;
+            return new Promise((ok,no)=>{
+                const es=new EventSource(`${u}/${j.event_id}`);let d=false;
+                const handle=e=>{if(d)return;try{const raw=JSON.parse(e.data);const p=Array.isArray(raw)?raw:(raw&&raw.data?raw.data:null);if(p){d=true;es.close();ok(p);}}catch{}};
+                es.onmessage=handle;
+                es.addEventListener('complete',handle);
+                es.addEventListener('process_completed',e=>{if(d)return;try{const raw=JSON.parse(e.data);const out=raw&&raw.output&&raw.output.data?raw.output.data:null;if(out){d=true;es.close();ok(out);}}catch{}});
+                es.onerror=()=>{if(!d){d=true;es.close();no(new Error('연결 오류'));}};
+                setTimeout(()=>{if(!d){d=true;es.close();no(new Error('시간 초과 (120s)'));}},120000);
+            });
+        }catch(e){continue;}
+    }
+    throw new Error('API 연결 실패 — Gradio 서버 확인 필요');
+}
+function showError(el,msg){
+    el.innerHTML=`<div style="padding:28px;text-align:center;color:var(--rose);font-size:14px;background:var(--glass);border:1px solid rgba(255,107,138,0.2);border-radius:var(--radius);">⚠️ ${msg}</div>`;
+}
+async function runDetect(){
+    const t=document.getElementById('input-detect').value;if(!t||t.length<50){alert('최소 50자 이상 입력해주세요.');return;}
+    const b=document.getElementById('btn-detect');b.disabled=true;
+    document.getElementById('result-detect').innerHTML='';document.getElementById('log-detect').textContent='';sw('loader-detect');
+    try{const d=await gc('/run_detection',[t]);hw('loader-detect');document.getElementById('result-detect').innerHTML=d[0]||'';document.getElementById('log-detect').textContent=d[1]||'';}
+    catch(e){hw('loader-detect');showError(document.getElementById('result-detect'),e.message);}
+    b.disabled=false;
+}
+async function runHighlight(){
+    const t=document.getElementById('input-highlight').value;if(!t||t.length<30){alert('텍스트를 입력해주세요.');return;}
+    const b=document.getElementById('btn-highlight');b.disabled=true;sw('loader-highlight');
+    try{const d=await gc('/run_highlight',[t]);hw('loader-highlight');document.getElementById('result-highlight').innerHTML=d[0]||'';}
+    catch(e){hw('loader-highlight');showError(document.getElementById('result-highlight'),e.message);}
+    b.disabled=false;
+}
+async function runHumanize(){
+    const t=document.getElementById('input-humanize').value;if(!t||t.length<50){alert('최소 50자 이상 입력해주세요.');return;}
+    const b=document.getElementById('btn-humanize');b.disabled=true;document.getElementById('result-humanize-area').style.display='none';sw('loader-humanize');
+    try{const d=await gc('/run_humanizer',[t]);hw('loader-humanize');document.getElementById('result-humanize-area').style.display='block';
+        const el=document.getElementById('result-humanize-text');el.innerHTML=`<button class="copy-btn" onclick="copyText()">COPY</button>${(d[0]||'').replace(/\n/g,'<br>')}`;
+        document.getElementById('result-humanize-log').textContent=d[1]||'';document.getElementById('result-humanize-compare').innerHTML=d[2]||'';}
+    catch(e){hw('loader-humanize');document.getElementById('result-humanize-area').style.display='block';showError(document.getElementById('result-humanize-text'),e.message);}
+    b.disabled=false;
+}
+async function runPlagiarism(){
+    const t=document.getElementById('input-plagiarism').value;if(!t||t.length<50){alert('최소 50자 이상 입력해주세요.');return;}
+    const b=document.getElementById('btn-plagiarism');b.disabled=true;document.getElementById('result-plagiarism-area').style.display='none';sw('loader-plagiarism');
+    try{const d=await gc('/run_plagiarism',[t]);hw('loader-plagiarism');document.getElementById('result-plagiarism-area').style.display='block';
+        document.getElementById('result-plagiarism').innerHTML=d[0]||'';document.getElementById('result-plagiarism-log').textContent=d[1]||'';}
+    catch(e){hw('loader-plagiarism');document.getElementById('result-plagiarism-area').style.display='block';showError(document.getElementById('result-plagiarism'),e.message);}
+    b.disabled=false;
+}
+function copyText(){
+    const el=document.getElementById('result-humanize-text');
+    const t=el.textContent.replace('COPY','').replace('✓ COPIED','').trim();
+    navigator.clipboard.writeText(t).then(()=>{
+        const btn=el.querySelector('.copy-btn');btn.textContent='✓ COPIED';btn.classList.add('copied');
+        setTimeout(()=>{btn.textContent='COPY';btn.classList.remove('copied');},2000);
+    });
+}
+/* Ctrl+Enter shortcut */
+document.addEventListener('keydown',e=>{
+    if(e.ctrlKey&&e.key==='Enter'){
+        const active=document.querySelector('.panel.active');
+        if(!active)return;
+        const btn=active.querySelector('.btn-primary');
+        if(btn&&!btn.disabled)btn.click();
+    }
+});
+/* ═══ DOCUMENT UPLOAD ═══ */
+let selectedFile=null;
+function handleFile(input){
+    if(input.files&&input.files[0]){
+        selectedFile=input.files[0];
+        document.getElementById('file-label').textContent='📎 '+selectedFile.name+' ('+Math.round(selectedFile.size/1024)+'KB)';
+        document.getElementById('drop-zone').style.borderColor='rgba(139,122,255,0.4)';
+    }
+}
+/* Drag & drop */
+const dz=document.getElementById('drop-zone');
+if(dz){
+    dz.addEventListener('dragover',e=>{e.preventDefault();dz.style.borderColor='rgba(139,122,255,0.6)';dz.style.background='rgba(139,122,255,0.05)';});
+    dz.addEventListener('dragleave',()=>{dz.style.borderColor='';dz.style.background='';});
+    dz.addEventListener('drop',e=>{e.preventDefault();dz.style.borderColor='';dz.style.background='';
+        if(e.dataTransfer.files[0]){selectedFile=e.dataTransfer.files[0];document.getElementById('file-label').textContent='📎 '+selectedFile.name;dz.style.borderColor='rgba(139,122,255,0.4)';}
+    });
+}
+async function runDocument(){
+    if(!selectedFile){alert('파일을 먼저 업로드하세요.');return;}
+    const btn=document.getElementById('btn-document');btn.disabled=true;
+    document.getElementById('result-document-area').style.display='none';
+    document.getElementById('report-download').style.display='none';
+    sw('loader-document');
+    try{
+        /* Step 1: Upload file to Gradio */
+        const formData=new FormData();formData.append('files',selectedFile);
+        const uploadUrls=[`${B}/gradio/gradio_api/upload`,`${B}/gradio/upload`,`${B}/gradio_api/upload`,`${B}/upload`];
+        let uploadedPath=null;
+        for(const uu of uploadUrls){
+            try{
+                const ur=await fetch(uu,{method:'POST',body:formData});
+                if(ur.ok){const uj=await ur.json();uploadedPath=Array.isArray(uj)?uj[0]:uj;break;}
+            }catch{}
+        }
+        if(!uploadedPath){throw new Error('파일 업로드 실패');}
+        /* Step 2: Call API with file path */
+        const d=await gc('/run_document',[uploadedPath]);
+        hw('loader-document');
+        document.getElementById('result-document-area').style.display='block';
+        document.getElementById('result-document').innerHTML=d[0]||'';
+        document.getElementById('result-document-log').textContent=d[1]||'';
+        /* Step 3: Report download link */
+        if(d[2]){
+            const dl=document.getElementById('report-download');
+            dl.href=`${B}/gradio/gradio_api/file=`+encodeURIComponent(d[2]);
+            dl.style.display='inline-block';
+            dl.download='AI_Report.html';
+        }
+    }catch(e){
+        hw('loader-document');
+        document.getElementById('result-document-area').style.display='block';
+        showError(document.getElementById('result-document'),e.message);
+    }
+    btn.disabled=false;
+}
+</script>
+</body>
+</html>