|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>AI STEM Lab</title>
|
|
|
<style>
|
|
|
:root {
|
|
|
|
|
|
--bg-color: #121212;
|
|
|
--card-bg: #1e1e1e;
|
|
|
--accent-color: #0a84ff;
|
|
|
--accent-hover: #409cff;
|
|
|
--text-main: #f5f5f7;
|
|
|
--text-secondary: #a1a1a6;
|
|
|
|
|
|
|
|
|
--mac-window-bg: #2c2c2e;
|
|
|
--mac-header-bg: #3a3a3c;
|
|
|
--mac-border: rgba(0, 0, 0, 0.5);
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
|
background-color: var(--bg-color);
|
|
|
color: var(--text-main);
|
|
|
margin: 0;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
min-height: 100vh;
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
|
|
|
header {
|
|
|
margin-bottom: 50px;
|
|
|
text-align: center;
|
|
|
max-width: 800px;
|
|
|
}
|
|
|
|
|
|
h1 {
|
|
|
color: var(--text-main);
|
|
|
font-weight: 800;
|
|
|
font-size: 3rem;
|
|
|
margin: 0 0 15px 0;
|
|
|
letter-spacing: -0.03em;
|
|
|
background: linear-gradient(90deg, #fff, #a1a1a6);
|
|
|
-webkit-background-clip: text;
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
}
|
|
|
|
|
|
p.subtitle {
|
|
|
color: var(--text-secondary);
|
|
|
font-size: 1.3rem;
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
|
|
|
|
|
|
.playground-grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
|
|
|
gap: 30px;
|
|
|
width: 95%;
|
|
|
max-width: 1400px;
|
|
|
}
|
|
|
|
|
|
|
|
|
.card {
|
|
|
background: var(--card-bg);
|
|
|
border-radius: 24px;
|
|
|
padding: 40px;
|
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
|
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: flex-start;
|
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.card:hover {
|
|
|
transform: translateY(-8px);
|
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
|
|
|
border-color: rgba(255,255,255,0.2);
|
|
|
}
|
|
|
|
|
|
.card::before {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 6px;
|
|
|
background: linear-gradient(90deg, var(--accent-color), #bc52ff);
|
|
|
opacity: 0.7;
|
|
|
}
|
|
|
|
|
|
.icon-box {
|
|
|
width: 64px;
|
|
|
height: 64px;
|
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
border-radius: 16px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
font-size: 32px;
|
|
|
margin-bottom: 25px;
|
|
|
}
|
|
|
|
|
|
.card h2 {
|
|
|
margin: 0 0 15px 0;
|
|
|
font-size: 1.8rem;
|
|
|
font-weight: 700;
|
|
|
color: var(--text-main);
|
|
|
}
|
|
|
|
|
|
.card p {
|
|
|
margin: 0 0 30px 0;
|
|
|
color: var(--text-secondary);
|
|
|
line-height: 1.6;
|
|
|
font-size: 1.1rem;
|
|
|
flex-grow: 1;
|
|
|
}
|
|
|
|
|
|
.card strong {
|
|
|
color: #fff;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.launch-btn {
|
|
|
background-color: var(--accent-color);
|
|
|
color: white;
|
|
|
border: none;
|
|
|
padding: 14px 28px;
|
|
|
border-radius: 30px;
|
|
|
font-weight: 600;
|
|
|
font-size: 1.1rem;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.2s ease;
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.launch-btn:hover {
|
|
|
background-color: var(--accent-hover);
|
|
|
transform: scale(1.02);
|
|
|
}
|
|
|
|
|
|
|
|
|
.modal-overlay {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: rgba(0, 0, 0, 0.75);
|
|
|
backdrop-filter: blur(8px);
|
|
|
z-index: 1000;
|
|
|
display: none;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
opacity: 0;
|
|
|
transition: opacity 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.modal-overlay.active {
|
|
|
display: flex;
|
|
|
opacity: 1;
|
|
|
}
|
|
|
|
|
|
|
|
|
.mac-window {
|
|
|
width: 85%;
|
|
|
max-width: 1000px;
|
|
|
height: 85vh;
|
|
|
background: var(--mac-window-bg);
|
|
|
border-radius: 12px;
|
|
|
box-shadow: 0 50px 100px rgba(0, 0, 0, 0.6);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
overflow: hidden;
|
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
|
transform: scale(0.95);
|
|
|
transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.modal-overlay.active .mac-window {
|
|
|
transform: scale(1);
|
|
|
}
|
|
|
|
|
|
|
|
|
.window-header {
|
|
|
height: 44px;
|
|
|
background: var(--mac-header-bg);
|
|
|
border-bottom: 1px solid #1c1c1e;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding-left: 16px;
|
|
|
cursor: default;
|
|
|
}
|
|
|
|
|
|
|
|
|
.traffic-light {
|
|
|
width: 14px;
|
|
|
height: 14px;
|
|
|
border-radius: 50%;
|
|
|
background-color: #ff453a;
|
|
|
border: none;
|
|
|
cursor: pointer;
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
|
|
|
}
|
|
|
|
|
|
.traffic-light:hover::after {
|
|
|
content: "×";
|
|
|
color: #3b0000;
|
|
|
font-size: 11px;
|
|
|
font-weight: 900;
|
|
|
margin-top: -1px;
|
|
|
}
|
|
|
|
|
|
.window-title {
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
font-size: 14px;
|
|
|
color: #cfcfcf;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
|
|
|
.window-content {
|
|
|
flex: 1;
|
|
|
background: #000;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
iframe {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
border: none;
|
|
|
background: #121212;
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
<header>
|
|
|
<h1>AI Model Laboratory</h1>
|
|
|
<p class="subtitle">Welcome to the hands-on section! Based on the slideshow we just watched, choose an experiment below to test how computers "see" the world.</p>
|
|
|
</header>
|
|
|
|
|
|
<div class="playground-grid">
|
|
|
|
|
|
<div class="card">
|
|
|
<div class="icon-box">🧘</div>
|
|
|
<h2>Pose Estimation</h2>
|
|
|
<p>
|
|
|
<strong>Remember the slide about skeletons?</strong><br><br>
|
|
|
In this experiment, the AI will try to find your joints (like elbows, knees, and shoulders) and connect them with lines.
|
|
|
<br><br>
|
|
|
<em>Try this: Try to do some movements with yout hands and face. Does the AI follow your movement?</em>
|
|
|
</p>
|
|
|
<button class="launch-btn" onclick="openWindow('Pose Estimation', 'pose.html')">Launch Experiment</button>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="card">
|
|
|
<div class="icon-box">🔍</div>
|
|
|
<h2>Object Recognition</h2>
|
|
|
<p>
|
|
|
<strong>How does a self-driving car see?</strong><br><br>
|
|
|
This model is trained to recognize thousands of everyday items. It draws a box around what it sees and gives it a label.
|
|
|
<br><br>
|
|
|
<em>Try this: Hold up a pen, a water bottle, or your shoe. Can it guess them all correctly?</em>
|
|
|
</p>
|
|
|
<center>
|
|
|
<button id="dev-trigger-btn">Wondering what objects this model can detect? Click here to find out!</button>
|
|
|
</center>
|
|
|
<br>
|
|
|
<button class="launch-btn" onclick="openWindow('Object Recognition', 'Object-Detection.html')">Launch Experiment</button>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="card">
|
|
|
<div class="icon-box">😊</div>
|
|
|
<h2>Face Expression</h2>
|
|
|
<p>
|
|
|
<strong>Can computers understand feelings?</strong><br><br>
|
|
|
This AI looks at the geometry of your face—how much your mouth curves or your eyebrows lift—to guess your emotion.
|
|
|
<br><br>
|
|
|
<em>Try this: Make a super happy face, then a sad face. See if the "Confidence Score" changes!</em>
|
|
|
</p>
|
|
|
<button class="launch-btn" onclick="openWindow('Face Expression', 'Face-Expresion.html')">Launch Experiment</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<h1 style="text-align:center; margin:60px 0 30px;">
|
|
|
Here are some extra ones that you might like....
|
|
|
</h1>
|
|
|
|
|
|
<div class="playground-grid">
|
|
|
|
|
|
<div class="card">
|
|
|
<div class="icon-box">🏃</div>
|
|
|
<h2>JS WebCam Motion Detection</h2>
|
|
|
<p>
|
|
|
<strong>Can a computer actually “see” movement?</strong><br><br>
|
|
|
This project watches your webcam and compares each frame to the one before it.
|
|
|
When something moves—even a tiny bit—the computer highlights the change so you can
|
|
|
spot motion glowing on the screen.<br><br>
|
|
|
<em>Try this: Wave your hand slowly, then quickly. Notice how the motion pattern changes!</em>
|
|
|
</p>
|
|
|
<button class="launch-btn" onclick="openWindow('Movement Detection', 'movement-detection.html')">Launch Experiment</button>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="card">
|
|
|
<div class="icon-box">👁️</div>
|
|
|
<h2>Object Detection with TensorFlow.js</h2>
|
|
|
<p>
|
|
|
<strong>How can a computer tell what's in a picture?</strong><br><br>
|
|
|
This project uses a pre‑trained AI model that can look at an image—or even your
|
|
|
webcam—and point out objects it recognizes. It doesn’t just guess the object,
|
|
|
it also shows *where* it is in the picture by drawing a box around it.<br><br>
|
|
|
<em>Try this: Hold up different objects (like a pencil, cup, or book) and see
|
|
|
which ones the AI can detect!</em>
|
|
|
</p>
|
|
|
<button class="launch-btn" onclick="openWindow('Object Detection with TensorFlow.js', 'live-feed-object-detection.html')">Launch Experiment</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="modal-overlay" id="modalOverlay">
|
|
|
<div class="mac-window" id="macWindow">
|
|
|
<div class="window-header">
|
|
|
<div class="traffic-light" id="closeBtn"></div>
|
|
|
<div class="window-title" id="windowTitle">Terminal</div>
|
|
|
</div>
|
|
|
<div class="window-content">
|
|
|
<iframe id="labFrame" src=""></iframe>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
|
const overlay = document.getElementById('modalOverlay');
|
|
|
const macWindow = document.getElementById('macWindow');
|
|
|
const labFrame = document.getElementById('labFrame');
|
|
|
const windowTitle = document.getElementById('windowTitle');
|
|
|
const closeBtn = document.getElementById('closeBtn');
|
|
|
|
|
|
|
|
|
window.openWindow = function(title, fileName) {
|
|
|
if (windowTitle) windowTitle.textContent = "Running: " + title;
|
|
|
if (overlay) overlay.classList.add('active');
|
|
|
|
|
|
|
|
|
if (labFrame) labFrame.src = fileName;
|
|
|
};
|
|
|
|
|
|
function closeWindow() {
|
|
|
if (overlay) overlay.classList.remove('active');
|
|
|
|
|
|
setTimeout(() => {
|
|
|
if (labFrame) labFrame.src = "";
|
|
|
}, 300);
|
|
|
}
|
|
|
|
|
|
|
|
|
if (closeBtn) {
|
|
|
closeBtn.addEventListener('click', closeWindow);
|
|
|
}
|
|
|
|
|
|
|
|
|
if (overlay) {
|
|
|
overlay.addEventListener('click', function(event) {
|
|
|
if (event.target === overlay) {
|
|
|
closeWindow();
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
if (macWindow) {
|
|
|
macWindow.addEventListener('click', function(event) {
|
|
|
event.stopPropagation();
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
|
|
#dev-trigger-btn {
|
|
|
background-color: #007AFF;
|
|
|
color: white;
|
|
|
border: none;
|
|
|
padding: 12px 24px;
|
|
|
font-size: 16px;
|
|
|
font-weight: 600;
|
|
|
border-radius: 8px;
|
|
|
cursor: pointer;
|
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
|
transition: transform 0.1s ease;
|
|
|
}
|
|
|
|
|
|
#dev-trigger-btn:active {
|
|
|
transform: scale(0.96);
|
|
|
}
|
|
|
|
|
|
|
|
|
#modal-overlay {
|
|
|
display: none;
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: rgba(0, 0, 0, 0.4);
|
|
|
backdrop-filter: blur(5px);
|
|
|
z-index: 1000;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
opacity: 0;
|
|
|
transition: opacity 0.3s ease;
|
|
|
}
|
|
|
|
|
|
|
|
|
#macos-window {
|
|
|
width: 80%;
|
|
|
max-width: 900px;
|
|
|
height: 70%;
|
|
|
background-color: #1e1e1e;
|
|
|
border-radius: 12px;
|
|
|
box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
overflow: hidden;
|
|
|
transform: scale(0.95);
|
|
|
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
|
}
|
|
|
|
|
|
|
|
|
.window-header {
|
|
|
height: 38px;
|
|
|
background: linear-gradient(to bottom, #3a3a3a, #2b2b2b);
|
|
|
border-bottom: 1px solid #000;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 0 16px;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
|
|
|
.window-controls {
|
|
|
display: flex;
|
|
|
gap: 8px;
|
|
|
}
|
|
|
|
|
|
.control-dot {
|
|
|
width: 12px;
|
|
|
height: 12px;
|
|
|
border-radius: 50%;
|
|
|
border: 1px solid rgba(0,0,0,0.2);
|
|
|
}
|
|
|
|
|
|
.close-dot { background-color: #ff5f56; cursor: pointer; }
|
|
|
.close-dot:hover { background-color: #ff3b30; }
|
|
|
.minimize-dot { background-color: #ffbd2e; }
|
|
|
.expand-dot { background-color: #27c93f; }
|
|
|
|
|
|
.window-title {
|
|
|
color: #d1d1d1;
|
|
|
font-size: 13px;
|
|
|
font-weight: 500;
|
|
|
margin-left: 20px;
|
|
|
flex-grow: 1;
|
|
|
text-align: center;
|
|
|
padding-right: 60px;
|
|
|
}
|
|
|
|
|
|
|
|
|
.window-content {
|
|
|
padding: 20px;
|
|
|
overflow-y: auto;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
|
|
|
.tiles-grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
|
gap: 16px;
|
|
|
}
|
|
|
|
|
|
|
|
|
.tile {
|
|
|
background-color: #2c2c2e;
|
|
|
border: 1px solid #3a3a3c;
|
|
|
border-radius: 8px;
|
|
|
padding: 16px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 8px;
|
|
|
transition: background-color 0.2s;
|
|
|
}
|
|
|
|
|
|
.tile:hover {
|
|
|
background-color: #3a3a3c;
|
|
|
}
|
|
|
|
|
|
.tile-icon {
|
|
|
font-size: 32px;
|
|
|
}
|
|
|
|
|
|
.tile-name {
|
|
|
font-size: 16px;
|
|
|
font-weight: 700;
|
|
|
color: #fff;
|
|
|
text-transform: capitalize;
|
|
|
}
|
|
|
|
|
|
.tile-desc {
|
|
|
font-size: 13px;
|
|
|
line-height: 1.4;
|
|
|
color: #a1a1a6;
|
|
|
}
|
|
|
|
|
|
|
|
|
.window-content::-webkit-scrollbar {
|
|
|
width: 8px;
|
|
|
}
|
|
|
.window-content::-webkit-scrollbar-track {
|
|
|
background: #1e1e1e;
|
|
|
}
|
|
|
.window-content::-webkit-scrollbar-thumb {
|
|
|
background: #48484a;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
|
|
|
#modal-overlay.active {
|
|
|
display: flex;
|
|
|
opacity: 1;
|
|
|
}
|
|
|
|
|
|
#modal-overlay.active #macos-window {
|
|
|
transform: scale(1);
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="modal-overlay">
|
|
|
<div id="macos-window">
|
|
|
|
|
|
<div class="window-header">
|
|
|
<div class="window-controls">
|
|
|
<div class="control-dot close-dot" id="close-btn" title="Close"></div>
|
|
|
</div>
|
|
|
|
|
|
<div class="window-title">COCO Dataset Classes (80 Objects)</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="window-content">
|
|
|
<div style="margin-bottom: 20px; color: #a1a1a6; font-size: 14px;">
|
|
|
This AI model is trained to see the world like you do. Below are the 80 different things it can instantly recognize in a photo.
|
|
|
</div>
|
|
|
<div class="tiles-grid" id="tiles-container">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
const cocoData = [
|
|
|
{ name: "person", emoji: "👤", desc: "A human being, like you, your friends, or your teacher." },
|
|
|
{ name: "bicycle", emoji: "🚲", desc: "A two-wheeled vehicle that you pedal to ride." },
|
|
|
{ name: "car", emoji: "🚗", desc: "A vehicle with four wheels used to drive on roads." },
|
|
|
{ name: "motorcycle", emoji: "🏍️", desc: "Like a bicycle, but with a fast engine and heavier wheels." },
|
|
|
{ name: "airplane", emoji: "✈️", desc: "A flying machine with wings that carries passengers across the sky." },
|
|
|
{ name: "bus", emoji: "🚌", desc: "A large vehicle that carries many people along a set route." },
|
|
|
{ name: "train", emoji: "🚆", desc: "A series of connected cars that run on a metal track." },
|
|
|
{ name: "truck", emoji: "🚚", desc: "A large, heavy vehicle used for carrying cargo or big loads." },
|
|
|
{ name: "boat", emoji: "⛵", desc: "A vehicle designed to float and travel on water." },
|
|
|
{ name: "traffic light", emoji: "🚦", desc: "A signal with red, yellow, and green lights to control cars." },
|
|
|
{ name: "fire hydrant", emoji: "🚒", desc: "A pipe on the street that firefighters use to get water." },
|
|
|
{ name: "stop sign", emoji: "🛑", desc: "A red octagon sign that tells drivers to stop moving." },
|
|
|
{ name: "parking meter", emoji: "🅿️", desc: "A machine where you pay money to park your car on the street." },
|
|
|
{ name: "bench", emoji: "🪑", desc: "A long seat for several people, usually found in parks." },
|
|
|
{ name: "bird", emoji: "🐦", desc: "An animal with feathers and wings that can usually fly." },
|
|
|
{ name: "cat", emoji: "🐈", desc: "A small, furry pet that purrs and catches mice." },
|
|
|
{ name: "dog", emoji: "🐕", desc: "A loyal pet with four legs that barks and loves to play." },
|
|
|
{ name: "horse", emoji: "🐎", desc: "A large, strong animal that people can ride." },
|
|
|
{ name: "sheep", emoji: "🐑", desc: "A fluffy farm animal that gives us wool for clothes." },
|
|
|
{ name: "cow", emoji: "🐄", desc: "A large farm animal that gives us milk." },
|
|
|
{ name: "elephant", emoji: "🐘", desc: "A huge animal with big ears and a long trunk." },
|
|
|
{ name: "bear", emoji: "🐻", desc: "A large, strong wild animal with thick fur." },
|
|
|
{ name: "zebra", emoji: "🦓", desc: "A wild horse-like animal with black and white stripes." },
|
|
|
{ name: "giraffe", emoji: "🦒", desc: "The tallest animal, with a very long neck to eat tree leaves." },
|
|
|
{ name: "backpack", emoji: "🎒", desc: "A bag you carry on your back to hold books and supplies." },
|
|
|
{ name: "umbrella", emoji: "☂️", desc: "A tool you hold over your head to stay dry in the rain." },
|
|
|
{ name: "handbag", emoji: "👜", desc: "A small bag used to carry personal items like a wallet." },
|
|
|
{ name: "tie", emoji: "👔", desc: "A long piece of cloth worn around the neck with a suit." },
|
|
|
{ name: "suitcase", emoji: "🧳", desc: "A large bag used for packing clothes when traveling." },
|
|
|
{ name: "frisbee", emoji: "🥏", desc: "A plastic disc you throw to a friend or dog." },
|
|
|
{ name: "skis", emoji: "⛷️", desc: "Long, flat runners you attach to boots to glide on snow." },
|
|
|
{ name: "snowboard", emoji: "🏂", desc: "A single wide board you stand on to surf down snowy hills." },
|
|
|
{ name: "sports ball", emoji: "⚽", desc: "Any round object used in games like soccer, basketball, or tennis." },
|
|
|
{ name: "kite", emoji: "🪁", desc: "A light frame with paper or cloth that flies in the wind." },
|
|
|
{ name: "baseball bat", emoji: "⚾", desc: "A smooth wooden or metal stick used to hit a baseball." },
|
|
|
{ name: "baseball glove", emoji: "🧤", desc: "A leather mitt worn to catch a baseball safely." },
|
|
|
{ name: "skateboard", emoji: "🛹", desc: "A short board with wheels that you stand on and ride." },
|
|
|
{ name: "surfboard", emoji: "🏄", desc: "A long board used to ride ocean waves." },
|
|
|
{ name: "tennis racket", emoji: "🎾", desc: "A bat with a net mesh used to hit a tennis ball." },
|
|
|
{ name: "bottle", emoji: "🍾", desc: "A container with a narrow neck for holding liquids." },
|
|
|
{ name: "wine glass", emoji: "🍷", desc: "A fancy glass with a stem, used for special drinks." },
|
|
|
{ name: "cup", emoji: "☕", desc: "A small open container for drinking tea or coffee." },
|
|
|
{ name: "fork", emoji: "🍴", desc: "A tool with prongs used to pick up food." },
|
|
|
{ name: "knife", emoji: "🔪", desc: "A tool with a sharp edge used for cutting food." },
|
|
|
{ name: "spoon", emoji: "🥄", desc: "A tool with a small scoop for eating soup or cereal." },
|
|
|
{ name: "bowl", emoji: "🥣", desc: "A round, deep dish used for soup or cereal." },
|
|
|
{ name: "banana", emoji: "🍌", desc: "A long, curved yellow fruit that you peel to eat." },
|
|
|
{ name: "apple", emoji: "🍎", desc: "A round red or green fruit that is crunchy and sweet." },
|
|
|
{ name: "sandwich", emoji: "🥪", desc: "Two slices of bread with meat, cheese, or veggies inside." },
|
|
|
{ name: "orange", emoji: "🍊", desc: "A round citrus fruit with a thick skin and juicy inside." },
|
|
|
{ name: "broccoli", emoji: "🥦", desc: "A green vegetable that looks like a little tree." },
|
|
|
{ name: "carrot", emoji: "🥕", desc: "A crunchy orange vegetable that grows underground." },
|
|
|
{ name: "hot dog", emoji: "🌭", desc: "A cooked sausage served in a long, soft bun." },
|
|
|
{ name: "pizza", emoji: "🍕", desc: "A round dough base topped with tomato sauce and cheese." },
|
|
|
{ name: "donut", emoji: "🍩", desc: "A sweet, fried ring of dough, often with frosting." },
|
|
|
{ name: "cake", emoji: "🎂", desc: "A sweet baked dessert often eaten at birthday parties." },
|
|
|
{ name: "chair", emoji: "🪑", desc: "A piece of furniture designed for one person to sit on." },
|
|
|
{ name: "couch", emoji: "🛋️", desc: "A soft, long seat where multiple people can relax." },
|
|
|
{ name: "potted plant", emoji: "🪴", desc: "A plant grown inside a container for decoration." },
|
|
|
{ name: "bed", emoji: "🛏️", desc: "A piece of furniture with a mattress for sleeping." },
|
|
|
{ name: "dining table", emoji: "🍽️", desc: "A large table where families sit to eat meals." },
|
|
|
{ name: "toilet", emoji: "🚽", desc: "A bathroom fixture used for getting rid of waste." },
|
|
|
{ name: "tv", emoji: "📺", desc: "An electronic screen for watching shows and movies." },
|
|
|
{ name: "laptop", emoji: "💻", desc: "A portable computer that you can use on your lap." },
|
|
|
{ name: "mouse", emoji: "🖱️", desc: "A handheld device used to move the cursor on a computer." },
|
|
|
{ name: "remote", emoji: "📡", desc: "A controller used to change channels on a TV from afar." },
|
|
|
{ name: "keyboard", emoji: "⌨️", desc: "A board with buttons for typing letters into a computer." },
|
|
|
{ name: "cell phone", emoji: "📱", desc: "A small phone you can carry in your pocket." },
|
|
|
{ name: "microwave", emoji: "⏲️", desc: "An oven that heats food very quickly." },
|
|
|
{ name: "oven", emoji: "🥘", desc: "A kitchen appliance used for baking and roasting food." },
|
|
|
{ name: "toaster", emoji: "🍞", desc: "A machine that browns bread slices." },
|
|
|
{ name: "sink", emoji: "🚰", desc: "A basin with a faucet for washing hands or dishes." },
|
|
|
{ name: "refrigerator", emoji: "❄️", desc: "A cold closet that keeps food fresh." },
|
|
|
{ name: "book", emoji: "📖", desc: "A set of pages with writing or pictures to read." },
|
|
|
{ name: "clock", emoji: "⏰", desc: "A device that tells you what time it is." },
|
|
|
{ name: "vase", emoji: "🏺", desc: "A decorative container used for holding flowers." },
|
|
|
{ name: "scissors", emoji: "✂️", desc: "A tool with two blades used for cutting paper." },
|
|
|
{ name: "teddy bear", emoji: "🧸", desc: "A soft toy bear that is cuddly and cute." },
|
|
|
{ name: "hair drier", emoji: "💨", desc: "A machine that blows hot air to dry wet hair." },
|
|
|
{ name: "toothbrush", emoji: "🪥", desc: "A small brush used to clean your teeth." }
|
|
|
];
|
|
|
|
|
|
|
|
|
const triggerBtn = document.getElementById('dev-trigger-btn');
|
|
|
const modal = document.getElementById('modal-overlay');
|
|
|
const closeBtn = document.getElementById('close-btn');
|
|
|
const tilesContainer = document.getElementById('tiles-container');
|
|
|
const macosWindow = document.getElementById('macos-window');
|
|
|
|
|
|
|
|
|
function renderTiles() {
|
|
|
tilesContainer.innerHTML = cocoData.map(item => `
|
|
|
<div class="tile">
|
|
|
<div class="tile-icon">${item.emoji}</div>
|
|
|
<div class="tile-name">${item.name}</div>
|
|
|
<div class="tile-desc">${item.desc}</div>
|
|
|
</div>
|
|
|
`).join('');
|
|
|
}
|
|
|
|
|
|
|
|
|
triggerBtn.addEventListener('click', () => {
|
|
|
renderTiles();
|
|
|
modal.classList.add('active');
|
|
|
});
|
|
|
|
|
|
|
|
|
function closeModal() {
|
|
|
modal.classList.remove('active');
|
|
|
}
|
|
|
|
|
|
|
|
|
closeBtn.addEventListener('click', closeModal);
|
|
|
|
|
|
|
|
|
modal.addEventListener('click', (e) => {
|
|
|
|
|
|
|
|
|
if (e.target === modal) {
|
|
|
closeModal();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
