| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AI Collab Chat - System Design</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> |
| <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> |
| <style> |
| :root { |
| --primary: #5865F2; |
| --secondary: #2D2F3E; |
| --accent: #EB459E; |
| --text: #FFFFFF; |
| --model-1: #43B581; |
| --model-2: #FAA61A; |
| --model-3: #EC4245; |
| --model-4: #9C84EF; |
| } |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: var(--secondary); |
| color: var(--text); |
| } |
| |
| .mono { |
| font-family: 'JetBrains Mono', monospace; |
| } |
| |
| .flow-arrow { |
| stroke: var(--accent); |
| stroke-width: 2; |
| marker-end: url(#arrowhead); |
| } |
| |
| .user-flow-node { |
| fill: var(--primary); |
| stroke: var(--text); |
| stroke-width: 2; |
| } |
| |
| .user-flow-text { |
| fill: var(--text); |
| font-size: 14px; |
| text-anchor: middle; |
| dominant-baseline: middle; |
| } |
| |
| .data-model-node { |
| fill: var(--secondary); |
| stroke: var(--primary); |
| stroke-width: 2; |
| rx: 5; |
| ry: 5; |
| } |
| |
| .component-card { |
| border-left: 4px solid var(--primary); |
| } |
| |
| .improvement-chain { |
| border-left: 3px solid var(--accent); |
| margin-left: 24px; |
| padding-left: 12px; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| <div class="container mx-auto px-4 py-8"> |
| |
| <header class="mb-8"> |
| <h1 class="text-4xl font-bold mb-2">AI Collaborative Chat System</h1> |
| <p class="text-gray-400">Designing multi-AI interaction with visible refinement chains</p> |
| </header> |
| |
| |
| <section class="mb-12"> |
| <h2 class="text-2xl font-bold mb-4 border-b border-gray-700 pb-2">1. Multi-AI Interaction Flow</h2> |
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
| |
| <div class="bg-gray-800 p-6 rounded-lg"> |
| <h3 class="text-xl font-semibold mb-4">User Flow Diagram</h3> |
| <svg width="100%" height="300" viewBox="0 0 500 300" class="mx-auto"> |
| <defs> |
| <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"> |
| <polygon points="0 0, 10 3.5, 0 7" fill="#EB459E"/> |
| </marker> |
| </defs> |
| |
| |
| <rect x="50" y="50" width="120" height="60" rx="10" ry="10" class="user-flow-node"/> |
| <text x="110" y="80" class="user-flow-text">User Prompt</text> |
| |
| <rect x="220" y="50" width="120" height="60" rx="10" ry="10" class="user-flow-node"/> |
| <text x="280" y="80" class="user-flow-text">AI Response</text> |
| |
| <rect x="50" y="150" width="120" height="60" rx="10" ry="10" class="user-flow-node"/> |
| <text x="110" y="180" class="user-flow-text">Select Model</text> |
| |
| <rect x="220" y="150" width="120" height="60" rx="10" ry="10" class="user-flow-node"/> |
| <text x="280" y="180" class="user-flow-text">Refinement</text> |
| |
| <rect x="390" y="150" width="120" height="60" rx="10" ry="10" class="user-flow-node"/> |
| <text x="450" y="180" class="user-flow-text">Chain View</text> |
| |
| |
| <line x1="170" y1="80" x2="220" y2="80" class="flow-arrow"/> |
| <line x1="170" y1="180" x2="220" y2="180" class="flow-arrow"/> |
| <line x1="340" y1="180" x2="390" y2="180" class="flow-arrow"/> |
| <line x1="280" y1="110" x2="280" y2="150" class="flow-arrow"/> |
| </svg> |
| |
| <div class="mt-4 space-y-2"> |
| <div class="flex items-center"> |
| <div class="w-4 h-4 rounded-full bg-[#43B581] mr-2"></div> |
| <span class="text-sm">GPT-4 (Analytical)</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-4 h-4 rounded-full bg-[#FAA61A] mr-2"></div> |
| <span class="text-sm">Claude (Creative)</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-4 h-4 rounded-full bg-[#EC4245] mr-2"></div> |
| <span class="text-sm">PaLM (Technical)</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-4 h-4 rounded-full bg-[#9C84EF] mr-2"></div> |
| <span class="text-sm">LLaMA (Concise)</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <h3 class="text-xl font-semibold mb-4">UI Components</h3> |
| |
| <div class="bg-gray-800 p-4 rounded-lg mb-4"> |
| <div class="flex items-center mb-2"> |
| <div class="w-8 h-8 rounded-full bg-[#43B581] flex items-center justify-center mr-2"> |
| <span class="text-xs font-bold">M1</span> |
| </div> |
| <div> |
| <span class="font-medium">Model Selector</span> |
| <span class="text-xs text-gray-400 ml-2">(Click to activate/deactivate)</span> |
| </div> |
| </div> |
| <p class="text-sm text-gray-400">Color-coded badges with model initials and tooltip on hover showing full name and specialty.</p> |
| </div> |
| |
| <div class="bg-gray-800 p-4 rounded-lg mb-4"> |
| <div class="flex items-center mb-2"> |
| <div class="w-6 h-6 rounded-full bg-[#FAA61A] flex items-center justify-center mr-2"> |
| <span class="text-xs font-bold">M2</span> |
| </div> |
| <span class="font-medium">Model Attribution</span> |
| </div> |
| <p class="text-sm text-gray-400">Appears above each message bubble with model name and refinement indicator.</p> |
| </div> |
| |
| <div class="bg-gray-800 p-4 rounded-lg"> |
| <div class="flex items-center mb-2"> |
| <i class="fas fa-link text-[#EB459E] mr-2"></i> |
| <span class="font-medium">Refinement Controls</span> |
| </div> |
| <p class="text-sm text-gray-400">"Refine" and "Improve" buttons below each message with visual connection to parent message.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="mb-12"> |
| <h2 class="text-2xl font-bold mb-4 border-b border-gray-700 pb-2">2. Response Refinement System</h2> |
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
| |
| <div class="bg-gray-800 p-6 rounded-lg"> |
| <h3 class="text-xl font-semibold mb-4">Refinement UI Example</h3> |
| |
| <div class="space-y-4"> |
| |
| <div class="bg-gray-700 p-4 rounded-lg"> |
| <div class="flex items-center mb-2"> |
| <div class="w-6 h-6 rounded-full bg-[#43B581] flex items-center justify-center mr-2"> |
| <span class="text-xs font-bold">M1</span> |
| </div> |
| <span class="text-sm font-medium">GPT-4</span> |
| </div> |
| <p class="text-sm">Neural networks consist of interconnected nodes organized in layers.</p> |
| <div class="flex justify-end mt-2 space-x-2"> |
| <button class="text-xs px-2 py-1 bg-gray-600 rounded hover:bg-gray-500">Refine</button> |
| <button class="text-xs px-2 py-1 bg-gray-600 rounded hover:bg-gray-500">Improve</button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-700 p-4 rounded-lg ml-8 improvement-chain"> |
| <div class="flex items-center mb-2"> |
| <div class="w-6 h-6 rounded-full bg-[#FAA61A] flex items-center justify-center mr-2"> |
| <span class="text-xs font-bold">M2</span> |
| </div> |
| <span class="text-sm font-medium">Claude</span> |
| <span class="text-xs text-gray-400 ml-2">(refining M1)</span> |
| </div> |
| <p class="text-sm">To expand: These layers typically include input, hidden, and output layers that process information sequentially.</p> |
| <div class="flex justify-end mt-2 space-x-2"> |
| <button class="text-xs px-2 py-1 bg-gray-600 rounded hover:bg-gray-500">Refine</button> |
| <button class="text-xs px-2 py-1 bg-gray-600 rounded hover:bg-gray-500">Improve</button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-900 p-4 rounded-lg mt-4"> |
| <h4 class="text-sm font-medium mb-2">Refinement Controls</h4> |
| <div class="flex space-x-2"> |
| <button class="text-xs px-3 py-1 bg-[#43B581] rounded hover:bg-opacity-80">GPT-4</button> |
| <button class="text-xs px-3 py-1 bg-[#FAA61A] rounded hover:bg-opacity-80">Claude</button> |
| <button class="text-xs px-3 py-1 bg-[#EC4245] rounded hover:bg-opacity-80">PaLM</button> |
| </div> |
| <textarea class="w-full mt-2 bg-gray-800 rounded p-2 text-sm" rows="2" placeholder="Enter refinement..."></textarea> |
| <button class="text-xs px-3 py-1 bg-[#5865F2] rounded hover:bg-opacity-80 mt-2">Submit Refinement</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <h3 class="text-xl font-semibold mb-4">Data Model</h3> |
| |
| <svg width="100%" height="300" viewBox="0 0 500 300" class="mx-auto"> |
| |
| <rect x="50" y="50" width="150" height="120" class="data-model-node"/> |
| <text x="125" y="70" class="user-flow-text font-bold">Message</text> |
| <text x="70" y="100" class="user-flow-text text-left text-sm">id: string</text> |
| <text x="70" y="120" class="user-flow-text text-left text-sm">content: string</text> |
| <text x="70" y="140" class="user-flow-text text-left text-sm">timestamp: datetime</text> |
| <text x="70" y="160" class="user-flow-text text-left text-sm">modelId: string</text> |
| |
| |
| <rect x="300" y="50" width="150" height="100" class="data-model-node"/> |
| <text x="375" y="70" class="user-flow-text font-bold">AI Model</text> |
| <text x="320" y="100" class="user-flow-text text-left text-sm">id: string</text> |
| <text x="320" y="120" class="user-flow-text text-left text-sm">name: string</text> |
| <text x="320" y="140" class="user-flow-text text-left text-sm">specialty: string</text> |
| |
| |
| <rect x="50" y="200" width="150" height="60" class="data-model-node"/> |
| <text x="125" y="220" class="user-flow-text font-bold">Refinement</text> |
| <text x="70" y="240" class="user-flow-text text-left text-sm">parentId: string</text> |
| |
| |
| <line x1="200" y1="110" x2="300" y2="100" class="flow-arrow"/> |
| <line x1="125" y1="170" x2="125" y2="200" class="flow-arrow"/> |
| </svg> |
| |
| <div class="mt-4 bg-gray-800 p-4 rounded-lg"> |
| <h4 class="font-medium mb-2">Key Relationships</h4> |
| <ul class="text-sm space-y-1"> |
| <li>• Message belongs to one AI Model (many-to-one)</li> |
| <li>• Message can have multiple Refinements (one-to-many)</li> |
| <li>• Refinement links to parent Message (self-referential)</li> |
| <li>• Each Refinement is a new Message with additional metadata</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="mb-12"> |
| <h2 class="text-2xl font-bold mb-4 border-b border-gray-700 pb-2">3. Conversation Interface</h2> |
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
| |
| <div class="bg-gray-800 p-6 rounded-lg"> |
| <h3 class="text-xl font-semibold mb-4">Desktop Interface</h3> |
| |
| <div class="border border-gray-700 rounded-lg overflow-hidden"> |
| |
| <div class="bg-gray-900 p-3 border-b border-gray-700 flex items-center"> |
| <i class="fas fa-users text-gray-400 mr-2"></i> |
| <span class="font-medium">AI Collaboration</span> |
| </div> |
| |
| |
| <div class="flex" style="height: 300px;"> |
| |
| <div class="w-1/4 bg-gray-800 border-r border-gray-700 p-2 overflow-y-auto"> |
| <div class="p-2 rounded-lg bg-gray-700 mb-2"> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-[#43B581] flex items-center justify-center mr-2"> |
| <span class="text-xs font-bold">M1</span> |
| </div> |
| <span class="text-sm">GPT-4</span> |
| </div> |
| </div> |
| <div class="p-2 rounded-lg hover:bg-gray-700 mb-2"> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-[#FAA61A] flex items-center justify-center mr-2"> |
| <span class="text-xs font-bold">M2</span> |
| </div> |
| <span class="text-sm">Claude</span> |
| </div> |
| </div> |
| <div class="p-2 rounded-lg hover:bg-gray-700 mb-2"> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-[#EC4245] flex items-center justify-center mr-2"> |
| <span class="text-xs font-bold">M3</span> |
| </div> |
| <span class="text-sm">PaLM</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="w-3/4 bg-gray-900 p-4 overflow-y-auto"> |
| <div class="space-y-4"> |
| |
| <div class="bg-gray-800 p-3 rounded-lg"> |
| <div class="flex items-center mb-1"> |
| <div class="w-6 h-6 rounded-full bg-[#43B581] flex items-center justify-center mr-2"> |
| <span class="text-xs font-bold">M1</span> |
| </div> |
| <span class="text-sm font-medium">GPT-4</span> |
| </div> |
| <p class="text-sm">Initial explanation of neural networks...</p> |
| </div> |
| |
| |
| <div class="bg-gray-800 p-3 rounded-lg ml-8 improvement-chain"> |
| <div class="flex items-center mb-1"> |
| <div class="w-6 h-6 rounded-full bg-[#FAA61A] flex items-center justify-center mr-2"> |
| <span class="text-xs font-bold">M2</span> |
| </div> |
| <span class="text-sm font-medium">Claude</span> |
| <span class="text-xs text-gray-400 ml-2">(refining M1)</span> |
| </div> |
| <p class="text-sm">Expanded explanation with creative analogies...</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-900 p-3 border-t border-gray-700"> |
| <textarea class="w-full bg-gray-800 rounded p-2 text-sm" rows="1" placeholder="Message the AI group..."></textarea> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <h3 class="text-xl font-semibold mb-4">Mobile Considerations</h3> |
| |
| <div class="bg-gray-800 p-4 rounded-lg mb-4"> |
| <h4 class="font-medium mb-2">Responsive Layout</h4> |
| <ul class="text-sm space-y-1"> |
| <li>• Collapsible side panel with model selector</li> |
| <li>• Stacked message bubbles with smaller indentation</li> |
| <li>• Touch-friendly refinement controls</li> |
| <li>• Simplified model attribution in compact view</li> |
| </ul> |
| </div> |
| |
| <div class="bg-gray-800 p-4 rounded-lg"> |
| <h4 class="font-medium mb-2">Navigation Features</h4> |
| <ul class="text-sm space-y-1"> |
| <li>• Swipe to view refinement chains</li> |
| <li>• Tap model avatars to filter by contributor</li> |
| <li>• Pinch to zoom on technical content (code snippets)</li> |
| <li>• Long-press messages for refinement options</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section> |
| <h2 class="text-2xl font-bold mb-4 border-b border-gray-700 pb-2">4. Visual Style & Components</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
| |
| <div class="bg-gray-800 p-4 rounded-lg component-card"> |
| <h3 class="font-medium mb-2">MessageBubble</h3> |
| <p class="text-sm text-gray-400">Displays AI/human messages with attribution, timestamp, and refinement controls.</p> |
| <div class="mt-2 flex flex-wrap gap-1"> |
| <span class="text-xs px-2 py-1 bg-gray-700 rounded">modelId</span> |
| <span class="text-xs px-2 py-1 bg-gray-700 rounded">content</span> |
| <span class="text-xs px-2 py-1 bg-gray-700 rounded">timestamp</span> |
| </div> |
| </div> |
| |
| <div class="bg-gray-800 p-4 rounded-lg component-card"> |
| <h3 class="font-medium mb-2">AISelector</h3> |
| <p class="text-sm text-gray-400">Panel for activating/deactivating AI models with visual indicators.</p> |
| <div class="mt-2 flex flex-wrap gap-1"> |
| <span class="text-xs px-2 py-1 bg-gray-700 rounded">activeModels</span> |
| <span class="text-xs px-2 py-1 bg-gray-700 rounded">onModelToggle</span> |
| </div> |
| </div> |
| |
| <div class="bg-gray-800 p-4 rounded-lg component-card"> |
| <h3 class="font-medium mb-2">RefinementThread</h3> |
| <p class="text-sm text-gray-400">Visualizes improvement chains with connecting lines and parent references.</p> |
| <div class="mt-2 flex flex-wrap gap-1"> |
| <span class="text-xs px-2 py-1 bg-gray-700 rounded">parentId</span> |
| <span class="text-xs px-2 py-1 bg-gray-700 rounded">depth</span> |
| </div> |
| </div> |
| |
| <div class="bg-gray-800 p-4 rounded-lg component-card"> |
| <h3 class="font-medium mb-2">ModelAttribution</h3> |
| <p class="text-sm text-gray-400">Compact display of model identity with color coding and specialty.</p> |
| <div class="mt-2 flex flex-wrap gap-1"> |
| <span class="text-xs px-2 py-1 bg-gray-700 rounded">name</span> |
| <span class="text-xs px-2 py-1 bg-gray-700 rounded">specialty</span> |
| <span class="text-xs px-2 py-1 bg-gray-700 rounded">color</span> |
| </div> |
| </div> |
| |
| <div class="bg-gray-800 p-4 rounded-lg component-card"> |
| <h3 class="font-medium mb-2">InputController</h3> |
| <p class="text-sm text-gray-400">Text input with model selection and refinement targeting.</p> |
| <div class="mt-2 flex flex-wrap gap-1"> |
| <span class="text-xs px-2 py-1 bg-gray-700 rounded">targetMessage</span> |
| <span class="text-xs px-2 py-1 bg-gray-700 rounded">selectedModels</span> |
| </div> |
| </div> |
| |
| <div class="bg-gray-800 p-4 rounded-lg component-card"> |
| <h3 class="font-medium mb-2">ChainNavigator</h3> |
| <p class="text-sm text-gray-400">Overview and navigation of refinement chains in conversation.</p> |
| <div class="mt-2 flex flex-wrap gap-1"> |
| <span class="text-xs px-2 py-1 bg-gray-700 rounded">chainId</span> |
| <span class="text-xs px-2 py-1 bg-gray-700 rounded">jumpToMessage</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-8 bg-gray-800 p-6 rounded-lg"> |
| <h3 class="text-xl font-semibold mb-4">Style Guide</h3> |
| |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
| <div> |
| <div class="w-full h-16 rounded-lg bg-[#5865F2] mb-1"></div> |
| <p class="text-sm">Primary #5865F2</p> |
| </div> |
| <div> |
| <div class="w-full h-16 rounded-lg bg-[#2D2F3E] mb-1"></div> |
| <p class="text-sm">Secondary #2D2F3E</p> |
| </div> |
| <div> |
| <div class="w-full h-16 rounded-lg bg-[#EB459E] mb-1"></div> |
| <p class="text-sm">Accent #EB459E</p> |
| </div> |
| <div> |
| <div class="w-full h-16 rounded-lg bg-[#FFFFFF] mb-1"></div> |
| <p class="text-sm">Text #FFFFFF</p> |
| </div> |
| </div> |
| |
| <div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4"> |
| <div> |
| <div class="w-full h-16 rounded-lg bg-[#43B581] mb-1"></div> |
| <p class="text-sm">GPT-4 #43B581</p> |
| </div> |
| <div> |
| <div class="w-full h-16 rounded-lg bg-[#FAA61A] mb-1"></div> |
| <p class="text-sm">Claude #FAA61A</p> |
| </div> |
| <div> |
| <div class="w-full h-16 rounded-lg bg-[#EC4245] mb-1"></div> |
| <p class="text-sm">PaLM #EC4245</p> |
| </div> |
| <div> |
| <div class="w-full h-16 rounded-lg bg-[#9C84EF] mb-1"></div> |
| <p class="text-sm">LLaMA #9C84EF</p> |
| </div> |
| </div> |
| |
| <div class="mt-6"> |
| <h4 class="font-medium mb-2">Typography</h4> |
| <p class="font-sans">Inter - Used for UI elements and main text</p> |
| <p class="mono mt-2">JetBrains Mono - Used for code and technical content</p> |
| </div> |
| </div> |
| </section> |
| </div> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=spwotton/collab" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
