Spaces:
Running
Running
Download index.html from eaglelandsonce/Machine_Speed: direct link, hf CLI and curl.
- Browser
- Download file 20.3 kB
-
https://huggingface.co/spaces/eaglelandsonce/Machine_Speed/resolve/main/index.html
- Command line
-
hf download hf://spaces/eaglelandsonce/Machine_Speed/index.html
-
curl -L -o index.html https://huggingface.co/spaces/eaglelandsonce/Machine_Speed/resolve/main/index.html
20.3 kB
| <html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Machine Speed Security — The Response Race</title><style> | |
| :root{color-scheme:dark;--bg:#080e1c;--panel:#111c30;--line:#293952;--text:#edf4ff;--muted:#a5b7d0;--cyan:#53e3d3;--red:#ff607e;--gold:#ffcf70}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top right,#193152,transparent 60%),var(--bg);color:var(--text);font:15px system-ui,sans-serif}main{max-width:1500px;margin:auto;padding:26px}header{display:flex;align-items:center;justify-content:space-between;gap:20px}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--cyan);font-weight:800}h1{font-size:clamp(26px,3vw,42px);margin:8px 0}p{color:var(--muted);line-height:1.5;margin:6px 0}button,select{background:#1c2b44;color:var(--text);border:1px solid #415571;border-radius:8px;padding:10px 14px;font:inherit;cursor:pointer}button:hover,button:focus-visible{border-color:var(--cyan)}button.primary{background:var(--cyan);color:#071b24;font-weight:800}button.active{border-color:var(--cyan);box-shadow:inset 0 -3px var(--cyan)}.actions{display:flex;gap:8px;flex-wrap:wrap}.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:24px 0 14px}.stages button{text-align:left;padding:13px}.stages small{display:block;color:var(--muted);margin-top:5px}.controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:12px}label{display:block;font-weight:700}label output{float:right;color:var(--cyan)}input[type=range]{width:100%;accent-color:var(--cyan);margin:14px 0 5px}.hint{font-size:12px;color:var(--muted)}.story{margin:14px 0;padding:14px 18px;border-left:3px solid var(--gold);background:#172237;min-height:74px}.story strong{color:var(--gold)}.lanes{display:grid;grid-template-columns:1fr 1fr;gap:16px}.lane{border:1px solid var(--line);background:#0d1728;border-radius:12px;overflow:hidden}.lanehead{padding:16px 18px 8px;display:flex;justify-content:space-between;gap:10px}h2{font-size:18px;margin:0}.badge{font-size:11px;color:var(--gold);border:1px solid #5a503b;border-radius:20px;padding:5px 8px;white-space:nowrap}.lane:nth-child(2) .badge{color:var(--cyan);border-color:#28655f}.stats{display:grid;grid-template-columns:repeat(4,1fr);padding:12px 18px;gap:8px}.stat b{display:block;font-size:26px;font-variant-numeric:tabular-nums}.stat span{font-size:11px;color:var(--muted)}.red{color:var(--red)}.green{color:var(--cyan)}canvas{width:100%;height:330px;display:block;background:linear-gradient(#0e1b30,#0a1322)}.health{padding:10px 18px 16px}.health label{font-size:12px;font-weight:400}.track{height:7px;background:#283449;border-radius:5px;margin-top:8px;overflow:hidden}.fill{height:100%;background:var(--cyan);transition:width .2s}.foot{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-top:16px}.box{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px}.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:14px 0}.dot{display:inline-block;width:9px;height:9px;background:var(--red);border-radius:50%;margin-right:5px}#log{height:96px;overflow:hidden;font:12px/1.8 ui-monospace,monospace;color:var(--muted)}.signature{display:flex;align-items:center;gap:12px;margin:12px 0;font:700 22px ui-monospace,monospace}.signature span{color:var(--gold)}summary{cursor:pointer;color:var(--muted)}details p{font-size:12px}footer{font-size:11px;color:var(--muted);margin:16px 0}.clock{font:14px ui-monospace,monospace;color:var(--muted);white-space:nowrap}@media(max-width:950px){.lanes,.foot{grid-template-columns:1fr}.controls{grid-template-columns:1fr}.stages{grid-template-columns:1fr 1fr}header{align-items:flex-start;flex-direction:column}main{padding:16px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}} | |
| </style></head><body><main> | |
| <header><div><div class="eyebrow">INTERACTIVE SECURITY LAB</div><h1>Machine speed. Human limits.</h1><p>Watch response queues grow, signatures mutate, and intrusions disrupt a connected system.</p></div><div class="actions"><button id="play" class="primary">Pause</button><button id="reset">Reset</button><button id="tour">▶ Guided demo</button><button id="full">Full screen</button></div></header> | |
| <nav class="stages" aria-label="Scenarios"><button data-stage="0" class="active">01 · Human pace<small>Time to identify and remove</small></button><button data-stage="1">02 · Machine pace<small>Volume outruns the analyst</small></button><button data-stage="2">03 · Shape-shifting threats<small>New signature, same malicious intent</small></button><button data-stage="3">04 · Automate the response<small>Behavior detection + containment</small></button></nav> | |
| <section class="controls"><div><label for="speed">Attack speed <output id="speedOut"></output></label><input id="speed" type="range" min="0.5" max="30" step="0.5" value="0.5"><div class="hint">Human pace 0.5/s → machine pace 30/s (illustrative)</div></div><div><label for="poly">Polymorphism <output id="polyOut"></output></label><input id="poly" type="range" min="0" max="100" step="5" value="0"><div class="hint">Share of attacks that change signature before inspection</div></div><div><label for="response">Automated capacity <output id="responseOut"></output></label><input id="response" type="range" min="2" max="40" step="1" value="24"><div class="hint"><label style="font-weight:400"><input id="auto" type="checkbox"> Enable machine-speed behavior defense (right lane)</label></div></div></section> | |
| <div class="story" aria-live="polite"><strong id="storyTitle"></strong><p id="storyText"></p></div> | |
| <div class="lanes"><section class="lane"><div class="lanehead"><div><h2>Traditional response</h2><p class="hint">Known signatures → human review → removal</p></div><span class="badge">1 review / second</span></div><div class="stats" id="stats0"></div><canvas id="c0" aria-label="Traditional defense animation: incoming threats, review queue, and system nodes"></canvas><div class="health"><label>System integrity <output id="integrity0"></output></label><div class="track"><div id="health0" class="fill"></div></div></div></section> | |
| <section class="lane"><div class="lanehead"><div><h2 id="rightTitle">Comparison lane</h2><p id="rightSub" class="hint">Same traffic, same starting conditions</p></div><span id="rightBadge" class="badge">Automation OFF</span></div><div class="stats" id="stats1"></div><canvas id="c1" aria-label="Comparison defense animation with optional machine-speed behavioral containment"></canvas><div class="health"><label>System integrity <output id="integrity1"></output></label><div class="track"><div id="health1" class="fill"></div></div></div></section></div> | |
| <div class="legend"><span><i class="dot"></i>Known threat A1</span><span><i class="dot" style="background:#c48aff"></i>Mutated threat · shape + signature change</span><span><i class="dot" style="background:var(--cyan)"></i>Removal / containment</span><span><i class="dot" style="background:var(--gold)"></i>Waiting for review</span><span class="clock" id="clock">00:00</span></div> | |
| <div class="foot"><section class="box"><div class="eyebrow">LIVE INCIDENT FEED</div><div id="log" role="log"></div></section><section class="box"><div class="eyebrow">POLYMORPHISM MICROSCOPE</div><div class="signature">A1 <span>→</span> <b id="sig">A1</b> <span id="shape">●</span></div><p class="hint">Appearance changes; malicious behavior persists. A new signature misses the simulated exact-match rule. Behavior detection can still recognize the action.</p></section></div> | |
| <details class="box" style="margin-top:16px"><summary>How this model works · assumptions and teaching notes</summary><p>This is a conceptual simulation, not a benchmark or a claim that all older security works this way. Both lanes receive identical attack arrivals. Traditional defense uses exact signature matching against A1, with an analyst reviewing one queued alert per second. Each alert has 2.5 seconds to be handled before intrusion. Mutated signatures bypass this intentionally limited detector.</p><p>With automation enabled, the right lane uses an illustrative 96% behavioral detection rate and the selected finite response capacity. Misses and overdue queued threats still breach. All traffic shown is malicious; false positives and legitimate traffic are outside this model. Real signature engines can operate at machine speed, and real defenses combine multiple layers.</p><p>Each intrusion infects a system node. Infected nodes lose integrity and spread to adjacent nodes every 2.5 seconds. Analysts can clean one node when their queue is empty; automated containment can clean one every 0.2 seconds when capacity is available. Residual damage recovers gradually after cleanup. These rates are invented to make the contrast visible. Changing controls retains damage; scenario buttons reset both lanes for a fresh comparison.</p><p>Teaching sequence: run each numbered scenario for 15–25 seconds. In scenario 3, pause to compare the mutated signatures with the original A1 rule. In scenario 4, reduce automated capacity below attack speed to show that automation also has limits. The guided demo runs four 20-second stages and pauses at the end. Keyboard: Space = pause; R = reset; 1–4 = scenarios. Everything runs locally with no network requests.</p></details><footer>THE RESPONSE RACE · Standalone HTML / JavaScript · Illustrative rates and outcomes · No actual attacks or system access</footer> | |
| </main><script> | |
| ; | |
| const $=id=>document.getElementById(id), colors=['#ff607e','#c48aff','#ffcf70','#60aaff','#ef8cff']; | |
| const scenarios=[['At human pace, the analyst has time.','The known threat is identified, reviewed, and removed before it reaches the system.',.5,0,false],['Speed creates a response gap.','Known threats are detected, but the human queue grows faster than it can be cleared. Overdue alerts become intrusions.',18,0,false],['New signature. Same destructive behavior.','Mutating threats bypass the A1 signature rule while high volume overwhelms the review queue. Watch infections spread.',18,85,false],['Respond at the speed of the threat.','The right lane now detects behavior and contains threats automatically. Some attacks can still get through; finite capacity still matters.',18,85,true]]; | |
| let lanes=[],elapsed=0,spawn=0,sequence=0,running=true,tour=false,tourStart=0,stage=0,last=0,seed=12345,logItems=[],signature='A1'; | |
| function rand(){seed=(Math.imul(seed,1664525)+1013904223)>>>0;return seed/4294967296} | |
| function makeLane(){return{packets:[],queue:[],effects:[],nodes:Array.from({length:8},()=>({hp:100,infected:false})),blocked:0,breaches:0,credit:0,clean:0,spread:0}} | |
| function log(msg){logItems.unshift(elapsed.toFixed(1)+'s · '+msg);logItems=logItems.slice(0,5);$('log').textContent='';logItems.forEach(t=>{let d=document.createElement('div');d.textContent=t;$('log').append(d)})} | |
| function reset(){lanes=[makeLane(),makeLane()];elapsed=spawn=sequence=0;seed=12345;signature='A1';logItems=[];log('Fresh systems. Identical traffic in both lanes.');updateUI()} | |
| function preset(i,keepTour=false){stage=i;if(!keepTour)stopTour();const s=scenarios[i];$('speed').value=s[2];$('poly').value=s[3];$('auto').checked=s[4];$('response').value=24;$('storyTitle').textContent=s[0];$('storyText').textContent=s[1];document.querySelectorAll('[data-stage]').forEach(b=>b.classList.toggle('active',+b.dataset.stage===i));reset();tourStart=0;running=true;sync()} | |
| function stopTour(){tour=false;$('tour').textContent='▶ Guided demo'} | |
| function sync(){$('speedOut').textContent=(+$('speed').value).toFixed(1)+'/s';$('polyOut').textContent=$('poly').value+'%';$('responseOut').textContent=$('response').value+'/s';$('play').textContent=running?'Pause':'Resume';$('rightTitle').textContent=$('auto').checked?'Machine-speed response':'Comparison lane';$('rightSub').textContent=$('auto').checked?'Behavior detection → automated containment':'Same traffic, same starting conditions';$('rightBadge').textContent=$('auto').checked?'Automation ON':'Automation OFF'} | |
| function effect(l,x,y,color,text){l.effects.push({x,y,color,text,life:1})} | |
| function breach(l,p,index){l.breaches++;let n=l.nodes[p.target];n.infected=true;n.hp=Math.max(0,n.hp-9);p.phase='breach';p.age=0;p.x=650;p.y=80+(p.target%4)*60;l.packets.push(p);if(index===0&&(l.breaches<4||l.breaches%20===0))log('Traditional: intrusion '+l.breaches+' → '+['gateway','database','identity','storage'][p.target%4]);} | |
| function block(l,p){l.blocked++;effect(l,440,p.y,'#53e3d3','×');} | |
| function emit(){sequence++;const mutated=rand()<+$('poly').value/100;const v=1+Math.floor(rand()*4),target=Math.floor(rand()*8),detect=rand();let p={id:sequence,mutated,v,target,detect,age:0,phase:'flight',x:25,y:62+rand()*235,sig:mutated?(sequence*7919%65536).toString(16).toUpperCase().padStart(4,'0'):'A1'};lanes.forEach(l=>l.packets.push({...p}));if(mutated){signature=p.sig;$('sig').textContent=signature;$('shape').textContent=['◆','▲','■','⬟'][v-1];$('sig').style.color=colors[v]}} | |
| function tick(l,dt,index){const automated=index===1&&$('auto').checked;let capacity=automated?+$('response').value:1;l.credit=Math.min(1+dt*capacity,l.credit+dt*capacity);l.clean+=dt;l.spread+=dt;const keep=[];const arrivals=[]; | |
| for(let p of l.packets){p.age+=dt;if(p.phase==='flight'){p.x=25+p.age*155;if(p.age>=.7&&p.mutated)p.v=1+(Math.floor(p.age*2)+p.id)%4;if(p.x>=390)arrivals.push(p);else keep.push(p)}else if(p.age<.55)keep.push(p)}l.packets=keep; | |
| for(let p of arrivals){if(automated?p.detect<.96:!p.mutated){p.wait=0;p.phase='queue';l.queue.push(p)}else breach(l,p,index)} | |
| for(let p of l.queue)p.wait+=dt; | |
| while(l.credit>=1&&l.queue.length){const p=l.queue.shift();l.credit-=1;block(l,p)} | |
| let pending=[];for(let p of l.queue){if(p.wait>2.5)breach(l,p,index);else pending.push(p)}l.queue=pending; | |
| if(l.clean>=(automated?.2:1)&&!l.queue.length){l.clean=0;const node=l.nodes.find(n=>n.infected);if(node){node.infected=false;effect(l,790,170,'#53e3d3','CONTAINED')}} | |
| if(l.spread>=2.5){l.spread=0;let ids=l.nodes.map((n,i)=>n.infected?i:-1).filter(i=>i>=0);ids.forEach(i=>{l.nodes[(i+1)%8].infected=true})} | |
| l.nodes.forEach(n=>{n.hp=Math.max(0,Math.min(100,n.hp+(n.infected?-6:2)*dt))});l.effects=l.effects.filter(e=>(e.life-=dt)>0)} | |
| function draw(l,index){const cv=$('c'+index),ctx=cv.getContext('2d'),dpr=window.devicePixelRatio||1,w=cv.clientWidth,h=cv.clientHeight;if(cv.width!==Math.round(w*dpr)||cv.height!==Math.round(h*dpr)){cv.width=Math.round(w*dpr);cv.height=Math.round(h*dpr)}ctx.setTransform(cv.width/1000,0,0,cv.height/330,0,0);ctx.clearRect(0,0,1000,330);ctx.font='14px system-ui';ctx.fillStyle='#a5b7d0';ctx.fillText('INCOMING',25,26);ctx.fillText('DETECT / RESPOND',350,26);ctx.fillText('CONNECTED SYSTEM',700,26); | |
| ctx.strokeStyle='#23334d';ctx.lineWidth=1;for(let y=60;y<320;y+=45){ctx.beginPath();ctx.moveTo(20,y);ctx.lineTo(650,y);ctx.stroke()} | |
| const automated=index===1&&$('auto').checked;ctx.fillStyle=automated?'#123e3c':'#302b30';ctx.fillRect(387,42,106,275);ctx.strokeStyle=automated?'#53e3d3':'#ffcf70';ctx.strokeRect(387,42,106,275);ctx.save();ctx.translate(414,303);ctx.rotate(-Math.PI/2);ctx.fillStyle=automated?'#53e3d3':'#ffcf70';ctx.font='12px system-ui';ctx.fillText(automated?'BEHAVIOR + CONTAINMENT':'A1 RULE + HUMAN REVIEW',0,0);ctx.restore(); | |
| const pos=i=>({x:745+Math.floor(i/4)*150,y:75+(i%4)*65}); | |
| for(let i=0;i<8;i++){let a=pos(i),b=pos((i+1)%8);ctx.strokeStyle=l.nodes[i].infected?'#9b3651':'#2c415a';ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.stroke();if(l.nodes[i].infected){let t=(elapsed*.65+i*.13)%1;ctx.fillStyle='#ff607e';ctx.beginPath();ctx.arc(a.x+(b.x-a.x)*t,a.y+(b.y-a.y)*t,4,0,Math.PI*2);ctx.fill()}} | |
| l.nodes.forEach((n,i)=>{let a=pos(i);ctx.fillStyle=n.infected?'#512037':'#163e46';ctx.strokeStyle=n.infected?'#ff607e':'#53e3d3';ctx.lineWidth=n.infected?2+Math.sin(elapsed*5):1;ctx.fillRect(a.x-44,a.y-20,88,40);ctx.strokeRect(a.x-44,a.y-20,88,40);ctx.fillStyle='#eef4ff';ctx.font='11px system-ui';ctx.textAlign='center';ctx.fillText(['GATEWAY','DATABASE','IDENTITY','STORAGE','API','PAYMENTS','BACKUPS','SERVICES'][i],a.x,a.y-2);ctx.fillStyle=n.infected?'#ff8ca4':'#a5b7d0';ctx.fillText(n.infected?(n.hp<25?'OFFLINE':'INFECTED'):(n.hp<80?'RECOVERING':'HEALTHY'),a.x,a.y+12);ctx.textAlign='left'}); | |
| function packet(p,x,y){const changed=p.mutated&&p.age>=.7;ctx.fillStyle=changed?colors[p.v]:'#ff607e';ctx.strokeStyle=ctx.fillStyle;ctx.beginPath();if(changed){const sides=p.v+2;for(let j=0;j<sides;j++){let a=j*Math.PI*2/sides-Math.PI/2;let xx=x+8*Math.cos(a),yy=y+8*Math.sin(a);j?ctx.lineTo(xx,yy):ctx.moveTo(xx,yy)}ctx.closePath()}else ctx.arc(x,y,6,0,Math.PI*2);ctx.fill();if(+$('speed').value<4||p.id%9===0){ctx.font='10px monospace';ctx.fillText(changed?p.sig:'A1',x+11,y+3)}} | |
| l.packets.forEach(p=>{if(p.phase==='flight')packet(p,p.x,p.y);else{const a=pos(p.target),t=p.age/.55;packet(p,493+(a.x-493)*t,160+(a.y-160)*t)}}); | |
| l.queue.slice(0,60).forEach((p,i)=>{packet(p,520+Math.floor(i/15)*28,50+(i%15)*17)});if(l.queue.length>60){ctx.fillStyle='#ffcf70';ctx.fillText('+'+(l.queue.length-60)+' alerts',515,319)} | |
| l.effects.slice(-45).forEach(e=>{ctx.globalAlpha=e.life;ctx.fillStyle=e.color;ctx.font=e.text==='×'?'28px system-ui':'12px system-ui';ctx.fillText(e.text,e.x,e.y-(1-e.life)*25);ctx.globalAlpha=1});} | |
| function updateUI(){for(let i=0;i<2;i++){const l=lanes[i],hp=Math.round(l.nodes.reduce((a,n)=>a+n.hp,0)/8);$('stats'+i).innerHTML='<div class="stat"><b>'+sequence+'</b><span>ARRIVED</span></div><div class="stat"><b class="green">'+l.blocked+'</b><span>REMOVED</span></div><div class="stat"><b>'+l.queue.length+'</b><span>QUEUED</span></div><div class="stat"><b class="red">'+l.breaches+'</b><span>BREACHES</span></div>';$('integrity'+i).textContent=hp+'%';$('health'+i).style.width=hp+'%';$('health'+i).style.background=hp<50?'#ff607e':hp<80?'#ffcf70':'#53e3d3'}$('clock').textContent='RUN '+Math.floor(elapsed/60).toString().padStart(2,'0')+':'+Math.floor(elapsed%60).toString().padStart(2,'0')} | |
| let uiTimer=0;function frame(now){const dt=Math.min(.05,(now-last)/1000||0);last=now;if(running){elapsed+=dt;spawn+=dt*+$('speed').value;while(spawn>=1){spawn--;emit()}lanes.forEach((l,i)=>tick(l,dt,i));if(tour&&elapsed>=20){if(stage<3)preset(stage+1,true);else{stopTour();running=false;sync();log('Guided demo complete. Adjust controls to explore.')}}}lanes.forEach(draw);uiTimer+=dt;if(uiTimer>.12){updateUI();uiTimer=0}requestAnimationFrame(frame)} | |
| $('play').onclick=()=>{running=!running;sync()};$('reset').onclick=()=>{stopTour();reset()};$('tour').onclick=()=>{if(tour)stopTour();else{tour=true;$('tour').textContent='■ Stop demo';preset(0,true)}};$('full').onclick=()=>{if(document.fullscreenElement)document.exitFullscreen?.();else document.documentElement.requestFullscreen?.().catch(()=>{})};document.querySelectorAll('[data-stage]').forEach(b=>b.onclick=()=>preset(+b.dataset.stage));['speed','poly','response','auto'].forEach(id=>$(id).addEventListener('input',()=>{stopTour();sync();document.querySelectorAll('[data-stage]').forEach(b=>b.classList.remove('active'));$('storyTitle').textContent='Experiment with the response gap.';$('storyText').textContent='Settings change live; existing intrusions remain. Reset to compare clean systems under these settings.';if(id==='auto')log($('auto').checked?'Behavior defense enabled.':'Behavior defense disabled.')}));document.addEventListener('keydown',e=>{if(['INPUT','BUTTON','SELECT','TEXTAREA','SUMMARY'].includes(e.target.tagName))return;if(e.code==='Space'){e.preventDefault();$('play').click()}if(e.key.toLowerCase()==='r')$('reset').click();if('1234'.includes(e.key)&&e.key.length===1)preset(+e.key-1)});preset(0);if(matchMedia('(prefers-reduced-motion: reduce)').matches){running=false;sync()}requestAnimationFrame(frame); | |
| window.simulation={getState:()=>({elapsed,sequence,running,lanes:lanes.map(l=>({blocked:l.blocked,breaches:l.breaches,queue:l.queue.length,integrity:l.nodes.reduce((a,n)=>a+n.hp,0)/8}))}),advance:seconds=>{for(let t=0;t<seconds;t+=.02){elapsed+=.02;spawn+=.02*+$('speed').value;while(spawn>=1){spawn--;emit()}lanes.forEach((l,i)=>tick(l,.02,i))}updateUI()},preset}; | |
| </script></body></html> | |