manus_ai_clone/md_files/QUICKSTART.md

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

{% 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

<!-- 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

// 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

// 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

: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:

{
    "prompt": "Your task here"
}

Response:

{
  "success": true,
  "output": "Task result",
  "screenshot": "base64_image_data",
  "action_history": [...]
}

GET /health

Response:

{
    "status": "healthy",
    "agent_initialized": true,
    "model": "gpt-4o-mini"
}

GET /status

Response:

{
  "action_history": [...],
  "current_url": "https://..."
}

🛠️ Common Tasks

Adding a New Page

1. Create templates/newpage.html:

{% extends "base.html" %} {% block content %}
<div class="container">
    <h1>New Page</h1>
</div>
{% endblock %}

2. Add route in main.py:

@app.get("/newpage")
async def new_page(request: Request):
    return templates.TemplateResponse("newpage.html", {"request": request})

Adding Custom CSS

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', path='/css/custom.css') }}" />
{% endblock %}

Adding Custom JavaScript

{% block extra_js %}
<script src="{{ url_for('static', path='/js/custom.js') }}"></script>
{% endblock %}

Passing Data to Template

@app.get("/page")
async def page(request: Request):
    data = {"name": "John", "age": 30}
    return templates.TemplateResponse("page.html", {
        "request": request,
        **data
    })

In template:

<p>Name: {{ name }}</p>
<p>Age: {{ age }}</p>

🎯 Frontend Features

Toast Notifications

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:

: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
• FastAPI Templates
• 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