import React, { useState, useEffect } from 'react'; import { Camera, Shield, ShieldCheck, Heart, Info, Box } from 'lucide-react'; import { motion } from 'motion/react'; import CameraView from './components/CameraView'; import MetricRadar from './components/MetricRadar'; import AuraControl from './components/AuraControl'; import AutomationFeed from './components/AutomationFeed'; import OBSViewer from './components/OBSViewer'; import { TUNNEL_URL } from './tunnelConfig'; export default function App() { const [cloakEnabled, setCloakEnabled] = useState(false); const [cloakIntensity, setCloakIntensity] = useState(30); const [cloakMode, setCloakMode] = useState<'obfuscate' | 'refine'>('obfuscate'); const [sourceType, setSourceType] = useState<'camera' | 'image'>('camera'); const [testImage, setTestImage] = useState(null); const [targetImage, setTargetImage] = useState(null); const [mobileTab, setMobileTab] = useState<'feed' | 'controls' | 'metrics'>('feed'); const [metrics, setMetrics] = useState({ native: { symmetry: 34, eyes: -0.8, jawline: 0.6, midface: 0.44, cheekbones: 1.2, eyeAspect: 0.34, harmony: 7, overall: 5 }, cloaked: { symmetry: 34, eyes: -0.8, jawline: 0.6, midface: 0.44, cheekbones: 1.2, eyeAspect: 0.34, harmony: 7, overall: 5 } }); const [isBroadcasting, setIsBroadcasting] = useState(false); const [tunnelSignalUrl, setTunnelSignalUrl] = useState(''); useEffect(() => { // Attempt to auto-fetch tunnel info from server const fetchTunnelInfo = async () => { try { const res = await fetch('/api/tunnel-info'); const data = await res.json(); if (data.url) { setTunnelSignalUrl(data.url); } } catch (e) { console.error("Failed to fetch tunnel info:", e); } }; fetchTunnelInfo(); const interval = setInterval(fetchTunnelInfo, 5000); return () => clearInterval(interval); }, []); // OBS / Virtual Camera Routing logic const urlParams = new URLSearchParams(window.location.search); const isVirtualView = urlParams.get('view') === 'virtual'; if (isVirtualView) { const overrideUrl = urlParams.get('signal'); return ; } const baseUrl = window.location.origin; const virtualCamUrl = `${baseUrl}${window.location.pathname}?view=virtual${tunnelSignalUrl ? `&signal=${encodeURIComponent(tunnelSignalUrl)}` : ''}`; const handleFileUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (file) { const reader = new FileReader(); reader.onload = (event) => { setTestImage(event.target?.result as string); setSourceType('image'); }; reader.readAsDataURL(file); } }; const handleTargetUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (file) { const reader = new FileReader(); reader.onload = (event) => setTargetImage(event.target?.result as string); reader.readAsDataURL(file); } }; return (
{/* Header */}

De-Mog v1.0.4 - Protection Active

{/* Mobile Tabs */}
Session: 04:12:09 {cloakEnabled ? "Target Cloaked" : "System Vulnerable"}
{/* Left Sidebar: Controls */} {/* Center: Camera Feed */}
{testImage ? 'Static Buffer' : 'Protected Feed'}
{testImage ? 'DIAGNOSTIC STATIC INTERVENTION' : 'ADVFACES CLOAKING ENGINE // REAL-TIME INTERVENTION'}
{/* Right Sidebar: Metrics */}
{/* Mobile Footer Status */}
Status: {cloakEnabled ? 'CLOAK_ACTIVE' : 'MONITORING'} BROADCAST: {isBroadcasting ? 'LIVE' : 'OFFLINE'}
{/* Footer */}
); }