feat: Interactive multilingual explainer pages (DE/EN/ZH/RU/HI)
Animated educational explainer for ages 12+ explaining: - AI Agent communication & delegation - QC double-agent principle (60% trigger, score 1-10) - Causal Dilation Clock / Eigenzeit (proper time) - Live interactive demo with flying message animations Languages: Deutsch · English · 中文 · Русский · हिन्दी index.html as language picker entry point Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Jeuner
parent
5b341d3ea5
commit
0d6b501fde
6 changed files with 1744 additions and 0 deletions
931
explainer-de.html
Normal file
931
explainer-de.html
Normal file
|
|
@ -0,0 +1,931 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Wie sprechen KI-Roboter miteinander?</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--yellow: #FFD93D;
|
||||
--green: #6BCB77;
|
||||
--blue: #4D96FF;
|
||||
--pink: #FF6B6B;
|
||||
--purple: #C77DFF;
|
||||
--dark: #1a1a2e;
|
||||
--card: #ffffff12;
|
||||
--radius: 20px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
background: var(--dark);
|
||||
color: #fff;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ── HERO ─────────────────────────────────────────────────────────── */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
background: radial-gradient(ellipse at 30% 40%, #2d1b6920 0%, transparent 60%),
|
||||
radial-gradient(ellipse at 70% 60%, #1b3a6920 0%, transparent 60%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-eyebrow {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--yellow);
|
||||
margin-bottom: 20px;
|
||||
opacity: 0;
|
||||
animation: fadeUp 0.6s 0.2s forwards;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(2.2rem, 6vw, 5rem);
|
||||
font-weight: 900;
|
||||
line-height: 1.08;
|
||||
letter-spacing: -0.03em;
|
||||
text-wrap: balance;
|
||||
margin-bottom: 24px;
|
||||
opacity: 0;
|
||||
animation: fadeUp 0.6s 0.4s forwards;
|
||||
}
|
||||
|
||||
.hero h1 span { color: var(--yellow); }
|
||||
|
||||
.hero-lead {
|
||||
font-size: clamp(1.1rem, 2vw, 1.4rem);
|
||||
color: #ffffffbb;
|
||||
max-width: 560px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 48px;
|
||||
text-wrap: pretty;
|
||||
opacity: 0;
|
||||
animation: fadeUp 0.6s 0.6s forwards;
|
||||
}
|
||||
|
||||
.hero-robots {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
opacity: 0;
|
||||
animation: fadeUp 0.6s 0.8s forwards;
|
||||
}
|
||||
|
||||
/* ── ROBOT CARDS ──────────────────────────────────────────────────── */
|
||||
.robot {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.robot-body {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 44px;
|
||||
position: relative;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
|
||||
transition: transform 0.2s;
|
||||
animation: robotFloat 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.robot-body:hover { transform: scale(1.08) translateY(-4px); }
|
||||
|
||||
.robot:nth-child(2) .robot-body { animation-delay: 0.8s; }
|
||||
.robot:nth-child(3) .robot-body { animation-delay: 1.6s; }
|
||||
|
||||
.robot-name {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #ffffffcc;
|
||||
}
|
||||
|
||||
.robot-role {
|
||||
font-size: 11px;
|
||||
color: #ffffff66;
|
||||
text-align: center;
|
||||
max-width: 90px;
|
||||
}
|
||||
|
||||
.r-martin { background: linear-gradient(135deg, #4D96FF, #2563eb); }
|
||||
.r-bob { background: linear-gradient(135deg, #6BCB77, #16a34a); }
|
||||
.r-diana { background: linear-gradient(135deg, #C77DFF, #7c3aed); }
|
||||
.r-qc { background: linear-gradient(135deg, #FF6B6B, #dc2626); }
|
||||
|
||||
/* ── SECTIONS ─────────────────────────────────────────────────────── */
|
||||
section {
|
||||
padding: clamp(64px, 8vw, 120px) 20px;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--yellow);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
|
||||
font-weight: 900;
|
||||
line-height: 1.12;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 48px;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* ── AGENT CARDS GRID ─────────────────────────────────────────────── */
|
||||
.agent-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.agent-card {
|
||||
background: #ffffff0d;
|
||||
border: 1px solid #ffffff15;
|
||||
border-radius: var(--radius);
|
||||
padding: 28px 24px;
|
||||
transition: border-color 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.agent-card:hover {
|
||||
border-color: #ffffff30;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.agent-card-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.agent-card h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.agent-card p {
|
||||
font-size: 15px;
|
||||
color: #ffffffaa;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
padding: 3px 10px;
|
||||
border-radius: 99px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.tag-blue { background: #4D96FF33; color: #4D96FF; }
|
||||
.tag-green { background: #6BCB7733; color: #6BCB77; }
|
||||
.tag-purple { background: #C77DFF33; color: #C77DFF; }
|
||||
.tag-red { background: #FF6B6B33; color: #FF6B6B; }
|
||||
|
||||
/* ── ANIMATION STAGE ──────────────────────────────────────────────── */
|
||||
.stage-wrap {
|
||||
background: #ffffff08;
|
||||
border: 1px solid #ffffff15;
|
||||
border-radius: var(--radius);
|
||||
padding: 40px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stage {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-height: 160px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stage-agent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stage-icon {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.stage-icon.active {
|
||||
transform: scale(1.15);
|
||||
box-shadow: 0 0 0 4px var(--yellow), 0 8px 30px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.stage-label {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #ffffffcc;
|
||||
}
|
||||
|
||||
.stage-status {
|
||||
font-size: 11px;
|
||||
color: #ffffff55;
|
||||
min-height: 16px;
|
||||
text-align: center;
|
||||
max-width: 80px;
|
||||
}
|
||||
|
||||
/* Message bubble flying */
|
||||
.msg-bubble {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: var(--yellow);
|
||||
color: #1a1a2e;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.msg-bubble.qc { background: var(--pink); color: #fff; }
|
||||
.msg-bubble.approved { background: var(--green); color: #fff; }
|
||||
|
||||
.arrow-line {
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
background: #ffffff15;
|
||||
position: relative;
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: var(--yellow);
|
||||
color: #1a1a2e;
|
||||
border: none;
|
||||
border-radius: 99px;
|
||||
padding: 14px 32px;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
margin-top: 28px;
|
||||
transition: transform 0.15s, box-shadow 0.15s;
|
||||
box-shadow: 0 4px 20px rgba(255,217,61,0.3);
|
||||
}
|
||||
|
||||
.play-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,217,61,0.4); }
|
||||
.play-btn:active { transform: translateY(0); }
|
||||
.play-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
|
||||
|
||||
.log-box {
|
||||
margin-top: 20px;
|
||||
background: #00000030;
|
||||
border-radius: 12px;
|
||||
padding: 16px 20px;
|
||||
font-size: 14px;
|
||||
color: #ffffffbb;
|
||||
min-height: 48px;
|
||||
line-height: 1.8;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.log-line { opacity: 0; animation: fadeIn 0.4s forwards; }
|
||||
.log-ok { color: var(--green); }
|
||||
.log-qc { color: var(--pink); }
|
||||
.log-time { color: var(--purple); }
|
||||
|
||||
/* ── ZEIT SECTION ─────────────────────────────────────────────────── */
|
||||
.zeit-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.zeit-card {
|
||||
background: #ffffff0d;
|
||||
border: 1px solid #ffffff15;
|
||||
border-radius: var(--radius);
|
||||
padding: 28px 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.zeit-bar-wrap {
|
||||
height: 8px;
|
||||
background: #ffffff15;
|
||||
border-radius: 99px;
|
||||
margin: 16px 0 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.zeit-bar {
|
||||
height: 100%;
|
||||
border-radius: 99px;
|
||||
animation: barGrow 1.5s ease-out forwards;
|
||||
transform-origin: left;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
.zeit-bar-fast { background: var(--green); width: 95%; }
|
||||
.zeit-bar-normal { background: var(--blue); width: 60%; }
|
||||
.zeit-bar-slow { background: var(--purple); width: 25%; }
|
||||
|
||||
.zeit-emoji { font-size: 36px; margin-bottom: 12px; display: block; }
|
||||
.zeit-name { font-size: 18px; font-weight: 900; margin-bottom: 6px; }
|
||||
.zeit-desc { font-size: 14px; color: #ffffffaa; line-height: 1.5; }
|
||||
.zeit-rate { font-size: 22px; font-weight: 900; margin-top: 8px; }
|
||||
|
||||
/* ── QC SECTION ───────────────────────────────────────────────────── */
|
||||
.qc-flow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.qc-step {
|
||||
background: #ffffff0d;
|
||||
border: 1px solid #ffffff15;
|
||||
border-radius: 16px;
|
||||
padding: 20px 24px;
|
||||
text-align: center;
|
||||
min-width: 140px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.qc-step:hover { border-color: var(--yellow); }
|
||||
.qc-step-icon { font-size: 36px; margin-bottom: 10px; display: block; }
|
||||
.qc-step-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
|
||||
.qc-step-desc { font-size: 12px; color: #ffffffaa; }
|
||||
|
||||
.qc-arrow {
|
||||
font-size: 24px;
|
||||
color: #ffffff40;
|
||||
padding: 0 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.score-demo {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.score-badge {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 16px 20px;
|
||||
border-radius: 14px;
|
||||
min-width: 80px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.score-badge .num { font-size: 28px; line-height: 1; }
|
||||
.score-badge .lbl { font-size: 11px; opacity: 0.8; }
|
||||
.score-fail { background: #FF6B6B22; border: 2px solid var(--pink); color: var(--pink); }
|
||||
.score-ok { background: #FFD93D22; border: 2px solid var(--yellow); color: var(--yellow); }
|
||||
.score-great { background: #6BCB7722; border: 2px solid var(--green); color: var(--green); }
|
||||
|
||||
/* ── FINAL CTA ────────────────────────────────────────────────────── */
|
||||
.final-section {
|
||||
text-align: center;
|
||||
padding: clamp(80px, 10vw, 140px) 20px;
|
||||
background: linear-gradient(180deg, transparent, #ffffff06);
|
||||
}
|
||||
|
||||
.final-section h2 {
|
||||
font-size: clamp(2rem, 4vw, 3.5rem);
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 20px;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.final-section p {
|
||||
font-size: 18px;
|
||||
color: #ffffffaa;
|
||||
max-width: 480px;
|
||||
margin: 0 auto 36px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.cta-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
||||
|
||||
.cta-primary {
|
||||
background: var(--yellow);
|
||||
color: #1a1a2e;
|
||||
border: none;
|
||||
border-radius: 99px;
|
||||
padding: 16px 36px;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: transform 0.15s, box-shadow 0.15s;
|
||||
box-shadow: 0 4px 20px rgba(255,217,61,0.3);
|
||||
}
|
||||
|
||||
.cta-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,217,61,0.4); }
|
||||
|
||||
.cta-secondary {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border: 2px solid #ffffff30;
|
||||
border-radius: 99px;
|
||||
padding: 16px 36px;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: border-color 0.2s, transform 0.15s;
|
||||
}
|
||||
|
||||
.cta-secondary:hover { border-color: #ffffff60; transform: translateY(-2px); }
|
||||
|
||||
/* ── KEYFRAMES ────────────────────────────────────────────────────── */
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(24px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes robotFloat {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
@keyframes barGrow {
|
||||
to { transform: scaleX(1); }
|
||||
}
|
||||
@keyframes msgFly {
|
||||
0% { opacity: 0; transform: translateY(-50%) translateX(0) scale(0.8); }
|
||||
15% { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
|
||||
85% { opacity: 1; }
|
||||
100% { opacity: 0; transform: translateY(-50%) translateX(var(--fly-dist)) scale(0.9); }
|
||||
}
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% { box-shadow: 0 0 0 4px var(--yellow), 0 8px 30px rgba(0,0,0,0.4); }
|
||||
50% { box-shadow: 0 0 0 8px var(--yellow)55, 0 8px 30px rgba(0,0,0,0.4); }
|
||||
}
|
||||
@keyframes scoreIn {
|
||||
from { opacity: 0; transform: scale(0.5) rotate(-8deg); }
|
||||
to { opacity: 1; transform: scale(1) rotate(0deg); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.stage { flex-direction: column; gap: 20px; }
|
||||
.arrow-line { width: 2px; height: 30px; min-width: unset; }
|
||||
.qc-arrow { transform: rotate(90deg); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ── HERO ─────────────────────────────────────────────────────────── -->
|
||||
<div class="hero">
|
||||
<div class="hero-eyebrow">🤖 KI-Roboter erklärt</div>
|
||||
<h1>Wie reden <span>KI-Agenten</span><br>miteinander?</h1>
|
||||
<p class="hero-lead">
|
||||
Stell dir vor, du hast ein Team aus Robotern. Jeder hat einen Job — und sie schicken sich Nachrichten, um zusammenzuarbeiten. Genau so funktionieren KI-Agenten!
|
||||
</p>
|
||||
<div class="hero-robots">
|
||||
<div class="robot">
|
||||
<div class="robot-body r-martin">🧠</div>
|
||||
<div class="robot-name">Martin</div>
|
||||
<div class="robot-role">Der Chef</div>
|
||||
</div>
|
||||
<div class="robot">
|
||||
<div class="robot-body r-bob">⚡</div>
|
||||
<div class="robot-name">Bob</div>
|
||||
<div class="robot-role">Super schnell</div>
|
||||
</div>
|
||||
<div class="robot">
|
||||
<div class="robot-body r-diana">🐢</div>
|
||||
<div class="robot-name">Diana</div>
|
||||
<div class="robot-role">Sehr gründlich</div>
|
||||
</div>
|
||||
<div class="robot">
|
||||
<div class="robot-body r-qc">🔍</div>
|
||||
<div class="robot-name">QC-Checker</div>
|
||||
<div class="robot-role">Der Qualitätscheck</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── AGENTEN ────────────────────────────────────────────────────────── -->
|
||||
<section>
|
||||
<div class="section-label">Die Teammitglieder</div>
|
||||
<h2 class="section-title">Jeder Roboter hat<br>eine Superkraft</h2>
|
||||
|
||||
<div class="agent-grid">
|
||||
<div class="agent-card">
|
||||
<span class="agent-card-icon">🧠</span>
|
||||
<h3>Martin — Der Chef</h3>
|
||||
<p>Martin bekommt den Auftrag und teilt die Arbeit auf. Er wartet auf die Ergebnisse und fasst alles zusammen.</p>
|
||||
<span class="tag tag-blue">Delegator</span>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<span class="agent-card-icon">⚡</span>
|
||||
<h3>Bob — Der Blitz</h3>
|
||||
<p>Bob arbeitet superschnell. Er antwortet sofort — wie wenn du bei Mathe ganz einfache Aufgaben hast.</p>
|
||||
<span class="tag tag-green">Echo · schnell</span>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<span class="agent-card-icon">🐢</span>
|
||||
<h3>Diana — Die Gründliche</h3>
|
||||
<p>Diana braucht etwas länger, aber macht es sehr sorgfältig. Wie wenn du einen Aufsatz schreibst.</p>
|
||||
<span class="tag tag-purple">Slow · gründlich</span>
|
||||
</div>
|
||||
<div class="agent-card">
|
||||
<span class="agent-card-icon">🔍</span>
|
||||
<h3>QC-Checker — Der Lehrer</h3>
|
||||
<p>Prüft ob die Arbeit gut genug ist. Gibt eine Note von 1 bis 10. Wenn die Note zu schlecht ist → nochmal!</p>
|
||||
<span class="tag tag-red">Reviewer · 9/10 Ziel</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── DEMO ANIMATION ──────────────────────────────────────────────────── -->
|
||||
<section>
|
||||
<div class="section-label">Live-Demo</div>
|
||||
<h2 class="section-title">Schau zu wie sie<br>zusammenarbeiten!</h2>
|
||||
|
||||
<div class="stage-wrap">
|
||||
<div class="stage" id="stage">
|
||||
|
||||
<!-- User -->
|
||||
<div class="stage-agent">
|
||||
<div class="stage-icon r-martin" id="si-user">👤</div>
|
||||
<div class="stage-label">Du</div>
|
||||
<div class="stage-status" id="ss-user">Auftrag!</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-line" id="line1" style="position:relative;">
|
||||
<div class="msg-bubble" id="msg1">📝 Mach das!</div>
|
||||
</div>
|
||||
|
||||
<!-- Martin -->
|
||||
<div class="stage-agent">
|
||||
<div class="stage-icon r-martin" id="si-martin">🧠</div>
|
||||
<div class="stage-label">Martin</div>
|
||||
<div class="stage-status" id="ss-martin">wartet...</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-line" id="line2" style="position:relative;">
|
||||
<div class="msg-bubble" id="msg2">📋 Erledige das!</div>
|
||||
</div>
|
||||
|
||||
<!-- Bob -->
|
||||
<div class="stage-agent">
|
||||
<div class="stage-icon r-bob" id="si-bob">⚡</div>
|
||||
<div class="stage-label">Bob</div>
|
||||
<div class="stage-status" id="ss-bob">bereit</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-line" id="line3" style="position:relative;">
|
||||
<div class="msg-bubble qc" id="msg3">🔍 Ist das gut?</div>
|
||||
</div>
|
||||
|
||||
<!-- QC -->
|
||||
<div class="stage-agent">
|
||||
<div class="stage-icon r-qc" id="si-qc">🔍</div>
|
||||
<div class="stage-label">QC-Check</div>
|
||||
<div class="stage-status" id="ss-qc">bereit</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Score display -->
|
||||
<div id="score-display" style="text-align:center;margin-top:24px;min-height:48px;"></div>
|
||||
|
||||
<div class="log-box" id="log">Drück den Knopf und schau zu! 👇</div>
|
||||
|
||||
<div style="text-align:center;">
|
||||
<button class="play-btn" id="play-btn" onclick="runDemo()">
|
||||
▶ Mission starten!
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── ZEIT / EIGENZEIT ────────────────────────────────────────────────── -->
|
||||
<section>
|
||||
<div class="section-label">Das Zeitgefühl</div>
|
||||
<h2 class="section-title">Warum Zeit sich<br>unterschiedlich anfühlt</h2>
|
||||
|
||||
<p style="color:#ffffffaa;font-size:17px;max-width:580px;line-height:1.7;margin-bottom:40px;">
|
||||
Kennst du das? Spielen geht superschnell — Schule fühlt sich ewig an. Genau so geht es den Robotern. Jeder erlebt Zeit anders. Das nennen Forscher <strong style="color:var(--yellow)">Eigenzeit</strong>.
|
||||
</p>
|
||||
|
||||
<div class="zeit-cards">
|
||||
<div class="zeit-card">
|
||||
<span class="zeit-emoji">⚡</span>
|
||||
<div class="zeit-name" style="color:var(--green)">Bob — Blitzschnell</div>
|
||||
<div class="zeit-bar-wrap"><div class="zeit-bar zeit-bar-fast"></div></div>
|
||||
<div class="zeit-rate" style="color:var(--green)">97 Aktionen/Sekunde</div>
|
||||
<div class="zeit-desc" style="margin-top:8px">Für Bob ist eine Stunde wie eine Minute. Er macht so viel in so kurzer Zeit!</div>
|
||||
</div>
|
||||
<div class="zeit-card">
|
||||
<span class="zeit-emoji">🧠</span>
|
||||
<div class="zeit-name" style="color:var(--blue)">Martin — Normal</div>
|
||||
<div class="zeit-bar-wrap"><div class="zeit-bar zeit-bar-normal"></div></div>
|
||||
<div class="zeit-rate" style="color:var(--blue)">2.6 Aktionen/Sekunde</div>
|
||||
<div class="zeit-desc" style="margin-top:8px">Martin koordiniert alles. Nicht zu schnell, nicht zu langsam — gerade richtig.</div>
|
||||
</div>
|
||||
<div class="zeit-card">
|
||||
<span class="zeit-emoji">🐢</span>
|
||||
<div class="zeit-name" style="color:var(--purple)">Diana — Gründlich</div>
|
||||
<div class="zeit-bar-wrap"><div class="zeit-bar zeit-bar-slow"></div></div>
|
||||
<div class="zeit-rate" style="color:var(--purple)">0.04 Aktionen/Sekunde</div>
|
||||
<div class="zeit-desc" style="margin-top:8px">Diana erlebt gedehnte Zeit. Jede Aufgabe fühlt sich für sie wie eine große Reise an.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background:#ffffff08;border:1px solid #ffffff15;border-radius:var(--radius);padding:28px 32px;margin-top:32px;">
|
||||
<div style="font-size:22px;font-weight:900;margin-bottom:12px;">💡 Merke dir das so:</div>
|
||||
<p style="font-size:16px;color:#ffffffbb;line-height:1.7;">
|
||||
Wenn du Videospiele spielst, fliegt die Zeit — du machst viele Aktionen pro Minute.<br>
|
||||
Wenn du auf den Bus wartest, kriecht die Zeit — du machst kaum etwas.<br><br>
|
||||
Die Roboter haben dasselbe Phänomen. Wir nennen es <strong style="color:var(--yellow)">Causal Dilation Clock</strong> — eine Uhr die misst wie aktiv jeder Roboter wirklich war.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── QC / DOPPEL-AGENTEN ─────────────────────────────────────────────── -->
|
||||
<section>
|
||||
<div class="section-label">Das Qualitätssystem</div>
|
||||
<h2 class="section-title">Der Doppel-Agenten<br>Trick 🔍</h2>
|
||||
|
||||
<p style="color:#ffffffaa;font-size:17px;max-width:560px;line-height:1.7;margin-bottom:40px;">
|
||||
Bei guten Aufgaben gibt es immer jemanden der kontrolliert. In der Schule ist das dein Lehrer. Bei unseren Robotern ist das der <strong style="color:var(--pink)">QC-Checker</strong>.
|
||||
</p>
|
||||
|
||||
<div class="qc-flow">
|
||||
<div class="qc-step">
|
||||
<span class="qc-step-icon">📝</span>
|
||||
<div class="qc-step-title">Auftrag kommt</div>
|
||||
<div class="qc-step-desc">Martin bekommt eine Aufgabe</div>
|
||||
</div>
|
||||
<div class="qc-arrow">→</div>
|
||||
<div class="qc-step">
|
||||
<span class="qc-step-icon">⚡</span>
|
||||
<div class="qc-step-title">Bob arbeitet</div>
|
||||
<div class="qc-step-desc">Erledigt die Aufgabe schnell</div>
|
||||
</div>
|
||||
<div class="qc-arrow">→</div>
|
||||
<div class="qc-step" style="border-color:#FF6B6B55">
|
||||
<span class="qc-step-icon">🔍</span>
|
||||
<div class="qc-step-title">QC prüft</div>
|
||||
<div class="qc-step-desc">In 6 von 10 Fällen</div>
|
||||
</div>
|
||||
<div class="qc-arrow">→</div>
|
||||
<div class="qc-step">
|
||||
<span class="qc-step-icon">🏆</span>
|
||||
<div class="qc-step-title">Ergebnis</div>
|
||||
<div class="qc-step-desc">Gut genug? Fertig!</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background:#ffffff08;border:1px solid #ffffff15;border-radius:var(--radius);padding:32px;text-align:center;">
|
||||
<div style="font-size:18px;font-weight:700;margin-bottom:24px;color:#ffffffcc;">Noten die der QC-Checker vergibt:</div>
|
||||
<div class="score-demo">
|
||||
<div class="score-badge score-fail">
|
||||
<span class="num">1-6</span>
|
||||
<span class="lbl">😬 Nochmal!</span>
|
||||
</div>
|
||||
<div class="score-badge score-ok">
|
||||
<span class="num">7-8</span>
|
||||
<span class="lbl">😊 Gut!</span>
|
||||
</div>
|
||||
<div class="score-badge score-great">
|
||||
<span class="num">9-10</span>
|
||||
<span class="lbl">🌟 Super!</span>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin-top:24px;color:#ffffffaa;font-size:15px;">
|
||||
Wenn die Note unter 7 ist → Bob muss nochmal ran! (Bis zu 2x Versuche)
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── FINAL ────────────────────────────────────────────────────────────── -->
|
||||
<div class="final-section">
|
||||
<h2>Jetzt weißt du,<br>wie KI-Teams <span style="color:var(--yellow)">wirklich arbeiten!</span></h2>
|
||||
<p>Agenten · Delegation · Qualitätscheck · Eigenzeit — das sind keine Zauberei, das ist cleveres Teamwork!</p>
|
||||
<div class="cta-group">
|
||||
<a href="/lab" class="cta-primary">🧪 Live ausprobieren</a>
|
||||
<a href="https://github.com/Jeuners/Time_Dilation_in_LLM_Agent_Systems" class="cta-secondary" target="_blank">📄 Das Paper</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const log = document.getElementById('log');
|
||||
const playBtn = document.getElementById('play-btn');
|
||||
let running = false;
|
||||
|
||||
function addLog(text, cls='', delay=0) {
|
||||
return new Promise(r => setTimeout(() => {
|
||||
const d = document.createElement('div');
|
||||
d.className = 'log-line ' + cls;
|
||||
d.textContent = text;
|
||||
log.appendChild(d);
|
||||
log.scrollTop = log.scrollHeight;
|
||||
r();
|
||||
}, delay));
|
||||
}
|
||||
|
||||
function setActive(id, active=true) {
|
||||
const el = document.getElementById(id);
|
||||
if (!el) return;
|
||||
if (active) {
|
||||
el.classList.add('active');
|
||||
el.style.animation = 'pulse-glow 0.8s ease-in-out infinite';
|
||||
} else {
|
||||
el.classList.remove('active');
|
||||
el.style.animation = '';
|
||||
}
|
||||
}
|
||||
|
||||
function setStatus(id, text) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.textContent = text;
|
||||
}
|
||||
|
||||
function flyMsg(id, lineId, reverse=false) {
|
||||
return new Promise(r => {
|
||||
const bubble = document.getElementById(id);
|
||||
const line = document.getElementById(lineId);
|
||||
if (!bubble || !line) { r(); return; }
|
||||
const dist = line.offsetWidth;
|
||||
bubble.style.setProperty('--fly-dist', (reverse ? -dist : dist) + 'px');
|
||||
bubble.style.left = reverse ? (dist - 20) + 'px' : '0px';
|
||||
bubble.style.animation = 'none';
|
||||
bubble.offsetHeight; // force reflow
|
||||
bubble.style.animation = 'msgFly 1.2s ease-in-out forwards';
|
||||
setTimeout(r, 1300);
|
||||
});
|
||||
}
|
||||
|
||||
function showScore(score) {
|
||||
const el = document.getElementById('score-display');
|
||||
const color = score >= 9 ? 'var(--green)' : score >= 7 ? 'var(--yellow)' : 'var(--pink)';
|
||||
const emoji = score >= 9 ? '🌟' : score >= 7 ? '😊' : '😬';
|
||||
el.innerHTML = `<div style="font-size:48px;animation:scoreIn 0.5s forwards;opacity:0">${emoji}</div>
|
||||
<div style="font-size:22px;font-weight:900;color:${color};animation:scoreIn 0.5s 0.2s forwards;opacity:0">
|
||||
QC-Note: ${score}/10
|
||||
</div>`;
|
||||
}
|
||||
|
||||
async function runDemo() {
|
||||
if (running) return;
|
||||
running = true;
|
||||
playBtn.disabled = true;
|
||||
log.innerHTML = '';
|
||||
document.getElementById('score-display').innerHTML = '';
|
||||
['si-user','si-martin','si-bob','si-qc'].forEach(id => setActive(id, false));
|
||||
['ss-user','ss-martin','ss-bob','ss-qc'].forEach(id => setStatus(id, 'wartet...'));
|
||||
|
||||
const score = 7 + Math.floor(Math.random() * 3); // 7-9
|
||||
const doQC = Math.random() < 0.6;
|
||||
|
||||
// Step 1: User → Martin
|
||||
setActive('si-user');
|
||||
setStatus('ss-user', 'Auftrag!');
|
||||
await addLog('👤 Du: "Erkläre mir wie Agenten arbeiten!"');
|
||||
await flyMsg('msg1', 'line1');
|
||||
setActive('si-user', false);
|
||||
|
||||
// Step 2: Martin receives
|
||||
setActive('si-martin');
|
||||
setStatus('ss-martin', 'delegiert...');
|
||||
await addLog('🧠 Martin: Ich teile die Aufgabe auf...', '', 400);
|
||||
await new Promise(r => setTimeout(r, 600));
|
||||
|
||||
// Step 3: Martin → Bob
|
||||
setStatus('ss-martin', '→ Bob');
|
||||
await flyMsg('msg2', 'line2');
|
||||
setActive('si-martin', false);
|
||||
|
||||
// Step 4: Bob works
|
||||
setActive('si-bob');
|
||||
setStatus('ss-bob', '⚡ arbeitet...');
|
||||
await addLog('⚡ Bob: Ich bin dran! (schnell)', 'log-time', 200);
|
||||
await new Promise(r => setTimeout(r, 1200));
|
||||
|
||||
// Step 5: Bob antwortet
|
||||
setStatus('ss-bob', '✅ fertig!');
|
||||
await addLog('⚡ Bob: Fertig! "Agenten sind Roboter die zusammenarbeiten..."', 'log-ok', 300);
|
||||
|
||||
if (doQC) {
|
||||
// QC check
|
||||
await addLog('🔍 QC wird ausgelöst (60% Chance)...', 'log-qc', 600);
|
||||
setActive('si-bob', false);
|
||||
await flyMsg('msg3', 'line3');
|
||||
setActive('si-qc');
|
||||
setStatus('ss-qc', '🔍 prüft...');
|
||||
await new Promise(r => setTimeout(r, 1500));
|
||||
setStatus('ss-qc', `✅ Note: ${score}/10`);
|
||||
await addLog(`🔍 QC-Checker: Note ${score}/10 — ${score >= 7 ? 'Approved! ✅' : 'Nochmal! ❌'}`, 'log-qc', 200);
|
||||
showScore(score);
|
||||
setActive('si-qc', false);
|
||||
} else {
|
||||
setActive('si-bob', false);
|
||||
await addLog('✓ Kein QC-Check diesmal (40% Chance)', '', 600);
|
||||
showScore(score);
|
||||
}
|
||||
|
||||
// Done
|
||||
setActive('si-martin');
|
||||
setStatus('ss-martin', '🏆 Fertig!');
|
||||
await addLog('🧠 Martin: Mission abgeschlossen! ' + (doQC ? `QC-Note: ${score}/10` : 'Direkt geliefert.'), 'log-ok', 500);
|
||||
await new Promise(r => setTimeout(r, 400));
|
||||
setActive('si-martin', false);
|
||||
setStatus('ss-user', '🎉 Danke!');
|
||||
|
||||
running = false;
|
||||
playBtn.disabled = false;
|
||||
playBtn.textContent = '▶ Nochmal!';
|
||||
}
|
||||
|
||||
// Animate zeit bars on scroll
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.querySelectorAll('.zeit-bar').forEach(b => {
|
||||
b.style.animation = 'barGrow 1.5s ease-out forwards';
|
||||
});
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.3 });
|
||||
|
||||
document.querySelectorAll('.zeit-cards').forEach(el => observer.observe(el));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
206
explainer-en.html
Normal file
206
explainer-en.html
Normal file
|
|
@ -0,0 +1,206 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>How Do AI Robots Talk to Each Other?</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
:root {
|
||||
--yellow: #FFD93D; --green: #6BCB77; --blue: #4D96FF;
|
||||
--pink: #FF6B6B; --purple: #C77DFF; --dark: #1a1a2e;
|
||||
--card: #ffffff12; --radius: 20px;
|
||||
}
|
||||
body { font-family: 'Nunito', sans-serif; background: var(--dark); color: #fff; overflow-x: hidden; }
|
||||
.hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; position: relative; overflow: hidden; }
|
||||
.hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; }
|
||||
.hero-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--yellow); margin-bottom: 20px; opacity: 0; animation: fadeUp 0.6s 0.2s forwards; }
|
||||
.hero h1 { font-size: clamp(2.2rem, 6vw, 5rem); font-weight: 900; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; margin-bottom: 24px; opacity: 0; animation: fadeUp 0.6s 0.4s forwards; }
|
||||
.hero h1 span { color: var(--yellow); }
|
||||
.hero-lead { font-size: clamp(1.1rem, 2vw, 1.4rem); color: #ffffffbb; max-width: 560px; line-height: 1.6; margin-bottom: 48px; text-wrap: pretty; opacity: 0; animation: fadeUp 0.6s 0.6s forwards; }
|
||||
.hero-robots { display: flex; gap: 32px; align-items: flex-end; justify-content: center; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.6s 0.8s forwards; }
|
||||
.robot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
||||
.robot-body { width: 90px; height: 90px; border-radius: 22px; display: flex; align-items: center; justify-content: center; font-size: 44px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); transition: transform 0.2s; animation: robotFloat 3s ease-in-out infinite; }
|
||||
.robot-body:hover { transform: scale(1.08) translateY(-4px); }
|
||||
.robot:nth-child(2) .robot-body { animation-delay: 0.8s; }
|
||||
.robot:nth-child(3) .robot-body { animation-delay: 1.6s; }
|
||||
.robot-name { font-size: 14px; font-weight: 700; color: #ffffffcc; }
|
||||
.robot-role { font-size: 11px; color: #ffffff66; text-align: center; max-width: 90px; }
|
||||
.r-martin { background: linear-gradient(135deg, #4D96FF, #2563eb); }
|
||||
.r-bob { background: linear-gradient(135deg, #6BCB77, #16a34a); }
|
||||
.r-diana { background: linear-gradient(135deg, #C77DFF, #7c3aed); }
|
||||
.r-qc { background: linear-gradient(135deg, #FF6B6B, #dc2626); }
|
||||
section { padding: clamp(64px, 8vw, 120px) 20px; max-width: 1100px; margin: 0 auto; }
|
||||
.section-label { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--yellow); margin-bottom: 16px; }
|
||||
.section-title { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 900; line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 48px; text-wrap: balance; }
|
||||
.agent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 48px; }
|
||||
.agent-card { background: #ffffff0d; border: 1px solid #ffffff15; border-radius: var(--radius); padding: 28px 24px; transition: border-color 0.2s, transform 0.2s; }
|
||||
.agent-card:hover { border-color: #ffffff30; transform: translateY(-4px); }
|
||||
.agent-card-icon { font-size: 48px; margin-bottom: 16px; display: block; }
|
||||
.agent-card h3 { font-size: 20px; font-weight: 900; margin-bottom: 8px; }
|
||||
.agent-card p { font-size: 15px; color: #ffffffaa; line-height: 1.6; }
|
||||
.tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; margin-top: 12px; }
|
||||
.tag-blue { background: #4D96FF33; color: #4D96FF; } .tag-green { background: #6BCB7733; color: #6BCB77; } .tag-purple { background: #C77DFF33; color: #C77DFF; } .tag-red { background: #FF6B6B33; color: #FF6B6B; }
|
||||
.stage-wrap { background: #ffffff08; border: 1px solid #ffffff15; border-radius: var(--radius); padding: 40px; position: relative; overflow: hidden; }
|
||||
.stage { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 160px; position: relative; }
|
||||
.stage-agent { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; }
|
||||
.stage-icon { width: 72px; height: 72px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 36px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); transition: transform 0.3s, box-shadow 0.3s; }
|
||||
.stage-icon.active { transform: scale(1.15); box-shadow: 0 0 0 4px var(--yellow), 0 8px 30px rgba(0,0,0,0.4); }
|
||||
.stage-label { font-size: 13px; font-weight: 700; color: #ffffffcc; }
|
||||
.stage-status { font-size: 11px; color: #ffffff55; min-height: 16px; text-align: center; max-width: 80px; }
|
||||
.msg-bubble { position: absolute; top: 50%; transform: translateY(-50%); background: var(--yellow); color: #1a1a2e; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 20px; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,0.3); pointer-events: none; opacity: 0; z-index: 10; }
|
||||
.msg-bubble.qc { background: var(--pink); color: #fff; } .msg-bubble.approved { background: var(--green); color: #fff; }
|
||||
.arrow-line { flex: 1; height: 2px; background: #ffffff15; position: relative; min-width: 30px; }
|
||||
.play-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--yellow); color: #1a1a2e; border: none; border-radius: 99px; padding: 14px 32px; font-family: 'Nunito', sans-serif; font-size: 17px; font-weight: 900; cursor: pointer; margin-top: 28px; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 4px 20px rgba(255,217,61,0.3); }
|
||||
.play-btn:hover { transform: translateY(-2px); } .play-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
|
||||
.log-box { margin-top: 20px; background: #00000030; border-radius: 12px; padding: 16px 20px; font-size: 14px; color: #ffffffbb; min-height: 48px; line-height: 1.8; font-family: monospace; }
|
||||
.log-line { opacity: 0; animation: fadeIn 0.4s forwards; } .log-ok { color: var(--green); } .log-qc { color: var(--pink); } .log-time { color: var(--purple); }
|
||||
.zeit-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
|
||||
.zeit-card { background: #ffffff0d; border: 1px solid #ffffff15; border-radius: var(--radius); padding: 28px 24px; }
|
||||
.zeit-bar-wrap { height: 8px; background: #ffffff15; border-radius: 99px; margin: 16px 0 8px; overflow: hidden; }
|
||||
.zeit-bar { height: 100%; border-radius: 99px; animation: barGrow 1.5s ease-out forwards; transform-origin: left; transform: scaleX(0); }
|
||||
.zeit-bar-fast { background: var(--green); width: 95%; } .zeit-bar-normal { background: var(--blue); width: 60%; } .zeit-bar-slow { background: var(--purple); width: 25%; }
|
||||
.zeit-emoji { font-size: 36px; margin-bottom: 12px; display: block; } .zeit-name { font-size: 18px; font-weight: 900; margin-bottom: 6px; } .zeit-desc { font-size: 14px; color: #ffffffaa; line-height: 1.5; } .zeit-rate { font-size: 22px; font-weight: 900; margin-top: 8px; }
|
||||
.qc-flow { display: flex; align-items: center; gap: 0; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; }
|
||||
.qc-step { background: #ffffff0d; border: 1px solid #ffffff15; border-radius: 16px; padding: 20px 24px; text-align: center; min-width: 140px; transition: border-color 0.2s; }
|
||||
.qc-step:hover { border-color: var(--yellow); }
|
||||
.qc-step-icon { font-size: 36px; margin-bottom: 10px; display: block; } .qc-step-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; } .qc-step-desc { font-size: 12px; color: #ffffffaa; }
|
||||
.qc-arrow { font-size: 24px; color: #ffffff40; padding: 0 8px; flex-shrink: 0; }
|
||||
.score-demo { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
|
||||
.score-badge { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 20px; border-radius: 14px; min-width: 80px; font-weight: 900; }
|
||||
.score-badge .num { font-size: 28px; line-height: 1; } .score-badge .lbl { font-size: 11px; opacity: 0.8; }
|
||||
.score-fail { background: #FF6B6B22; border: 2px solid var(--pink); color: var(--pink); } .score-ok { background: #FFD93D22; border: 2px solid var(--yellow); color: var(--yellow); } .score-great { background: #6BCB7722; border: 2px solid var(--green); color: var(--green); }
|
||||
.final-section { text-align: center; padding: clamp(80px, 10vw, 140px) 20px; }
|
||||
.final-section h2 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 20px; text-wrap: balance; }
|
||||
.final-section p { font-size: 18px; color: #ffffffaa; max-width: 480px; margin: 0 auto 36px; line-height: 1.6; }
|
||||
.cta-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
||||
.cta-primary { background: var(--yellow); color: #1a1a2e; border: none; border-radius: 99px; padding: 16px 36px; font-family: 'Nunito', sans-serif; font-size: 17px; font-weight: 900; cursor: pointer; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 4px 20px rgba(255,217,61,0.3); }
|
||||
.cta-primary:hover { transform: translateY(-2px); }
|
||||
.cta-secondary { background: transparent; color: #fff; border: 2px solid #ffffff30; border-radius: 99px; padding: 16px 36px; font-family: 'Nunito', sans-serif; font-size: 17px; font-weight: 700; cursor: pointer; text-decoration: none; transition: border-color 0.2s, transform 0.15s; }
|
||||
.cta-secondary:hover { border-color: #ffffff60; transform: translateY(-2px); }
|
||||
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes robotFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
|
||||
@keyframes barGrow { to { transform: scaleX(1); } }
|
||||
@keyframes msgFly { 0% { opacity: 0; transform: translateY(-50%) translateX(0) scale(0.8); } 15% { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50%) translateX(var(--fly-dist)) scale(0.9); } }
|
||||
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0 4px var(--yellow), 0 8px 30px rgba(0,0,0,0.4); } 50% { box-shadow: 0 0 0 8px var(--yellow)55, 0 8px 30px rgba(0,0,0,0.4); } }
|
||||
@keyframes scoreIn { from { opacity: 0; transform: scale(0.5) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } }
|
||||
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
|
||||
@media (max-width: 600px) { .stage { flex-direction: column; gap: 20px; } .arrow-line { width: 2px; height: 30px; min-width: unset; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="hero">
|
||||
<div class="hero-eyebrow">🤖 AI Robots Explained</div>
|
||||
<h1>How Do <span>AI Agents</span><br>Talk to Each Other?</h1>
|
||||
<p class="hero-lead">Imagine a team of robots — each with a special job. They send messages to work together. That's exactly how AI agents work!</p>
|
||||
<div class="hero-robots">
|
||||
<div class="robot"><div class="robot-body r-martin">🧠</div><div class="robot-name">Martin</div><div class="robot-role">The Boss</div></div>
|
||||
<div class="robot"><div class="robot-body r-bob">⚡</div><div class="robot-name">Bob</div><div class="robot-role">Super fast</div></div>
|
||||
<div class="robot"><div class="robot-body r-diana">🐢</div><div class="robot-name">Diana</div><div class="robot-role">Very thorough</div></div>
|
||||
<div class="robot"><div class="robot-body r-qc">🔍</div><div class="robot-name">QC-Checker</div><div class="robot-role">Quality control</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="section-label">The Team</div>
|
||||
<h2 class="section-title">Every robot has<br>a superpower</h2>
|
||||
<div class="agent-grid">
|
||||
<div class="agent-card"><span class="agent-card-icon">🧠</span><h3>Martin — The Boss</h3><p>Martin gets the job and splits the work. He waits for results and puts everything together.</p><span class="tag tag-blue">Delegator</span></div>
|
||||
<div class="agent-card"><span class="agent-card-icon">⚡</span><h3>Bob — The Flash</h3><p>Bob works super fast. He replies instantly — like doing easy math problems in your head.</p><span class="tag tag-green">Echo · fast</span></div>
|
||||
<div class="agent-card"><span class="agent-card-icon">🐢</span><h3>Diana — The Thorough One</h3><p>Diana takes a bit longer but does it really carefully — like writing a perfect essay.</p><span class="tag tag-purple">Slow · careful</span></div>
|
||||
<div class="agent-card"><span class="agent-card-icon">🔍</span><h3>QC-Checker — The Teacher</h3><p>Checks if the work is good enough. Gives a score from 1 to 10. Too low? Do it again!</p><span class="tag tag-red">Reviewer · goal 9/10</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="section-label">Live Demo</div>
|
||||
<h2 class="section-title">Watch them<br>work together!</h2>
|
||||
<div class="stage-wrap">
|
||||
<div class="stage" id="stage">
|
||||
<div class="stage-agent"><div class="stage-icon r-martin" id="si-user">👤</div><div class="stage-label">You</div><div class="stage-status" id="ss-user">Task!</div></div>
|
||||
<div class="arrow-line" id="line1" style="position:relative;"><div class="msg-bubble" id="msg1">📝 Do this!</div></div>
|
||||
<div class="stage-agent"><div class="stage-icon r-martin" id="si-martin">🧠</div><div class="stage-label">Martin</div><div class="stage-status" id="ss-martin">waiting...</div></div>
|
||||
<div class="arrow-line" id="line2" style="position:relative;"><div class="msg-bubble" id="msg2">📋 Handle this!</div></div>
|
||||
<div class="stage-agent"><div class="stage-icon r-bob" id="si-bob">⚡</div><div class="stage-label">Bob</div><div class="stage-status" id="ss-bob">ready</div></div>
|
||||
<div class="arrow-line" id="line3" style="position:relative;"><div class="msg-bubble qc" id="msg3">🔍 Is this good?</div></div>
|
||||
<div class="stage-agent"><div class="stage-icon r-qc" id="si-qc">🔍</div><div class="stage-label">QC Check</div><div class="stage-status" id="ss-qc">ready</div></div>
|
||||
</div>
|
||||
<div id="score-display" style="text-align:center;margin-top:24px;min-height:48px;"></div>
|
||||
<div class="log-box" id="log">Press the button and watch! 👇</div>
|
||||
<div style="text-align:center;"><button class="play-btn" id="play-btn" onclick="runDemo()">▶ Start Mission!</button></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="section-label">Time Perception</div>
|
||||
<h2 class="section-title">Why time feels<br>different for each robot</h2>
|
||||
<p style="color:#ffffffaa;font-size:17px;max-width:580px;line-height:1.7;margin-bottom:40px;">You know how playing video games flies by — but waiting at the dentist feels forever? Robots experience the same thing. Researchers call it <strong style="color:var(--yellow)">Eigenzeit</strong> (proper time).</p>
|
||||
<div class="zeit-cards">
|
||||
<div class="zeit-card"><span class="zeit-emoji">⚡</span><div class="zeit-name" style="color:var(--green)">Bob — Lightning Fast</div><div class="zeit-bar-wrap"><div class="zeit-bar zeit-bar-fast"></div></div><div class="zeit-rate" style="color:var(--green)">97 actions/second</div><div class="zeit-desc" style="margin-top:8px">For Bob, an hour feels like a minute. He does SO much in so little time!</div></div>
|
||||
<div class="zeit-card"><span class="zeit-emoji">🧠</span><div class="zeit-name" style="color:var(--blue)">Martin — Normal</div><div class="zeit-bar-wrap"><div class="zeit-bar zeit-bar-normal"></div></div><div class="zeit-rate" style="color:var(--blue)">2.6 actions/second</div><div class="zeit-desc" style="margin-top:8px">Martin coordinates everything. Not too fast, not too slow — just right.</div></div>
|
||||
<div class="zeit-card"><span class="zeit-emoji">🐢</span><div class="zeit-name" style="color:var(--purple)">Diana — Thorough</div><div class="zeit-bar-wrap"><div class="zeit-bar zeit-bar-slow"></div></div><div class="zeit-rate" style="color:var(--purple)">0.04 actions/second</div><div class="zeit-desc" style="margin-top:8px">Diana experiences stretched time. Each task feels like a big journey for her.</div></div>
|
||||
</div>
|
||||
<div style="background:#ffffff08;border:1px solid #ffffff15;border-radius:var(--radius);padding:28px 32px;margin-top:32px;">
|
||||
<div style="font-size:22px;font-weight:900;margin-bottom:12px;">💡 Remember it like this:</div>
|
||||
<p style="font-size:16px;color:#ffffffbb;line-height:1.7;">When you play video games, time flies — you make lots of moves per minute.<br>When you wait for the bus, time crawls — you do almost nothing.<br><br>Robots have the same phenomenon. We call it the <strong style="color:var(--yellow)">Causal Dilation Clock</strong> — a clock that measures how active each robot truly was.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="section-label">Quality System</div>
|
||||
<h2 class="section-title">The Double-Agent<br>Trick 🔍</h2>
|
||||
<p style="color:#ffffffaa;font-size:17px;max-width:560px;line-height:1.7;margin-bottom:40px;">Good work always gets checked. At school, that's your teacher. For our robots, it's the <strong style="color:var(--pink)">QC-Checker</strong>.</p>
|
||||
<div class="qc-flow">
|
||||
<div class="qc-step"><span class="qc-step-icon">📝</span><div class="qc-step-title">Task arrives</div><div class="qc-step-desc">Martin gets a job</div></div>
|
||||
<div class="qc-arrow">→</div>
|
||||
<div class="qc-step"><span class="qc-step-icon">⚡</span><div class="qc-step-title">Bob works</div><div class="qc-step-desc">Completes the task fast</div></div>
|
||||
<div class="qc-arrow">→</div>
|
||||
<div class="qc-step" style="border-color:#FF6B6B55"><span class="qc-step-icon">🔍</span><div class="qc-step-title">QC checks</div><div class="qc-step-desc">6 out of 10 times</div></div>
|
||||
<div class="qc-arrow">→</div>
|
||||
<div class="qc-step"><span class="qc-step-icon">🏆</span><div class="qc-step-title">Result</div><div class="qc-step-desc">Good enough? Done!</div></div>
|
||||
</div>
|
||||
<div style="background:#ffffff08;border:1px solid #ffffff15;border-radius:var(--radius);padding:32px;text-align:center;">
|
||||
<div style="font-size:18px;font-weight:700;margin-bottom:24px;color:#ffffffcc;">Scores the QC-Checker gives:</div>
|
||||
<div class="score-demo">
|
||||
<div class="score-badge score-fail"><span class="num">1-6</span><span class="lbl">😬 Try again!</span></div>
|
||||
<div class="score-badge score-ok"><span class="num">7-8</span><span class="lbl">😊 Good!</span></div>
|
||||
<div class="score-badge score-great"><span class="num">9-10</span><span class="lbl">🌟 Amazing!</span></div>
|
||||
</div>
|
||||
<p style="margin-top:24px;color:#ffffffaa;font-size:15px;">Score below 7 → Bob has to try again! (Up to 2 more tries)</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="final-section">
|
||||
<h2>Now you know how<br>AI teams <span style="color:var(--yellow)">really work!</span></h2>
|
||||
<p>Agents · Delegation · Quality Check · Proper Time — it's not magic, it's clever teamwork!</p>
|
||||
<div class="cta-group">
|
||||
<a href="https://github.com/Jeuners/Time_Dilation_in_LLM_Agent_Systems" class="cta-primary">📄 Read the Paper</a>
|
||||
<a href="explainer-de.html" class="cta-secondary">🇩🇪 Deutsch</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const log=document.getElementById('log'),playBtn=document.getElementById('play-btn');let running=false;
|
||||
function addLog(t,c='',d=0){return new Promise(r=>setTimeout(()=>{const e=document.createElement('div');e.className='log-line '+c;e.textContent=t;log.appendChild(e);log.scrollTop=log.scrollHeight;r()},d))}
|
||||
function setActive(id,a=true){const e=document.getElementById(id);if(!e)return;a?(e.classList.add('active'),e.style.animation='pulse-glow 0.8s ease-in-out infinite'):(e.classList.remove('active'),e.style.animation='')}
|
||||
function setStatus(id,t){const e=document.getElementById(id);if(e)e.textContent=t}
|
||||
function flyMsg(id,lid,rev=false){return new Promise(r=>{const b=document.getElementById(id),l=document.getElementById(lid);if(!b||!l){r();return}const d=l.offsetWidth;b.style.setProperty('--fly-dist',(rev?-d:d)+'px');b.style.left=(rev?d-20:0)+'px';b.style.animation='none';b.offsetHeight;b.style.animation='msgFly 1.2s ease-in-out forwards';setTimeout(r,1300)})}
|
||||
function showScore(s){const e=document.getElementById('score-display'),c=s>=9?'var(--green)':s>=7?'var(--yellow)':'var(--pink)',em=s>=9?'🌟':s>=7?'😊':'😬';e.innerHTML=`<div style="font-size:48px;animation:scoreIn 0.5s forwards;opacity:0">${em}</div><div style="font-size:22px;font-weight:900;color:${c};animation:scoreIn 0.5s 0.2s forwards;opacity:0">QC Score: ${s}/10</div>`}
|
||||
async function runDemo(){if(running)return;running=true;playBtn.disabled=true;log.innerHTML='';document.getElementById('score-display').innerHTML='';['si-user','si-martin','si-bob','si-qc'].forEach(id=>setActive(id,false));['ss-user','ss-martin','ss-bob','ss-qc'].forEach(id=>setStatus(id,'waiting...'));
|
||||
const score=7+Math.floor(Math.random()*3),doQC=Math.random()<0.6;
|
||||
setActive('si-user');setStatus('ss-user','Task!');await addLog('👤 You: "Explain how agents work!"');await flyMsg('msg1','line1');setActive('si-user',false);
|
||||
setActive('si-martin');setStatus('ss-martin','splitting...');await addLog('🧠 Martin: I\'ll split the work...','' ,400);await new Promise(r=>setTimeout(r,600));
|
||||
setStatus('ss-martin','→ Bob');await flyMsg('msg2','line2');setActive('si-martin',false);
|
||||
setActive('si-bob');setStatus('ss-bob','⚡ working...');await addLog('⚡ Bob: On it! (fast)','log-time',200);await new Promise(r=>setTimeout(r,1200));
|
||||
setStatus('ss-bob','✅ done!');await addLog('⚡ Bob: Done! "Agents are robots that work together..."','log-ok',300);
|
||||
if(doQC){await addLog('🔍 QC triggered (60% chance)...','log-qc',600);setActive('si-bob',false);await flyMsg('msg3','line3');setActive('si-qc');setStatus('ss-qc','🔍 checking...');await new Promise(r=>setTimeout(r,1500));setStatus('ss-qc',`✅ Score: ${score}/10`);await addLog(`🔍 QC-Checker: Score ${score}/10 — ${score>=7?'Approved! ✅':'Try again! ❌'}`,'log-qc',200);showScore(score);setActive('si-qc',false);}
|
||||
else{setActive('si-bob',false);await addLog('✓ No QC check this time (40% chance)','',600);showScore(score);}
|
||||
setActive('si-martin');setStatus('ss-martin','🏆 Done!');await addLog('🧠 Martin: Mission complete! '+(doQC?`QC Score: ${score}/10`:'Delivered directly.'),'log-ok',500);await new Promise(r=>setTimeout(r,400));setActive('si-martin',false);setStatus('ss-user','🎉 Thanks!');
|
||||
running=false;playBtn.disabled=false;playBtn.textContent='▶ Again!';}
|
||||
const obs=new IntersectionObserver(e=>{e.forEach(x=>{if(x.isIntersecting)x.target.querySelectorAll('.zeit-bar').forEach(b=>b.style.animation='barGrow 1.5s ease-out forwards')})},{threshold:0.3});document.querySelectorAll('.zeit-cards').forEach(el=>obs.observe(el));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
191
explainer-hi.html
Normal file
191
explainer-hi.html
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="hi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI रोबोट एक दूसरे से कैसे बात करते हैं?</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&family=Noto+Sans+Devanagari:wght@400;700;900&display=swap');
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
:root{--yellow:#FFD93D;--green:#6BCB77;--blue:#4D96FF;--pink:#FF6B6B;--purple:#C77DFF;--dark:#1a1a2e;--radius:20px}
|
||||
body{font-family:'Noto Sans Devanagari','Nunito',sans-serif;background:var(--dark);color:#fff;overflow-x:hidden}
|
||||
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px}
|
||||
.hero-eyebrow{font-size:13px;font-weight:700;letter-spacing:0.1em;color:var(--yellow);margin-bottom:20px;opacity:0;animation:fadeUp 0.6s 0.2s forwards}
|
||||
.hero h1{font-size:clamp(1.8rem,5vw,4rem);font-weight:900;line-height:1.3;margin-bottom:24px;opacity:0;animation:fadeUp 0.6s 0.4s forwards}
|
||||
.hero h1 span{color:var(--yellow)}
|
||||
.hero-lead{font-size:clamp(1rem,2vw,1.25rem);color:#ffffffbb;max-width:560px;line-height:1.8;margin-bottom:48px;opacity:0;animation:fadeUp 0.6s 0.6s forwards}
|
||||
.hero-robots{display:flex;gap:32px;align-items:flex-end;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp 0.6s 0.8s forwards}
|
||||
.robot{display:flex;flex-direction:column;align-items:center;gap:8px}
|
||||
.robot-body{width:90px;height:90px;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:44px;box-shadow:0 8px 32px rgba(0,0,0,0.3);animation:robotFloat 3s ease-in-out infinite;transition:transform 0.2s}
|
||||
.robot-body:hover{transform:scale(1.08) translateY(-4px)}
|
||||
.robot:nth-child(2) .robot-body{animation-delay:0.8s}.robot:nth-child(3) .robot-body{animation-delay:1.6s}
|
||||
.robot-name{font-size:14px;font-weight:700;color:#ffffffcc}.robot-role{font-size:11px;color:#ffffff66;text-align:center;max-width:90px}
|
||||
.r-martin{background:linear-gradient(135deg,#4D96FF,#2563eb)}.r-bob{background:linear-gradient(135deg,#6BCB77,#16a34a)}.r-diana{background:linear-gradient(135deg,#C77DFF,#7c3aed)}.r-qc{background:linear-gradient(135deg,#FF6B6B,#dc2626)}
|
||||
section{padding:clamp(64px,8vw,120px) 20px;max-width:1100px;margin:0 auto}
|
||||
.section-label{font-size:12px;font-weight:700;letter-spacing:0.08em;color:var(--yellow);margin-bottom:16px}
|
||||
.section-title{font-size:clamp(1.6rem,3vw,2.6rem);font-weight:900;line-height:1.3;margin-bottom:48px}
|
||||
.agent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:48px}
|
||||
.agent-card{background:#ffffff0d;border:1px solid #ffffff15;border-radius:var(--radius);padding:28px 24px;transition:border-color 0.2s,transform 0.2s}
|
||||
.agent-card:hover{border-color:#ffffff30;transform:translateY(-4px)}
|
||||
.agent-card-icon{font-size:48px;margin-bottom:16px;display:block}
|
||||
.agent-card h3{font-size:18px;font-weight:900;margin-bottom:8px;line-height:1.3}.agent-card p{font-size:14px;color:#ffffffaa;line-height:1.7}
|
||||
.tag{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;margin-top:12px}
|
||||
.tag-blue{background:#4D96FF33;color:#4D96FF}.tag-green{background:#6BCB7733;color:#6BCB77}.tag-purple{background:#C77DFF33;color:#C77DFF}.tag-red{background:#FF6B6B33;color:#FF6B6B}
|
||||
.stage-wrap{background:#ffffff08;border:1px solid #ffffff15;border-radius:var(--radius);padding:40px;position:relative}
|
||||
.stage{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:160px;position:relative}
|
||||
.stage-agent{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0}
|
||||
.stage-icon{width:72px;height:72px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:36px;box-shadow:0 4px 20px rgba(0,0,0,0.3);transition:transform 0.3s,box-shadow 0.3s}
|
||||
.stage-icon.active{transform:scale(1.15);box-shadow:0 0 0 4px var(--yellow),0 8px 30px rgba(0,0,0,0.4)}
|
||||
.stage-label{font-size:13px;font-weight:700;color:#ffffffcc}.stage-status{font-size:11px;color:#ffffff55;min-height:16px;text-align:center;max-width:80px}
|
||||
.msg-bubble{position:absolute;top:50%;transform:translateY(-50%);background:var(--yellow);color:#1a1a2e;font-size:11px;font-weight:700;padding:6px 10px;border-radius:20px;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,0.3);pointer-events:none;opacity:0;z-index:10}
|
||||
.msg-bubble.qc{background:var(--pink);color:#fff}
|
||||
.arrow-line{flex:1;height:2px;background:#ffffff15;position:relative;min-width:30px}
|
||||
.play-btn{display:inline-flex;align-items:center;gap:10px;background:var(--yellow);color:#1a1a2e;border:none;border-radius:99px;padding:14px 32px;font-family:inherit;font-size:16px;font-weight:900;cursor:pointer;margin-top:28px;transition:transform 0.15s;box-shadow:0 4px 20px rgba(255,217,61,0.3)}
|
||||
.play-btn:hover{transform:translateY(-2px)}.play-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
|
||||
.log-box{margin-top:20px;background:#00000030;border-radius:12px;padding:16px 20px;font-size:14px;color:#ffffffbb;min-height:48px;line-height:1.8;font-family:monospace}
|
||||
.log-line{opacity:0;animation:fadeIn 0.4s forwards}.log-ok{color:var(--green)}.log-qc{color:var(--pink)}.log-time{color:var(--purple)}
|
||||
.zeit-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
|
||||
.zeit-card{background:#ffffff0d;border:1px solid #ffffff15;border-radius:var(--radius);padding:28px 24px}
|
||||
.zeit-bar-wrap{height:8px;background:#ffffff15;border-radius:99px;margin:16px 0 8px;overflow:hidden}
|
||||
.zeit-bar{height:100%;border-radius:99px;transform:scaleX(0);transform-origin:left;animation:barGrow 1.5s ease-out forwards}
|
||||
.zeit-bar-fast{background:var(--green);width:95%}.zeit-bar-normal{background:var(--blue);width:60%}.zeit-bar-slow{background:var(--purple);width:25%}
|
||||
.qc-flow{display:flex;align-items:center;gap:0;flex-wrap:wrap;justify-content:center;margin-bottom:40px}
|
||||
.qc-step{background:#ffffff0d;border:1px solid #ffffff15;border-radius:16px;padding:20px 24px;text-align:center;min-width:140px;transition:border-color 0.2s}
|
||||
.qc-step:hover{border-color:var(--yellow)}.qc-step-icon{font-size:36px;margin-bottom:10px;display:block}.qc-step-title{font-size:14px;font-weight:700;margin-bottom:4px;line-height:1.3}.qc-step-desc{font-size:12px;color:#ffffffaa}
|
||||
.qc-arrow{font-size:24px;color:#ffffff40;padding:0 8px;flex-shrink:0}
|
||||
.score-demo{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
|
||||
.score-badge{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 20px;border-radius:14px;min-width:80px;font-weight:900}
|
||||
.score-badge .num{font-size:28px;line-height:1}.score-badge .lbl{font-size:11px;opacity:0.8}
|
||||
.score-fail{background:#FF6B6B22;border:2px solid var(--pink);color:var(--pink)}.score-ok{background:#FFD93D22;border:2px solid var(--yellow);color:var(--yellow)}.score-great{background:#6BCB7722;border:2px solid var(--green);color:var(--green)}
|
||||
.final-section{text-align:center;padding:clamp(80px,10vw,140px) 20px}
|
||||
.final-section h2{font-size:clamp(1.6rem,4vw,3rem);font-weight:900;line-height:1.3;margin-bottom:20px}
|
||||
.final-section p{font-size:17px;color:#ffffffaa;max-width:480px;margin:0 auto 36px;line-height:1.7}
|
||||
.cta-group{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
|
||||
.cta-primary{background:var(--yellow);color:#1a1a2e;border:none;border-radius:99px;padding:16px 36px;font-family:inherit;font-size:16px;font-weight:900;cursor:pointer;text-decoration:none;transition:transform 0.15s}
|
||||
.cta-primary:hover{transform:translateY(-2px)}
|
||||
.cta-secondary{background:transparent;color:#fff;border:2px solid #ffffff30;border-radius:99px;padding:16px 36px;font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;text-decoration:none;transition:border-color 0.2s,transform 0.15s}
|
||||
.cta-secondary:hover{border-color:#ffffff60;transform:translateY(-2px)}
|
||||
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
|
||||
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
|
||||
@keyframes robotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
|
||||
@keyframes barGrow{to{transform:scaleX(1)}}
|
||||
@keyframes msgFly{0%{opacity:0;transform:translateY(-50%) translateX(0) scale(0.8)}15%{opacity:1;transform:translateY(-50%) translateX(0) scale(1)}85%{opacity:1}100%{opacity:0;transform:translateY(-50%) translateX(var(--fly-dist)) scale(0.9)}}
|
||||
@keyframes pulse-glow{0%,100%{box-shadow:0 0 0 4px var(--yellow),0 8px 30px rgba(0,0,0,0.4)}50%{box-shadow:0 0 0 8px #FFD93D55,0 8px 30px rgba(0,0,0,0.4)}}
|
||||
@keyframes scoreIn{from{opacity:0;transform:scale(0.5) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}
|
||||
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}}
|
||||
@media(max-width:600px){.stage{flex-direction:column;gap:20px}.arrow-line{width:2px;height:30px;min-width:unset}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="hero">
|
||||
<div class="hero-eyebrow">🤖 AI रोबोट समझाया</div>
|
||||
<h1><span>AI एजेंट</span> एक दूसरे से<br>कैसे बात करते हैं?</h1>
|
||||
<p class="hero-lead">एक रोबोट की टीम की कल्पना करो — हर एक का अपना काम है। वे एक दूसरे को संदेश भेजकर मिलकर काम करते हैं। बस ऐसे ही AI एजेंट काम करते हैं!</p>
|
||||
<div class="hero-robots">
|
||||
<div class="robot"><div class="robot-body r-martin">🧠</div><div class="robot-name">मार्टिन</div><div class="robot-role">बॉस</div></div>
|
||||
<div class="robot"><div class="robot-body r-bob">⚡</div><div class="robot-name">बॉब</div><div class="robot-role">सुपर तेज़</div></div>
|
||||
<div class="robot"><div class="robot-body r-diana">🐢</div><div class="robot-name">डायना</div><div class="robot-role">बहुत सावधान</div></div>
|
||||
<div class="robot"><div class="robot-body r-qc">🔍</div><div class="robot-name">QC जाँचकर्ता</div><div class="robot-role">गुणवत्ता नियंत्रण</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="section-label">टीम के सदस्य</div>
|
||||
<h2 class="section-title">हर रोबोट के पास<br>एक सुपरपावर है</h2>
|
||||
<div class="agent-grid">
|
||||
<div class="agent-card"><span class="agent-card-icon">🧠</span><h3>मार्टिन — बॉस</h3><p>मार्टिन काम लेता है और उसे बाँटता है। वह नतीजों का इंतज़ार करता है और सब कुछ एक साथ रखता है।</p><span class="tag tag-blue">प्रतिनिधि</span></div>
|
||||
<div class="agent-card"><span class="agent-card-icon">⚡</span><h3>बॉब — बिजली</h3><p>बॉब बहुत तेज़ काम करता है। वह तुरंत जवाब देता है — जैसे मन में आसान गणित करना।</p><span class="tag tag-green">त्वरित उत्तर</span></div>
|
||||
<div class="agent-card"><span class="agent-card-icon">🐢</span><h3>डायना — सावधान</h3><p>डायना को थोड़ा ज़्यादा समय लगता है, लेकिन वह बहुत सावधानी से करती है — जैसे परफेक्ट निबंध लिखना।</p><span class="tag tag-purple">धीमा · सावधान</span></div>
|
||||
<div class="agent-card"><span class="agent-card-icon">🔍</span><h3>QC जाँचकर्ता — शिक्षक</h3><p>जाँचता है कि काम काफी अच्छा है या नहीं। 1 से 10 अंक देता है। बहुत कम? फिर करो!</p><span class="tag tag-red">समीक्षक · लक्ष्य 9/10</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="section-label">लाइव डेमो</div>
|
||||
<h2 class="section-title">देखो वे मिलकर<br>कैसे काम करते हैं!</h2>
|
||||
<div class="stage-wrap">
|
||||
<div class="stage" id="stage">
|
||||
<div class="stage-agent"><div class="stage-icon r-martin" id="si-user">👤</div><div class="stage-label">तुम</div><div class="stage-status" id="ss-user">काम!</div></div>
|
||||
<div class="arrow-line" id="line1" style="position:relative;"><div class="msg-bubble" id="msg1">📝 यह करो!</div></div>
|
||||
<div class="stage-agent"><div class="stage-icon r-martin" id="si-martin">🧠</div><div class="stage-label">मार्टिन</div><div class="stage-status" id="ss-martin">इंतज़ार...</div></div>
|
||||
<div class="arrow-line" id="line2" style="position:relative;"><div class="msg-bubble" id="msg2">📋 यह संभालो!</div></div>
|
||||
<div class="stage-agent"><div class="stage-icon r-bob" id="si-bob">⚡</div><div class="stage-label">बॉब</div><div class="stage-status" id="ss-bob">तैयार</div></div>
|
||||
<div class="arrow-line" id="line3" style="position:relative;"><div class="msg-bubble qc" id="msg3">🔍 यह अच्छा है?</div></div>
|
||||
<div class="stage-agent"><div class="stage-icon r-qc" id="si-qc">🔍</div><div class="stage-label">QC जाँच</div><div class="stage-status" id="ss-qc">तैयार</div></div>
|
||||
</div>
|
||||
<div id="score-display" style="text-align:center;margin-top:24px;min-height:48px;"></div>
|
||||
<div class="log-box" id="log">बटन दबाओ और देखो! 👇</div>
|
||||
<div style="text-align:center;"><button class="play-btn" id="play-btn" onclick="runDemo()">▶ मिशन शुरू करो!</button></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="section-label">समय की अनुभूति</div>
|
||||
<h2 class="section-title">हर रोबोट को समय<br>अलग क्यों लगता है</h2>
|
||||
<p style="color:#ffffffaa;font-size:17px;max-width:580px;line-height:1.8;margin-bottom:40px;">तुम जानते हो ना? गेम खेलते समय समय उड़ जाता है — बस का इंतज़ार करने में पल नहीं गुज़रता। रोबोट को भी ऐसा ही लगता है। वैज्ञानिक इसे <strong style="color:var(--yellow)">Eigenzeit (स्वयं का समय)</strong> कहते हैं।</p>
|
||||
<div class="zeit-cards">
|
||||
<div class="zeit-card"><span style="font-size:36px;margin-bottom:12px;display:block">⚡</span><div style="font-size:18px;font-weight:900;color:var(--green)">बॉब — बिजली की रफ़्तार</div><div class="zeit-bar-wrap"><div class="zeit-bar zeit-bar-fast"></div></div><div style="font-size:22px;font-weight:900;color:var(--green);margin-top:8px">97 काम/सेकंड</div><div style="font-size:14px;color:#ffffffaa;line-height:1.6;margin-top:8px">बॉब के लिए एक घंटा एक मिनट जैसा है। वह इतने कम समय में इतना कुछ करता है!</div></div>
|
||||
<div class="zeit-card"><span style="font-size:36px;margin-bottom:12px;display:block">🧠</span><div style="font-size:18px;font-weight:900;color:var(--blue)">मार्टिन — सामान्य</div><div class="zeit-bar-wrap"><div class="zeit-bar zeit-bar-normal"></div></div><div style="font-size:22px;font-weight:900;color:var(--blue);margin-top:8px">2.6 काम/सेकंड</div><div style="font-size:14px;color:#ffffffaa;line-height:1.6;margin-top:8px">मार्टिन सब कुछ समन्वित करता है। न बहुत तेज़, न बहुत धीमा — बिल्कुल सही।</div></div>
|
||||
<div class="zeit-card"><span style="font-size:36px;margin-bottom:12px;display:block">🐢</span><div style="font-size:18px;font-weight:900;color:var(--purple)">डायना — सावधान</div><div class="zeit-bar-wrap"><div class="zeit-bar zeit-bar-slow"></div></div><div style="font-size:22px;font-weight:900;color:var(--purple);margin-top:8px">0.04 काम/सेकंड</div><div style="font-size:14px;color:#ffffffaa;line-height:1.6;margin-top:8px">डायना को समय खिंचा हुआ लगता है। हर काम उसके लिए एक लंबी यात्रा जैसा है।</div></div>
|
||||
</div>
|
||||
<div style="background:#ffffff08;border:1px solid #ffffff15;border-radius:var(--radius);padding:28px 32px;margin-top:32px;">
|
||||
<div style="font-size:22px;font-weight:900;margin-bottom:12px;">💡 इसे ऐसे याद करो:</div>
|
||||
<p style="font-size:16px;color:#ffffffbb;line-height:1.8;">वीडियो गेम खेलते समय समय उड़ता है — तुम हर मिनट बहुत कुछ करते हो।<br>बस का इंतज़ार करते समय समय रेंगता है — तुम लगभग कुछ नहीं करते।<br><br>रोबोट के साथ भी यही होता है। हम इसे <strong style="color:var(--yellow)">Causal Dilation Clock (कारण फैलाव घड़ी)</strong> कहते हैं — एक घड़ी जो मापती है कि हर रोबोट वास्तव में कितना सक्रिय था।</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="section-label">गुणवत्ता प्रणाली</div>
|
||||
<h2 class="section-title">दोहरे एजेंट की<br>चाल 🔍</h2>
|
||||
<p style="color:#ffffffaa;font-size:17px;max-width:560px;line-height:1.8;margin-bottom:40px;">अच्छे काम की हमेशा जाँच होती है। स्कूल में यह शिक्षक करते हैं। हमारे रोबोट के लिए यह <strong style="color:var(--pink)">QC जाँचकर्ता</strong> करता है।</p>
|
||||
<div class="qc-flow">
|
||||
<div class="qc-step"><span class="qc-step-icon">📝</span><div class="qc-step-title">काम आया</div><div class="qc-step-desc">मार्टिन को काम मिला</div></div>
|
||||
<div class="qc-arrow">→</div>
|
||||
<div class="qc-step"><span class="qc-step-icon">⚡</span><div class="qc-step-title">बॉब काम करता है</div><div class="qc-step-desc">जल्दी पूरा करता है</div></div>
|
||||
<div class="qc-arrow">→</div>
|
||||
<div class="qc-step" style="border-color:#FF6B6B55"><span class="qc-step-icon">🔍</span><div class="qc-step-title">QC जाँच</div><div class="qc-step-desc">10 में से 6 बार</div></div>
|
||||
<div class="qc-arrow">→</div>
|
||||
<div class="qc-step"><span class="qc-step-icon">🏆</span><div class="qc-step-title">नतीजा</div><div class="qc-step-desc">काफी अच्छा? हो गया!</div></div>
|
||||
</div>
|
||||
<div style="background:#ffffff08;border:1px solid #ffffff15;border-radius:var(--radius);padding:32px;text-align:center;">
|
||||
<div style="font-size:18px;font-weight:700;margin-bottom:24px;color:#ffffffcc;">QC जाँचकर्ता के अंक:</div>
|
||||
<div class="score-demo">
|
||||
<div class="score-badge score-fail"><span class="num">1-6</span><span class="lbl">😬 फिर करो!</span></div>
|
||||
<div class="score-badge score-ok"><span class="num">7-8</span><span class="lbl">😊 अच्छा!</span></div>
|
||||
<div class="score-badge score-great"><span class="num">9-10</span><span class="lbl">🌟 शानदार!</span></div>
|
||||
</div>
|
||||
<p style="margin-top:24px;color:#ffffffaa;font-size:15px;">7 से कम अंक → बॉब को फिर से कोशिश करनी होगी! (अधिकतम 2 और बार)</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="final-section">
|
||||
<h2>अब तुम जानते हो<br>AI टीमें <span style="color:var(--yellow)">वास्तव में कैसे काम करती हैं!</span></h2>
|
||||
<p>एजेंट · प्रतिनिधिमंडल · गुणवत्ता जाँच · स्वयं का समय — यह जादू नहीं, यह होशियार टीमवर्क है!</p>
|
||||
<div class="cta-group">
|
||||
<a href="https://github.com/Jeuners/Time_Dilation_in_LLM_Agent_Systems" class="cta-primary">📄 पेपर पढ़ो</a>
|
||||
<a href="explainer-en.html" class="cta-secondary">🇬🇧 English</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const log=document.getElementById('log'),playBtn=document.getElementById('play-btn');let running=false;
|
||||
function addLog(t,c='',d=0){return new Promise(r=>setTimeout(()=>{const e=document.createElement('div');e.className='log-line '+c;e.textContent=t;log.appendChild(e);log.scrollTop=log.scrollHeight;r()},d))}
|
||||
function setActive(id,a=true){const e=document.getElementById(id);if(!e)return;a?(e.classList.add('active'),e.style.animation='pulse-glow 0.8s ease-in-out infinite'):(e.classList.remove('active'),e.style.animation='')}
|
||||
function setStatus(id,t){const e=document.getElementById(id);if(e)e.textContent=t}
|
||||
function flyMsg(id,lid){return new Promise(r=>{const b=document.getElementById(id),l=document.getElementById(lid);if(!b||!l){r();return}const d=l.offsetWidth;b.style.setProperty('--fly-dist',d+'px');b.style.left='0px';b.style.animation='none';b.offsetHeight;b.style.animation='msgFly 1.2s ease-in-out forwards';setTimeout(r,1300)})}
|
||||
function showScore(s){const e=document.getElementById('score-display'),c=s>=9?'var(--green)':s>=7?'var(--yellow)':'var(--pink)',em=s>=9?'🌟':s>=7?'😊':'😬';e.innerHTML=`<div style="font-size:48px;animation:scoreIn 0.5s forwards;opacity:0">${em}</div><div style="font-size:22px;font-weight:900;color:${c};animation:scoreIn 0.5s 0.2s forwards;opacity:0">QC अंक: ${s}/10</div>`}
|
||||
async function runDemo(){if(running)return;running=true;playBtn.disabled=true;log.innerHTML='';document.getElementById('score-display').innerHTML='';['si-user','si-martin','si-bob','si-qc'].forEach(id=>setActive(id,false));['ss-user','ss-martin','ss-bob','ss-qc'].forEach(id=>setStatus(id,'इंतज़ार...'));
|
||||
const score=7+Math.floor(Math.random()*3),doQC=Math.random()<0.6;
|
||||
setActive('si-user');setStatus('ss-user','काम!');await addLog('👤 तुम: "बताओ एजेंट कैसे काम करते हैं!"');await flyMsg('msg1','line1');setActive('si-user',false);
|
||||
setActive('si-martin');setStatus('ss-martin','बाँट रहा...');await addLog('🧠 मार्टिन: काम बाँट रहा हूँ...','' ,400);await new Promise(r=>setTimeout(r,600));
|
||||
setStatus('ss-martin','→ बॉब');await flyMsg('msg2','line2');setActive('si-martin',false);
|
||||
setActive('si-bob');setStatus('ss-bob','⚡ काम...');await addLog('⚡ बॉब: ले रहा हूँ! (तेज़)','log-time',200);await new Promise(r=>setTimeout(r,1200));
|
||||
setStatus('ss-bob','✅ हो गया!');await addLog('⚡ बॉब: हो गया! "एजेंट रोबोट हैं जो मिलकर काम करते हैं..."','log-ok',300);
|
||||
if(doQC){await addLog('🔍 QC जाँच शुरू (60% मौका)...','log-qc',600);setActive('si-bob',false);await flyMsg('msg3','line3');setActive('si-qc');setStatus('ss-qc','🔍 जाँच...');await new Promise(r=>setTimeout(r,1500));setStatus('ss-qc',`✅ ${score}/10`);await addLog(`🔍 QC जाँचकर्ता: ${score}/10 — ${score>=7?'मंज़ूर! ✅':'फिर करो! ❌'}`,'log-qc',200);showScore(score);setActive('si-qc',false);}
|
||||
else{setActive('si-bob',false);await addLog('✓ इस बार QC नहीं (40% मौका)','',600);showScore(score);}
|
||||
setActive('si-martin');setStatus('ss-martin','🏆 हो गया!');await addLog('🧠 मार्टिन: मिशन पूरा! '+(doQC?`QC अंक: ${score}/10`:'सीधे दिया।'),'log-ok',500);await new Promise(r=>setTimeout(r,400));setActive('si-martin',false);setStatus('ss-user','🎉 धन्यवाद!');
|
||||
running=false;playBtn.disabled=false;playBtn.textContent='▶ फिर करो!';}
|
||||
const obs=new IntersectionObserver(e=>{e.forEach(x=>{if(x.isIntersecting)x.target.querySelectorAll('.zeit-bar').forEach(b=>b.style.animation='barGrow 1.5s ease-out forwards')})},{threshold:0.3});document.querySelectorAll('.zeit-cards').forEach(el=>obs.observe(el));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
191
explainer-ru.html
Normal file
191
explainer-ru.html
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Как ИИ-роботы общаются друг с другом?</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
:root{--yellow:#FFD93D;--green:#6BCB77;--blue:#4D96FF;--pink:#FF6B6B;--purple:#C77DFF;--dark:#1a1a2e;--radius:20px}
|
||||
body{font-family:'Nunito','Arial',sans-serif;background:var(--dark);color:#fff;overflow-x:hidden}
|
||||
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px}
|
||||
.hero-eyebrow{font-size:13px;font-weight:700;letter-spacing:0.15em;color:var(--yellow);margin-bottom:20px;opacity:0;animation:fadeUp 0.6s 0.2s forwards}
|
||||
.hero h1{font-size:clamp(1.8rem,5vw,4rem);font-weight:900;line-height:1.12;margin-bottom:24px;opacity:0;animation:fadeUp 0.6s 0.4s forwards}
|
||||
.hero h1 span{color:var(--yellow)}
|
||||
.hero-lead{font-size:clamp(1rem,2vw,1.3rem);color:#ffffffbb;max-width:560px;line-height:1.7;margin-bottom:48px;opacity:0;animation:fadeUp 0.6s 0.6s forwards}
|
||||
.hero-robots{display:flex;gap:32px;align-items:flex-end;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp 0.6s 0.8s forwards}
|
||||
.robot{display:flex;flex-direction:column;align-items:center;gap:8px}
|
||||
.robot-body{width:90px;height:90px;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:44px;box-shadow:0 8px 32px rgba(0,0,0,0.3);animation:robotFloat 3s ease-in-out infinite;transition:transform 0.2s}
|
||||
.robot-body:hover{transform:scale(1.08) translateY(-4px)}
|
||||
.robot:nth-child(2) .robot-body{animation-delay:0.8s}.robot:nth-child(3) .robot-body{animation-delay:1.6s}
|
||||
.robot-name{font-size:14px;font-weight:700;color:#ffffffcc}.robot-role{font-size:11px;color:#ffffff66;text-align:center;max-width:90px}
|
||||
.r-martin{background:linear-gradient(135deg,#4D96FF,#2563eb)}.r-bob{background:linear-gradient(135deg,#6BCB77,#16a34a)}.r-diana{background:linear-gradient(135deg,#C77DFF,#7c3aed)}.r-qc{background:linear-gradient(135deg,#FF6B6B,#dc2626)}
|
||||
section{padding:clamp(64px,8vw,120px) 20px;max-width:1100px;margin:0 auto}
|
||||
.section-label{font-size:12px;font-weight:700;letter-spacing:0.15em;color:var(--yellow);margin-bottom:16px}
|
||||
.section-title{font-size:clamp(1.6rem,3vw,2.6rem);font-weight:900;line-height:1.15;margin-bottom:48px}
|
||||
.agent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:48px}
|
||||
.agent-card{background:#ffffff0d;border:1px solid #ffffff15;border-radius:var(--radius);padding:28px 24px;transition:border-color 0.2s,transform 0.2s}
|
||||
.agent-card:hover{border-color:#ffffff30;transform:translateY(-4px)}
|
||||
.agent-card-icon{font-size:48px;margin-bottom:16px;display:block}
|
||||
.agent-card h3{font-size:19px;font-weight:900;margin-bottom:8px}.agent-card p{font-size:15px;color:#ffffffaa;line-height:1.6}
|
||||
.tag{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;margin-top:12px}
|
||||
.tag-blue{background:#4D96FF33;color:#4D96FF}.tag-green{background:#6BCB7733;color:#6BCB77}.tag-purple{background:#C77DFF33;color:#C77DFF}.tag-red{background:#FF6B6B33;color:#FF6B6B}
|
||||
.stage-wrap{background:#ffffff08;border:1px solid #ffffff15;border-radius:var(--radius);padding:40px;position:relative}
|
||||
.stage{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:160px;position:relative}
|
||||
.stage-agent{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0}
|
||||
.stage-icon{width:72px;height:72px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:36px;box-shadow:0 4px 20px rgba(0,0,0,0.3);transition:transform 0.3s,box-shadow 0.3s}
|
||||
.stage-icon.active{transform:scale(1.15);box-shadow:0 0 0 4px var(--yellow),0 8px 30px rgba(0,0,0,0.4)}
|
||||
.stage-label{font-size:13px;font-weight:700;color:#ffffffcc}.stage-status{font-size:11px;color:#ffffff55;min-height:16px;text-align:center;max-width:80px}
|
||||
.msg-bubble{position:absolute;top:50%;transform:translateY(-50%);background:var(--yellow);color:#1a1a2e;font-size:11px;font-weight:700;padding:6px 10px;border-radius:20px;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,0.3);pointer-events:none;opacity:0;z-index:10}
|
||||
.msg-bubble.qc{background:var(--pink);color:#fff}
|
||||
.arrow-line{flex:1;height:2px;background:#ffffff15;position:relative;min-width:30px}
|
||||
.play-btn{display:inline-flex;align-items:center;gap:10px;background:var(--yellow);color:#1a1a2e;border:none;border-radius:99px;padding:14px 32px;font-family:inherit;font-size:17px;font-weight:900;cursor:pointer;margin-top:28px;transition:transform 0.15s;box-shadow:0 4px 20px rgba(255,217,61,0.3)}
|
||||
.play-btn:hover{transform:translateY(-2px)}.play-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
|
||||
.log-box{margin-top:20px;background:#00000030;border-radius:12px;padding:16px 20px;font-size:14px;color:#ffffffbb;min-height:48px;line-height:1.8;font-family:monospace}
|
||||
.log-line{opacity:0;animation:fadeIn 0.4s forwards}.log-ok{color:var(--green)}.log-qc{color:var(--pink)}.log-time{color:var(--purple)}
|
||||
.zeit-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
|
||||
.zeit-card{background:#ffffff0d;border:1px solid #ffffff15;border-radius:var(--radius);padding:28px 24px}
|
||||
.zeit-bar-wrap{height:8px;background:#ffffff15;border-radius:99px;margin:16px 0 8px;overflow:hidden}
|
||||
.zeit-bar{height:100%;border-radius:99px;transform:scaleX(0);transform-origin:left;animation:barGrow 1.5s ease-out forwards}
|
||||
.zeit-bar-fast{background:var(--green);width:95%}.zeit-bar-normal{background:var(--blue);width:60%}.zeit-bar-slow{background:var(--purple);width:25%}
|
||||
.qc-flow{display:flex;align-items:center;gap:0;flex-wrap:wrap;justify-content:center;margin-bottom:40px}
|
||||
.qc-step{background:#ffffff0d;border:1px solid #ffffff15;border-radius:16px;padding:20px 24px;text-align:center;min-width:140px;transition:border-color 0.2s}
|
||||
.qc-step:hover{border-color:var(--yellow)}.qc-step-icon{font-size:36px;margin-bottom:10px;display:block}.qc-step-title{font-size:14px;font-weight:700;margin-bottom:4px}.qc-step-desc{font-size:12px;color:#ffffffaa}
|
||||
.qc-arrow{font-size:24px;color:#ffffff40;padding:0 8px;flex-shrink:0}
|
||||
.score-demo{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
|
||||
.score-badge{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 20px;border-radius:14px;min-width:80px;font-weight:900}
|
||||
.score-badge .num{font-size:28px;line-height:1}.score-badge .lbl{font-size:11px;opacity:0.8}
|
||||
.score-fail{background:#FF6B6B22;border:2px solid var(--pink);color:var(--pink)}.score-ok{background:#FFD93D22;border:2px solid var(--yellow);color:var(--yellow)}.score-great{background:#6BCB7722;border:2px solid var(--green);color:var(--green)}
|
||||
.final-section{text-align:center;padding:clamp(80px,10vw,140px) 20px}
|
||||
.final-section h2{font-size:clamp(1.8rem,4vw,3.2rem);font-weight:900;line-height:1.2;margin-bottom:20px}
|
||||
.final-section p{font-size:17px;color:#ffffffaa;max-width:480px;margin:0 auto 36px;line-height:1.6}
|
||||
.cta-group{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
|
||||
.cta-primary{background:var(--yellow);color:#1a1a2e;border:none;border-radius:99px;padding:16px 36px;font-family:inherit;font-size:17px;font-weight:900;cursor:pointer;text-decoration:none;transition:transform 0.15s}
|
||||
.cta-primary:hover{transform:translateY(-2px)}
|
||||
.cta-secondary{background:transparent;color:#fff;border:2px solid #ffffff30;border-radius:99px;padding:16px 36px;font-family:inherit;font-size:17px;font-weight:700;cursor:pointer;text-decoration:none;transition:border-color 0.2s,transform 0.15s}
|
||||
.cta-secondary:hover{border-color:#ffffff60;transform:translateY(-2px)}
|
||||
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
|
||||
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
|
||||
@keyframes robotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
|
||||
@keyframes barGrow{to{transform:scaleX(1)}}
|
||||
@keyframes msgFly{0%{opacity:0;transform:translateY(-50%) translateX(0) scale(0.8)}15%{opacity:1;transform:translateY(-50%) translateX(0) scale(1)}85%{opacity:1}100%{opacity:0;transform:translateY(-50%) translateX(var(--fly-dist)) scale(0.9)}}
|
||||
@keyframes pulse-glow{0%,100%{box-shadow:0 0 0 4px var(--yellow),0 8px 30px rgba(0,0,0,0.4)}50%{box-shadow:0 0 0 8px #FFD93D55,0 8px 30px rgba(0,0,0,0.4)}}
|
||||
@keyframes scoreIn{from{opacity:0;transform:scale(0.5) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}
|
||||
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}}
|
||||
@media(max-width:600px){.stage{flex-direction:column;gap:20px}.arrow-line{width:2px;height:30px;min-width:unset}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="hero">
|
||||
<div class="hero-eyebrow">🤖 ИИ-роботы объясняет</div>
|
||||
<h1>Как <span>ИИ-агенты</span><br>общаются друг с другом?</h1>
|
||||
<p class="hero-lead">Представь команду роботов — у каждого своя работа. Они отправляют друг другу сообщения, чтобы работать вместе. Именно так работают ИИ-агенты!</p>
|
||||
<div class="hero-robots">
|
||||
<div class="robot"><div class="robot-body r-martin">🧠</div><div class="robot-name">Мартин</div><div class="robot-role">Командир</div></div>
|
||||
<div class="robot"><div class="robot-body r-bob">⚡</div><div class="robot-name">Боб</div><div class="robot-role">Супербыстрый</div></div>
|
||||
<div class="robot"><div class="robot-body r-diana">🐢</div><div class="robot-name">Диана</div><div class="robot-role">Очень тщательный</div></div>
|
||||
<div class="robot"><div class="robot-body r-qc">🔍</div><div class="robot-name">Проверщик</div><div class="robot-role">Контроль качества</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="section-label">Команда</div>
|
||||
<h2 class="section-title">У каждого робота<br>есть суперсила</h2>
|
||||
<div class="agent-grid">
|
||||
<div class="agent-card"><span class="agent-card-icon">🧠</span><h3>Мартин — Командир</h3><p>Мартин получает задание и распределяет работу. Он ждёт результатов и всё объединяет.</p><span class="tag tag-blue">Делегатор</span></div>
|
||||
<div class="agent-card"><span class="agent-card-icon">⚡</span><h3>Боб — Молния</h3><p>Боб работает сверхбыстро. Он отвечает мгновенно — как решать лёгкие примеры в уме.</p><span class="tag tag-green">Быстрый ответ</span></div>
|
||||
<div class="agent-card"><span class="agent-card-icon">🐢</span><h3>Диана — Тщательная</h3><p>Диане нужно больше времени, но она делает всё очень аккуратно — как писать идеальное сочинение.</p><span class="tag tag-purple">Медленный · тщательный</span></div>
|
||||
<div class="agent-card"><span class="agent-card-icon">🔍</span><h3>Проверщик — Учитель</h3><p>Проверяет, достаточно ли хороша работа. Ставит оценку от 1 до 10. Слишком низкая? Переделывай!</p><span class="tag tag-red">Проверяющий · цель 9/10</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="section-label">Живая демонстрация</div>
|
||||
<h2 class="section-title">Смотри как они<br>работают вместе!</h2>
|
||||
<div class="stage-wrap">
|
||||
<div class="stage" id="stage">
|
||||
<div class="stage-agent"><div class="stage-icon r-martin" id="si-user">👤</div><div class="stage-label">Ты</div><div class="stage-status" id="ss-user">Задание!</div></div>
|
||||
<div class="arrow-line" id="line1" style="position:relative;"><div class="msg-bubble" id="msg1">📝 Сделай это!</div></div>
|
||||
<div class="stage-agent"><div class="stage-icon r-martin" id="si-martin">🧠</div><div class="stage-label">Мартин</div><div class="stage-status" id="ss-martin">ждёт...</div></div>
|
||||
<div class="arrow-line" id="line2" style="position:relative;"><div class="msg-bubble" id="msg2">📋 Займись этим!</div></div>
|
||||
<div class="stage-agent"><div class="stage-icon r-bob" id="si-bob">⚡</div><div class="stage-label">Боб</div><div class="stage-status" id="ss-bob">готов</div></div>
|
||||
<div class="arrow-line" id="line3" style="position:relative;"><div class="msg-bubble qc" id="msg3">🔍 Это хорошо?</div></div>
|
||||
<div class="stage-agent"><div class="stage-icon r-qc" id="si-qc">🔍</div><div class="stage-label">Проверка</div><div class="stage-status" id="ss-qc">готов</div></div>
|
||||
</div>
|
||||
<div id="score-display" style="text-align:center;margin-top:24px;min-height:48px;"></div>
|
||||
<div class="log-box" id="log">Нажми кнопку и смотри! 👇</div>
|
||||
<div style="text-align:center;"><button class="play-btn" id="play-btn" onclick="runDemo()">▶ Начать миссию!</button></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="section-label">Восприятие времени</div>
|
||||
<h2 class="section-title">Почему время ощущается<br>по-разному для каждого</h2>
|
||||
<p style="color:#ffffffaa;font-size:17px;max-width:580px;line-height:1.7;margin-bottom:40px;">Ты знаешь это чувство? Играешь в игры — время летит. Ждёшь автобус — тянется вечно. Роботы переживают то же самое. Учёные называют это <strong style="color:var(--yellow)">собственным временем (Eigenzeit)</strong>.</p>
|
||||
<div class="zeit-cards">
|
||||
<div class="zeit-card"><span style="font-size:36px;margin-bottom:12px;display:block">⚡</span><div style="font-size:18px;font-weight:900;color:var(--green)">Боб — Молниеносный</div><div class="zeit-bar-wrap"><div class="zeit-bar zeit-bar-fast"></div></div><div style="font-size:22px;font-weight:900;color:var(--green);margin-top:8px">97 действий/сек</div><div style="font-size:14px;color:#ffffffaa;line-height:1.5;margin-top:8px">Для Боба час — как минута. Он делает столько всего за так мало времени!</div></div>
|
||||
<div class="zeit-card"><span style="font-size:36px;margin-bottom:12px;display:block">🧠</span><div style="font-size:18px;font-weight:900;color:var(--blue)">Мартин — Нормальный</div><div class="zeit-bar-wrap"><div class="zeit-bar zeit-bar-normal"></div></div><div style="font-size:22px;font-weight:900;color:var(--blue);margin-top:8px">2.6 действий/сек</div><div style="font-size:14px;color:#ffffffaa;line-height:1.5;margin-top:8px">Мартин координирует всё. Не слишком быстро, не слишком медленно — в самый раз.</div></div>
|
||||
<div class="zeit-card"><span style="font-size:36px;margin-bottom:12px;display:block">🐢</span><div style="font-size:18px;font-weight:900;color:var(--purple)">Диана — Тщательная</div><div class="zeit-bar-wrap"><div class="zeit-bar zeit-bar-slow"></div></div><div style="font-size:22px;font-weight:900;color:var(--purple);margin-top:8px">0.04 действий/сек</div><div style="font-size:14px;color:#ffffffaa;line-height:1.5;margin-top:8px">Диана переживает растянутое время. Каждое задание для неё — как долгое путешествие.</div></div>
|
||||
</div>
|
||||
<div style="background:#ffffff08;border:1px solid #ffffff15;border-radius:var(--radius);padding:28px 32px;margin-top:32px;">
|
||||
<div style="font-size:22px;font-weight:900;margin-bottom:12px;">💡 Запомни так:</div>
|
||||
<p style="font-size:16px;color:#ffffffbb;line-height:1.7;">В видеоигре время летит — ты делаешь много ходов в минуту.<br>В ожидании автобуса время ползёт — ты почти ничего не делаешь.<br><br>У роботов то же самое явление. Мы называем это <strong style="color:var(--yellow)">Причинными Часами Дилатации (Causal Dilation Clock)</strong> — часы, которые измеряют, насколько активным был каждый робот.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="section-label">Система качества</div>
|
||||
<h2 class="section-title">Трюк с двойным<br>агентом 🔍</h2>
|
||||
<p style="color:#ffffffaa;font-size:17px;max-width:560px;line-height:1.7;margin-bottom:40px;">Хорошую работу всегда проверяют. В школе — учитель. Для наших роботов — <strong style="color:var(--pink)">Проверщик качества</strong>.</p>
|
||||
<div class="qc-flow">
|
||||
<div class="qc-step"><span class="qc-step-icon">📝</span><div class="qc-step-title">Задание пришло</div><div class="qc-step-desc">Мартин получает работу</div></div>
|
||||
<div class="qc-arrow">→</div>
|
||||
<div class="qc-step"><span class="qc-step-icon">⚡</span><div class="qc-step-title">Боб работает</div><div class="qc-step-desc">Быстро выполняет задание</div></div>
|
||||
<div class="qc-arrow">→</div>
|
||||
<div class="qc-step" style="border-color:#FF6B6B55"><span class="qc-step-icon">🔍</span><div class="qc-step-title">Проверка</div><div class="qc-step-desc">6 раз из 10</div></div>
|
||||
<div class="qc-arrow">→</div>
|
||||
<div class="qc-step"><span class="qc-step-icon">🏆</span><div class="qc-step-title">Результат</div><div class="qc-step-desc">Достаточно хорошо? Готово!</div></div>
|
||||
</div>
|
||||
<div style="background:#ffffff08;border:1px solid #ffffff15;border-radius:var(--radius);padding:32px;text-align:center;">
|
||||
<div style="font-size:18px;font-weight:700;margin-bottom:24px;color:#ffffffcc;">Оценки от Проверщика качества:</div>
|
||||
<div class="score-demo">
|
||||
<div class="score-badge score-fail"><span class="num">1-6</span><span class="lbl">😬 Переделай!</span></div>
|
||||
<div class="score-badge score-ok"><span class="num">7-8</span><span class="lbl">😊 Хорошо!</span></div>
|
||||
<div class="score-badge score-great"><span class="num">9-10</span><span class="lbl">🌟 Отлично!</span></div>
|
||||
</div>
|
||||
<p style="margin-top:24px;color:#ffffffaa;font-size:15px;">Оценка ниже 7 → Бобу нужно попробовать ещё раз! (До 2 дополнительных попыток)</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="final-section">
|
||||
<h2>Теперь ты знаешь,<br>как ИИ-команды <span style="color:var(--yellow)">на самом деле работают!</span></h2>
|
||||
<p>Агенты · Делегация · Контроль качества · Собственное время — это не магия, это умная командная работа!</p>
|
||||
<div class="cta-group">
|
||||
<a href="https://github.com/Jeuners/Time_Dilation_in_LLM_Agent_Systems" class="cta-primary">📄 Читать статью</a>
|
||||
<a href="explainer-en.html" class="cta-secondary">🇬🇧 English</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const log=document.getElementById('log'),playBtn=document.getElementById('play-btn');let running=false;
|
||||
function addLog(t,c='',d=0){return new Promise(r=>setTimeout(()=>{const e=document.createElement('div');e.className='log-line '+c;e.textContent=t;log.appendChild(e);log.scrollTop=log.scrollHeight;r()},d))}
|
||||
function setActive(id,a=true){const e=document.getElementById(id);if(!e)return;a?(e.classList.add('active'),e.style.animation='pulse-glow 0.8s ease-in-out infinite'):(e.classList.remove('active'),e.style.animation='')}
|
||||
function setStatus(id,t){const e=document.getElementById(id);if(e)e.textContent=t}
|
||||
function flyMsg(id,lid){return new Promise(r=>{const b=document.getElementById(id),l=document.getElementById(lid);if(!b||!l){r();return}const d=l.offsetWidth;b.style.setProperty('--fly-dist',d+'px');b.style.left='0px';b.style.animation='none';b.offsetHeight;b.style.animation='msgFly 1.2s ease-in-out forwards';setTimeout(r,1300)})}
|
||||
function showScore(s){const e=document.getElementById('score-display'),c=s>=9?'var(--green)':s>=7?'var(--yellow)':'var(--pink)',em=s>=9?'🌟':s>=7?'😊':'😬';e.innerHTML=`<div style="font-size:48px;animation:scoreIn 0.5s forwards;opacity:0">${em}</div><div style="font-size:22px;font-weight:900;color:${c};animation:scoreIn 0.5s 0.2s forwards;opacity:0">Оценка: ${s}/10</div>`}
|
||||
async function runDemo(){if(running)return;running=true;playBtn.disabled=true;log.innerHTML='';document.getElementById('score-display').innerHTML='';['si-user','si-martin','si-bob','si-qc'].forEach(id=>setActive(id,false));['ss-user','ss-martin','ss-bob','ss-qc'].forEach(id=>setStatus(id,'ждёт...'));
|
||||
const score=7+Math.floor(Math.random()*3),doQC=Math.random()<0.6;
|
||||
setActive('si-user');setStatus('ss-user','Задание!');await addLog('👤 Ты: "Объясни как работают агенты!"');await flyMsg('msg1','line1');setActive('si-user',false);
|
||||
setActive('si-martin');setStatus('ss-martin','делегирует...');await addLog('🧠 Мартин: Распределяю задачу...','' ,400);await new Promise(r=>setTimeout(r,600));
|
||||
setStatus('ss-martin','→ Боб');await flyMsg('msg2','line2');setActive('si-martin',false);
|
||||
setActive('si-bob');setStatus('ss-bob','⚡ работает...');await addLog('⚡ Боб: Беру! (быстро)','log-time',200);await new Promise(r=>setTimeout(r,1200));
|
||||
setStatus('ss-bob','✅ готово!');await addLog('⚡ Боб: Готово! "Агенты — это роботы, которые работают вместе..."','log-ok',300);
|
||||
if(doQC){await addLog('🔍 Проверка запущена (60% шанс)...','log-qc',600);setActive('si-bob',false);await flyMsg('msg3','line3');setActive('si-qc');setStatus('ss-qc','🔍 проверяет...');await new Promise(r=>setTimeout(r,1500));setStatus('ss-qc',`✅ ${score}/10`);await addLog(`🔍 Проверщик: ${score}/10 — ${score>=7?'Принято! ✅':'Переделать! ❌'}`,'log-qc',200);showScore(score);setActive('si-qc',false);}
|
||||
else{setActive('si-bob',false);await addLog('✓ Проверки не было (40% шанс)','',600);showScore(score);}
|
||||
setActive('si-martin');setStatus('ss-martin','🏆 Готово!');await addLog('🧠 Мартин: Миссия выполнена! '+(doQC?`Оценка: ${score}/10`:'Доставлено напрямую.'),'log-ok',500);await new Promise(r=>setTimeout(r,400));setActive('si-martin',false);setStatus('ss-user','🎉 Спасибо!');
|
||||
running=false;playBtn.disabled=false;playBtn.textContent='▶ Ещё раз!';}
|
||||
const obs=new IntersectionObserver(e=>{e.forEach(x=>{if(x.isIntersecting)x.target.querySelectorAll('.zeit-bar').forEach(b=>b.style.animation='barGrow 1.5s ease-out forwards')})},{threshold:0.3});document.querySelectorAll('.zeit-cards').forEach(el=>obs.observe(el));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
191
explainer-zh.html
Normal file
191
explainer-zh.html
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI机器人如何互相通信？</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
:root{--yellow:#FFD93D;--green:#6BCB77;--blue:#4D96FF;--pink:#FF6B6B;--purple:#C77DFF;--dark:#1a1a2e;--radius:20px}
|
||||
body{font-family:'Nunito','PingFang SC','Microsoft YaHei',sans-serif;background:var(--dark);color:#fff;overflow-x:hidden}
|
||||
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px}
|
||||
.hero-eyebrow{font-size:13px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--yellow);margin-bottom:20px;opacity:0;animation:fadeUp 0.6s 0.2s forwards}
|
||||
.hero h1{font-size:clamp(2rem,6vw,4.5rem);font-weight:900;line-height:1.15;margin-bottom:24px;opacity:0;animation:fadeUp 0.6s 0.4s forwards}
|
||||
.hero h1 span{color:var(--yellow)}
|
||||
.hero-lead{font-size:clamp(1rem,2vw,1.3rem);color:#ffffffbb;max-width:540px;line-height:1.7;margin-bottom:48px;opacity:0;animation:fadeUp 0.6s 0.6s forwards}
|
||||
.hero-robots{display:flex;gap:32px;align-items:flex-end;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp 0.6s 0.8s forwards}
|
||||
.robot{display:flex;flex-direction:column;align-items:center;gap:8px}
|
||||
.robot-body{width:90px;height:90px;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:44px;box-shadow:0 8px 32px rgba(0,0,0,0.3);animation:robotFloat 3s ease-in-out infinite;transition:transform 0.2s}
|
||||
.robot-body:hover{transform:scale(1.08) translateY(-4px)}
|
||||
.robot:nth-child(2) .robot-body{animation-delay:0.8s}.robot:nth-child(3) .robot-body{animation-delay:1.6s}
|
||||
.robot-name{font-size:14px;font-weight:700;color:#ffffffcc}.robot-role{font-size:11px;color:#ffffff66;text-align:center;max-width:90px}
|
||||
.r-martin{background:linear-gradient(135deg,#4D96FF,#2563eb)}.r-bob{background:linear-gradient(135deg,#6BCB77,#16a34a)}.r-diana{background:linear-gradient(135deg,#C77DFF,#7c3aed)}.r-qc{background:linear-gradient(135deg,#FF6B6B,#dc2626)}
|
||||
section{padding:clamp(64px,8vw,120px) 20px;max-width:1100px;margin:0 auto}
|
||||
.section-label{font-size:12px;font-weight:700;letter-spacing:0.12em;color:var(--yellow);margin-bottom:16px}
|
||||
.section-title{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;line-height:1.2;margin-bottom:48px}
|
||||
.agent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:48px}
|
||||
.agent-card{background:#ffffff0d;border:1px solid #ffffff15;border-radius:var(--radius);padding:28px 24px;transition:border-color 0.2s,transform 0.2s}
|
||||
.agent-card:hover{border-color:#ffffff30;transform:translateY(-4px)}
|
||||
.agent-card-icon{font-size:48px;margin-bottom:16px;display:block}
|
||||
.agent-card h3{font-size:20px;font-weight:900;margin-bottom:8px}.agent-card p{font-size:15px;color:#ffffffaa;line-height:1.6}
|
||||
.tag{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;margin-top:12px}
|
||||
.tag-blue{background:#4D96FF33;color:#4D96FF}.tag-green{background:#6BCB7733;color:#6BCB77}.tag-purple{background:#C77DFF33;color:#C77DFF}.tag-red{background:#FF6B6B33;color:#FF6B6B}
|
||||
.stage-wrap{background:#ffffff08;border:1px solid #ffffff15;border-radius:var(--radius);padding:40px;position:relative}
|
||||
.stage{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:160px;position:relative}
|
||||
.stage-agent{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0}
|
||||
.stage-icon{width:72px;height:72px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:36px;box-shadow:0 4px 20px rgba(0,0,0,0.3);transition:transform 0.3s,box-shadow 0.3s}
|
||||
.stage-icon.active{transform:scale(1.15);box-shadow:0 0 0 4px var(--yellow),0 8px 30px rgba(0,0,0,0.4)}
|
||||
.stage-label{font-size:13px;font-weight:700;color:#ffffffcc}.stage-status{font-size:11px;color:#ffffff55;min-height:16px;text-align:center;max-width:80px}
|
||||
.msg-bubble{position:absolute;top:50%;transform:translateY(-50%);background:var(--yellow);color:#1a1a2e;font-size:12px;font-weight:700;padding:6px 12px;border-radius:20px;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,0.3);pointer-events:none;opacity:0;z-index:10}
|
||||
.msg-bubble.qc{background:var(--pink);color:#fff}
|
||||
.arrow-line{flex:1;height:2px;background:#ffffff15;position:relative;min-width:30px}
|
||||
.play-btn{display:inline-flex;align-items:center;gap:10px;background:var(--yellow);color:#1a1a2e;border:none;border-radius:99px;padding:14px 32px;font-family:inherit;font-size:17px;font-weight:900;cursor:pointer;margin-top:28px;transition:transform 0.15s;box-shadow:0 4px 20px rgba(255,217,61,0.3)}
|
||||
.play-btn:hover{transform:translateY(-2px)}.play-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
|
||||
.log-box{margin-top:20px;background:#00000030;border-radius:12px;padding:16px 20px;font-size:14px;color:#ffffffbb;min-height:48px;line-height:1.8;font-family:monospace}
|
||||
.log-line{opacity:0;animation:fadeIn 0.4s forwards}.log-ok{color:var(--green)}.log-qc{color:var(--pink)}.log-time{color:var(--purple)}
|
||||
.zeit-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
|
||||
.zeit-card{background:#ffffff0d;border:1px solid #ffffff15;border-radius:var(--radius);padding:28px 24px}
|
||||
.zeit-bar-wrap{height:8px;background:#ffffff15;border-radius:99px;margin:16px 0 8px;overflow:hidden}
|
||||
.zeit-bar{height:100%;border-radius:99px;transform:scaleX(0);transform-origin:left;animation:barGrow 1.5s ease-out forwards}
|
||||
.zeit-bar-fast{background:var(--green);width:95%}.zeit-bar-normal{background:var(--blue);width:60%}.zeit-bar-slow{background:var(--purple);width:25%}
|
||||
.qc-flow{display:flex;align-items:center;gap:0;flex-wrap:wrap;justify-content:center;margin-bottom:40px}
|
||||
.qc-step{background:#ffffff0d;border:1px solid #ffffff15;border-radius:16px;padding:20px 24px;text-align:center;min-width:140px;transition:border-color 0.2s}
|
||||
.qc-step:hover{border-color:var(--yellow)}.qc-step-icon{font-size:36px;margin-bottom:10px;display:block}.qc-step-title{font-size:15px;font-weight:700;margin-bottom:4px}.qc-step-desc{font-size:12px;color:#ffffffaa}
|
||||
.qc-arrow{font-size:24px;color:#ffffff40;padding:0 8px;flex-shrink:0}
|
||||
.score-demo{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
|
||||
.score-badge{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 20px;border-radius:14px;min-width:80px;font-weight:900}
|
||||
.score-badge .num{font-size:28px;line-height:1}.score-badge .lbl{font-size:11px;opacity:0.8}
|
||||
.score-fail{background:#FF6B6B22;border:2px solid var(--pink);color:var(--pink)}.score-ok{background:#FFD93D22;border:2px solid var(--yellow);color:var(--yellow)}.score-great{background:#6BCB7722;border:2px solid var(--green);color:var(--green)}
|
||||
.final-section{text-align:center;padding:clamp(80px,10vw,140px) 20px}
|
||||
.final-section h2{font-size:clamp(2rem,4vw,3.5rem);font-weight:900;line-height:1.2;margin-bottom:20px}
|
||||
.final-section p{font-size:18px;color:#ffffffaa;max-width:480px;margin:0 auto 36px;line-height:1.6}
|
||||
.cta-group{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
|
||||
.cta-primary{background:var(--yellow);color:#1a1a2e;border:none;border-radius:99px;padding:16px 36px;font-family:inherit;font-size:17px;font-weight:900;cursor:pointer;text-decoration:none;transition:transform 0.15s}
|
||||
.cta-primary:hover{transform:translateY(-2px)}
|
||||
.cta-secondary{background:transparent;color:#fff;border:2px solid #ffffff30;border-radius:99px;padding:16px 36px;font-family:inherit;font-size:17px;font-weight:700;cursor:pointer;text-decoration:none;transition:border-color 0.2s,transform 0.15s}
|
||||
.cta-secondary:hover{border-color:#ffffff60;transform:translateY(-2px)}
|
||||
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
|
||||
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
|
||||
@keyframes robotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
|
||||
@keyframes barGrow{to{transform:scaleX(1)}}
|
||||
@keyframes msgFly{0%{opacity:0;transform:translateY(-50%) translateX(0) scale(0.8)}15%{opacity:1;transform:translateY(-50%) translateX(0) scale(1)}85%{opacity:1}100%{opacity:0;transform:translateY(-50%) translateX(var(--fly-dist)) scale(0.9)}}
|
||||
@keyframes pulse-glow{0%,100%{box-shadow:0 0 0 4px var(--yellow),0 8px 30px rgba(0,0,0,0.4)}50%{box-shadow:0 0 0 8px #FFD93D55,0 8px 30px rgba(0,0,0,0.4)}}
|
||||
@keyframes scoreIn{from{opacity:0;transform:scale(0.5) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}
|
||||
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}}
|
||||
@media(max-width:600px){.stage{flex-direction:column;gap:20px}.arrow-line{width:2px;height:30px;min-width:unset}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="hero">
|
||||
<div class="hero-eyebrow">🤖 AI机器人图解</div>
|
||||
<h1>AI<span>智能体</span>如何<br>互相通信？</h1>
|
||||
<p class="hero-lead">想象一个机器人团队——每个机器人都有自己的工作。他们互相发送消息来协同合作。这就是AI智能体的工作方式！</p>
|
||||
<div class="hero-robots">
|
||||
<div class="robot"><div class="robot-body r-martin">🧠</div><div class="robot-name">马丁</div><div class="robot-role">队长</div></div>
|
||||
<div class="robot"><div class="robot-body r-bob">⚡</div><div class="robot-name">鲍勃</div><div class="robot-role">超级快速</div></div>
|
||||
<div class="robot"><div class="robot-body r-diana">🐢</div><div class="robot-name">黛安娜</div><div class="robot-role">非常仔细</div></div>
|
||||
<div class="robot"><div class="robot-body r-qc">🔍</div><div class="robot-name">质检员</div><div class="robot-role">质量控制</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="section-label">团队成员</div>
|
||||
<h2 class="section-title">每个机器人都有<br>自己的超能力</h2>
|
||||
<div class="agent-grid">
|
||||
<div class="agent-card"><span class="agent-card-icon">🧠</span><h3>马丁 — 队长</h3><p>马丁接收任务并分配工作。他等待结果并汇总一切。</p><span class="tag tag-blue">委派者</span></div>
|
||||
<div class="agent-card"><span class="agent-card-icon">⚡</span><h3>鲍勃 — 闪电侠</h3><p>鲍勃工作超快。他立刻回复——就像在脑子里算简单数学题。</p><span class="tag tag-green">快速响应</span></div>
|
||||
<div class="agent-card"><span class="agent-card-icon">🐢</span><h3>黛安娜 — 仔细派</h3><p>黛安娜需要更多时间，但做得非常仔细——就像写一篇完美的作文。</p><span class="tag tag-purple">慢速·仔细</span></div>
|
||||
<div class="agent-card"><span class="agent-card-icon">🔍</span><h3>质检员 — 老师</h3><p>检查工作是否足够好。打分1到10分。分数太低？再来一次！</p><span class="tag tag-red">审查员·目标9/10</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="section-label">现场演示</div>
|
||||
<h2 class="section-title">看他们如何<br>一起工作！</h2>
|
||||
<div class="stage-wrap">
|
||||
<div class="stage" id="stage">
|
||||
<div class="stage-agent"><div class="stage-icon r-martin" id="si-user">👤</div><div class="stage-label">你</div><div class="stage-status" id="ss-user">任务！</div></div>
|
||||
<div class="arrow-line" id="line1" style="position:relative;"><div class="msg-bubble" id="msg1">📝 请做这个！</div></div>
|
||||
<div class="stage-agent"><div class="stage-icon r-martin" id="si-martin">🧠</div><div class="stage-label">马丁</div><div class="stage-status" id="ss-martin">等待中...</div></div>
|
||||
<div class="arrow-line" id="line2" style="position:relative;"><div class="msg-bubble" id="msg2">📋 去处理这个！</div></div>
|
||||
<div class="stage-agent"><div class="stage-icon r-bob" id="si-bob">⚡</div><div class="stage-label">鲍勃</div><div class="stage-status" id="ss-bob">准备好了</div></div>
|
||||
<div class="arrow-line" id="line3" style="position:relative;"><div class="msg-bubble qc" id="msg3">🔍 这个好吗？</div></div>
|
||||
<div class="stage-agent"><div class="stage-icon r-qc" id="si-qc">🔍</div><div class="stage-label">质检员</div><div class="stage-status" id="ss-qc">准备好了</div></div>
|
||||
</div>
|
||||
<div id="score-display" style="text-align:center;margin-top:24px;min-height:48px;"></div>
|
||||
<div class="log-box" id="log">按下按钮，一起来看！👇</div>
|
||||
<div style="text-align:center;"><button class="play-btn" id="play-btn" onclick="runDemo()">▶ 开始任务！</button></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="section-label">时间感知</div>
|
||||
<h2 class="section-title">为什么每个机器人<br>感受时间不同</h2>
|
||||
<p style="color:#ffffffaa;font-size:17px;max-width:580px;line-height:1.7;margin-bottom:40px;">你有没有这种感觉？玩游戏时间飞逝——等公交车时间却好慢。机器人也有同样的体验。研究人员把它叫做<strong style="color:var(--yellow)">本征时间（Eigenzeit）</strong>。</p>
|
||||
<div class="zeit-cards">
|
||||
<div class="zeit-card"><span class="zeit-emoji">⚡</span><div class="zeit-name" style="color:var(--green)">鲍勃 — 闪电速度</div><div class="zeit-bar-wrap"><div class="zeit-bar zeit-bar-fast"></div></div><div class="zeit-rate" style="color:var(--green)">每秒97次操作</div><div class="zeit-desc" style="margin-top:8px">对鲍勃来说，一小时就像一分钟。他在如此短的时间内做了那么多！</div></div>
|
||||
<div class="zeit-card"><span class="zeit-emoji">🧠</span><div class="zeit-name" style="color:var(--blue)">马丁 — 正常速度</div><div class="zeit-bar-wrap"><div class="zeit-bar zeit-bar-normal"></div></div><div class="zeit-rate" style="color:var(--blue)">每秒2.6次操作</div><div class="zeit-desc" style="margin-top:8px">马丁协调一切。不快也不慢——刚刚好。</div></div>
|
||||
<div class="zeit-card"><span class="zeit-emoji">🐢</span><div class="zeit-name" style="color:var(--purple)">黛安娜 — 仔细型</div><div class="zeit-bar-wrap"><div class="zeit-bar zeit-bar-slow"></div></div><div class="zeit-rate" style="color:var(--purple)">每秒0.04次操作</div><div class="zeit-desc" style="margin-top:8px">黛安娜体验到拉伸的时间。每个任务对她来说都像一次长途旅行。</div></div>
|
||||
</div>
|
||||
<div style="background:#ffffff08;border:1px solid #ffffff15;border-radius:var(--radius);padding:28px 32px;margin-top:32px;">
|
||||
<div style="font-size:22px;font-weight:900;margin-bottom:12px;">💡 这样记住它：</div>
|
||||
<p style="font-size:16px;color:#ffffffbb;line-height:1.7;">玩电子游戏时，时间飞逝——你每分钟做很多动作。<br>等公交车时，时间爬行——你几乎什么都不做。<br><br>机器人有同样的现象。我们称之为<strong style="color:var(--yellow)">因果膨胀时钟（Causal Dilation Clock）</strong>——一个测量每个机器人真正活跃程度的时钟。</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="section-label">质量系统</div>
|
||||
<h2 class="section-title">双智能体<br>技巧 🔍</h2>
|
||||
<p style="color:#ffffffaa;font-size:17px;max-width:560px;line-height:1.7;margin-bottom:40px;">好的工作总是要被检查的。在学校是老师，对我们的机器人来说，是<strong style="color:var(--pink)">质检员</strong>。</p>
|
||||
<div class="qc-flow">
|
||||
<div class="qc-step"><span class="qc-step-icon">📝</span><div class="qc-step-title">任务到达</div><div class="qc-step-desc">马丁接到工作</div></div>
|
||||
<div class="qc-arrow">→</div>
|
||||
<div class="qc-step"><span class="qc-step-icon">⚡</span><div class="qc-step-title">鲍勃工作</div><div class="qc-step-desc">快速完成任务</div></div>
|
||||
<div class="qc-arrow">→</div>
|
||||
<div class="qc-step" style="border-color:#FF6B6B55"><span class="qc-step-icon">🔍</span><div class="qc-step-title">质检检查</div><div class="qc-step-desc">10次中6次</div></div>
|
||||
<div class="qc-arrow">→</div>
|
||||
<div class="qc-step"><span class="qc-step-icon">🏆</span><div class="qc-step-title">结果</div><div class="qc-step-desc">够好？完成！</div></div>
|
||||
</div>
|
||||
<div style="background:#ffffff08;border:1px solid #ffffff15;border-radius:var(--radius);padding:32px;text-align:center;">
|
||||
<div style="font-size:18px;font-weight:700;margin-bottom:24px;color:#ffffffcc;">质检员给出的分数：</div>
|
||||
<div class="score-demo">
|
||||
<div class="score-badge score-fail"><span class="num">1-6</span><span class="lbl">😬 再来一次！</span></div>
|
||||
<div class="score-badge score-ok"><span class="num">7-8</span><span class="lbl">😊 不错！</span></div>
|
||||
<div class="score-badge score-great"><span class="num">9-10</span><span class="lbl">🌟 太棒了！</span></div>
|
||||
</div>
|
||||
<p style="margin-top:24px;color:#ffffffaa;font-size:15px;">低于7分 → 鲍勃必须再试！（最多再试2次）</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="final-section">
|
||||
<h2>现在你知道<br>AI团队<span style="color:var(--yellow)">如何真正工作！</span></h2>
|
||||
<p>智能体 · 委派 · 质量检查 · 本征时间 — 这不是魔法，这是聪明的团队合作！</p>
|
||||
<div class="cta-group">
|
||||
<a href="https://github.com/Jeuners/Time_Dilation_in_LLM_Agent_Systems" class="cta-primary">📄 阅读论文</a>
|
||||
<a href="explainer-en.html" class="cta-secondary">🇬🇧 English</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const log=document.getElementById('log'),playBtn=document.getElementById('play-btn');let running=false;
|
||||
function addLog(t,c='',d=0){return new Promise(r=>setTimeout(()=>{const e=document.createElement('div');e.className='log-line '+c;e.textContent=t;log.appendChild(e);log.scrollTop=log.scrollHeight;r()},d))}
|
||||
function setActive(id,a=true){const e=document.getElementById(id);if(!e)return;a?(e.classList.add('active'),e.style.animation='pulse-glow 0.8s ease-in-out infinite'):(e.classList.remove('active'),e.style.animation='')}
|
||||
function setStatus(id,t){const e=document.getElementById(id);if(e)e.textContent=t}
|
||||
function flyMsg(id,lid){return new Promise(r=>{const b=document.getElementById(id),l=document.getElementById(lid);if(!b||!l){r();return}const d=l.offsetWidth;b.style.setProperty('--fly-dist',d+'px');b.style.left='0px';b.style.animation='none';b.offsetHeight;b.style.animation='msgFly 1.2s ease-in-out forwards';setTimeout(r,1300)})}
|
||||
function showScore(s){const e=document.getElementById('score-display'),c=s>=9?'var(--green)':s>=7?'var(--yellow)':'var(--pink)',em=s>=9?'🌟':s>=7?'😊':'😬';e.innerHTML=`<div style="font-size:48px;animation:scoreIn 0.5s forwards;opacity:0">${em}</div><div style="font-size:22px;font-weight:900;color:${c};animation:scoreIn 0.5s 0.2s forwards;opacity:0">质检分数：${s}/10</div>`}
|
||||
async function runDemo(){if(running)return;running=true;playBtn.disabled=true;log.innerHTML='';document.getElementById('score-display').innerHTML='';['si-user','si-martin','si-bob','si-qc'].forEach(id=>setActive(id,false));['ss-user','ss-martin','ss-bob','ss-qc'].forEach(id=>setStatus(id,'等待中...'));
|
||||
const score=7+Math.floor(Math.random()*3),doQC=Math.random()<0.6;
|
||||
setActive('si-user');setStatus('ss-user','任务！');await addLog('👤 你："请解释智能体如何工作！"');await flyMsg('msg1','line1');setActive('si-user',false);
|
||||
setActive('si-martin');setStatus('ss-martin','分配中...');await addLog('🧠 马丁：我来分配任务...','' ,400);await new Promise(r=>setTimeout(r,600));
|
||||
setStatus('ss-martin','→ 鲍勃');await flyMsg('msg2','line2');setActive('si-martin',false);
|
||||
setActive('si-bob');setStatus('ss-bob','⚡ 工作中...');await addLog('⚡ 鲍勃：来了！（快速）','log-time',200);await new Promise(r=>setTimeout(r,1200));
|
||||
setStatus('ss-bob','✅ 完成！');await addLog('⚡ 鲍勃：完成！"智能体是协同工作的机器人..."','log-ok',300);
|
||||
if(doQC){await addLog('🔍 质检触发（60%概率）...','log-qc',600);setActive('si-bob',false);await flyMsg('msg3','line3');setActive('si-qc');setStatus('ss-qc','🔍 检查中...');await new Promise(r=>setTimeout(r,1500));setStatus('ss-qc',`✅ ${score}/10分`);await addLog(`🔍 质检员：${score}/10分 — ${score>=7?'通过！✅':'再来一次！❌'}`,'log-qc',200);showScore(score);setActive('si-qc',false);}
|
||||
else{setActive('si-bob',false);await addLog('✓ 这次没有质检（40%概率）','',600);showScore(score);}
|
||||
setActive('si-martin');setStatus('ss-martin','🏆 完成！');await addLog('🧠 马丁：任务完成！'+(doQC?`质检分数：${score}/10`:'直接交付。'),'log-ok',500);await new Promise(r=>setTimeout(r,400));setActive('si-martin',false);setStatus('ss-user','🎉 谢谢！');
|
||||
running=false;playBtn.disabled=false;playBtn.textContent='▶ 再来一次！';}
|
||||
const obs=new IntersectionObserver(e=>{e.forEach(x=>{if(x.isIntersecting)x.target.querySelectorAll('.zeit-bar').forEach(b=>b.style.animation='barGrow 1.5s ease-out forwards')})},{threshold:0.3});document.querySelectorAll('.zeit-cards').forEach(el=>obs.observe(el));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
34
index.html
Normal file
34
index.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Time Dilation in LLM Agent Systems — Explainers</title>
|
||||
<style>
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
body{font-family:'Segoe UI',system-ui,sans-serif;background:#1a1a2e;color:#fff;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center}
|
||||
h1{font-size:clamp(1.6rem,4vw,2.8rem);font-weight:900;margin-bottom:12px;line-height:1.2}
|
||||
h1 span{color:#FFD93D}
|
||||
p{color:#ffffffaa;font-size:16px;max-width:500px;line-height:1.6;margin-bottom:48px}
|
||||
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;max-width:900px;width:100%}
|
||||
a{display:flex;flex-direction:column;align-items:center;gap:10px;background:#ffffff0d;border:1px solid #ffffff20;border-radius:16px;padding:28px 20px;text-decoration:none;color:#fff;font-weight:700;font-size:15px;transition:border-color .2s,transform .15s}
|
||||
a:hover{border-color:#FFD93D55;transform:translateY(-4px)}
|
||||
.flag{font-size:40px}
|
||||
.lang{font-size:13px;color:#ffffffaa;font-weight:400}
|
||||
.paper-link{margin-top:32px;color:#FFD93D;font-size:14px;text-decoration:none;opacity:0.8}
|
||||
.paper-link:hover{opacity:1}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Time Dilation in<br><span>LLM Agent Systems</span></h1>
|
||||
<p>An interactive explainer for ages 12+ — how AI agents communicate, delegate, and experience time differently.</p>
|
||||
<div class="grid">
|
||||
<a href="explainer-de.html"><span class="flag">🇩🇪</span>Deutsch<span class="lang">German</span></a>
|
||||
<a href="explainer-en.html"><span class="flag">🇬🇧</span>English<span class="lang">English</span></a>
|
||||
<a href="explainer-zh.html"><span class="flag">🇨🇳</span>中文<span class="lang">Chinese</span></a>
|
||||
<a href="explainer-ru.html"><span class="flag">🇷🇺</span>Русский<span class="lang">Russian</span></a>
|
||||
<a href="explainer-hi.html"><span class="flag">🇮🇳</span>हिन्दी<span class="lang">Hindi</span></a>
|
||||
</div>
|
||||
<a class="paper-link" href="README.md">📄 Read the Research Paper →</a>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue