{% extends "base.html" %} {% block title %}Manus AI Clone - Browser Automation{%
endblock %} {% block content %}
<div class="hero">
    <div class="hero-content">
        <h1 class="hero-title">AI-Powered Browser Automation</h1>
        <p class="hero-subtitle">
            Control your browser with natural language using LangChain and
            Playwright
        </p>
    </div>
</div>

<div class="container">
    <!-- Examples Section -->
    <div class="examples-card">
        <h4 class="examples-title">💡 Example Prompts</h4>
        <ul class="examples-list">
            <li class="example-item" onclick="fillPrompt(this.textContent)">
                Go to google.com and search for 'LangChain tutorial'
            </li>
            <li class="example-item" onclick="fillPrompt(this.textContent)">
                Navigate to github.com and find the trending repositories
            </li>
            <li class="example-item" onclick="fillPrompt(this.textContent)">
                Go to wikipedia.org and search for 'Artificial Intelligence'
            </li>
            <li class="example-item" onclick="fillPrompt(this.textContent)">
                Open hacker news and get the top story titles
            </li>
        </ul>
    </div>

    <!-- Input Section -->
    <div class="input-section">
        <label for="prompt" class="input-label">
            <span class="label-icon">✨</span>
            What would you like the AI to do?
        </label>
        <textarea
            id="prompt"
            class="prompt-textarea"
            placeholder="e.g., Go to google.com and search for 'Python tutorials'"
            rows="4"
        ></textarea>

        <div class="button-group">
            <button class="btn btn-primary" onclick="executeTask()">
                <span class="btn-icon">🚀</span>
                Execute Task
            </button>
            <button class="btn btn-secondary" onclick="clearResults()">
                <span class="btn-icon">🗑️</span>
                Clear
            </button>
        </div>
    </div>

    <!-- Loading Indicator -->
    <div class="loading" id="loading">
        <div class="spinner"></div>
        <p class="loading-text">AI is working on your task...</p>
        <p class="loading-subtext">This may take a few moments</p>
    </div>

    <!-- Results Section -->
    <div class="results-section" id="results">
        <!-- Result Output -->
        <div class="result-card">
            <h3 class="result-title" id="result-title">
                <span class="result-icon" id="result-icon"></span>
                <span id="result-title-text"></span>
            </h3>
            <div class="result-content">
                <pre class="result-text" id="result-output"></pre>
            </div>
        </div>

        <!-- Action History -->
        <div class="result-card" id="action-history-box">
            <h3 class="result-title">
                <span class="result-icon">📋</span>
                Action History
            </h3>
            <div class="result-content">
                <div class="action-history" id="action-history"></div>
            </div>
        </div>

        <!-- Screenshot -->
        <div class="result-card" id="screenshot-box">
            <h3 class="result-title">
                <span class="result-icon">📸</span>
                Browser Screenshot
            </h3>
            <div class="result-content">
                <div class="screenshot-container">
                    <img id="screenshot" src="" alt="Browser Screenshot" />
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Section -->
    <div class="stats-section">
        <div class="stat-card">
            <div class="stat-icon">🎯</div>
            <div class="stat-content">
                <div class="stat-value" id="total-tasks">0</div>
                <div class="stat-label">Tasks Executed</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">✅</div>
            <div class="stat-content">
                <div class="stat-value" id="successful-tasks">0</div>
                <div class="stat-label">Successful</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">⚡</div>
            <div class="stat-content">
                <div class="stat-value" id="avg-time">0s</div>
                <div class="stat-label">Avg Time</div>
            </div>
        </div>
    </div>
</div>
{% endblock %}