manus_ai_clone/md_files/FRONTEND.md

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

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

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

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

.custom-class {
    /* Your styles */
}

Or create a new CSS file and link in template:

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

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

:root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --success-color: #4caf50;
    /* etc. */
}

Adding New API Endpoints

@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