Grigo
117 lines
4.9 KiB
HTML
117 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI Chat</title>
|
|
<link rel="stylesheet" href="/static/css/app.css">
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<button id="sidebarToggle" type="button">☰</button>
|
|
<h1>🤖 AI Chat</h1>
|
|
<span class="header-title" id="headerTitle">Новый чат</span>
|
|
</header>
|
|
|
|
<div class="app-body">
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar-header">
|
|
<span>Чаты</span>
|
|
<button id="newChatBtn" type="button">+ Новый</button>
|
|
</div>
|
|
<div class="session-list" id="sessionList"></div>
|
|
</aside>
|
|
|
|
<div class="main">
|
|
<div class="persona-bar" id="personaBar"></div>
|
|
<div class="messages" id="messages">
|
|
<div class="empty-state" id="emptyState">
|
|
<span class="big">💬</span>
|
|
<span>Начни новый чат</span>
|
|
</div>
|
|
</div>
|
|
<div class="input-area">
|
|
<button id="clearBtn" type="button" title="Очистить историю">🗑</button>
|
|
<textarea id="input" rows="1"
|
|
placeholder="Напиши сообщение... (Enter — отправить, Shift+Enter — новая строка)"></textarea>
|
|
<button id="sendBtn" type="button">➤</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="modalOverlay">
|
|
<div class="modal">
|
|
<h2>✨ Новый персонаж</h2>
|
|
<label>ID (латиницей)
|
|
<input type="text" id="pId" placeholder="my_hero">
|
|
</label>
|
|
<label>Имя
|
|
<input type="text" id="pName" placeholder="Мой герой">
|
|
</label>
|
|
<label>Эмодзи
|
|
<input type="text" id="pEmoji" placeholder="🦸" maxlength="4">
|
|
</label>
|
|
<label>Описание
|
|
<input type="text" id="pDesc" placeholder="Краткое описание">
|
|
</label>
|
|
<label>Системный промт
|
|
<textarea id="pPrompt" rows="4" placeholder="Ты — ..."></textarea>
|
|
</label>
|
|
<label><input type="checkbox" id="pSdEnabled"> Генерировать SD-промпт</label>
|
|
<label>LoRA
|
|
<input type="text" id="pLora" placeholder="CharacterLoRA">
|
|
</label>
|
|
<label>Теги внешности (SD)
|
|
<input type="text" id="pAppearance" placeholder="blue hair, elf ears">
|
|
</label>
|
|
<div class="modal-buttons">
|
|
<button id="modalCancel" type="button">Отмена</button>
|
|
<button id="modalSave" type="button">Создать</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="cardModalOverlay">
|
|
<div class="modal">
|
|
<h2>📥 Импорт карточки (chub.io / V2)</h2>
|
|
<label>Файл JSON или PNG
|
|
<input type="file" id="cardFile" accept=".json,.png">
|
|
</label>
|
|
<label>LoRA
|
|
<input type="text" id="cardLora" placeholder="CharacterLoRA">
|
|
</label>
|
|
<label>Вес LoRA
|
|
<input type="number" id="cardLoraWeight" value="0.8" min="0" max="2" step="0.1">
|
|
</label>
|
|
<div class="modal-buttons">
|
|
<button id="cardModalCancel" type="button">Отмена</button>
|
|
<button id="cardModalImport" type="button">Импорт</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="cardEditOverlay">
|
|
<div class="modal" style="max-width:560px;max-height:90vh;overflow-y:auto">
|
|
<h2>✏️ Редактор карточки</h2>
|
|
<input type="hidden" id="editCardId">
|
|
<label>Имя <input type="text" id="editName"></label>
|
|
<label>Описание <textarea id="editDescription" rows="4"></textarea></label>
|
|
<label>Личность <textarea id="editPersonality" rows="3"></textarea></label>
|
|
<label>Сценарий <textarea id="editScenario" rows="3"></textarea></label>
|
|
<label>Первое сообщение <textarea id="editFirstMes" rows="3"></textarea></label>
|
|
<label>Пример диалога <textarea id="editMesExample" rows="3"></textarea></label>
|
|
<label>Теги внешности (SD) <input type="text" id="editAppearance" placeholder="silver hair, yellow eyes, wolf ears, black cloak"></label>
|
|
<label>LoRA <input type="text" id="editLora" placeholder="CharacterLoRA"></label>
|
|
<label>Вес LoRA <input type="number" id="editLoraWeight" value="0.8" min="0" max="2" step="0.1"></label>
|
|
<div class="modal-buttons">
|
|
<button id="cardEditCancel" type="button">Отмена</button>
|
|
<button id="cardEditSave" type="button" style="background:#e94560;color:white">Сохранить</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/static/js/app.js"></script>
|
|
</body>
|
|
</html>
|