Hugging Face's logo

Spaces:
bilalnaveed
/
TruthLens-v1-Final
Sleeping

App Files Community
bilalnaveed commited on
Commit
ee8f804
·
verified ·
1 Parent(s): bea85a8

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +78 -23
index.html CHANGED
@@ -1,37 +1,92 @@
1
  <!DOCTYPE html>
2
- <html>
3
  <head>
4
- <title>TruthLens Ultra v2.1</title>
 
5
  <script src='https://cdn.tailwindcss.com'></script>
 
 
 
 
 
6
  </head>
7
- <body class='bg-slate-900 text-white min-h-screen flex items-center justify-center p-6'>
8
- <div class='max-w-2xl w-full bg-slate-800 p-8 rounded-3xl shadow-2xl border border-slate-700'>
9
- <h1 class='text-4xl font-black text-blue-500 mb-2'>🛡️ TRUTHLENS PRO</h1>
10
- <p class='text-slate-400 mb-8 uppercase text-xs tracking-widest'>Forensic News Verification</p>
11
-
12
- <textarea id='inp' class='w-full bg-slate-900 border border-slate-700 p-4 rounded-2xl mb-4' rows='5' placeholder='Paste news content...'></textarea>
13
- <button onclick='run()' id='btn' class='w-full bg-blue-600 py-4 rounded-2xl font-bold hover:bg-blue-500 transition-all'>ANALYZE CONTENT</button>
 
 
 
 
 
14
 
15
- <div id='res' class='hidden mt-8 p-6 bg-slate-900 rounded-2xl border-l-4 border-blue-500'>
16
- <h2 id='v' class='text-3xl font-bold'></h2>
17
- <p id='c' class='text-blue-400 text-sm mb-4'></p>
18
- <p id='r' class='text-slate-400 text-sm italic'></p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </div>
20
  </div>
 
21
  <script>
22
- async function run() {
 
23
  const btn = document.getElementById('btn');
24
- const text = document.getElementById('inp').value;
25
- btn.innerText = 'SCANNING...';
26
  const fd = new FormData();
27
  fd.append('text', text);
28
- const r = await fetch('/analyze', { method: 'POST', body: fd });
29
- const d = await r.json();
30
- document.getElementById('res').classList.remove('hidden');
31
- document.getElementById('v').innerText = d.verdict;
32
- document.getElementById('c').innerText = d.confidence + '% Confidence';
33
- document.getElementById('r').innerText = d.reasoning;
34
- btn.innerText = 'ANALYZE CONTENT';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  }
36
  </script>
37
  </body>
 
1
  <!DOCTYPE html>
2
+ <html lang='en'>
3
  <head>
4
+ <meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'>
5
+ <title>TruthLens Ultra v2.0 | Dashboard</title>
6
  <script src='https://cdn.tailwindcss.com'></script>
7
+ <script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
8
+ <style>
9
+ .tab-active { border-bottom: 3px solid #3b82f6; color: #3b82f6; }
10
+ .glass { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(10px); }
11
+ </style>
12
  </head>
13
+ <body class='bg-[#0f172a] text-white font-sans min-h-screen'>
14
+ <div class='max-w-4xl mx-auto py-12 px-6'>
15
+ <div class='text-center mb-10'>
16
+ <h1 class='text-5xl font-black tracking-tighter text-blue-500'>🛡️ TRUTHLENS PRO</h1>
17
+ <p class='text-slate-400 mt-2 font-medium uppercase tracking-widest text-xs'>Forensic Neural Verification System</p>
18
+ </div>
19
+
20
+ <div class='grid grid-cols-1 md:grid-cols-3 gap-6 mb-8'>
21
+ <div class='md:col-span-1 bg-[#1e293b] p-6 rounded-3xl border border-slate-700 shadow-2xl'>
22
+ <textarea id='inp-text' rows='5' class='w-full bg-[#0f172a] p-4 rounded-2xl text-sm border border-slate-700 focus:border-blue-500 outline-none mb-4' placeholder='Paste article text...'></textarea>
23
+ <button onclick='analyze()' id='btn' class='w-full bg-blue-600 hover:bg-blue-500 py-4 rounded-2xl font-bold transition-all active:scale-95 shadow-lg shadow-blue-900/40'>🚀 ANALYZE</button>
24
+ </div>
25
 
26
+ <div id='res-box' class='md:col-span-2 hidden bg-[#1e293b] p-8 rounded-3xl border border-slate-700 shadow-2xl overflow-hidden'>
27
+ <div class='flex justify-between items-start mb-6'>
28
+ <div>
29
+ <h2 id='vText' class='text-4xl font-black italic'></h2>
30
+ <p id='cText' class='text-blue-400 font-mono text-sm mt-1'></p>
31
+ </div>
32
+ </div>
33
+
34
+ <div class='grid grid-cols-1 sm:grid-cols-2 gap-4'>
35
+ <div class='h-48'><canvas id='radarChart'></canvas></div>
36
+ <div class='space-y-4'>
37
+ <div class='p-4 bg-[#0f172a] rounded-2xl border border-slate-800'>
38
+ <p class='text-[10px] uppercase text-slate-500 font-bold mb-1'>Linguistic Analysis</p>
39
+ <p id='rText' class='text-xs text-slate-300 leading-relaxed'></p>
40
+ </div>
41
+ <div id='methodBox' class='p-4 bg-blue-900/20 rounded-2xl border border-blue-500/30 text-blue-400 text-xs font-bold'>
42
+ Method: <span id='mText'></span>
43
+ </div>
44
+ </div>
45
+ </div>
46
+ </div>
47
  </div>
48
  </div>
49
+
50
  <script>
51
+ let chart;
52
+ async function analyze() {
53
  const btn = document.getElementById('btn');
54
+ const text = document.getElementById('inp-text').value;
 
55
  const fd = new FormData();
56
  fd.append('text', text);
57
+ btn.disabled = true; btn.innerText = '⚡ SCANNING...';
58
+
59
+ try {
60
+ const response = await fetch('/analyze', { method: 'POST', body: fd });
61
+ const d = await response.json();
62
+
63
+ document.getElementById('res-box').classList.remove('hidden');
64
+ document.getElementById('vText').innerText = d.verdict;
65
+
66
+ // Dynamic Coloring based on Verdict
67
+ const colorMap = { 'REAL / VERIFIED': '#10b981', 'DANGEROUS / FAKE': '#ef4444', 'NEEDS REVIEW': '#f59e0b' };
68
+ document.getElementById('vText').style.color = colorMap[d.verdict] || '#ffffff';
69
+
70
+ document.getElementById('cText').innerText = d.confidence + '% CONFIDENCE';
71
+ document.getElementById('rText').innerText = d.reasoning;
72
+ document.getElementById('mText').innerText = d.method;
73
+
74
+ if(chart) chart.destroy();
75
+ const ctx = document.getElementById('radarChart').getContext('2d');
76
+ chart = new Chart(ctx, {
77
+ type: 'radar',
78
+ data: {
79
+ labels: ['Neural Bias', 'Subjectivity', 'Authority', 'Logic', 'Reporting'],
80
+ datasets: [{
81
+ label: 'Signal Intensity',
82
+ data: [d.metrics.nlp, d.metrics.subjectivity, d.metrics.authority, d.metrics.linguistic, 80],
83
+ backgroundColor: 'rgba(59, 130, 246, 0.2)',
84
+ borderColor: '#3b82f6', pointBackgroundColor: '#3b82f6'
85
+ }]
86
+ },
87
+ options: { scales: { r: { min: 0, max: 100, ticks: { display: false }, grid: { color: '#334155' } } }, plugins: { legend: { display: false } } }
88
+ });
89
+ } finally { btn.disabled = false; btn.innerText = '🚀 ANALYZE'; }
90
  }
91
  </script>
92
  </body>