itsamejms
197 lines
9.7 KiB
TypeScript
197 lines
9.7 KiB
TypeScript
import { useState, useRef, FormEvent } from 'react';
|
|
import { motion } from 'motion/react';
|
|
import { WifiOff, Lock } from 'lucide-react';
|
|
import { LogSequence } from '../../types';
|
|
import { synth } from '../../utils/audioSynth';
|
|
|
|
interface Slide9OfflineDemoProps {
|
|
showToast: (msg: string) => void;
|
|
}
|
|
|
|
export default function Slide9OfflineDemo({ showToast }: Slide9OfflineDemoProps) {
|
|
const [isDisconnected, setIsDisconnected] = useState<boolean>(false);
|
|
const [demoStep, setDemoStep] = useState<number>(0);
|
|
const [demoLogs, setDemoLogs] = useState<string[]>([]);
|
|
const [demoPrompt, setDemoPrompt] = useState<string>("");
|
|
const [demoResponse, setDemoResponse] = useState<string>("");
|
|
const [demoPending, setDemoPending] = useState<boolean>(false);
|
|
const demoLogTimerRef = useRef<NodeJS.Timeout[]>([]);
|
|
|
|
const handleSeverConnection = () => {
|
|
synth.playDisconnect();
|
|
setIsDisconnected(true);
|
|
setDemoStep(1);
|
|
setDemoLogs([]);
|
|
setDemoResponse("");
|
|
setDemoPrompt("");
|
|
|
|
demoLogTimerRef.current.forEach(t => clearTimeout(t));
|
|
demoLogTimerRef.current = [];
|
|
|
|
const logSequence: LogSequence[] = [
|
|
{ text: "⚡ [SEVER_INITIATED] Intercepting all global socket calls...", delay: 200 },
|
|
{ text: "🔴 [PING_FAILED] api.openai.com - Request timeout (Route blocked)", delay: 800 },
|
|
{ text: "🔴 [CONN_DEAD] gateway.anthropic.com - Destination unreachable", delay: 1400 },
|
|
{ text: "🔒 [OFFLINE_ENFORCED] Firewall rules securely locked. Outbound data leakage risk: 0.00%", delay: 2000 },
|
|
{ text: "📦 [DEPLOYING] Mount local weights: 'llama-3-8b-instruct.Q4_K_M.gguf'", delay: 2600 },
|
|
{ text: "🚀 [CPU_AVX2] GPU acceleration mapped to RTX VRAM Core.", delay: 3200 },
|
|
{ text: "✅ [Sovereign-Llama3-v1] Online in 100% disconnected sandbox environment.", delay: 3800 }
|
|
];
|
|
|
|
logSequence.forEach((seq) => {
|
|
const timer = setTimeout(() => {
|
|
setDemoLogs((prev) => [...prev, seq.text]);
|
|
synth.playBlip();
|
|
if (seq.text.startsWith('✅')) {
|
|
setDemoStep(2);
|
|
}
|
|
}, seq.delay);
|
|
demoLogTimerRef.current.push(timer);
|
|
});
|
|
};
|
|
|
|
const submitDemoPrompt = (e: FormEvent) => {
|
|
e.preventDefault();
|
|
if (!demoPrompt.trim() || demoPending) return;
|
|
synth.playClick();
|
|
setDemoPending(true);
|
|
setDemoResponse("");
|
|
|
|
const mockAiResponses: { [key: string]: string } = {
|
|
default: "SYSTEM RESPONSE // SOVEREIGN ENGINE:\n\nInput processed completely on-device in 143ms.\nResult: Secure compliance extraction verified. Ready for download. Zero bits sent beyond localhost.",
|
|
analysts: "LOCAL_ANALYSIS //\nWe ran sentiment scoring on the structured CSV feed. Standard Deviances: \n- Positivity: 84.1%\n- Risk Alert: Trace detected on Cloud API usage. Highly recommend immediate on-site fallback protocol.",
|
|
extract: "EXTRACTED SCHEMA:\n{\n 'transaction_id': 'TX90812',\n 'sovereign_rating': '10.0',\n 'cost_per_token': '$0.000000000'\n}"
|
|
};
|
|
|
|
setTimeout(() => {
|
|
const p = demoPrompt.toLowerCase();
|
|
let response = mockAiResponses.default;
|
|
if (p.includes('analyst') || p.includes('score') || p.includes('sentiment')) {
|
|
response = mockAiResponses.analysts;
|
|
} else if (p.includes('schema') || p.includes('json') || p.includes('extract')) {
|
|
response = mockAiResponses.extract;
|
|
}
|
|
setDemoResponse(response);
|
|
setDemoPending(false);
|
|
synth.playBlip();
|
|
}, 1100);
|
|
};
|
|
|
|
const handleReconnect = () => {
|
|
synth.playClick();
|
|
setIsDisconnected(false);
|
|
setDemoStep(0);
|
|
};
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center max-w-6xl mx-auto w-full">
|
|
<div className="lg:col-span-4 flex flex-col justify-center text-left">
|
|
<span className="text-emerald-500 font-mono text-xs font-bold uppercase tracking-wider mb-2">// SOVEREIGN DISCONNECT</span>
|
|
<h2 className="font-display font-bold text-2xl sm:text-3xl text-white tracking-tight uppercase leading-none mb-4">
|
|
Live Offline Walkthrough
|
|
</h2>
|
|
<p className="text-slate-400 font-sans text-sm sm:text-base leading-relaxed mb-6">
|
|
Witness absolute independence in motion. Flip the sovereign kill-switch to isolate your computing workspace and verify local cognitive offline processing in high-fidelity.
|
|
</p>
|
|
|
|
<div className="hidden lg:flex items-center gap-2 border border-slate-800/80 rounded px-3 py-1.5 bg-slate-900/50 text-[10px] font-mono text-slate-500">
|
|
<Lock className="w-3.5 h-3.5 text-emerald-400 shrink-0 animate-pulse" />
|
|
<span>Isolating terminal loops from network cards fully.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="lg:col-span-8 flex flex-col w-full">
|
|
<div className="bg-slate-950/60 border border-slate-800/80 rounded-xl p-5 sm:p-6 text-left flex flex-col gap-4">
|
|
|
|
{!isDisconnected ? (
|
|
<div className="flex flex-col items-center justify-center py-10 text-center">
|
|
<WifiOff className="w-16 h-16 text-emerald-500/30 animate-pulse mb-6" />
|
|
<h3 className="font-display font-bold text-lg text-white uppercase mb-2">OFF-GRID CONNECTION SANDBOX</h3>
|
|
<p className="text-slate-400 text-xs font-sans max-w-md mb-8">
|
|
Initiate off-grid mode to sever connection mapping hooks and activate offline model simulations on your local VRAM nodes.
|
|
</p>
|
|
<button
|
|
onClick={handleSeverConnection}
|
|
className="px-6 py-3 rounded bg-emerald-500 text-slate-950 font-mono text-xs font-black uppercase tracking-wider border border-emerald-400 hover:shadow-[0_0_20px_rgba(16,185,129,0.35)] cursor-pointer transition-all duration-300"
|
|
>
|
|
⚡ ACTIVATE OFF-GRID INTERRUPT
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col gap-4 h-full">
|
|
<div className="flex items-center justify-between border-b border-slate-800 pb-2">
|
|
<div className="flex items-center gap-2 text-[10px] font-mono font-bold text-emerald-400">
|
|
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse-emerald" />
|
|
<span>OFF-GRID SANDBOX ENVIRONMENT ACTIVE</span>
|
|
</div>
|
|
<button
|
|
onClick={handleReconnect}
|
|
className="font-mono text-[9px] text-slate-500 hover:text-slate-350 hover:underline"
|
|
>
|
|
[RECONNECT NETWORK]
|
|
</button>
|
|
</div>
|
|
|
|
<div className="bg-slate-900 rounded p-3 font-mono text-[10px] text-slate-300 h-32 overflow-y-auto custom-scrollbar flex flex-col gap-1.5 border border-slate-850">
|
|
{demoLogs.map((log, idx) => (
|
|
<p key={idx} className={log.includes('Failed') || log.includes('Dead') ? 'text-rose-450 font-bold' : log.includes('Sovereign') ? 'text-emerald-400 font-bold' : ''}>
|
|
{log}
|
|
</p>
|
|
))}
|
|
{demoStep === 1 && (
|
|
<div className="flex items-center gap-2 text-slate-500">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-slate-500 animate-ping" />
|
|
<span>Severing network nodes...</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{demoStep === 2 && (
|
|
<motion.form
|
|
initial={{ opacity: 0, y: 5 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
onSubmit={submitDemoPrompt}
|
|
className="flex flex-col gap-3 font-mono"
|
|
>
|
|
<div className="flex flex-col gap-1">
|
|
<label className="text-[9px] text-slate-500 uppercase">Test Sovereign Reasoning Invocations:</label>
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
value={demoPrompt}
|
|
onChange={(e) => setDemoPrompt(e.target.value)}
|
|
placeholder="Try prompt e.g.: 'Run Sentiment Score Matrix' or 'Extract JSON Schema'..."
|
|
className="flex-1 bg-slate-900 border border-slate-800 rounded px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={demoPending || !demoPrompt.trim()}
|
|
className="px-4 py-2 bg-emerald-500 text-slate-950 rounded font-black text-xs uppercase cursor-pointer hover:bg-emerald-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
{demoPending ? 'RUNNING...' : 'SUBMIT'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{(demoPending || demoResponse) && (
|
|
<div className="bg-slate-950 rounded border border-slate-850 p-3 h-28 overflow-y-auto custom-scrollbar font-mono text-[10px]">
|
|
{demoPending ? (
|
|
<div className="flex items-center gap-2 text-slate-500">
|
|
<div className="w-3 h-3 border border-t-emerald-500 border-r-transparent rounded-full animate-spin" />
|
|
<span>Invoking local model weights... SEC Compliance sandbox isolation 100% verified</span>
|
|
</div>
|
|
) : (
|
|
<pre className="text-emerald-400 break-words whitespace-pre-wrap">{demoResponse}</pre>
|
|
)}
|
|
</div>
|
|
)}
|
|
</motion.form>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|