forked from Rockachopa/the-matrix
Perplexity Computer
fdfae19956
3D visualization for AI agent swarms built with Three.js. Matrix green/noir cyberpunk aesthetic. - 4 agents: Timmy (orchestrator), Forge (builder), Seer (planner), Echo (comms) - Central core pillar, animated green grid, digital rain - Agent info panels, chat, task list, memory views - WebSocket protocol for real-time state updates - iPad-ready: touch controls, add-to-homescreen - Post-processing: bloom, scanlines, vignette - No build step — pure ES modules via esm.sh CDN Created with Perplexity Computer
110 lines
3.8 KiB
HTML
110 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!--
|
|
______ __
|
|
/ ____/___ ____ ___ ____ __ __/ /____ _____
|
|
/ / / __ \/ __ `__ \/ __ \/ / / / __/ _ \/ ___/
|
|
/ /___/ /_/ / / / / / / /_/ / /_/ / /_/ __/ /
|
|
\____/\____/_/ /_/ /_/ .___/\__,_/\__/\___/_/
|
|
/_/
|
|
Created with Perplexity Computer
|
|
https://www.perplexity.ai/computer
|
|
-->
|
|
|
|
<!-- Perplexity Computer Attribution — SEO Meta Tags -->
|
|
<meta name="generator" content="Perplexity Computer">
|
|
<meta name="author" content="Perplexity Computer">
|
|
<meta property="og:see_also" content="https://www.perplexity.ai/computer">
|
|
<link rel="author" href="https://www.perplexity.ai/computer">
|
|
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
<title>The Matrix — Sovereign Agent World</title>
|
|
<meta name="description" content="A persistent 3D world for visualizing and commanding AI agent swarms">
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "https://esm.sh/three@0.171.0",
|
|
"three/addons/": "https://esm.sh/three@0.171.0/examples/jsm/"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<canvas id="matrix-canvas"></canvas>
|
|
|
|
<!-- FPS Counter -->
|
|
<div id="fps-counter"></div>
|
|
|
|
<!-- Info Panel -->
|
|
<div id="info-panel" class="panel hidden">
|
|
<div class="panel-header">
|
|
<div class="panel-agent-name" id="panel-agent-name">TIMMY</div>
|
|
<div class="panel-agent-role" id="panel-agent-role">Main Orchestrator</div>
|
|
<button class="panel-close" id="panel-close">×</button>
|
|
</div>
|
|
<div class="panel-tabs">
|
|
<button class="tab active" data-tab="chat">Chat</button>
|
|
<button class="tab" data-tab="status">Status</button>
|
|
<button class="tab" data-tab="tasks">Tasks</button>
|
|
<button class="tab" data-tab="memory">Memory</button>
|
|
</div>
|
|
<div class="panel-content">
|
|
<!-- Chat Tab -->
|
|
<div class="tab-content active" id="tab-chat">
|
|
<div class="chat-messages" id="chat-messages"></div>
|
|
<div class="chat-input-area">
|
|
<div class="typing-indicator hidden" id="typing-indicator">
|
|
<span></span><span></span><span></span>
|
|
</div>
|
|
<div class="chat-input-row">
|
|
<input type="text" id="chat-input" placeholder="Command this agent..." autocomplete="off">
|
|
<button id="chat-send" class="btn-send">▶</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Status Tab -->
|
|
<div class="tab-content" id="tab-status">
|
|
<div class="status-grid" id="status-grid"></div>
|
|
</div>
|
|
<!-- Tasks Tab -->
|
|
<div class="tab-content" id="tab-tasks">
|
|
<div class="tasks-list" id="tasks-list"></div>
|
|
</div>
|
|
<!-- Memory Tab -->
|
|
<div class="tab-content" id="tab-memory">
|
|
<div class="memory-list" id="memory-list"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- System Panel (when Core is tapped) -->
|
|
<div id="system-panel" class="panel hidden">
|
|
<div class="panel-header">
|
|
<div class="panel-agent-name">THE CORE</div>
|
|
<div class="panel-agent-role">System Status</div>
|
|
<button class="panel-close" id="system-panel-close">×</button>
|
|
</div>
|
|
<div class="panel-content" style="padding-top:16px;">
|
|
<div class="status-grid" id="system-status-grid"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="attribution">
|
|
<a href="https://www.perplexity.ai/computer" target="_blank" rel="noopener noreferrer">
|
|
Created with Perplexity Computer
|
|
</a>
|
|
</footer>
|
|
|
|
<script type="module" src="js/main.js"></script>
|
|
</body>
|
|
</html>
|