129 lines
4.5 KiB
HTML
129 lines
4.5 KiB
HTML
|
{% 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 %}
|