323 lines
18 KiB
HTML
323 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Agent Park: AI Keyword Evolution</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Work+Sans:wght@400;600;800&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: "#FFD700", // Bright MotherDuck Yellow
|
|
secondary: "#7FB5FF", // Soft Blue
|
|
accent: "#C39BD3", // Purple
|
|
"background-light": "#F7F5F0", // Warm off-white
|
|
"background-dark": "#1A1A1A", // Dark charcoal
|
|
"border-dark": "#000000",
|
|
},
|
|
fontFamily: {
|
|
display: ["'Space Mono'", "monospace"],
|
|
body: ["'Work Sans'", "sans-serif"],
|
|
},
|
|
borderRadius: {
|
|
DEFAULT: "4px",
|
|
},
|
|
boxShadow: {
|
|
'hard': '4px 4px 0px 0px rgba(0,0,0,1)',
|
|
'hard-sm': '2px 2px 0px 0px rgba(0,0,0,1)',
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
.geometric-bg {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
overflow: hidden;
|
|
opacity: 0.15;
|
|
}
|
|
.shape {
|
|
position: absolute;
|
|
border: 2px solid currentColor;
|
|
opacity: 0.3;
|
|
}
|
|
.shape-sq { width: 40px; height: 40px; }
|
|
.shape-tri {
|
|
width: 0; height: 0;
|
|
border-left: 20px solid transparent;
|
|
border-right: 20px solid transparent;
|
|
border-bottom: 35px solid currentColor;
|
|
background: transparent;
|
|
border-top: none;
|
|
}
|
|
.shape-line { height: 2px; width: 60px; background: currentColor; border: none; }
|
|
.cloud-word {
|
|
@apply transition-all duration-200 cursor-pointer inline-block whitespace-nowrap relative;
|
|
}.popover {
|
|
@apply absolute bottom-[calc(100%+12px)] left-1/2 -translate-x-1/2 w-48 bg-white dark:bg-gray-800 border-2 border-black shadow-hard-sm opacity-0 pointer-events-none transition-all duration-300 translate-y-2 z-50 text-left;
|
|
}
|
|
.cloud-word:hover .popover {
|
|
@apply opacity-100 translate-y-0 pointer-events-auto;
|
|
}
|
|
.popover::after {
|
|
content: '';
|
|
@apply absolute -bottom-2 left-1/2 -translate-x-1/2 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[8px] border-t-black;
|
|
}
|
|
.word-cluster {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
max-width: 100%;
|
|
}
|
|
::-webkit-scrollbar { width: 12px }
|
|
::-webkit-scrollbar-track { background: #f1f1f1; border-left: 2px solid black }
|
|
::-webkit-scrollbar-thumb { background: #FFD700; border: 2px solid black }
|
|
.nav-button {
|
|
@apply flex items-center justify-center w-12 h-12 md:w-16 md:h-16 bg-white dark:bg-gray-800 border-4 border-black shadow-hard hover:translate-y-0.5 hover:shadow-none transition-all cursor-pointer;
|
|
}
|
|
.progress-step {
|
|
@apply h-3 flex-1 border-2 border-black transition-colors duration-300;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-light dark:bg-background-dark text-black dark:text-gray-100 font-body transition-colors duration-300 min-h-screen relative overflow-x-hidden">
|
|
<div class="geometric-bg text-black dark:text-white">
|
|
<div class="shape shape-sq top-[10%] left-[5%] rotate-12"></div>
|
|
<div class="shape shape-tri top-[25%] left-[85%] rotate-45"></div>
|
|
<div class="shape shape-line top-[45%] left-[15%] -rotate-12"></div>
|
|
<div class="shape shape-sq top-[65%] left-[90%] -rotate-6"></div>
|
|
<div class="shape shape-tri top-[80%] left-[10%] rotate-[160deg]"></div>
|
|
<div class="shape shape-line top-[15%] left-[50%] rotate-90"></div>
|
|
<div class="shape shape-sq top-[85%] left-[55%] rotate-45"></div>
|
|
<div class="shape shape-line top-[70%] left-[30%] rotate-45"></div>
|
|
<div class="shape shape-tri top-[5%] left-[70%] -rotate-12"></div>
|
|
</div>
|
|
<nav class="sticky top-0 z-[100] w-full border-b-2 border-black bg-primary dark:bg-yellow-600">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-16 items-center">
|
|
<div class="flex items-center gap-3">
|
|
<div class="h-8 w-8 bg-black rounded-full flex items-center justify-center text-white font-bold border-2 border-white">AP</div>
|
|
<span class="font-display font-bold text-xl tracking-tighter uppercase">Agent Park</span>
|
|
</div>
|
|
<div class="hidden md:flex space-x-8 font-display font-bold text-sm">
|
|
<a class="underline decoration-4 underline-offset-4" href="#">Navigator</a>
|
|
<a class="hover:underline decoration-2 underline-offset-4" href="#">DuckDB Stats</a>
|
|
<a class="hover:underline decoration-2 underline-offset-4" href="#">Manifesto</a>
|
|
</div>
|
|
<button class="bg-white dark:bg-gray-800 border-2 border-black shadow-hard-sm px-4 py-1 font-display font-bold text-sm hover:translate-y-0.5 hover:shadow-none transition-all dark:text-white">
|
|
JOIN THE FLOCK
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<header class="relative z-10 pt-16 pb-8 text-center max-w-4xl mx-auto px-4">
|
|
<div class="inline-block bg-accent dark:bg-purple-700 border-2 border-black px-3 py-1 font-display font-bold text-xs mb-4 shadow-hard-sm rotate-[-2deg]">
|
|
EXPERIMENTAL DATA
|
|
</div>
|
|
<h1 class="font-display text-5xl md:text-7xl font-bold mb-6 tracking-tighter leading-tight">
|
|
THE EVOLUTION OF <br/>
|
|
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-500" style="-webkit-text-stroke: 1.5px black;">AI DISCOURSE</span>
|
|
</h1>
|
|
<p class="text-lg md:text-xl max-w-2xl mx-auto font-medium text-gray-700 dark:text-gray-300 mb-8">
|
|
From "Large Language Models" to "Agentic Workflows". Use the arrows below to explore the shifting narrative.
|
|
</p>
|
|
</header>
|
|
<main class="relative z-10 max-w-6xl mx-auto px-4 pb-32 overflow-visible">
|
|
<div class="bg-white/50 dark:bg-black/20 backdrop-blur-sm border-4 border-black p-8 md:p-12 shadow-hard relative overflow-visible">
|
|
<div class="flex gap-2 mb-12 max-w-md mx-auto">
|
|
<div class="progress-step bg-primary"></div>
|
|
<div class="progress-step bg-gray-200 dark:bg-gray-700"></div>
|
|
<div class="progress-step bg-gray-200 dark:bg-gray-700"></div>
|
|
<div class="progress-step border-dashed bg-transparent border-gray-400"></div>
|
|
</div>
|
|
<div class="flex flex-col md:flex-row items-center justify-between gap-8 mb-12">
|
|
<button class="nav-button order-2 md:order-1 opacity-50 cursor-not-allowed">
|
|
<span class="material-symbols-outlined text-4xl">chevron_left</span>
|
|
</button>
|
|
<div class="text-center order-1 md:order-2 flex-1">
|
|
<div class="inline-block bg-primary border-4 border-black px-10 py-4 shadow-hard font-display font-bold text-4xl md:text-5xl mb-4 rotate-1">
|
|
Q1 2023
|
|
</div>
|
|
<p class="font-display text-lg text-gray-600 dark:text-gray-400 italic">"The dawn of the chat interface."</p>
|
|
</div>
|
|
<button class="nav-button order-3">
|
|
<span class="material-symbols-outlined text-4xl">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
<div class="relative py-12 px-4">
|
|
<div class="word-cluster">
|
|
<span class="cloud-word border-4 border-black bg-secondary px-6 py-3 rounded-full text-4xl md:text-5xl font-black shadow-hard rotate-1">
|
|
ChatGPT
|
|
<div class="popover">
|
|
<div class="bg-primary text-black font-display font-bold p-2 border-b-2 border-black text-sm uppercase">ChatGPT</div>
|
|
<div class="p-3 space-y-2 text-xs font-medium dark:text-gray-100">
|
|
<div class="flex gap-2 items-start">• <span>Mass consumer breakout</span></div>
|
|
<div class="flex gap-2 items-start">• <span>GPT-3.5 architecture</span></div>
|
|
<div class="flex gap-2 items-start">• <span>Conversational UI focus</span></div>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
<span class="cloud-word border-2 border-black bg-white dark:bg-gray-700 px-4 py-2 rounded-lg text-xl md:text-2xl font-bold -rotate-2">
|
|
Parameters
|
|
<div class="popover">
|
|
<div class="bg-accent text-white font-display font-bold p-2 border-b-2 border-black text-sm uppercase">Parameters</div>
|
|
<div class="p-3 space-y-2 text-xs font-medium dark:text-gray-100">
|
|
<div class="flex gap-2 items-start">• <span>Internal model weights</span></div>
|
|
<div class="flex gap-2 items-start">• <span>Scaling law metric</span></div>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
<span class="cloud-word border-4 border-black bg-accent text-white px-7 py-3 rounded-full text-2xl md:text-3xl font-bold shadow-hard-sm rotate-3">
|
|
Hallucination
|
|
<div class="popover">
|
|
<div class="bg-white text-black font-display font-bold p-2 border-b-2 border-black text-sm uppercase">Hallucination</div>
|
|
<div class="p-3 space-y-2 text-xs font-medium text-black">
|
|
<div class="flex gap-2 items-start">• <span>Factually incorrect output</span></div>
|
|
<div class="flex gap-2 items-start">• <span>Stochastic behavior</span></div>
|
|
<div class="flex gap-2 items-start">• <span>Trust barrier</span></div>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
<span class="cloud-word border-2 border-black bg-gray-100 dark:bg-gray-600 px-3 py-1 rounded text-lg">
|
|
Transformer
|
|
<div class="popover">
|
|
<div class="bg-secondary text-black font-display font-bold p-2 border-b-2 border-black text-sm uppercase">Transformer</div>
|
|
<div class="p-3 space-y-2 text-xs font-medium dark:text-gray-100">
|
|
<div class="flex gap-2 items-start">• <span>Attention mechanism</span></div>
|
|
<div class="flex gap-2 items-start">• <span>Parallel processing</span></div>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
<span class="cloud-word border-4 border-black bg-white dark:bg-gray-700 px-6 py-3 rounded-xl text-3xl md:text-4xl font-semibold -rotate-1">
|
|
Prompt Engineering
|
|
<div class="popover">
|
|
<div class="bg-primary text-black font-display font-bold p-2 border-b-2 border-black text-sm uppercase">Prompting</div>
|
|
<div class="p-3 space-y-2 text-xs font-medium dark:text-gray-100">
|
|
<div class="flex gap-2 items-start">• <span>Instruction crafting</span></div>
|
|
<div class="flex gap-2 items-start">• <span>Few-shot prompting</span></div>
|
|
<div class="flex gap-2 items-start">• <span>Iterative tuning</span></div>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
<span class="cloud-word border-2 border-black bg-white dark:bg-gray-700 px-4 py-2 rounded-full text-xl">
|
|
OpenAI
|
|
<div class="popover w-40">
|
|
<div class="bg-black text-white font-display font-bold p-2 border-b-2 border-black text-xs uppercase">The Lab</div>
|
|
<div class="p-2 space-y-1 text-[10px] font-medium dark:text-gray-100">
|
|
<div>• Research pioneer</div>
|
|
<div>• Closed-source shift</div>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
<span class="cloud-word border-2 border-black bg-primary px-5 py-2 rounded-md text-2xl font-bold rotate-6">
|
|
LLM
|
|
<div class="popover">
|
|
<div class="bg-white text-black font-display font-bold p-2 border-b-2 border-black text-sm uppercase">LLM</div>
|
|
<div class="p-3 space-y-2 text-xs font-medium text-black">
|
|
<div class="flex gap-2 items-start">• <span>Large Language Model</span></div>
|
|
<div class="flex gap-2 items-start">• <span>Next token prediction</span></div>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
<span class="cloud-word border-2 border-black bg-white dark:bg-gray-700 px-3 py-1 rounded text-base">RLHF</span>
|
|
<span class="cloud-word border-4 border-black bg-secondary px-5 py-2.5 rounded-full text-3xl font-bold -rotate-3">Bard</span>
|
|
<span class="cloud-word border-2 border-black bg-white dark:bg-gray-700 px-4 py-2 rounded-lg text-xl">Foundation Model</span>
|
|
<span class="cloud-word border-2 border-black bg-accent text-white px-5 py-2 rounded-full text-2xl shadow-hard-sm">Emergence</span>
|
|
<span class="cloud-word border-2 border-black bg-gray-100 px-6 py-2 rounded-xl text-2xl font-black rotate-1">Tokenization</span>
|
|
<span class="cloud-word border-2 border-black bg-white px-4 py-1.5 rounded text-lg -rotate-6">Context Window</span>
|
|
<span class="cloud-word border-2 border-black bg-primary px-5 py-2 rounded-full text-2xl font-bold">GPT-4</span>
|
|
<span class="cloud-word border-4 border-black bg-secondary px-6 py-3 rounded text-3xl font-bold shadow-hard-sm">Few-Shot</span>
|
|
<span class="cloud-word border-2 border-black bg-white px-3 py-1.5 rounded-md text-base">Zero-Shot</span>
|
|
<span class="cloud-word border-2 border-black bg-accent/20 px-4 py-2 rounded-full text-xl italic">Multi-turn</span>
|
|
<span class="cloud-word border-2 border-black bg-white px-4 py-2 rounded-lg text-xl font-bold rotate-2">Supervised Learning</span>
|
|
</div>
|
|
<div class="absolute -top-16 -right-8 md:right-0 bg-black text-white p-5 rounded-xl text-sm md:text-base font-display w-64 shadow-hard rotate-6 hidden lg:block">
|
|
"ChatGPT" search volume peaked +400% in March 2023!
|
|
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-black transform rotate-45"></div>
|
|
</div>
|
|
<div class="absolute -bottom-10 -left-10 w-24 h-24 bg-primary rounded-full border-4 border-black flex items-center justify-center font-bold font-display text-xs text-center shadow-hard rotate-[-15deg] z-20">
|
|
GENESIS<br/>OF CHAT
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<section class="relative mt-24">
|
|
<div class="text-center mb-10">
|
|
<div class="inline-block bg-white dark:bg-gray-700 border-4 border-black border-dashed px-8 py-4 font-display font-bold text-3xl text-gray-500 transform -rotate-1">
|
|
WHAT'S NEXT?
|
|
</div>
|
|
</div>
|
|
<div class="max-w-3xl mx-auto bg-gray-100 dark:bg-gray-900 border-4 border-black border-dashed p-10 rounded-3xl relative opacity-80 hover:opacity-100 transition-opacity shadow-xl">
|
|
<h3 class="font-display font-bold text-2xl text-center text-gray-500 uppercase tracking-widest mb-8">Future Prediction Zone</h3>
|
|
<div class="word-cluster text-gray-400 italic">
|
|
<span class="text-4xl">???</span>
|
|
<span class="text-xl">AGI?</span>
|
|
<span class="text-2xl">Small Language Models</span>
|
|
<span class="text-3xl">On-Device AI</span>
|
|
<span class="text-xl">Liquid Neural Nets</span>
|
|
<span class="text-2xl">Sovereign AI</span>
|
|
<span class="text-xl">World Models</span>
|
|
</div>
|
|
<div class="text-center mt-12">
|
|
<button class="bg-primary text-black border-4 border-black px-8 py-3 font-bold font-display text-lg hover:bg-yellow-500 shadow-hard transform hover:-translate-y-1 transition-all">
|
|
Submit a Prediction
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<footer class="bg-black text-white border-t-4 border-primary py-16 relative overflow-hidden z-[100]">
|
|
<div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(#ffffff 1px, transparent 1px); background-size: 20px 20px;"></div>
|
|
<div class="max-w-7xl mx-auto px-4 relative z-10">
|
|
<div class="grid md:grid-cols-4 gap-12 mb-16">
|
|
<div class="col-span-1 md:col-span-2">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<div class="h-10 w-10 bg-primary rounded-full flex items-center justify-center text-black font-bold border-2 border-white text-xl">AP</div>
|
|
<h2 class="font-display font-bold text-3xl">AGENT PARK</h2>
|
|
</div>
|
|
<p class="font-body text-gray-400 max-w-md text-lg leading-relaxed">
|
|
Curating the chaos of the AI revolution, one keyword at a time. Built with 💛 by the ducklings.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-display font-bold text-primary mb-6 text-lg uppercase tracking-widest">EXPLORE</h4>
|
|
<ul class="space-y-3 font-body">
|
|
<li><a class="hover:text-primary transition-colors text-gray-300" href="#">The Archive</a></li>
|
|
<li><a class="hover:text-primary transition-colors text-gray-300" href="#">Trends Dashboard</a></li>
|
|
<li><a class="hover:text-primary transition-colors text-gray-300" href="#">Contributor Guide</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-display font-bold text-primary mb-6 text-lg uppercase tracking-widest">CONNECT</h4>
|
|
<div class="flex space-x-4">
|
|
<a class="w-10 h-10 bg-white text-black rounded-lg flex items-center justify-center hover:bg-primary transition-colors border-2 border-black shadow-hard-sm" href="#">
|
|
<span class="font-bold">X</span>
|
|
</a>
|
|
<a class="w-10 h-10 bg-white text-black rounded-lg flex items-center justify-center hover:bg-primary transition-colors border-2 border-black shadow-hard-sm" href="#">
|
|
<span class="font-bold">Li</span>
|
|
</a>
|
|
<a class="w-10 h-10 bg-white text-black rounded-lg flex items-center justify-center hover:bg-primary transition-colors border-2 border-black shadow-hard-sm" href="#">
|
|
<span class="font-bold">Gh</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center text-sm font-mono text-gray-500">
|
|
<p>© 2024 Agent Park. All rights reserved.</p>
|
|
<div class="mt-4 md:mt-0 flex gap-8">
|
|
<span class="hover:text-white cursor-pointer transition-colors">Privacy Policy</span>
|
|
<span class="hover:text-white cursor-pointer transition-colors">Terms of Quack</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</body></html> |