Spaces:
Sleeping
Sleeping
| import streamlit as st | |
| import torch | |
| import numpy as np | |
| import requests | |
| import time | |
| import re | |
| from PIL import Image | |
| from transformers import ( | |
| AutoTokenizer, | |
| AutoModelForSequenceClassification, | |
| pipeline, | |
| ) | |
| from huggingface_hub import hf_hub_download | |
| import tensorflow as tf | |
| import plotly.graph_objects as go | |
| import plotly.express as px | |
| # ───────────────────────────────────────────── | |
| # PAGE CONFIG | |
| # ───────────────────────────────────────────── | |
| st.set_page_config( | |
| page_title="DeepTrace AI", | |
| page_icon="🔬", | |
| layout="wide", | |
| initial_sidebar_state="collapsed", | |
| ) | |
| # ───────────────────────────────────────────── | |
| # GLOBAL CSS (dark cyber-forensics aesthetic) | |
| # ───────────────────────────────────────────── | |
| st.markdown(""" | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;600;800&family=DM+Sans:wght@300;400;500&display=swap'); | |
| /* ── Root Variables ── */ | |
| :root { | |
| --bg: #050810; | |
| --bg2: #0b1120; | |
| --bg3: #101928; | |
| --border: #1e2d45; | |
| --accent: #00d4ff; | |
| --accent2: #7c3aed; | |
| --accent3: #10b981; | |
| --danger: #ef4444; | |
| --warning: #f59e0b; | |
| --text: #e2e8f0; | |
| --muted: #64748b; | |
| --glow: rgba(0,212,255,0.15); | |
| } | |
| /* ── Base Reset ── */ | |
| html, body, [class*="css"] { | |
| font-family: 'DM Sans', sans-serif; | |
| background-color: var(--bg) !important; | |
| color: var(--text) !important; | |
| } | |
| .stApp { background: var(--bg) !important; } | |
| /* ── Hide default Streamlit chrome ── */ | |
| #MainMenu, footer, header { visibility: hidden; } | |
| .block-container { padding: 0 !important; max-width: 100% !important; } | |
| /* ── Scrollbar ── */ | |
| ::-webkit-scrollbar { width: 4px; } | |
| ::-webkit-scrollbar-track { background: var(--bg2); } | |
| ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; } | |
| /* ── Animated background grid ── */ | |
| .grid-bg { | |
| position: fixed; inset: 0; z-index: 0; pointer-events: none; | |
| background-image: | |
| linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px); | |
| background-size: 60px 60px; | |
| animation: gridScroll 20s linear infinite; | |
| } | |
| @keyframes gridScroll { | |
| 0% { background-position: 0 0; } | |
| 100% { background-position: 60px 60px; } | |
| } | |
| /* ── Scanline overlay ── */ | |
| .scanlines { | |
| position: fixed; inset: 0; z-index: 0; pointer-events: none; | |
| background: repeating-linear-gradient( | |
| 0deg, transparent, transparent 2px, | |
| rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px | |
| ); | |
| } | |
| /* ── Hero Header ── */ | |
| .hero { | |
| position: relative; z-index: 10; | |
| background: linear-gradient(135deg, #050810 0%, #0b1120 50%, #080f1c 100%); | |
| border-bottom: 1px solid var(--border); | |
| padding: 2.5rem 3rem 2rem; | |
| display: flex; align-items: center; gap: 1.5rem; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; top: -50%; right: -10%; width: 500px; height: 500px; | |
| background: radial-gradient(circle, rgba(0,212,255,0.06) 0%, transparent 70%); | |
| border-radius: 50%; | |
| } | |
| .hero::after { | |
| content: ''; | |
| position: absolute; bottom: -50%; left: 20%; width: 400px; height: 400px; | |
| background: radial-gradient(circle, rgba(124,58,237,0.06) 0%, transparent 70%); | |
| border-radius: 50%; | |
| } | |
| .hero-icon { | |
| font-size: 3rem; | |
| filter: drop-shadow(0 0 20px var(--accent)); | |
| animation: pulse 3s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%,100% { filter: drop-shadow(0 0 20px var(--accent)); } | |
| 50% { filter: drop-shadow(0 0 40px var(--accent)); } | |
| } | |
| .hero-title { | |
| font-family: 'Syne', sans-serif; | |
| font-size: 2.6rem; font-weight: 800; letter-spacing: -0.02em; | |
| background: linear-gradient(135deg, #00d4ff, #7c3aed); | |
| -webkit-background-clip: text; -webkit-text-fill-color: transparent; | |
| margin: 0; line-height: 1; | |
| } | |
| .hero-sub { | |
| font-family: 'Space Mono', monospace; | |
| font-size: 0.7rem; color: var(--accent); letter-spacing: 0.2em; | |
| text-transform: uppercase; margin: 0.4rem 0 0; | |
| opacity: 0.8; | |
| } | |
| .hero-desc { | |
| font-size: 0.9rem; color: var(--muted); margin: 0; max-width: 500px; | |
| } | |
| .status-dot { | |
| display: inline-block; width: 8px; height: 8px; | |
| background: var(--accent3); border-radius: 50%; | |
| margin-right: 0.5rem; | |
| box-shadow: 0 0 8px var(--accent3); | |
| animation: blink 2s ease-in-out infinite; | |
| } | |
| @keyframes blink { | |
| 0%,100% { opacity: 1; } | |
| 50% { opacity: 0.3; } | |
| } | |
| /* ── Nav Tabs ── */ | |
| .nav-wrap { | |
| position: sticky; top: 0; z-index: 100; | |
| background: rgba(5,8,16,0.95); backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--border); | |
| padding: 0 3rem; | |
| display: flex; gap: 0; | |
| } | |
| .stTabs [data-baseweb="tab-list"] { | |
| background: transparent !important; | |
| border-bottom: none !important; | |
| gap: 0 !important; | |
| padding: 0 !important; | |
| } | |
| .stTabs [data-baseweb="tab"] { | |
| background: transparent !important; | |
| border: none !important; | |
| color: var(--muted) !important; | |
| font-family: 'Space Mono', monospace !important; | |
| font-size: 0.75rem !important; | |
| letter-spacing: 0.1em !important; | |
| text-transform: uppercase !important; | |
| padding: 1rem 2rem !important; | |
| border-bottom: 2px solid transparent !important; | |
| transition: all 0.2s !important; | |
| } | |
| .stTabs [data-baseweb="tab"]:hover { | |
| color: var(--accent) !important; | |
| background: var(--glow) !important; | |
| } | |
| .stTabs [aria-selected="true"] { | |
| color: var(--accent) !important; | |
| border-bottom: 2px solid var(--accent) !important; | |
| background: var(--glow) !important; | |
| } | |
| .stTabs [data-baseweb="tab-panel"] { padding: 0 !important; } | |
| /* ── Content area ── */ | |
| .content-area { padding: 2rem 3rem; position: relative; z-index: 5; } | |
| /* ── Cards ── */ | |
| .card { | |
| background: var(--bg2); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| margin-bottom: 1.25rem; | |
| position: relative; overflow: hidden; | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| } | |
| .card:hover { | |
| border-color: rgba(0,212,255,0.3); | |
| box-shadow: 0 0 20px rgba(0,212,255,0.05); | |
| } | |
| .card::before { | |
| content: ''; | |
| position: absolute; top: 0; left: 0; right: 0; height: 2px; | |
| background: linear-gradient(90deg, transparent, var(--accent), transparent); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .card:hover::before { opacity: 1; } | |
| .card-label { | |
| font-family: 'Space Mono', monospace; | |
| font-size: 0.65rem; color: var(--accent); letter-spacing: 0.2em; | |
| text-transform: uppercase; margin-bottom: 0.75rem; | |
| display: flex; align-items: center; gap: 0.5rem; | |
| } | |
| .card-label::after { | |
| content: ''; flex: 1; height: 1px; background: var(--border); | |
| } | |
| /* ── Result Verdict ── */ | |
| .verdict-wrap { | |
| text-align: center; padding: 2rem 1rem; | |
| background: var(--bg2); border: 1px solid var(--border); | |
| border-radius: 16px; position: relative; overflow: hidden; | |
| } | |
| .verdict-badge { | |
| display: inline-block; | |
| font-family: 'Syne', sans-serif; | |
| font-size: 1.8rem; font-weight: 800; | |
| padding: 0.5rem 2rem; border-radius: 8px; | |
| letter-spacing: 0.05em; | |
| margin-bottom: 0.75rem; | |
| } | |
| .verdict-fake { | |
| background: rgba(239,68,68,0.12); | |
| border: 1px solid rgba(239,68,68,0.4); | |
| color: #ef4444; | |
| box-shadow: 0 0 30px rgba(239,68,68,0.1); | |
| } | |
| .verdict-real { | |
| background: rgba(16,185,129,0.12); | |
| border: 1px solid rgba(16,185,129,0.4); | |
| color: #10b981; | |
| box-shadow: 0 0 30px rgba(16,185,129,0.1); | |
| } | |
| .verdict-uncertain { | |
| background: rgba(245,158,11,0.12); | |
| border: 1px solid rgba(245,158,11,0.4); | |
| color: #f59e0b; | |
| box-shadow: 0 0 30px rgba(245,158,11,0.1); | |
| } | |
| .verdict-conf { | |
| font-family: 'Space Mono', monospace; | |
| font-size: 0.8rem; color: var(--muted); | |
| } | |
| .verdict-conf span { | |
| color: var(--text); font-size: 1.1rem; font-weight: 700; | |
| } | |
| /* ── Metric boxes ── */ | |
| .metric-row { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; } | |
| .metric-box { | |
| flex: 1; min-width: 120px; | |
| background: var(--bg3); border: 1px solid var(--border); | |
| border-radius: 10px; padding: 1rem; | |
| text-align: center; | |
| } | |
| .metric-val { | |
| font-family: 'Syne', sans-serif; | |
| font-size: 1.6rem; font-weight: 800; | |
| background: linear-gradient(135deg, var(--accent), var(--accent2)); | |
| -webkit-background-clip: text; -webkit-text-fill-color: transparent; | |
| display: block; | |
| } | |
| .metric-key { | |
| font-family: 'Space Mono', monospace; | |
| font-size: 0.6rem; color: var(--muted); | |
| text-transform: uppercase; letter-spacing: 0.1em; | |
| } | |
| /* ── Tags ── */ | |
| .tag { | |
| display: inline-block; | |
| font-family: 'Space Mono', monospace; | |
| font-size: 0.65rem; letter-spacing: 0.05em; | |
| padding: 0.25rem 0.75rem; border-radius: 999px; | |
| margin: 0.25rem; | |
| } | |
| .tag-danger { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #ef4444; } | |
| .tag-warn { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3); color: #f59e0b; } | |
| .tag-safe { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); color: #10b981; } | |
| .tag-info { background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.3); color: #00d4ff; } | |
| /* ── Streamlit overrides ── */ | |
| .stTextArea textarea { | |
| background: var(--bg3) !important; | |
| border: 1px solid var(--border) !important; | |
| color: var(--text) !important; | |
| font-family: 'DM Sans', sans-serif !important; | |
| border-radius: 10px !important; | |
| font-size: 0.9rem !important; | |
| transition: border-color 0.2s !important; | |
| } | |
| .stTextArea textarea:focus { | |
| border-color: var(--accent) !important; | |
| box-shadow: 0 0 0 1px var(--accent) !important; | |
| } | |
| .stTextArea label { | |
| color: var(--muted) !important; | |
| font-family: 'Space Mono', monospace !important; | |
| font-size: 0.7rem !important; | |
| text-transform: uppercase !important; | |
| letter-spacing: 0.1em !important; | |
| } | |
| .stButton > button { | |
| background: linear-gradient(135deg, #00d4ff22, #7c3aed22) !important; | |
| color: var(--accent) !important; | |
| border: 1px solid var(--accent) !important; | |
| border-radius: 8px !important; | |
| font-family: 'Space Mono', monospace !important; | |
| font-size: 0.75rem !important; | |
| letter-spacing: 0.1em !important; | |
| text-transform: uppercase !important; | |
| padding: 0.6rem 2rem !important; | |
| transition: all 0.2s !important; | |
| width: 100% !important; | |
| } | |
| .stButton > button:hover { | |
| background: linear-gradient(135deg, #00d4ff33, #7c3aed33) !important; | |
| box-shadow: 0 0 20px rgba(0,212,255,0.2) !important; | |
| transform: translateY(-1px) !important; | |
| } | |
| .stFileUploader { | |
| background: var(--bg3) !important; | |
| border: 1px dashed var(--border) !important; | |
| border-radius: 12px !important; | |
| transition: border-color 0.2s !important; | |
| } | |
| .stFileUploader:hover { border-color: var(--accent) !important; } | |
| .stFileUploader label { color: var(--muted) !important; } | |
| /* spinner */ | |
| .stSpinner > div { border-top-color: var(--accent) !important; } | |
| /* divider */ | |
| hr { border-color: var(--border) !important; margin: 1.5rem 0 !important; } | |
| /* image captions */ | |
| .stImage > div > div { color: var(--muted) !important; font-size: 0.75rem !important; } | |
| /* ── Section header ── */ | |
| .section-header { | |
| font-family: 'Syne', sans-serif; | |
| font-size: 1.3rem; font-weight: 700; | |
| color: var(--text); margin: 0 0 0.25rem; | |
| } | |
| .section-sub { | |
| font-size: 0.85rem; color: var(--muted); margin: 0 0 1.5rem; | |
| } | |
| /* ── Signal bars decoration ── */ | |
| .signal { display: flex; align-items: flex-end; gap: 3px; height: 20px; } | |
| .signal span { | |
| display: block; width: 4px; border-radius: 2px; | |
| background: var(--accent); | |
| animation: signalAnim 1.2s ease-in-out infinite; | |
| } | |
| .signal span:nth-child(1) { height: 6px; animation-delay: 0s; } | |
| .signal span:nth-child(2) { height: 10px; animation-delay: 0.1s; } | |
| .signal span:nth-child(3) { height: 14px; animation-delay: 0.2s; } | |
| .signal span:nth-child(4) { height: 10px; animation-delay: 0.3s; } | |
| .signal span:nth-child(5) { height: 6px; animation-delay: 0.4s; } | |
| @keyframes signalAnim { | |
| 0%,100% { opacity: 1; } | |
| 50% { opacity: 0.3; } | |
| } | |
| /* ── About cards ── */ | |
| .about-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; } | |
| .about-card { | |
| background: var(--bg2); border: 1px solid var(--border); | |
| border-radius: 12px; padding: 1.5rem; text-align: center; | |
| transition: all 0.2s; | |
| } | |
| .about-card:hover { | |
| border-color: rgba(0,212,255,0.3); | |
| transform: translateY(-2px); | |
| } | |
| .about-card-icon { font-size: 2rem; margin-bottom: 0.75rem; } | |
| .about-card-title { | |
| font-family: 'Syne', sans-serif; | |
| font-size: 0.95rem; font-weight: 700; color: var(--text); | |
| margin: 0 0 0.5rem; | |
| } | |
| .about-card-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.5; } | |
| /* responsive */ | |
| @media (max-width: 768px) { | |
| .hero { padding: 1.5rem; flex-direction: column; text-align: center; } | |
| .hero-title { font-size: 1.8rem; } | |
| .content-area { padding: 1rem; } | |
| .about-grid { grid-template-columns: 1fr; } | |
| } | |
| </style> | |
| <div class="grid-bg"></div> | |
| <div class="scanlines"></div> | |
| """, unsafe_allow_html=True) | |
| # ───────────────────────────────────────────── | |
| # MODEL LOADERS | |
| # ───────────────────────────────────────────── | |
| def load_text_model(): | |
| model_name = "hamzab/roberta-fake-news-classification" | |
| tokenizer = AutoTokenizer.from_pretrained(model_name) | |
| model = AutoModelForSequenceClassification.from_pretrained(model_name) | |
| model.eval() | |
| return tokenizer, model | |
| # @st.cache_resource(show_spinner=False) | |
| # def load_image_model(): | |
| # import os | |
| # import keras # Keras 3 explicit import | |
| # filenames_to_try = [ | |
| # "image_detector_v2.keras", | |
| # "image_detector_v2.h5", | |
| # ] | |
| # path = None | |
| # for fname in filenames_to_try: | |
| # try: | |
| # path = hf_hub_download( | |
| # repo_id="syeda-Rija20/image-detector", | |
| # filename=fname | |
| # ) | |
| # break | |
| # except Exception: | |
| # continue | |
| # if path is None: | |
| # raise RuntimeError( | |
| # "Could not download image model from HuggingFace Hub. " | |
| # "Check that 'syeda-Rija20/image-detector' is public and the file exists." | |
| # ) | |
| # # Try keras 3 native load first, then tf.keras fallback | |
| # try: | |
| # model = keras.saving.load_model(path, compile=False) | |
| # except Exception: | |
| # try: | |
| # model = tf.keras.models.load_model(path, compile=False) | |
| # except Exception as e: | |
| # raise RuntimeError(f"Failed to load image model: {e}") | |
| def load_image_model(): | |
| import keras | |
| import json | |
| config_path = hf_hub_download( | |
| repo_id="syeda-Rija20/image-detector", | |
| filename="model_config.json" | |
| ) | |
| weights_path = hf_hub_download( | |
| repo_id="syeda-Rija20/image-detector", | |
| filename="image_detector_clean.weights.h5" | |
| ) | |
| with open(config_path) as f: | |
| config = f.read() | |
| model = keras.models.model_from_json(config) | |
| model.load_weights(weights_path) | |
| return model | |
| # ───────────────────────────────────────────── | |
| # PREDICTION FUNCTIONS | |
| # ───────────────────────────────────────────── | |
| CLICKBAIT_WORDS = [ | |
| "SHOCKING", "BREAKING", "EXPOSED", "YOU WON'T BELIEVE", | |
| "UNBELIEVABLE", "MUST SEE", "URGENT", "SECRET", "LEAKED", | |
| "BANNED", "CENSORED", "THEY DON'T WANT", "EXCLUSIVE" | |
| ] | |
| FEAR_WORDS = [ | |
| "danger", "crisis", "collapse", "attack", "war", "threat", | |
| "catastrophe", "disaster", "chaos", "doom", "apocalypse", | |
| "deadly", "terror", "panic", "emergency" | |
| ] | |
| def predict_news(text, tokenizer, model): | |
| inputs = tokenizer( | |
| text, return_tensors="pt", | |
| truncation=True, padding=True, max_length=512 | |
| ) | |
| with torch.no_grad(): | |
| outputs = model(**inputs) | |
| probs = torch.nn.functional.softmax(outputs.logits, dim=1) | |
| pred = torch.argmax(probs).item() | |
| confidence = torch.max(probs).item() * 100 | |
| label = model.config.id2label[pred] | |
| return label, confidence, probs[0].tolist() | |
| def manipulation_score(text): | |
| text_up = text.upper() | |
| cb_hits = [w for w in CLICKBAIT_WORDS if w in text_up] | |
| fear_hits = [w for w in FEAR_WORDS if w.lower() in text.lower()] | |
| exclamations = text.count("!") | |
| caps_ratio = sum(1 for c in text if c.isupper()) / max(len(text), 1) | |
| score = ( | |
| len(cb_hits) * 20 + | |
| len(fear_hits) * 10 + | |
| min(exclamations * 5, 20) + | |
| min(caps_ratio * 100, 20) | |
| ) | |
| return min(int(score), 100), cb_hits, fear_hits | |
| def predict_image(img, model): | |
| img_r = img.resize((224, 224)).convert("RGB") | |
| arr = np.array(img_r, dtype=np.float32) / 255.0 | |
| arr = np.expand_dims(arr, axis=0) | |
| pred = model.predict(arr, verbose=0) | |
| conf = float(pred[0][0]) * 100 | |
| # 0 = AI, 1 = Real (based on training) | |
| if conf < 50: | |
| return "AI GENERATED", 100 - conf | |
| else: | |
| return "REAL IMAGE", conf | |
| # ───────────────────────────────────────────── | |
| # CHART HELPERS | |
| # ───────────────────────────────────────────── | |
| def gauge_chart(value, title, color): | |
| fig = go.Figure(go.Indicator( | |
| mode = "gauge+number", | |
| value = value, | |
| title = {"text": title, "font": {"family": "Space Mono", "size": 11, "color": "#64748b"}}, | |
| number= {"suffix": "%", "font": {"family": "Syne", "size": 28, "color": "#e2e8f0"}}, | |
| gauge = { | |
| "axis" : {"range": [0, 100], "tickcolor": "#1e2d45", "tickfont": {"color": "#64748b", "size": 9}}, | |
| "bar" : {"color": color, "thickness": 0.3}, | |
| "bgcolor" : "#0b1120", | |
| "bordercolor": "#1e2d45", | |
| "steps" : [ | |
| {"range": [0, 33], "color": "rgba(16,185,129,0.08)"}, | |
| {"range": [33, 66], "color": "rgba(245,158,11,0.08)"}, | |
| {"range": [66,100], "color": "rgba(239,68,68,0.08)"}, | |
| ], | |
| "threshold" : {"line": {"color": color, "width": 2}, "value": value}, | |
| } | |
| )) | |
| fig.update_layout( | |
| paper_bgcolor="rgba(0,0,0,0)", plot_bgcolor="rgba(0,0,0,0)", | |
| margin=dict(t=30, b=10, l=20, r=20), height=200, | |
| ) | |
| return fig | |
| def bar_chart(labels, values, colors): | |
| fig = go.Figure(go.Bar( | |
| x=values, y=labels, orientation="h", | |
| marker_color=colors, marker_line_width=0, | |
| text=[f"{v:.1f}%" for v in values], | |
| textfont={"family": "Space Mono", "size": 10, "color": "#e2e8f0"}, | |
| textposition="outside", | |
| )) | |
| fig.update_layout( | |
| paper_bgcolor="rgba(0,0,0,0)", plot_bgcolor="rgba(0,0,0,0)", | |
| xaxis=dict(range=[0,120], visible=False), | |
| yaxis=dict(tickfont={"family": "Space Mono", "size": 10, "color": "#64748b"}), | |
| margin=dict(t=10, b=10, l=10, r=60), height=120, | |
| showlegend=False, | |
| ) | |
| return fig | |
| # ───────────────────────────────────────────── | |
| # HERO | |
| # ───────────────────────────────────────────── | |
| st.markdown(""" | |
| <div class="hero"> | |
| <div class="hero-icon">🔬</div> | |
| <div> | |
| <div class="hero-title">DeepTrace AI</div> | |
| <div class="hero-sub"> | |
| <span class="status-dot"></span> | |
| Multi-Modal Misinformation Detection System · v2.0 | |
| </div> | |
| <p class="hero-desc"> | |
| Advanced forensic AI for detecting fake news, AI-generated images, | |
| and emotional manipulation in digital media. | |
| </p> | |
| </div> | |
| <div style="margin-left:auto; display:flex; align-items:center; gap:1rem; flex-wrap:wrap;"> | |
| <div style="text-align:right;"> | |
| <div style="font-family:'Space Mono',monospace; font-size:0.6rem; color:#64748b; letter-spacing:0.1em;">STATUS</div> | |
| <div style="font-family:'Syne',sans-serif; font-size:0.85rem; color:#10b981; font-weight:700;">● ONLINE</div> | |
| </div> | |
| <div class="signal"> | |
| <span></span><span></span><span></span><span></span><span></span> | |
| </div> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # ───────────────────────────────────────────── | |
| # TABS | |
| # ───────────────────────────────────────────── | |
| tab1, tab2, tab3 = st.tabs([ | |
| "📰 Fake News Detector", | |
| "🖼️ AI Image Detector", | |
| "⚙️ About & Models", | |
| ]) | |
| # ══════════════════════════════════════════════ | |
| # TAB 1 — FAKE NEWS | |
| # ══════════════════════════════════════════════ | |
| with tab1: | |
| st.markdown('<div class="content-area">', unsafe_allow_html=True) | |
| st.markdown(""" | |
| <div class="section-header">📰 Fake News & Manipulation Detector</div> | |
| <div class="section-sub"> | |
| Paste a news article or headline. The AI will analyse authenticity, | |
| emotional manipulation, and clickbait signals. | |
| </div> | |
| """, unsafe_allow_html=True) | |
| col_in, col_out = st.columns([1, 1], gap="large") | |
| with col_in: | |
| # Init session state | |
| if "news_text" not in st.session_state: | |
| st.session_state["news_text"] = "" | |
| # Sample buttons BEFORE text area so state is set on rerun | |
| st.markdown('<div class="card-label">🧪 Try Samples</div>', unsafe_allow_html=True) | |
| s1, s2 = st.columns(2) | |
| with s1: | |
| if st.button("✅ Real News", key="real_sample"): | |
| st.session_state["news_text"] = ( | |
| "NASA's James Webb Space Telescope has captured the deepest infrared " | |
| "image of the universe ever taken, revealing thousands of galaxies that " | |
| "existed over 13 billion years ago. The image was released in July 2022 " | |
| "and marks a major milestone in space exploration and astrophysics." | |
| ) | |
| st.rerun() | |
| with s2: | |
| if st.button("⚠️ Fake News", key="fake_sample"): | |
| st.session_state["news_text"] = ( | |
| "SHOCKING!! Scientists EXPOSED: drinking hot lemon water CURES cancer in " | |
| "30 days! Big Pharma has been HIDING this SECRET for decades to protect " | |
| "their profits. SHARE before it gets DELETED!! You WON'T BELIEVE what " | |
| "they don't want you to know!!" | |
| ) | |
| st.rerun() | |
| st.markdown('<div class="card"><div class="card-label">📝 Input Text</div>', unsafe_allow_html=True) | |
| user_text = st.text_area( | |
| "Article / Headline", | |
| value=st.session_state["news_text"], | |
| height=220, | |
| placeholder="Paste your news article or headline here…", | |
| label_visibility="collapsed", | |
| key="news_textarea", | |
| ) | |
| st.session_state["news_text"] = user_text | |
| st.markdown('</div>', unsafe_allow_html=True) | |
| analyze_clicked = st.button("🔍 ANALYZE TEXT", key="analyze_btn") | |
| with col_out: | |
| if analyze_clicked and user_text.strip(): | |
| with st.spinner("Loading NLP model…"): | |
| tokenizer, text_model = load_text_model() | |
| with st.spinner("Analysing content…"): | |
| time.sleep(0.3) | |
| label, conf, probs_list = predict_news(user_text, tokenizer, text_model) | |
| manip, cb_hits, fear_hits = manipulation_score(user_text) | |
| word_count = len(user_text.split()) | |
| sent_count = user_text.count(".") + user_text.count("!") + user_text.count("?") | |
| excl_count = user_text.count("!") | |
| # ── Verdict ── | |
| is_fake = label.upper() == "FAKE" | |
| badge_class = "verdict-fake" if is_fake else "verdict-real" | |
| verdict_icon = "⚠️ FAKE NEWS" if is_fake else "✅ REAL NEWS" | |
| st.markdown(f""" | |
| <div class="verdict-wrap"> | |
| <div class="verdict-badge {badge_class}">{verdict_icon}</div> | |
| <div class="verdict-conf">Confidence: <span>{conf:.1f}%</span></div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # ── Gauge row ── | |
| g1, g2, g3 = st.columns(3) | |
| with g1: | |
| fake_prob = probs_list[0] * 100 if len(probs_list) > 0 else conf | |
| st.plotly_chart(gauge_chart(fake_prob, "FAKE PROB", "#ef4444"), use_column_width=True) | |
| with g2: | |
| real_prob = probs_list[1] * 100 if len(probs_list) > 1 else (100 - conf) | |
| st.plotly_chart(gauge_chart(real_prob, "REAL PROB", "#10b981"), use_column_width=True) | |
| with g3: | |
| st.plotly_chart(gauge_chart(manip, "MANIPULATION", "#f59e0b"), use_column_width=True) | |
| # ── Metrics ── | |
| st.markdown(f""" | |
| <div class="metric-row"> | |
| <div class="metric-box"> | |
| <span class="metric-val">{word_count}</span> | |
| <span class="metric-key">Words</span> | |
| </div> | |
| <div class="metric-box"> | |
| <span class="metric-val">{excl_count}</span> | |
| <span class="metric-key">Exclamations</span> | |
| </div> | |
| <div class="metric-box"> | |
| <span class="metric-val">{len(cb_hits)}</span> | |
| <span class="metric-key">Clickbait Hits</span> | |
| </div> | |
| <div class="metric-box"> | |
| <span class="metric-val">{len(fear_hits)}</span> | |
| <span class="metric-key">Fear Words</span> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # ── Tags ── | |
| if cb_hits or fear_hits: | |
| st.markdown('<div class="card"><div class="card-label">🚨 Detected Signals</div>', unsafe_allow_html=True) | |
| tags_html = "" | |
| for w in cb_hits: | |
| tags_html += f'<span class="tag tag-danger">🔴 {w}</span>' | |
| for w in fear_hits[:6]: | |
| tags_html += f'<span class="tag tag-warn">🟡 {w}</span>' | |
| st.markdown(f'<div>{tags_html}</div></div>', unsafe_allow_html=True) | |
| # ── Analysis summary ── | |
| manip_level = "HIGH" if manip > 60 else "MEDIUM" if manip > 30 else "LOW" | |
| manip_color = "#ef4444" if manip > 60 else "#f59e0b" if manip > 30 else "#10b981" | |
| st.markdown(f""" | |
| <div class="card"> | |
| <div class="card-label">🧠 Analysis Summary</div> | |
| <p style="font-size:0.85rem; color:#94a3b8; line-height:1.7; margin:0;"> | |
| The model classified this content as | |
| <strong style="color:{'#ef4444' if is_fake else '#10b981'}"> | |
| {'FAKE' if is_fake else 'REAL'} | |
| </strong> | |
| with <strong style="color:#e2e8f0">{conf:.1f}%</strong> confidence.<br> | |
| Manipulation score is | |
| <strong style="color:{manip_color}">{manip_level} ({manip}%)</strong> | |
| — detected <strong style="color:#e2e8f0">{len(cb_hits)}</strong> | |
| clickbait keyword(s) and | |
| <strong style="color:#e2e8f0">{len(fear_hits)}</strong> fear-based word(s). | |
| {'<br><span style="color:#f59e0b">⚠️ High emotional manipulation detected — verify from multiple sources.</span>' if manip > 50 else ''} | |
| </p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| elif analyze_clicked: | |
| st.warning("Please enter some text to analyse.") | |
| else: | |
| st.markdown(""" | |
| <div class="card" style="text-align:center; padding:3rem 1rem; border-style:dashed;"> | |
| <div style="font-size:3rem; margin-bottom:1rem; opacity:0.3;">📰</div> | |
| <div style="font-family:'Space Mono',monospace; font-size:0.75rem; | |
| color:#64748b; letter-spacing:0.1em;"> | |
| AWAITING INPUT | |
| </div> | |
| <div style="font-size:0.8rem; color:#475569; margin-top:0.5rem;"> | |
| Paste an article and click Analyze | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| st.markdown('</div>', unsafe_allow_html=True) | |
| # ══════════════════════════════════════════════ | |
| # TAB 2 — IMAGE DETECTOR | |
| # ══════════════════════════════════════════════ | |
| with tab2: | |
| st.markdown('<div class="content-area">', unsafe_allow_html=True) | |
| st.markdown(""" | |
| <div class="section-header">🖼️ AI Image Forensic Analyser</div> | |
| <div class="section-sub"> | |
| Upload any image. The model will determine whether it was taken by a | |
| camera or generated by an AI system. | |
| </div> | |
| """, unsafe_allow_html=True) | |
| col_up, col_res = st.columns([1, 1], gap="large") | |
| with col_up: | |
| st.markdown('<div class="card"><div class="card-label">📂 Upload Image</div>', unsafe_allow_html=True) | |
| uploaded = st.file_uploader( | |
| "Upload image", | |
| type=["jpg", "jpeg", "png", "webp"], | |
| label_visibility="collapsed", | |
| ) | |
| st.markdown('</div>', unsafe_allow_html=True) | |
| if uploaded: | |
| img = Image.open(uploaded) | |
| st.image(img, caption="Uploaded Image", use_column_width=True) | |
| # Image metadata | |
| w, h = img.size | |
| st.markdown(f""" | |
| <div class="card"> | |
| <div class="card-label">📐 Image Metadata</div> | |
| <div class="metric-row" style="margin:0;"> | |
| <div class="metric-box"> | |
| <span class="metric-val" style="font-size:1.1rem;">{w}×{h}</span> | |
| <span class="metric-key">Resolution</span> | |
| </div> | |
| <div class="metric-box"> | |
| <span class="metric-val" style="font-size:1.1rem;">{img.mode}</span> | |
| <span class="metric-key">Color Mode</span> | |
| </div> | |
| <div class="metric-box"> | |
| <span class="metric-val" style="font-size:1.1rem;">{uploaded.name.split('.')[-1].upper()}</span> | |
| <span class="metric-key">Format</span> | |
| </div> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| scan_clicked = st.button("🔬 SCAN IMAGE", key="scan_btn", disabled=uploaded is None) | |
| with col_res: | |
| if scan_clicked and uploaded: | |
| with st.spinner("Loading vision model…"): | |
| img_model = load_image_model() | |
| with st.spinner("Running forensic scan…"): | |
| time.sleep(0.5) | |
| verdict, score = predict_image(img, img_model) | |
| is_ai = verdict == "AI GENERATED" | |
| badge_class = "verdict-fake" if is_ai else "verdict-real" | |
| icon = "🤖 AI GENERATED" if is_ai else "📷 REAL IMAGE" | |
| st.markdown(f""" | |
| <div class="verdict-wrap"> | |
| <div class="verdict-badge {badge_class}">{icon}</div> | |
| <div class="verdict-conf">Detection confidence: <span>{score:.1f}%</span></div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Gauges | |
| ai_score = score if is_ai else 100 - score | |
| real_score = 100 - ai_score | |
| g1, g2 = st.columns(2) | |
| with g1: | |
| st.plotly_chart(gauge_chart(ai_score, "AI PROBABILITY", "#ef4444"), use_column_width=True) | |
| with g2: | |
| st.plotly_chart(gauge_chart(real_score, "REAL PROBABILITY", "#10b981"), use_column_width=True) | |
| # Confidence bar | |
| fig_bar = bar_chart( | |
| ["AI Generated", "Real / Authentic"], | |
| [ai_score, real_score], | |
| ["#ef4444" if ai_score > real_score else "#475569", | |
| "#10b981" if real_score >= ai_score else "#475569"] | |
| ) | |
| st.markdown('<div class="card"><div class="card-label">📊 Score Breakdown</div>', unsafe_allow_html=True) | |
| st.plotly_chart(fig_bar, use_column_width=True) | |
| st.markdown('</div>', unsafe_allow_html=True) | |
| # Summary | |
| risk = "HIGH" if ai_score > 75 else "MEDIUM" if ai_score > 45 else "LOW" | |
| risk_col = "#ef4444" if ai_score > 75 else "#f59e0b" if ai_score > 45 else "#10b981" | |
| st.markdown(f""" | |
| <div class="card"> | |
| <div class="card-label">🧠 Forensic Summary</div> | |
| <p style="font-size:0.85rem; color:#94a3b8; line-height:1.7; margin:0;"> | |
| Forensic analysis indicates this image is | |
| <strong style="color:{'#ef4444' if is_ai else '#10b981'}"> | |
| {'likely AI-generated' if is_ai else 'likely authentic'} | |
| </strong> | |
| with <strong style="color:#e2e8f0">{score:.1f}%</strong> confidence.<br> | |
| AI generation risk level: | |
| <strong style="color:{risk_col}">{risk}</strong>. | |
| {'<br><span style="color:#f59e0b">⚠️ Do not use this image as evidence without further verification.</span>' if is_ai else '<br><span style="color:#10b981">✅ Image appears to be from a real camera source.</span>'} | |
| </p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| elif not uploaded: | |
| st.markdown(""" | |
| <div class="card" style="text-align:center; padding:3rem 1rem; border-style:dashed;"> | |
| <div style="font-size:3rem; margin-bottom:1rem; opacity:0.3;">🖼️</div> | |
| <div style="font-family:'Space Mono',monospace; font-size:0.75rem; | |
| color:#64748b; letter-spacing:0.1em;"> | |
| NO IMAGE UPLOADED | |
| </div> | |
| <div style="font-size:0.8rem; color:#475569; margin-top:0.5rem;"> | |
| Upload an image and click Scan | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| st.markdown('</div>', unsafe_allow_html=True) | |
| # ══════════════════════════════════════════════ | |
| # TAB 3 — ABOUT | |
| # ══════════════════════════════════════════════ | |
| with tab3: | |
| st.markdown('<div class="content-area">', unsafe_allow_html=True) | |
| st.markdown(""" | |
| <div class="section-header">⚙️ System Architecture & Models</div> | |
| <div class="section-sub">Technical details about the AI models and pipeline powering DeepTrace AI.</div> | |
| <div class="about-grid"> | |
| <div class="about-card"> | |
| <div class="about-card-icon">🧠</div> | |
| <div class="about-card-title">NLP Engine</div> | |
| <div class="about-card-desc"> | |
| RoBERTa-based transformer fine-tuned on 72,000+ news articles. | |
| Classifies content as FAKE or REAL with confidence scoring. | |
| <br><br> | |
| <span style="font-family:'Space Mono',monospace; font-size:0.65rem; color:#00d4ff;"> | |
| hamzab/roberta-fake-news-classification | |
| </span> | |
| </div> | |
| </div> | |
| <div class="about-card"> | |
| <div class="about-card-icon">👁️</div> | |
| <div class="about-card-title">Vision Engine</div> | |
| <div class="about-card-desc"> | |
| EfficientNetB3 transfer learning model fine-tuned on | |
| AI-generated vs real image datasets. Detects synthetic textures | |
| and generation artifacts. | |
| <br><br> | |
| <span style="font-family:'Space Mono',monospace; font-size:0.65rem; color:#00d4ff;"> | |
| Muniba930/image-detector | |
| </span> | |
| </div> | |
| </div> | |
| <div class="about-card"> | |
| <div class="about-card-icon">🔍</div> | |
| <div class="about-card-title">Manipulation Analyser</div> | |
| <div class="about-card-desc"> | |
| Rule-based linguistic analyser detecting clickbait keywords, | |
| fear-based language, excessive punctuation, and emotional | |
| manipulation patterns. | |
| <br><br> | |
| <span style="font-family:'Space Mono',monospace; font-size:0.65rem; color:#00d4ff;"> | |
| Custom lexical engine | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| st.markdown("<br>", unsafe_allow_html=True) | |
| # Tech stack | |
| st.markdown(""" | |
| <div class="card"> | |
| <div class="card-label">🛠️ Tech Stack</div> | |
| <div style="display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.5rem;"> | |
| <span class="tag tag-info">Streamlit</span> | |
| <span class="tag tag-info">Hugging Face</span> | |
| <span class="tag tag-info">PyTorch</span> | |
| <span class="tag tag-info">TensorFlow</span> | |
| <span class="tag tag-info">Transformers</span> | |
| <span class="tag tag-info">EfficientNetB3</span> | |
| <span class="tag tag-info">RoBERTa</span> | |
| <span class="tag tag-info">Plotly</span> | |
| <span class="tag tag-info">Pillow</span> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-label">⚠️ Limitations & Disclaimer</div> | |
| <p style="font-size:0.85rem; color:#94a3b8; line-height:1.8; margin:0;"> | |
| • This tool is for <strong style="color:#e2e8f0">research and educational purposes</strong> | |
| — not a definitive fact-checker.<br> | |
| • Image model performance is limited by training data diversity; | |
| very recent AI generators may not be detected.<br> | |
| • Always cross-reference with trusted news sources before | |
| drawing conclusions.<br> | |
| • The manipulation score is heuristic-based and may produce | |
| false positives on legitimate breaking news. | |
| </p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| st.markdown(""" | |
| <div style="text-align:center; padding:2rem 0; color:#334155; | |
| font-family:'Space Mono',monospace; font-size:0.65rem; letter-spacing:0.1em;"> | |
| DEEPTRACE AI · MULTI-MODAL MISINFORMATION DETECTION · BUILT WITH ❤️ USING OPEN-SOURCE AI | |
| </div> | |
| """, unsafe_allow_html=True) | |
| st.markdown('</div>', unsafe_allow_html=True) |