adding the first version of the presentation and the initial attempt at the .meetings script
This commit is contained in:
itsamejms
@@ -0,0 +1,196 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user