Files
DevConsole/frontend/index.html
T

211 строки
6.8 KiB
HTML

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DevConsole</title>
<link rel="stylesheet" href="/assets/style.css">
</head>
<body>
<div class="layout">
<aside class="sidebar">
<div class="logo">
<h1>DevConsole</h1>
<span>AI-среда разработки</span>
</div>
<nav>
<a href="#workspace">Проекты</a>
<a href="#android">Android устройства</a>
<a href="#build">Сборка и установка</a>
<a href="#prompts">AI помощник</a>
<a href="#settings">Настройки</a>
</nav>
</aside>
<main class="content">
<section class="card" id="workspace">
<h2>Рабочее пространство проекта</h2>
<input type="text" id="repoUrl" placeholder="Ссылка GitHub репозитория">
<div class="button-row">
<button onclick="analyzeProject()">Анализ проекта</button>
<button onclick="installDependencies()">Установить зависимости</button>
</div>
<pre id="projectResult"></pre>
</section>
<section class="card" id="android">
<h2>Менеджер Android устройств</h2>
<div class="button-row">
<button onclick="loadDevices()">Обновить список устройств</button>
</div>
<div id="devices"></div>
</section>
<section class="card" id="build">
<h2>Сборка и установка APK</h2>
<input type="text" id="workspacePath" placeholder="Путь рабочего пространства проекта">
<div class="button-row">
<button onclick="buildApk()">Собрать APK</button>
<button onclick="installApk()">Установить APK</button>
</div>
<pre id="buildResult"></pre>
</section>
<section class="card" id="prompts">
<h2>AI помощник</h2>
<textarea id="promptInput" placeholder="Опиши ошибку, задачу или генерацию кода..."></textarea>
<button onclick="runPrompt()">Запустить AI задачу</button>
<pre id="promptResult"></pre>
</section>
<section class="card" id="settings">
<h2>Настройки OpenAI</h2>
<input type="password" id="apiKey" placeholder="OpenAI API Key">
<input type="text" id="model" value="gpt-5" placeholder="Модель">
<button onclick="saveSettings()">Сохранить настройки</button>
<div id="settingsResult"></div>
</section>
</main>
</div>
<script>
let selectedDevice = '';
async function api(url, options = {}) {
const response = await fetch(url, options);
return await response.json();
}
async function analyzeProject() {
const repo_url = document.getElementById('repoUrl').value;
document.getElementById('projectResult').innerText = 'Анализ проекта...';
const data = await api('/api/projects/analyze', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ repo_url })
});
if (data.analysis?.workspace) {
document.getElementById('workspacePath').value = data.analysis.workspace;
}
document.getElementById('projectResult').innerText = JSON.stringify(data, null, 2);
}
async function installDependencies() {
const repo_url = document.getElementById('repoUrl').value;
document.getElementById('projectResult').innerText = 'Установка зависимостей...';
const data = await api('/api/projects/install-dependencies', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ repo_url })
});
document.getElementById('projectResult').innerText = JSON.stringify(data, null, 2);
}
async function loadDevices() {
const data = await api('/api/android/devices', {
method: 'POST'
});
const lines = (data.stdout || '').split('\n');
const devices = lines.filter(line => line.includes('device') && !line.includes('List'));
const html = devices.map(device => {
const id = device.split(/\s+/)[0];
return `
<div class="status-item ${selectedDevice === id ? 'active-device' : ''}">
<strong>${id}</strong>
<button onclick="selectDevice('${id}')">Выбрать</button>
</div>
`;
}).join('');
document.getElementById('devices').innerHTML = html || '<p>Устройства не подключены</p>';
}
function selectDevice(id) {
selectedDevice = id;
loadDevices();
}
async function buildApk() {
const workspace = document.getElementById('workspacePath').value;
document.getElementById('buildResult').innerText = 'Сборка APK...';
const data = await api('/api/android/build', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ workspace })
});
document.getElementById('buildResult').innerText = JSON.stringify(data, null, 2);
}
async function installApk() {
const workspace = document.getElementById('workspacePath').value;
document.getElementById('buildResult').innerText = 'Установка APK...';
const data = await api('/api/android/install-latest', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ workspace, device: selectedDevice })
});
document.getElementById('buildResult').innerText = JSON.stringify(data, null, 2);
}
async function saveSettings() {
const api_key = document.getElementById('apiKey').value;
const model = document.getElementById('model').value;
const data = await api('/api/settings/openai', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ api_key, model })
});
document.getElementById('settingsResult').innerText = data.message || data.detail;
}
async function runPrompt() {
const prompt = document.getElementById('promptInput').value;
document.getElementById('promptResult').innerText = 'Выполнение AI задачи...';
const data = await api('/api/prompts/test', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ prompt, task_type: 'coding' })
});
document.getElementById('promptResult').innerText = data.answer || data.detail;
}
loadDevices();
</script>
</body>
</html>