first commit
This commit is contained in:
bolade
@@ -0,0 +1,357 @@
|
||||
# Quick Reference Guide - Manus AI Clone Frontend
|
||||
|
||||
## 📁 File Structure
|
||||
|
||||
```
|
||||
templates/
|
||||
├── base.html # Base layout template
|
||||
└── index.html # Main page
|
||||
|
||||
static/
|
||||
├── css/
|
||||
│ └── style.css # All styles
|
||||
└── js/
|
||||
└── main.js # All JavaScript
|
||||
```
|
||||
|
||||
## 🎨 Template Usage
|
||||
|
||||
### Extending Base Template
|
||||
|
||||
```html
|
||||
{% extends "base.html" %} {% block title %}Your Title{% endblock %} {% block
|
||||
content %}
|
||||
<!-- Your content here -->
|
||||
{% endblock %}
|
||||
```
|
||||
|
||||
### Available Blocks
|
||||
|
||||
- `{% block title %}` - Page title
|
||||
- `{% block extra_css %}` - Additional CSS files
|
||||
- `{% block content %}` - Main content
|
||||
- `{% block extra_js %}` - Additional JS files
|
||||
|
||||
### Static File URLs
|
||||
|
||||
```html
|
||||
<!-- CSS -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}" />
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="{{ url_for('static', path='/js/main.js') }}"></script>
|
||||
|
||||
<!-- Images -->
|
||||
<img src="{{ url_for('static', path='/images/logo.png') }}" />
|
||||
```
|
||||
|
||||
## ⚡ JavaScript API
|
||||
|
||||
### Main Functions
|
||||
|
||||
```javascript
|
||||
// Execute a browser task
|
||||
executeTask();
|
||||
|
||||
// Clear results display
|
||||
clearResults();
|
||||
|
||||
// Fill prompt with text
|
||||
fillPrompt(text);
|
||||
|
||||
// Show notification
|
||||
showNotification(message, type); // types: 'success', 'error', 'info', 'warning'
|
||||
|
||||
// Statistics
|
||||
loadStats();
|
||||
saveStats();
|
||||
updateStatsDisplay();
|
||||
resetStats();
|
||||
```
|
||||
|
||||
### Event Handlers
|
||||
|
||||
- Enter key in textarea → Execute task
|
||||
- Shift+Enter → New line
|
||||
- Click example → Fill prompt
|
||||
|
||||
### State Management
|
||||
|
||||
```javascript
|
||||
// Statistics stored in localStorage
|
||||
taskStats = {
|
||||
total: 0,
|
||||
successful: 0,
|
||||
times: [],
|
||||
};
|
||||
```
|
||||
|
||||
## 🎨 CSS Classes
|
||||
|
||||
### Layout
|
||||
|
||||
- `.container` - Main content container
|
||||
- `.hero` - Hero section
|
||||
- `.nav-container` - Navigation wrapper
|
||||
|
||||
### Components
|
||||
|
||||
- `.btn` - Button base
|
||||
- `.btn-primary` - Primary action button
|
||||
- `.btn-secondary` - Secondary button
|
||||
- `.result-card` - Result display card
|
||||
- `.stat-card` - Statistics card
|
||||
- `.action-item` - Action history item
|
||||
|
||||
### States
|
||||
|
||||
- `.active` - Show element
|
||||
- `.hidden` - Hide element
|
||||
- `.loading` - Loading state
|
||||
- `success-icon` - Success styling
|
||||
- `error-icon` - Error styling
|
||||
|
||||
### Custom Properties
|
||||
|
||||
```css
|
||||
:root {
|
||||
--primary-color: #667eea;
|
||||
--secondary-color: #764ba2;
|
||||
--success-color: #4caf50;
|
||||
--error-color: #f44336;
|
||||
--warning-color: #ffc107;
|
||||
}
|
||||
```
|
||||
|
||||
## 🔌 API Endpoints
|
||||
|
||||
### GET /
|
||||
|
||||
Returns: HTML page (index.html template)
|
||||
|
||||
### POST /execute
|
||||
|
||||
Request:
|
||||
|
||||
```json
|
||||
{
|
||||
"prompt": "Your task here"
|
||||
}
|
||||
```
|
||||
|
||||
Response:
|
||||
|
||||
```json
|
||||
{
|
||||
"success": true,
|
||||
"output": "Task result",
|
||||
"screenshot": "base64_image_data",
|
||||
"action_history": [...]
|
||||
}
|
||||
```
|
||||
|
||||
### GET /health
|
||||
|
||||
Response:
|
||||
|
||||
```json
|
||||
{
|
||||
"status": "healthy",
|
||||
"agent_initialized": true,
|
||||
"model": "gpt-4o-mini"
|
||||
}
|
||||
```
|
||||
|
||||
### GET /status
|
||||
|
||||
Response:
|
||||
|
||||
```json
|
||||
{
|
||||
"action_history": [...],
|
||||
"current_url": "https://..."
|
||||
}
|
||||
```
|
||||
|
||||
## 🛠️ Common Tasks
|
||||
|
||||
### Adding a New Page
|
||||
|
||||
1. Create `templates/newpage.html`:
|
||||
|
||||
```html
|
||||
{% extends "base.html" %} {% block content %}
|
||||
<div class="container">
|
||||
<h1>New Page</h1>
|
||||
</div>
|
||||
{% endblock %}
|
||||
```
|
||||
|
||||
2. Add route in `main.py`:
|
||||
|
||||
```python
|
||||
@app.get("/newpage")
|
||||
async def new_page(request: Request):
|
||||
return templates.TemplateResponse("newpage.html", {"request": request})
|
||||
```
|
||||
|
||||
### Adding Custom CSS
|
||||
|
||||
```html
|
||||
{% block extra_css %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='/css/custom.css') }}" />
|
||||
{% endblock %}
|
||||
```
|
||||
|
||||
### Adding Custom JavaScript
|
||||
|
||||
```html
|
||||
{% block extra_js %}
|
||||
<script src="{{ url_for('static', path='/js/custom.js') }}"></script>
|
||||
{% endblock %}
|
||||
```
|
||||
|
||||
### Passing Data to Template
|
||||
|
||||
```python
|
||||
@app.get("/page")
|
||||
async def page(request: Request):
|
||||
data = {"name": "John", "age": 30}
|
||||
return templates.TemplateResponse("page.html", {
|
||||
"request": request,
|
||||
**data
|
||||
})
|
||||
```
|
||||
|
||||
In template:
|
||||
|
||||
```html
|
||||
<p>Name: {{ name }}</p>
|
||||
<p>Age: {{ age }}</p>
|
||||
```
|
||||
|
||||
## 🎯 Frontend Features
|
||||
|
||||
### Toast Notifications
|
||||
|
||||
```javascript
|
||||
showNotification("Success!", "success");
|
||||
showNotification("Error occurred", "error");
|
||||
showNotification("Info message", "info");
|
||||
showNotification("Warning!", "warning");
|
||||
```
|
||||
|
||||
### Statistics Tracking
|
||||
|
||||
Automatically tracked:
|
||||
|
||||
- Total tasks executed
|
||||
- Successful tasks
|
||||
- Average execution time
|
||||
|
||||
Stored in browser localStorage, persists across sessions.
|
||||
|
||||
### Example Prompts
|
||||
|
||||
Click any example to auto-fill the prompt textarea.
|
||||
|
||||
### Screenshot Display
|
||||
|
||||
Automatically shows browser screenshot after task execution.
|
||||
|
||||
### Action History
|
||||
|
||||
Shows all browser actions performed:
|
||||
|
||||
- Navigate
|
||||
- Click
|
||||
- Type
|
||||
- Scroll
|
||||
- Get text
|
||||
- Execute JavaScript
|
||||
|
||||
## 🎨 Customization
|
||||
|
||||
### Change Theme Colors
|
||||
|
||||
Edit in `static/css/style.css`:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--primary-color: #your-color;
|
||||
--secondary-color: #your-color;
|
||||
}
|
||||
```
|
||||
|
||||
### Modify Layout
|
||||
|
||||
Edit `templates/base.html` to change:
|
||||
|
||||
- Navigation structure
|
||||
- Footer content
|
||||
- Meta tags
|
||||
- External links
|
||||
|
||||
### Customize Home Page
|
||||
|
||||
Edit `templates/index.html` to change:
|
||||
|
||||
- Hero section
|
||||
- Example prompts
|
||||
- Input form
|
||||
- Results layout
|
||||
|
||||
## 🔧 Development Tips
|
||||
|
||||
1. **Auto-reload**: Use `uvicorn main:app --reload` for hot reloading
|
||||
2. **Template errors**: Check FastAPI error pages for detailed info
|
||||
3. **CSS changes**: Hard refresh (Ctrl+Shift+R) to bypass cache
|
||||
4. **JS debugging**: Use browser DevTools console
|
||||
5. **API testing**: Use `/docs` for Swagger UI
|
||||
|
||||
## 📱 Responsive Breakpoints
|
||||
|
||||
- Desktop: > 768px
|
||||
- Tablet: 768px
|
||||
- Mobile: < 768px
|
||||
|
||||
Customized layouts for each breakpoint in `style.css`.
|
||||
|
||||
## 🚀 Performance
|
||||
|
||||
- Static files cached by browser
|
||||
- Minimal external dependencies
|
||||
- Optimized animations (GPU-accelerated)
|
||||
- Lazy loading for images
|
||||
- Debounced events
|
||||
|
||||
## 📚 Resources
|
||||
|
||||
- [Jinja2 Documentation](https://jinja.palletsprojects.com/)
|
||||
- [FastAPI Templates](https://fastapi.tiangolo.com/advanced/templates/)
|
||||
- [Static Files](https://fastapi.tiangolo.com/tutorial/static-files/)
|
||||
|
||||
## 🐛 Troubleshooting
|
||||
|
||||
**Templates not loading?**
|
||||
|
||||
- Check `BASE_DIR` path in `main.py`
|
||||
- Verify template files exist in `templates/`
|
||||
|
||||
**Static files 404?**
|
||||
|
||||
- Check static mount in `main.py`
|
||||
- Verify files exist in `static/css/` or `static/js/`
|
||||
- Use correct `url_for()` syntax
|
||||
|
||||
**JavaScript not working?**
|
||||
|
||||
- Check browser console for errors
|
||||
- Verify API endpoints are responding
|
||||
- Check CORS settings
|
||||
|
||||
**Styles not applying?**
|
||||
|
||||
- Hard refresh browser (Ctrl+Shift+R)
|
||||
- Check CSS file path
|
||||
- Inspect element in DevTools
|
||||
Reference in New Issue
Block a user