Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="#001000">
<title>Ultimate Cyber Studio AI</title>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/face_mesh.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.17.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@2.2.3/dist/coco-ssd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/handpose@0.1.0/dist/handpose.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>
<style>
:root{--c:#00ff66;--bg:#020604}
*{box-sizing:border-box}
body{margin:0;background:#000;color:var(--c);font:12px monospace}
header{padding:12px;border-bottom:1px solid var(--c);background:#001008}
h1{font-size:19px;margin:0 0 7px}
#status{font-size:11px;line-height:1.7}
#stage{position:relative;width:100%;height:47vh;min-height:230px;background:#000;overflow:hidden}
video,canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
video{transform:scaleX(-1)}
#overlay{pointer-events:none}
#buttons{padding:8px;display:flex;flex-wrap:wrap;gap:5px}
button,select{background:#001508;color:var(--c);border:1px solid var(--c);padding:8px;font:11px monospace;border-radius:3px}
button.active{background:var(--c);color:#000}
#detectors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:8px}
.det{width:100%;text-align:left}
#result{margin:8px;padding:10px;border:1px solid var(--c);min-height:55px;white-space:pre-wrap;overflow-wrap:anywhere}
#log{margin:8px;padding:8px;height:80px;overflow:auto;background:#001008}
#hint{padding:8px;line-height:1.7;color:#a0ffb8}
@media(min-width:700px){#stage{height:55vh}#detectors{grid-template-columns:repeat(4,minmax(0,1fr))}}
</style>
</head>
<body>
<header>
<h1>◈ ULTIMATE CYBER STUDIO AI</h1>
<div id="status">SYSTEM OFFLINE | CAMERA NOT STARTED</div>
</header>
<div id="stage">
<video id="video" autoplay playsinline muted></video>
<canvas id="overlay"></canvas>
</div>
<div id="buttons">
<button id="start">▶ START CAMERA</button>
<button id="stop">■ STOP CAMERA</button>
<button id="photo">📸 PHOTO</button>
<button id="record">🔴 RECORD</button>
<button id="flip">🔄 FLIP CAMERA</button>
<button id="full">⛶ FULLSCREEN</button>
<button id="clear">CLEAR DETECTORS</button>
<select id="theme">
<option value="#00ff66">NEON GREEN</option>
<option value="#00ccff">CYBER BLUE</option>
<option value="#ff33ff">PURPLE</option>
<option value="#ff3344">RED</option>
<option value="#ffff00">YELLOW</option>
</select>
</div>
<h3 style="padding-left:8px">40 DETECTOR MODES</h3>
<div id="detectors"></div>
<div id="result">Results will appear here.</div>
<div id="log">SYSTEM READY<br></div>
<div id="hint">
<strong>IMPORTANT:</strong><br>
Camera access requires HTTPS or localhost. AI models need an internet connection on first load.
Some detectors use real AI models; others use basic image analysis or estimates. They are not all independent AI models.
</div>
<script>
"use strict";
const $=id=>document.getElementById(id);
const video=$("video");
const canvas=$("overlay");
const ctx=canvas.getContext("2d");
let stream=null,faceMesh=null,coco=null,handModel=null;
let cameraOn=false,front=true,working=false;
let active=new Set();
let predictions=[];
let facePoints=null,handPoints=[];
let previousFrame=null;
let motionScore=0,brightness=0;
let recorder=null,recordChunks=[],recording=false;
let color="#00ff66",lastOCR=0,lastQR="",lastObject=0;
let raf=0;
const detectorNames=[
"Face Detector",
"Eye Detector",
"Emotion Estimate",
"Car Detector",
"Body Detector",
"Hand Detector",
"Object Detector",
"Motion Detector",
"Face Tracking",
"Multiple Face Detector",
"Animal Detector",
"Text Detector (OCR)",
"Color Detector",
"QR Code Detector",
"Sound Detector",
"Low-Light Detector",
"Distance Estimate",
"Gesture Detector",
"Clothing Object Detector",
"Screen Change Detector",
"Face Mesh",
"Face Outline",
"Head Movement",
"Blink Estimate",
"Smile Estimate",
"Eyebrow Landmarks",
"Face Position",
"Person Counter",
"Object Counter",
"Motion Alert",
"Background Change",
"Brightness Detector",
"Shadow Estimate",
"Shape Detector",
"Edge Detector",
"Dominant Color",
"Light Flash Detector",
"Camera Shake Estimate",
"Scene Change",
"Visual Scanner"
];
function log(s){
const el=$("log");
el.innerHTML+="<br>> "+safe(s);
el.scrollTop=el.scrollHeight;
}
function safe(s){
return String(s).replace(/[&<>"']/g,c=>({
"&":"&","<":"<",">":">",'"':""","'":"'"
})[c]);
}
function result(s){$("result").textContent=s}
function status(s){$("status").textContent=s}
function say(s){log(s);result(s)}
detectorNames.forEach((name,i)=>{
const b=document.createElement("button");
b.className="det";
b.textContent=String(i+1).padStart(2,"0")+" | "+name;
b.onclick=()=>toggleDetector(i,b);
$("detectors").appendChild(b);
});
function toggleDetector(i,b){
const id=i+1;
if(active.has(id)){
active.delete(id);
b.classList.remove("active");
say(detectorNames[i]+" OFF");
}else{
active.add(id);
b.classList.add("active");
say(detectorNames[i]+" ON");
if(!cameraOn)startCamera();
if([4,7,11,19,28,29].includes(id))loadObjectModel();
if(id===6||id===18)loadHandModel();
if(id===12)log("OCR will run when requested; processing may take time.");
}
}
async function loadObjectModel(){
if(coco)return;
try{
status("LOADING OBJECT AI MODEL...");
await tf.ready();
coco=await cocoSsd.load();
log("COCO-SSD object model loaded");
status("OBJECT MODEL READY");
}catch(e){log("Object model failed: "+e.message)}
}
async function loadHandModel(){
if(handModel)return;
try{
await tf.ready();
handModel=await handpose.load();
log("Hand model loaded");
}catch(e){log("Hand model failed: "+e.message)}
}
async function startCamera(){
if(cameraOn)return;
if(!navigator.mediaDevices?.getUserMedia){
status("CAMERA NEEDS HTTPS OR SUPPORTED BROWSER");
return;
}
try{
status("REQUESTING CAMERA...");
stream=await navigator.mediaDevices.getUserMedia({
video:{facingMode:front?"user":"environment",width:{ideal:640},height:{ideal:480}},
audio:true
});
video.srcObject=stream;
await video.play();
cameraOn=true;
await setupFaceMesh();
resize();
status("CAMERA ONLINE | SELECT DETECTORS");
log("Camera started");
animate();
}catch(e){
status("CAMERA ERROR: "+e.message);
log("Camera permission or startup failed");
}
}
async function setupFaceMesh(){
if(faceMesh)return;
if(typeof FaceMesh==="undefined"){
log("Face model unavailable. Check internet connection.");
return;
}
faceMesh=new FaceMesh({
locateFile:f=>"https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/"+f
});
faceMesh.setOptions({
maxNumFaces:5,
refineLandmarks:true,
minDetectionConfidence:.5,
minTrackingConfidence:.5
});
faceMesh.onResults(r=>{
facePoints=r.multiFaceLandmarks||[];
});
}
function stopCamera(){
cameraOn=false;
if(stream)stream.getTracks().forEach(t=>t.stop());
stream=null;video.srcObject=null;
if(faceMesh){faceMesh.close();faceMesh=null}
facePoints=null;
if(raf)cancelAnimationFrame(raf);
ctx.clearRect(0,0,canvas.width,canvas.height);
status("CAMERA OFF");
log("Camera stopped");
}
$("start").onclick=startCamera;
$("stop").onclick=stopCamera;
function resize(){
const d=Math.min(devicePixelRatio||1,2);
canvas.width=Math.max(1,Math.floor(canvas.clientWidth*d));
canvas.height=Math.max(1,Math.floor(canvas.clientHeight*d));
ctx.setTransform(d,0,0,d,0,0);
}
addEventListener("resize",resize);
function point(p){
const w=canvas.clientWidth,h=canvas.clientHeight;
return {x:(1-p.x)*w,y:p.y*h};
}
function boxForFace(face){
const w=canvas.clientWidth,h=canvas.clientHeight;
const xs=face.map(p=>(1-p.x)*w);
const ys=face.map(p=>p.y*h);
const l=Math.min(...xs),r=Math.max(...xs);
const t=Math.min(...ys),b=Math.max(...ys);
return {l,r,t,b,w:r-l,h:b-t,cx:(l+r)/2,cy:(t+b)/2};
}
function drawFace(){
if(!facePoints?.length)return;
ctx.save();
ctx.strokeStyle=color;ctx.fillStyle=color;
ctx.lineWidth=1.5;ctx.shadowColor=color;ctx.shadowBlur=7;
facePoints.forEach((face,index)=>{
const b=boxForFace(face);
if(active.has(1)||active.has(9)||active.has(10)||active.has(27)||active.has(40)){
ctx.strokeRect(b.l,b.t,b.w,b.h);
ctx.fillText("FACE "+(index+1),b.l,Math.max(12,b.t-5));
}
if(active.has(21)||active.has(22)){
ctx.beginPath();
face.forEach((p,i)=>{
const q=point(p);
if(i===0)ctx.moveTo(q.x,q.y);else ctx.lineTo(q.x,q.y);
});
ctx.closePath();ctx.stroke();
}
if(active.has(2)||active.has(3)||active.has(24)||active.has(25)||active.has(26)){
// Eye, eyebrow, and mouth landmarks: approximate landmark groups.
[33,133,159,145,362,263,386,374,61,291,13,14,70,300].forEach(i=>{
if(!face[i])return;
const q=point(face[i]);
ctx.beginPath();ctx.arc(q.x,q.y,2,0,Math.PI*2);ctx.fill();
});
}
if(active.has(2)){
ctx.fillText("EYE LANDMARKS",b.l,b.b+12);
}
if(active.has(3)){
ctx.fillText("EXPRESSION ESTIMATE",b.l,b.b+24);
}
if(active.has(23)){
ctx.fillText("HEAD MOVEMENT",b.l,b.t+12);
}
if(active.has(24))ctx.fillText("BLINK: LANDMARK ESTIMATE",b.l,b.b+12);
if(active.has(25))ctx.fillText("SMILE: LANDMARK ESTIMATE",b.l,b.b+12);
if(active.has(27))ctx.fillText("FACE POSITION",b.l,b.b+12);
if(active.has(20)||active.has(22)){
face.forEach((p,i)=>{
if(i%4!==0)return;
const q=point(p);
ctx.fillRect(q.x,q.y,2,2);
});
}
});
ctx.restore();
}
function drawObjects(){
if(!coco||!video.videoWidth)return;
const sx=canvas.clientWidth/video.videoWidth;
const sy=canvas.clientHeight/video.videoHeight;
ctx.save();ctx.strokeStyle=color;ctx.fillStyle=color;
ctx.lineWidth=2;ctx.font="12px monospace";
predictions.forEach(p=>{
if(!p.bbox)return;
const [x,y,w,h]=p.bbox;
// Predictions are in the original video coordinate system.
const bx=canvas.clientWidth-(x+w)*sx;
const by=y*sy,bw=w*sx,bh=h*sy;
ctx.strokeRect(bx,by,bw,bh);
ctx.fillText(p.class+" "+Math.round(p.score*100)+"%",bx,Math.max(12,by-4));
});
ctx.restore();
}
function sampleImage(){
const w=video.videoWidth,h=video.videoHeight;
if(!w||!h)return null;
const c=document.createElement("canvas");
c.width=160;c.height=120;
const g=c.getContext("2d",{willReadFrequently:true});
g.drawImage(video,0,0,c.width,c.height);
return {c,g,data:g.getImageData(0,0,c.width,c.height)};
}
function analyzePixels(){
const s=sampleImage();
if(!s)return;
const data=s.data.data;
let sum=0,diff=0,edges=0;
const gray=[];
for(let i=0;i<data.length;i+=4){
const v=(data[i]+data[i+1]+data[i+2])/3;
gray.push(v);sum+=v;
}
brightness=sum/(data.length/4);
if(previousFrame&&previousFrame.length===gray.length){
for(let i=0;i<gray.length;i++){
diff+=Math.abs(gray[i]-previousFrame[i]);
if(i>160&&Math.abs(gray[i]-gray[i-160])>40)edges++;
}
motionScore=diff/gray.length;
}else motionScore=0;
previousFrame=gray;
if(active.has(8)||active.has(30)||active.has(31)||active.has(32)||active.has(34)||active.has(35)||active.has(37)||active.has(38)||active.has(39)){
const lines=[];
if(active.has(8))lines.push("Motion score: "+motionScore.toFixed(1));
if(active.has(30))lines.push(motionScore>15?"MOTION ALERT":"No major movement");
if(active.has(31))lines.push("Scene change estimate: "+(motionScore>25?"HIGH":"LOW"));
if(active.has(32))lines.push("Brightness: "+brightness.toFixed(1)+"/255");
if(active.has(33))lines.push("Shadow: no reliable shadow classifier loaded");
if(active.has(34))lines.push("Shape detector: basic edge analysis");
if(active.has(35))lines.push("Edge estimate: "+edges);
if(active.has(36)){
const avg=[0,0,0],n=data.length/4;
for(let i=0;i<data.length;i+=4){avg[0]+=data[i];avg[1]+=data[i+1];avg[2]+=data[i+2]}
lines.push("Average RGB: "+avg.map(v=>Math.round(v/n)).join(", "));
}
if(active.has(37))lines.push(brightness>220?"Bright flash estimate":"No bright flash");
if(active.has(38))lines.push(motionScore>25?"Possible camera shake":"No strong shake detected");
if(active.has(39))lines.push("Scene change estimate: "+(motionScore>20?"CHANGE":"STABLE"));
result(lines.join("\n"));
}
}
async function runFaceModel(){
if(!cameraOn||!faceMesh||working||!video.videoWidth)return;
if(!active.size)return;
working=true;
try{
await faceMesh.send({image:video});
}catch(e){}
working=false;
}
async function runObjectModel(){
if(!coco||!cameraOn||!video.videoWidth)return;
if(Date.now()-lastObject<700)return;
lastObject=Date.now();
try{
predictions=await coco.detect(video,20,.45);
if(active.has(7)||active.has(4)||active.has(5)||active.has(11)||active.has(19)||active.has(28)||active.has(29)){
const persons=predictions.filter(p=>p.class==="person").length;
const cars=predictions.filter(p=>["car","truck","bus","motorcycle"].includes(p.class)).length;
const animals=predictions.filter(p=>["cat","dog","bird","horse","sheep","cow","bear","zebra","giraffe"].includes(p.class)).length;
const lines=[];
if(active.has(7))lines.push("Detected: "+predictions.map(p=>p.class+" "+Math.round(p.score*100)+"%").join(", "));
if(active.has(4)||active.has(5)||active.has(28))lines.push("People detected: "+persons);
if(active.has(4))lines.push("Body detector: COCO person bounding boxes");
if(active.has(11))lines.push("Animals detected: "+animals);
if(active.has(19))lines.push("Clothing: generic object classes only; no dedicated clothing model");
if(active.has(28))lines.push("Person count estimate: "+persons);
if(active.has(29))lines.push("Object count estimate: "+predictions.length);
result(lines.join("\n")||"Objects detected");
}
}catch(e){log("Object detection error")}
}
async function runHands(){
if(!handModel||!cameraOn||!video.videoWidth)return;
if(!active.has(6)&&!active.has(18))return;
try{
handPoints=await handModel.estimateHands(video,false);
const lines=["Hands detected: "+handPoints.length];
handPoints.forEach((h,i)=>{
lines.push("Hand "+(i+1)+": "+h.landmarks.length+" landmarks");
});
if(active.has(18))lines.push("Gesture classification is approximate; landmarks only.");
result(lines.join("\n"));
}catch(e){}
}
function drawHands(){
if(!handPoints?.length)return;
ctx.save();ctx.fillStyle=color;ctx.strokeStyle=color;
handPoints.forEach(h=>{
h.landmarks.forEach(p=>{
const x=canvas.clientWidth-(p[0]/video.videoWidth)*canvas.clientWidth;
const y=(p[1]/video.videoHeight)*canvas.clientHeight;
ctx.beginPath();ctx.arc(x,y,3,0,Math.PI*2);ctx.fill();
});
});
ctx.restore();
}
async function scanQR(){
const s=sampleImage();if(!s)return;
if(typeof jsQR!=="function"){say("QR library unavailable");return}
const code=jsQR(s.data.data,s.data.width,s.data.height);
if(code){
if(code.data!==lastQR){lastQR=code.data;say("QR CODE FOUND:\n"+code.data)}
}else say("No QR code detected");
}
async function scanText(){
if(!video.videoWidth)return;
if(!window.Tesseract){say("OCR library unavailable");return}
if(Date.now()-lastOCR<4000)return;
lastOCR=Date.now();
say("OCR processing image... please wait");
try{
const s=sampleImage();
const out=await Tesseract.recognize(s.c,"eng");
say("OCR TEXT:\n"+out.data.text);
}catch(e){say("OCR error: "+e.message)}
}
function animate(){
if(!cameraOn)return;
resizeIfNeeded();
ctx.clearRect(0,0,canvas.clientWidth,canvas.clientHeight);
if(active.size){
drawFace();
drawObjects();
drawHands();
drawScanner();
}
runFaceModel();
if(active.has(4)||active.has(5)||active.has(7)||active.has(11)||active.has(19)||active.has(28)||active.has(29))runObjectModel();
if(active.has(6)||active.has(18))runHands();
if(active.has(8)||active.has(30)||active.has(31)||active.has(32)||active.has(33)||active.has(34)||active.has(35)||active.has(36)||active.has(37)||active.has(38)||active.has(39))analyzePixels();
if(active.has(14))scanQR();
raf=requestAnimationFrame(animate);
}
function resizeIfNeeded(){
const d=Math.min(devicePixelRatio||1,2);
const w=Math.floor(canvas.clientWidth*d),h=Math.floor(canvas.clientHeight*d);
if(canvas.width!==w||canvas.height!==h){
canvas.width=w;canvas.height=h;
ctx.setTransform(d,0,0,d,0,0);
}
}
function drawScanner(){
if(!active.has(40))return;
ctx.save();
ctx.strokeStyle=color;ctx.lineWidth=2;
const w=canvas.clientWidth,h=canvas.clientHeight;
const y=(performance.now()/4)%(h||1);
ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(w,y);ctx.stroke();
ctx.restore();
}
$("theme").onchange=e=>{
color=e.target.value;
document.documentElement.style.setProperty("--c",color);
};
$("clear").onclick=()=>{
active.clear();
document.querySelectorAll(".det").forEach(b=>b.classList.remove("active"));
predictions=[];handPoints=[];facePoints=null;
ctx.clearRect(0,0,canvas.width,canvas.height);
result("All detector modes turned off.");
log("Detectors cleared");
};
$("flip").onclick=async()=>{
front=!front;
if(cameraOn){stopCamera();await startCamera()}
};
$("full").onclick=async()=>{
try{
if(!document.fullscreenElement)await document.documentElement.requestFullscreen();
else await document.exitFullscreen();
}catch(e){log("Fullscreen unavailable")}
};
$("photo").onclick=()=>{
if(!cameraOn){say("Start camera first");return}
const out=document.createElement("canvas");
out.width=video.videoWidth;out.height=video.videoHeight;
const c=out.getContext("2d");
c.save();c.translate(out.width,0);c.scale(-1,1);
c.drawImage(video,0,0,out.width,out.height);c.restore();
const a=document.createElement("a");
a.download="cyber-studio.png";a.href=out.toDataURL("image/png");a.click();
log("Photo saved");
};
$("record").onclick=()=>{
if(!cameraOn){say("Start camera first");return}
if(!recording){
try{
const out=document.createElement("canvas");
out.width=video.videoWidth;out.height=video.videoHeight;
const c=out.getContext("2d");
recording=true;
const render=()=>{
if(!recording)return;
c.save();c.translate(out.width,0);c.scale(-1,1);
c.drawImage(video,0,0,out.width,out.height);c.restore();
try{c.drawImage(canvas,0,0,out.width,out.height)}catch(e){}
requestAnimationFrame(render);
};
render();
const recStream=out.captureStream(24);
recorder=new MediaRecorder(recStream);
recordChunks=[];
recorder.ondataavailable=e=>{if(e.data.size)recordChunks.push(e.data)};
recorder.onstop=()=>{
const blob=new Blob(recordChunks,{type:recorder.mimeType||"video/webm"});
const url=URL.createObjectURL(blob);
const a=document.createElement("a");
a.href=url;a.download="cyber-studio.webm";a.click();
setTimeout(()=>URL.revokeObjectURL(url),5000);
recStream.getTracks().forEach(t=>t.stop());
log("Video exported");
};
recorder.start();
$("record").textContent="■ STOP RECORDING";
}catch(e){recording=false;say("Recording unavailable: "+e.message)}
}else{
recording=false;
if(recorder&&recorder.state!=="inactive")recorder.stop();
$("record").textContent="🔴 RECORD";
}
};
// Audio permission is only requested when the user enables this detector.
async function soundDetector(){
if(!active.has(15))return;
try{
if(!stream||!stream.getAudioTracks().length){
log("Audio track unavailable; restart camera with microphone permission");
active.delete(15);return;
}
const AC=window.AudioContext||window.webkitAudioContext;
const ac=new AC();
const src=ac.createMediaStreamSource(stream);
const analyser=ac.createAnalyser();
src.connect(analyser);
analyser.fftSize=256;
const data=new Uint8Array(analyser.frequencyBinCount);
analyser.getByteTimeDomainData(data);
let sum=0;
for(const v of data)sum+=(v-128)*(v-128);
result("Microphone level estimate: "+Math.sqrt(sum/data.length).toFixed(1));
setTimeout(()=>ac.cLanding Page
This ad does not have a landing page available
Network Timeline
Performance Summary
7
Requests
2
Domains
463KB
Transfer Size
1856KB
Content Size
628.0ms
Dom Content Loaded
684.0ms
First Paint
629.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...