first commit
This commit is contained in:
bolade
@@ -0,0 +1,265 @@
|
||||
# Frontend Structure Documentation
|
||||
|
||||
## Overview
|
||||
|
||||
The Manus AI Clone now uses a professional frontend structure with Jinja2 templates and separated static assets (CSS/JS).
|
||||
|
||||
## Directory Structure
|
||||
|
||||
```
|
||||
manus_ai_clone/
|
||||
├── templates/ # Jinja2 HTML templates
|
||||
│ ├── base.html # Base template with common layout
|
||||
│ └── index.html # Home page template
|
||||
├── static/ # Static assets
|
||||
│ ├── css/
|
||||
│ │ └── style.css # Main stylesheet
|
||||
│ └── js/
|
||||
│ └── main.js # Frontend JavaScript
|
||||
├── browser_agent.py # Browser automation logic
|
||||
├── main.py # FastAPI application
|
||||
└── pyproject.toml # Project dependencies
|
||||
```
|
||||
|
||||
## Template System
|
||||
|
||||
### base.html
|
||||
|
||||
- Base template with common layout structure
|
||||
- Includes navigation bar and footer
|
||||
- Provides blocks for extending pages
|
||||
- Links to static CSS and JS files
|
||||
|
||||
**Blocks available:**
|
||||
|
||||
- `{% block title %}` - Page title
|
||||
- `{% block extra_css %}` - Additional CSS
|
||||
- `{% block content %}` - Main content
|
||||
- `{% block extra_js %}` - Additional JavaScript
|
||||
|
||||
### index.html
|
||||
|
||||
- Extends base.html
|
||||
- Main application interface
|
||||
- Includes:
|
||||
- Hero section with title
|
||||
- Example prompts
|
||||
- Input textarea for user prompts
|
||||
- Action buttons
|
||||
- Loading indicator
|
||||
- Results display with screenshots
|
||||
- Statistics cards
|
||||
|
||||
## Static Assets
|
||||
|
||||
### CSS (style.css)
|
||||
|
||||
Features:
|
||||
|
||||
- CSS custom properties for theming
|
||||
- Responsive design with media queries
|
||||
- Modern gradient backgrounds
|
||||
- Card-based layouts
|
||||
- Smooth animations and transitions
|
||||
- Custom scrollbar styling
|
||||
- Hover effects
|
||||
|
||||
Key sections:
|
||||
|
||||
- Variables and reset
|
||||
- Navigation bar
|
||||
- Hero section
|
||||
- Input forms
|
||||
- Buttons and controls
|
||||
- Loading indicators
|
||||
- Results display
|
||||
- Action history
|
||||
- Statistics cards
|
||||
- Footer
|
||||
|
||||
### JavaScript (main.js)
|
||||
|
||||
Features:
|
||||
|
||||
- Task execution with API calls
|
||||
- Real-time loading states
|
||||
- Results rendering
|
||||
- Screenshot display
|
||||
- Action history tracking
|
||||
- Statistics tracking (localStorage)
|
||||
- Toast notifications
|
||||
- Error handling
|
||||
- Keyboard shortcuts
|
||||
|
||||
Key functions:
|
||||
|
||||
- `executeTask()` - Execute browser automation
|
||||
- `displayResults()` - Render task results
|
||||
- `clearResults()` - Clear UI
|
||||
- `fillPrompt()` - Fill example prompts
|
||||
- `showNotification()` - Toast messages
|
||||
- `loadStats()` / `saveStats()` - Statistics persistence
|
||||
|
||||
## Usage
|
||||
|
||||
### Running the Application
|
||||
|
||||
```bash
|
||||
# Install dependencies
|
||||
uv pip install -e .
|
||||
|
||||
# Start the server
|
||||
python main.py
|
||||
|
||||
# Or with uvicorn
|
||||
uvicorn main:app --reload --host 0.0.0.0 --port 8000
|
||||
```
|
||||
|
||||
### Creating Custom Templates
|
||||
|
||||
1. Create a new template in `templates/`:
|
||||
|
||||
```html
|
||||
{% extends "base.html" %} {% block title %}Custom Page{% endblock %} {% block
|
||||
content %}
|
||||
<div class="container">
|
||||
<h1>Custom Content</h1>
|
||||
</div>
|
||||
{% endblock %}
|
||||
```
|
||||
|
||||
2. Add route in `main.py`:
|
||||
|
||||
```python
|
||||
@app.get("/custom")
|
||||
async def custom_page(request: Request):
|
||||
return templates.TemplateResponse("custom.html", {"request": request})
|
||||
```
|
||||
|
||||
### Adding Custom Styles
|
||||
|
||||
Add to `static/css/style.css`:
|
||||
|
||||
```css
|
||||
.custom-class {
|
||||
/* Your styles */
|
||||
}
|
||||
```
|
||||
|
||||
Or create a new CSS file and link in template:
|
||||
|
||||
```html
|
||||
{% block extra_css %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='/css/custom.css') }}" />
|
||||
{% endblock %}
|
||||
```
|
||||
|
||||
### Adding Custom JavaScript
|
||||
|
||||
Add to `static/js/main.js` or create new file:
|
||||
|
||||
```html
|
||||
{% block extra_js %}
|
||||
<script src="{{ url_for('static', path='/js/custom.js') }}"></script>
|
||||
{% endblock %}
|
||||
```
|
||||
|
||||
## Features
|
||||
|
||||
### Statistics Tracking
|
||||
|
||||
- Persistent across sessions (localStorage)
|
||||
- Tracks total tasks, successful tasks, and average time
|
||||
- Can be reset with `resetStats()` function
|
||||
|
||||
### Toast Notifications
|
||||
|
||||
- Success, error, info, warning types
|
||||
- Auto-dismiss after 3 seconds
|
||||
- Slide-in animation
|
||||
|
||||
### Example Prompts
|
||||
|
||||
- Click any example to fill the input
|
||||
- Helps users understand capabilities
|
||||
|
||||
### Keyboard Shortcuts
|
||||
|
||||
- `Enter` - Execute task
|
||||
- `Shift+Enter` - New line in textarea
|
||||
|
||||
### Responsive Design
|
||||
|
||||
- Mobile-first approach
|
||||
- Breakpoints for tablets and desktops
|
||||
- Collapsible navigation on mobile
|
||||
|
||||
## Customization
|
||||
|
||||
### Theming
|
||||
|
||||
Edit CSS variables in `style.css`:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--primary-color: #667eea;
|
||||
--secondary-color: #764ba2;
|
||||
--success-color: #4caf50;
|
||||
/* etc. */
|
||||
}
|
||||
```
|
||||
|
||||
### Adding New API Endpoints
|
||||
|
||||
```python
|
||||
@app.get("/api/custom")
|
||||
async def custom_endpoint():
|
||||
return {"message": "Custom response"}
|
||||
```
|
||||
|
||||
### Adding New Templates
|
||||
|
||||
1. Create template in `templates/`
|
||||
2. Register route in `main.py`
|
||||
3. Use `templates.TemplateResponse()`
|
||||
|
||||
## Development Tips
|
||||
|
||||
1. **Hot Reload**: Use `--reload` flag with uvicorn for development
|
||||
2. **Debug Mode**: Check browser console for JavaScript errors
|
||||
3. **Template Errors**: FastAPI shows detailed template errors in browser
|
||||
4. **Static Files**: Changes to CSS/JS are cached - hard refresh (Ctrl+Shift+R)
|
||||
|
||||
## Browser Compatibility
|
||||
|
||||
- Chrome/Edge: ✅ Full support
|
||||
- Firefox: ✅ Full support
|
||||
- Safari: ✅ Full support
|
||||
- Mobile browsers: ✅ Responsive design
|
||||
|
||||
## Performance Considerations
|
||||
|
||||
- Static files are cached by browser
|
||||
- Screenshots are base64 encoded (may be large)
|
||||
- Action history limited to prevent DOM bloat
|
||||
- Statistics stored in localStorage (5-10MB limit)
|
||||
|
||||
## Security Notes
|
||||
|
||||
- CORS enabled for same-origin only
|
||||
- No authentication included (add if exposing publicly)
|
||||
- API keys loaded from environment variables
|
||||
- User input sanitized by FastAPI/Pydantic
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
Potential additions:
|
||||
|
||||
- Dark mode toggle
|
||||
- Export results as PDF
|
||||
- WebSocket for real-time updates
|
||||
- User authentication
|
||||
- Task history database
|
||||
- Screenshot comparison
|
||||
- Recording browser sessions
|
||||
- Multi-language support
|
||||
Reference in New Issue
Block a user