379 lines
13 KiB
HTML
379 lines
13 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>Frontend Architecture - Manus AI Clone</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 20px;
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
min-height: 100vh;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
background: white;
|
||
|
|
border-radius: 16px;
|
||
|
|
padding: 40px;
|
||
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
color: #333;
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.subtitle {
|
||
|
|
text-align: center;
|
||
|
|
color: #666;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
.architecture {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
|
|
gap: 20px;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
}
|
||
|
|
.component {
|
||
|
|
background: #f9f9f9;
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 20px;
|
||
|
|
border-left: 4px solid #667eea;
|
||
|
|
}
|
||
|
|
.component h2 {
|
||
|
|
color: #667eea;
|
||
|
|
font-size: 1.3em;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
.component h3 {
|
||
|
|
color: #764ba2;
|
||
|
|
font-size: 1.1em;
|
||
|
|
margin-top: 15px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.file-tree {
|
||
|
|
background: #2d2d2d;
|
||
|
|
color: #f8f8f2;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
font-family: "Courier New", monospace;
|
||
|
|
overflow-x: auto;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
.file-tree pre {
|
||
|
|
margin: 0;
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
.folder {
|
||
|
|
color: #f1fa8c;
|
||
|
|
}
|
||
|
|
.file-py {
|
||
|
|
color: #50fa7b;
|
||
|
|
}
|
||
|
|
.file-html {
|
||
|
|
color: #ff79c6;
|
||
|
|
}
|
||
|
|
.file-css {
|
||
|
|
color: #8be9fd;
|
||
|
|
}
|
||
|
|
.file-js {
|
||
|
|
color: #ffb86c;
|
||
|
|
}
|
||
|
|
.file-config {
|
||
|
|
color: #bd93f9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
|
|
gap: 15px;
|
||
|
|
margin: 20px 0;
|
||
|
|
}
|
||
|
|
.feature {
|
||
|
|
background: white;
|
||
|
|
padding: 15px;
|
||
|
|
border-radius: 8px;
|
||
|
|
border: 2px solid #e0e0e0;
|
||
|
|
}
|
||
|
|
.feature-icon {
|
||
|
|
font-size: 2em;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.feature h4 {
|
||
|
|
color: #333;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
.feature p {
|
||
|
|
color: #666;
|
||
|
|
font-size: 0.9em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flow-diagram {
|
||
|
|
background: #f9f9f9;
|
||
|
|
padding: 30px;
|
||
|
|
border-radius: 12px;
|
||
|
|
text-align: center;
|
||
|
|
margin: 20px 0;
|
||
|
|
}
|
||
|
|
.flow-step {
|
||
|
|
display: inline-block;
|
||
|
|
background: white;
|
||
|
|
padding: 15px 25px;
|
||
|
|
border-radius: 8px;
|
||
|
|
margin: 5px;
|
||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
.flow-arrow {
|
||
|
|
display: inline-block;
|
||
|
|
color: #667eea;
|
||
|
|
font-size: 1.5em;
|
||
|
|
margin: 0 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
code {
|
||
|
|
background: #f4f4f4;
|
||
|
|
padding: 2px 6px;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-family: "Courier New", monospace;
|
||
|
|
}
|
||
|
|
ul {
|
||
|
|
line-height: 1.8;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1>🏗️ Frontend Architecture</h1>
|
||
|
|
<p class="subtitle">
|
||
|
|
Manus AI Clone - Professional Template Structure
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="file-tree">
|
||
|
|
<pre>
|
||
|
|
<span class="folder">manus_ai_clone/</span>
|
||
|
|
├── <span class="folder">templates/</span> <em># Jinja2 Templates</em>
|
||
|
|
│ ├── <span class="file-html">base.html</span> <em># Base layout with nav & footer</em>
|
||
|
|
│ └── <span class="file-html">index.html</span> <em># Main application page</em>
|
||
|
|
│
|
||
|
|
├── <span class="folder">static/</span> <em># Static Assets</em>
|
||
|
|
│ ├── <span class="folder">css/</span>
|
||
|
|
│ │ └── <span class="file-css">style.css</span> <em># Main stylesheet (500+ lines)</em>
|
||
|
|
│ └── <span class="folder">js/</span>
|
||
|
|
│ └── <span class="file-js">main.js</span> <em># Frontend logic (300+ lines)</em>
|
||
|
|
│
|
||
|
|
├── <span class="file-py">browser_agent.py</span> <em># Browser automation core</em>
|
||
|
|
├── <span class="file-py">main.py</span> <em># FastAPI application</em>
|
||
|
|
├── <span class="file-config">pyproject.toml</span> <em># Dependencies</em>
|
||
|
|
├── <span class="file-config">.env</span> <em># Environment variables</em>
|
||
|
|
└── <span class="file-config">README.md</span> <em># Documentation</em>
|
||
|
|
</pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="architecture">
|
||
|
|
<div class="component">
|
||
|
|
<h2>📄 Templates</h2>
|
||
|
|
<h3>base.html</h3>
|
||
|
|
<ul>
|
||
|
|
<li>Common layout structure</li>
|
||
|
|
<li>Navigation bar</li>
|
||
|
|
<li>Footer</li>
|
||
|
|
<li>Static file links</li>
|
||
|
|
<li>Template blocks</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h3>index.html</h3>
|
||
|
|
<ul>
|
||
|
|
<li>Extends base.html</li>
|
||
|
|
<li>Hero section</li>
|
||
|
|
<li>Input form</li>
|
||
|
|
<li>Results display</li>
|
||
|
|
<li>Statistics cards</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="component">
|
||
|
|
<h2>🎨 CSS</h2>
|
||
|
|
<h3>style.css (500+ lines)</h3>
|
||
|
|
<ul>
|
||
|
|
<li>CSS custom properties</li>
|
||
|
|
<li>Responsive design</li>
|
||
|
|
<li>Gradient backgrounds</li>
|
||
|
|
<li>Card layouts</li>
|
||
|
|
<li>Animations</li>
|
||
|
|
<li>Mobile-first</li>
|
||
|
|
<li>Custom scrollbars</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="component">
|
||
|
|
<h2>⚡ JavaScript</h2>
|
||
|
|
<h3>main.js (300+ lines)</h3>
|
||
|
|
<ul>
|
||
|
|
<li>Task execution</li>
|
||
|
|
<li>API communication</li>
|
||
|
|
<li>Results rendering</li>
|
||
|
|
<li>Statistics tracking</li>
|
||
|
|
<li>Toast notifications</li>
|
||
|
|
<li>localStorage persistence</li>
|
||
|
|
<li>Event handlers</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2 style="text-align: center; color: #667eea; margin: 40px 0 20px">
|
||
|
|
✨ Key Features
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<div class="feature-grid">
|
||
|
|
<div class="feature">
|
||
|
|
<div class="feature-icon">🎯</div>
|
||
|
|
<h4>Jinja2 Templates</h4>
|
||
|
|
<p>
|
||
|
|
Modular template inheritance with blocks for easy
|
||
|
|
customization
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="feature">
|
||
|
|
<div class="feature-icon">🎨</div>
|
||
|
|
<h4>Modern CSS</h4>
|
||
|
|
<p>
|
||
|
|
Variables, gradients, animations, and responsive design
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="feature">
|
||
|
|
<div class="feature-icon">⚡</div>
|
||
|
|
<h4>Interactive JS</h4>
|
||
|
|
<p>
|
||
|
|
Real-time updates, notifications, and persistent
|
||
|
|
statistics
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="feature">
|
||
|
|
<div class="feature-icon">📱</div>
|
||
|
|
<h4>Responsive</h4>
|
||
|
|
<p>Mobile-first design that works on all devices</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="feature">
|
||
|
|
<div class="feature-icon">💾</div>
|
||
|
|
<h4>State Management</h4>
|
||
|
|
<p>localStorage for statistics and user preferences</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="feature">
|
||
|
|
<div class="feature-icon">🔔</div>
|
||
|
|
<h4>Notifications</h4>
|
||
|
|
<p>Toast messages for user feedback</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="feature">
|
||
|
|
<div class="feature-icon">📸</div>
|
||
|
|
<h4>Screenshots</h4>
|
||
|
|
<p>Live browser screenshots with results</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="feature">
|
||
|
|
<div class="feature-icon">📊</div>
|
||
|
|
<h4>Statistics</h4>
|
||
|
|
<p>Track tasks, success rate, and timing</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2 style="text-align: center; color: #667eea; margin: 40px 0 20px">
|
||
|
|
🔄 Request Flow
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<div class="flow-diagram">
|
||
|
|
<div class="flow-step">User Input</div>
|
||
|
|
<span class="flow-arrow">→</span>
|
||
|
|
<div class="flow-step">JavaScript</div>
|
||
|
|
<span class="flow-arrow">→</span>
|
||
|
|
<div class="flow-step">FastAPI</div>
|
||
|
|
<span class="flow-arrow">→</span>
|
||
|
|
<div class="flow-step">LangChain Agent</div>
|
||
|
|
<br /><br />
|
||
|
|
<span class="flow-arrow">↓</span>
|
||
|
|
<br /><br />
|
||
|
|
<div class="flow-step">Playwright</div>
|
||
|
|
<span class="flow-arrow">→</span>
|
||
|
|
<div class="flow-step">Browser</div>
|
||
|
|
<span class="flow-arrow">→</span>
|
||
|
|
<div class="flow-step">Results</div>
|
||
|
|
<span class="flow-arrow">→</span>
|
||
|
|
<div class="flow-step">Display</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2 style="text-align: center; color: #667eea; margin: 40px 0 20px">
|
||
|
|
🚀 Quick Start
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<div class="component">
|
||
|
|
<h3>1. Install Dependencies</h3>
|
||
|
|
<code>uv pip install -e .</code>
|
||
|
|
<code>playwright install chromium</code>
|
||
|
|
|
||
|
|
<h3>2. Configure Environment</h3>
|
||
|
|
<code>cp .env.example .env</code><br />
|
||
|
|
<em>Edit .env and add your OPENAI_API_KEY</em>
|
||
|
|
|
||
|
|
<h3>3. Run Application</h3>
|
||
|
|
<code>python main.py</code><br />
|
||
|
|
<em>Or: uvicorn main:app --reload</em>
|
||
|
|
|
||
|
|
<h3>4. Access Interface</h3>
|
||
|
|
<code>http://localhost:8000</code>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2 style="text-align: center; color: #667eea; margin: 40px 0 20px">
|
||
|
|
🛠️ Customization
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<div class="architecture">
|
||
|
|
<div class="component">
|
||
|
|
<h3>Add New Template</h3>
|
||
|
|
<ol>
|
||
|
|
<li>Create <code>templates/custom.html</code></li>
|
||
|
|
<li>Extend <code>base.html</code></li>
|
||
|
|
<li>Add route in <code>main.py</code></li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="component">
|
||
|
|
<h3>Customize Styles</h3>
|
||
|
|
<ol>
|
||
|
|
<li>Edit CSS variables in <code>style.css</code></li>
|
||
|
|
<li>Modify component styles</li>
|
||
|
|
<li>Add custom classes</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="component">
|
||
|
|
<h3>Add Functionality</h3>
|
||
|
|
<ol>
|
||
|
|
<li>Add functions in <code>main.js</code></li>
|
||
|
|
<li>Create API endpoints</li>
|
||
|
|
<li>Update templates</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 40px;
|
||
|
|
padding: 20px;
|
||
|
|
background: #f9f9f9;
|
||
|
|
border-radius: 12px;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<h3 style="color: #667eea">Built with ❤️</h3>
|
||
|
|
<p>LangChain • Playwright • FastAPI • Jinja2</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|