first commit

2025-11-05 01:03:10 +01:00
commit 5a802e7641
20 changed files with 6161 additions and 0 deletions
@@ -0,0 +1,128 @@
+{% 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 %}