first commit
This commit is contained in:
bolade
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{% block title %}Manus AI Clone{% endblock %}</title>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link
|
||||
rel="icon"
|
||||
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🤖</text></svg>"
|
||||
/>
|
||||
|
||||
<!-- CSS -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="{{ url_for('static', path='/css/style.css') }}"
|
||||
/>
|
||||
|
||||
{% block extra_css %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="nav-brand">
|
||||
<span class="nav-icon">🤖</span>
|
||||
<span class="nav-title">Manus AI Clone</span>
|
||||
</div>
|
||||
<div class="nav-links">
|
||||
<a href="/" class="nav-link">Home</a>
|
||||
<a href="/health" class="nav-link" target="_blank"
|
||||
>Health</a
|
||||
>
|
||||
<a
|
||||
href="https://github.com"
|
||||
class="nav-link"
|
||||
target="_blank"
|
||||
>GitHub</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">{% block content %}{% endblock %}</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="footer-container">
|
||||
<p>Built with ❤️ using LangChain, Playwright, and FastAPI</p>
|
||||
<p class="footer-links">
|
||||
<a href="https://www.langchain.com/" target="_blank"
|
||||
>LangChain</a
|
||||
>
|
||||
•
|
||||
<a href="https://playwright.dev/" target="_blank"
|
||||
>Playwright</a
|
||||
>
|
||||
•
|
||||
<a href="https://fastapi.tiangolo.com/" target="_blank"
|
||||
>FastAPI</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="{{ url_for('static', path='/js/main.js') }}"></script>
|
||||
|
||||
{% block extra_js %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -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 %}
|
||||
Reference in New Issue
Block a user