194 lines
9.9 KiB
HTML
194 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MCP Server - AI Code Editor</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<link href="/static/style.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<!-- Sidebar -->
|
|
<div class="col-md-3 sidebar">
|
|
<div class="sidebar-header">
|
|
<h3><i class="fas fa-robot"></i> MCP Server</h3>
|
|
<p class="text-muted">AI-powered code editing</p>
|
|
</div>
|
|
|
|
<div class="sidebar-content">
|
|
<div class="form-section">
|
|
<h5><i class="fas fa-cog"></i> Configuration</h5>
|
|
|
|
<div class="mb-3">
|
|
<label for="repoUrl" class="form-label">Gitea Repository URL</label>
|
|
<input type="url" class="form-control" id="repoUrl"
|
|
placeholder="http://157.66.191.31:3000/user/repo.git">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="giteaToken" class="form-label">Gitea Token</label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control" id="giteaToken"
|
|
placeholder="Enter your Gitea token">
|
|
<button class="btn btn-outline-secondary" type="button" id="toggleGiteaToken">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
<div class="form-text">
|
|
<small>
|
|
Get your token from Gitea: Settings → Applications → Generate new token
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h5><i class="fas fa-brain"></i> AI Configuration</h5>
|
|
|
|
<div class="mb-3">
|
|
<label for="aiModel" class="form-label">AI Model</label>
|
|
<select class="form-select" id="aiModel">
|
|
<option value="gemini">Gemini CLI</option>
|
|
<option value="openai">OpenAI</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="modelName" class="form-label">Model Name</label>
|
|
<input type="text" class="form-control" id="modelName"
|
|
placeholder="gemini-1.5-pro" value="gemini-1.5-pro">
|
|
<div class="form-text">
|
|
<small>
|
|
<strong>Gemini:</strong> gemini-1.5-pro, gemini-1.5-flash, etc.<br>
|
|
<strong>OpenAI:</strong> gpt-4, gpt-3.5-turbo, etc.
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="apiKey" class="form-label">API Key</label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control" id="apiKey"
|
|
placeholder="Enter your API key">
|
|
<button class="btn btn-outline-secondary" type="button" id="toggleApiKey">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
<div class="form-text">
|
|
<small>
|
|
<strong>Gemini:</strong> Get your API key from <a href="https://makersuite.google.com/app/apikey" target="_blank">Google AI Studio</a><br>
|
|
<strong>OpenAI:</strong> Get your API key from <a href="https://platform.openai.com/api-keys" target="_blank">OpenAI Platform</a>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h5><i class="fas fa-magic"></i> AI Prompt</h5>
|
|
<div class="mb-3">
|
|
<label for="prompt" class="form-label">What would you like to do?</label>
|
|
<textarea class="form-control" id="prompt" rows="4"
|
|
placeholder="Describe the changes you want to make to the code..."></textarea>
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-primary w-100" id="processBtn">
|
|
<i class="fas fa-play"></i> Process Repository
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="col-md-9 main-content">
|
|
<div class="content-header">
|
|
<h2>Repository Processing</h2>
|
|
<div class="status-indicator" id="statusIndicator">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Ready</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-body">
|
|
<!-- Progress Section -->
|
|
<div class="card mb-4" id="progressCard" style="display: none;">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-tasks"></i> Processing Progress</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="progress mb-3">
|
|
<div class="progress-bar" id="progressBar" role="progressbar" style="width: 0%"></div>
|
|
</div>
|
|
<div class="progress-steps">
|
|
<div class="step" data-step="clone">
|
|
<span class="step-icon"></span>
|
|
<span>Clone Repository</span>
|
|
<span class="step-label"></span>
|
|
</div>
|
|
<div class="step" data-step="ai">
|
|
<span class="step-icon"></span>
|
|
<span>AI Analysis</span>
|
|
<span class="step-label"></span>
|
|
</div>
|
|
<div class="step" data-step="commit">
|
|
<span class="step-icon"></span>
|
|
<span>Commit & Push</span>
|
|
<span class="step-label"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Log Section -->
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5><i class="fas fa-terminal"></i> Processing Log</h5>
|
|
<button class="btn btn-sm btn-outline-secondary" id="clearLog">
|
|
<i class="fas fa-trash"></i> Clear
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="log-container" id="logContainer">
|
|
<div class="log-entry info">
|
|
<span class="timestamp">[System]</span>
|
|
<span class="message">Ready to process repository. Fill in the details and click "Process Repository".</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Model Output Section -->
|
|
<div class="card mt-4" id="aiOutputCard" style="display: none;">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-robot"></i> AI Model Output</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<pre id="aiOutput" style="white-space: pre-wrap; word-break: break-word;"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading Modal -->
|
|
<div class="modal fade" id="loadingModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-body text-center">
|
|
<div class="spinner-border text-primary mb-3" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
<h5>Processing Repository</h5>
|
|
<p class="text-muted">This may take a few minutes...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/static/script.js"></script>
|
|
</body>
|
|
</html> |