109 lines
5.0 KiB
HTML
109 lines
5.0 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>SUNT - мета-мониторинг ответов БЯМ</title>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css">
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
<header class="topbar">
|
||
<div class="brand">
|
||
<div class="brand-mark" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||
<path d="M4 7h16"></path>
|
||
<path d="M7 4v16"></path>
|
||
<path d="M17 4v16"></path>
|
||
<path d="M4 17h16"></path>
|
||
</svg>
|
||
</div>
|
||
<div class="brand-copy">
|
||
<h1 class="brand-title">SUNT: мета-мониторинг ответов БЯМ</h1>
|
||
<p class="brand-subtitle">Демонстрационный веб-интерфейс чат-бота</p>
|
||
</div>
|
||
</div>
|
||
<div class="status-strip" aria-live="polite">
|
||
<span class="status-dot" id="statusDot"></span>
|
||
<span class="status-text" id="statusText">Готов к работе</span>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="layout">
|
||
<section class="chat-shell" aria-label="Диалог с языковой моделью">
|
||
<div class="messages" id="messagesScroll">
|
||
<div class="messages-inner" id="messages">
|
||
<div class="empty-state" id="emptyState">
|
||
<h2 class="empty-title">Задайте вопрос, получите ответ и проверьте его качество.</h2>
|
||
<p class="empty-text">После обычной генерации появится отдельный запуск мета-мониторинга с оценкой фактической корректности, полноты и логической согласованности.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="notice" id="notice" role="alert"></div>
|
||
|
||
<form class="composer" id="chatForm" novalidate>
|
||
<div class="composer-inner">
|
||
<div class="mode-actions">
|
||
<div class="mode-indicator" aria-live="polite">
|
||
<span class="mode-pill" id="modePill">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
|
||
<path d="M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"></path>
|
||
</svg>
|
||
<span id="modeText">Стандартный ответ</span>
|
||
</span>
|
||
</div>
|
||
<button class="meta-button" id="metaButton" type="button" disabled>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
|
||
<path d="M9 11l3 3L22 4"></path>
|
||
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
|
||
</svg>
|
||
<span id="metaButtonText">Провести мета-мониторинг ответа</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="input-frame">
|
||
<label class="sr-only" for="promptInput">Текстовый запрос пользователя</label>
|
||
<textarea class="chat-input" id="promptInput" rows="1" placeholder="Введите запрос..."></textarea>
|
||
<button class="send-button" id="sendButton" type="submit" disabled title="Отправить">
|
||
<svg id="sendIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
|
||
<path d="M22 2L11 13"></path>
|
||
<path d="M22 2l-7 20-4-9-9-4 20-7z"></path>
|
||
</svg>
|
||
<svg id="stopIcon" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" hidden>
|
||
<rect x="7" y="7" width="10" height="10" rx="1.5"></rect>
|
||
</svg>
|
||
<span class="sr-only" id="sendButtonLabel">Отправить сообщение</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="hint-row">
|
||
<span id="limitHint">До 2000 символов</span>
|
||
<span><span class="kbd">Enter</span> отправить, <span class="kbd">Shift</span> + <span class="kbd">Enter</span> новая строка</span>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<template id="messageTemplate">
|
||
<article class="message">
|
||
<div class="avatar" aria-hidden="true"></div>
|
||
<div class="bubble">
|
||
<div class="bubble-head">
|
||
<span class="sender"></span>
|
||
<span class="state"></span>
|
||
</div>
|
||
<div class="bubble-text"></div>
|
||
</div>
|
||
</article>
|
||
</template>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|