227 lines
16 KiB
HTML
227 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Сверка договоров — LLM</title>
|
||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
|
||
<script src="https://unpkg.com/lucide@latest"></script>
|
||
<style>
|
||
:root { --brand-primary: #2563eb; --brand-primary-dark: #1d4ed8; --brand-gray: #d1d5db; --brand-grey-light: #f3f4f6; --background: #ffffff; --foreground: #1a1a1a; --muted: #6b7280; --destructive: #ef4444; --green: #22c55e; }
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body { font-family: system-ui, sans-serif; font-size: 14px; color: var(--foreground); background: var(--brand-grey-light); min-height: 100vh; }
|
||
.topbar { background: var(--background); border-bottom: 1px solid var(--brand-gray); padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 50; }
|
||
.topbar img { height: 28px; }
|
||
.topbar .title { font-weight: 600; font-size: 16px; }
|
||
.content { max-width: 900px; margin: 32px auto; padding: 0 16px; }
|
||
.card { background: var(--background); border-radius: 12px; border: 1px solid var(--brand-gray); box-shadow: 0 1px 2px rgba(0,0,0,.05); overflow: hidden; margin-bottom: 16px; }
|
||
.card-header { background: var(--brand-grey-light); padding: 12px 16px; font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 8px; }
|
||
.card-body { padding: 16px; }
|
||
.btn { height: 36px; border-radius: 6px; gap: 6px; padding: 0 14px; font-size: 14px; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; border: 1px solid var(--brand-gray); background: var(--background); }
|
||
.btn-primary { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
|
||
.btn-primary:hover { background: var(--brand-primary-dark); }
|
||
.btn:disabled { opacity: .5; cursor: not-allowed; }
|
||
.table-wrap { border-radius: 6px; border: 1px solid var(--brand-gray); overflow-y: auto; max-height: 50vh; margin-top: 12px; }
|
||
table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||
th { background: var(--brand-grey-light); text-transform: uppercase; padding: 6px 10px; border-right: 1px solid var(--brand-gray); text-align: left; font-weight: 600; font-size: 11px; color: var(--muted); }
|
||
td { padding: 6px 10px; border-right: 1px solid var(--brand-gray); border-bottom: 1px solid var(--brand-gray); }
|
||
tr:hover td { background: rgba(243,244,246,.5); }
|
||
.name-cell { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.num-cell { text-align: right; white-space: nowrap; }
|
||
.status-ok { color: var(--green); }
|
||
.status-err { color: var(--destructive); }
|
||
.summary-row td { background: rgba(34,197,94,.05); font-weight: 600; }
|
||
.empty-row td { color: var(--muted); text-align: center; padding: 24px; }
|
||
.remove-btn { cursor: pointer; color: #f87171; background: none; border: none; padding: 2px 4px; font-size: 16px; line-height: 1; }
|
||
.remove-btn:hover { color: #ef4444; }
|
||
.info-btn { cursor: pointer; color: var(--muted); background: none; border: none; padding: 2px 4px; font-size: 14px; display: none; }
|
||
.info-btn:hover { color: var(--brand-primary); }
|
||
.info-btn.visible { display: inline; }
|
||
.first-row td { background: rgba(37,99,235,.06); font-weight: 600; }
|
||
.arrow-btn { cursor: pointer; color: var(--muted); background: none; border: none; padding: 2px; font-size: 12px; line-height: 1; }
|
||
.arrow-btn:hover { color: var(--brand-primary); }
|
||
.arrow-btn:disabled { opacity: .3; cursor: default; color: var(--muted); }
|
||
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.4); z-index: 100; justify-content: center; align-items: center; }
|
||
.modal-overlay.open { display: flex; }
|
||
.modal { background: var(--background); border-radius: 12px; border: 1px solid var(--brand-gray); box-shadow: 0 4px 24px rgba(0,0,0,.15); max-width: 520px; width: 90%; max-height: 80vh; display: flex; flex-direction: column; }
|
||
.modal.wide { max-width: 900px; }
|
||
.modal-header { padding: 14px 16px; border-bottom: 1px solid var(--brand-gray); display: flex; align-items: center; gap: 8px; font-weight: 600; flex-shrink: 0; }
|
||
.modal-body { padding: 16px; overflow-y: auto; }
|
||
.modal-body .kv { display: flex; margin-bottom: 6px; font-size: 13px; }
|
||
.modal-body .kv .k { color: var(--muted); width: 110px; flex-shrink: 0; }
|
||
.modal-body .kv .v { word-break: break-all; }
|
||
.diff-added { background: rgba(34,197,94,.1); }
|
||
.diff-deleted { background: rgba(239,68,68,.1); }
|
||
.diff-changed { background: rgba(234,179,8,.1); }
|
||
.diff-added td { color: var(--green); }
|
||
.diff-deleted td { color: var(--destructive); text-decoration: line-through; }
|
||
.diff-field-old { color: var(--destructive); text-decoration: line-through; font-size: 11px; }
|
||
.diff-field-new { color: var(--green); font-weight: 600; }
|
||
@keyframes spin { to { transform: rotate(360deg); } }
|
||
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite; }
|
||
.text-panes { display: flex; gap: 0; }
|
||
.text-pane { flex: 1; min-width: 0; overflow-y: auto; max-height: 65vh; }
|
||
.text-pane:first-child { border-right: 1px solid var(--brand-gray); padding-right: 12px; }
|
||
.text-pane:last-child { padding-left: 12px; }
|
||
.text-pane pre { background: var(--brand-grey-light); padding: 10px; border-radius: 6px; font-size: 11px; white-space: pre-wrap; word-break: break-word; overflow-x: auto; margin: 0; max-height: 60vh; overflow-y: auto; }
|
||
.text-pane table { font-size: 11px; width: 100%; }
|
||
.text-pane th { font-size: 10px; padding: 4px 6px; }
|
||
.text-pane td { padding: 3px 6px; font-size: 11px; }
|
||
.text-pane .pane-title { font-weight: 600; font-size: 12px; margin-bottom: 8px; color: var(--muted); text-transform: uppercase; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="topbar">
|
||
<img src="/static/logo.svg" alt="Nubes">
|
||
<span class="title">Сверка договоров — LLM AI-driven Event Sourcing <span style="font-weight:400;color:var(--muted);font-size:12px;">v2.0.0</span></span>
|
||
<div id="pipelineStepper" style="display:flex;gap:8px;font-size:11px;align-items:center;color:var(--muted);">
|
||
<span id="stepUpload">○ Загрузка</span><span>→</span>
|
||
<span id="stepClassify">○ Классификация</span><span>→</span>
|
||
<span id="stepGroups">○ Группировка</span><span>→</span>
|
||
<span id="stepCompare">○ Сравнение</span>
|
||
</div>
|
||
<span style="margin-left:auto;font-size:12px;color:var(--brand-primary);cursor:pointer;white-space:nowrap;" onclick="openAbout()">ℹ️ О сервисе</span>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<i data-lucide="folder-open" style="width:18px;height:18px;"></i>
|
||
Загрузка договоров/приложений/спецификаций
|
||
</div>
|
||
<div class="card-body">
|
||
<input type="file" id="fileInput" accept=".docx,.pdf,.zip" multiple style="margin-bottom:6px;width:100%;">
|
||
<div style="text-align:right;font-size:11px;color:var(--muted);margin-bottom:6px;">Порядок определяется автоматически при классификации</div>
|
||
<div style="font-size:11px;color:var(--muted);margin-bottom:6px;">⚠ При совпадении имён — запрос на перезапись (OK / Отмена). Файлы из ZIP-архивов загружаются через тот же поток.</div>
|
||
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr><th>Имя</th><th style="width:130px;">Изменён</th><th style="width:90px;">Размер</th><th style="width:115px;">Парсинг</th><th style="width:30px;">Текст</th><th style="width:30px;">✕</th></tr>
|
||
</thead>
|
||
<tbody id="fileTable"></tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<button class="btn btn-primary" id="llmBtn" style="width:100%;justify-content:center;margin-top:8px;display:none;background:var(--green);border-color:var(--green);">
|
||
<i data-lucide="scale" style="width:16px;height:16px;"></i> Общее сравнение
|
||
</button>
|
||
|
||
<details style="margin-top:8px;font-size:12px;">
|
||
<summary style="cursor:pointer;color:var(--muted);">⚙ Промпты LLM</summary>
|
||
<div style="display:flex;gap:8px;margin-top:6px;">
|
||
<button class="btn" id="promptBtnExtract" style="font-size:11px;height:28px;flex:1;">📄 Извлечение</button>
|
||
<button class="btn" id="promptBtnDiff" style="font-size:11px;height:28px;flex:1;">🔄 Сравнение</button>
|
||
<button class="btn" id="promptBtnClassify" style="font-size:11px;height:28px;flex:1;">🏷️ Классификация</button>
|
||
</div>
|
||
<div style="display:flex;gap:8px;margin-top:3px;font-size:10px;color:var(--muted);">
|
||
<span style="flex:1;">для базового договора</span>
|
||
<span style="flex:1;">для допсоглашений</span>
|
||
<span style="flex:1;">автоопределение</span>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" id="diffCard" style="display:none;">
|
||
<div class="card-header">
|
||
<i data-lucide="file-diff" style="width:18px;height:18px;"></i>
|
||
Классификация и группы <span id="diffStatus" style="font-weight:400;font-size:12px;margin-left:8px;"></span>
|
||
</div>
|
||
<div class="card-body" id="diffBody"></div>
|
||
</div>
|
||
|
||
<div class="card" id="compareCard" style="display:none;margin-top:16px;">
|
||
<div class="card-header">
|
||
<i data-lucide="scale" style="width:18px;height:18px;"></i>
|
||
Результаты сравнения <span id="compareStatus" style="font-weight:400;font-size:12px;margin-left:8px;"></span>
|
||
</div>
|
||
<div class="card-body" id="compareBody"></div>
|
||
</div>
|
||
|
||
<div class="card" id="chatCard" style="display:none;margin-top:16px;">
|
||
<div class="card-header">
|
||
<i data-lucide="message-circle" style="width:18px;height:18px;"></i>
|
||
Задать вопрос по договору <span style="font-weight:400;font-size:11px;color:var(--muted);">— используются все загруженные документы</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="chatMessages" style="margin-bottom:8px;font-size:13px;"></div>
|
||
<div style="display:flex;gap:8px;">
|
||
<input type="text" id="chatInput" placeholder="Какая общая сумма? Что изменилось? ..." style="flex:1;height:32px;border:1px solid var(--brand-gray);border-radius:6px;padding:0 8px;font-size:13px;">
|
||
<button class="btn btn-primary" id="chatSend" style="height:32px;font-size:13px;">→</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-overlay" id="modalOverlay" onclick="closeModal(event)">
|
||
<div class="modal" onclick="event.stopPropagation()">
|
||
<div class="modal-header">
|
||
<i data-lucide="file-text" style="width:18px;height:18px;"></i>
|
||
<span id="modalTitle">Информация о файле</span>
|
||
<button class="remove-btn" onclick="closeModal()" style="margin-left:auto;font-size:18px;">×</button>
|
||
</div>
|
||
<div class="modal-body" id="modalBody"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-overlay" id="promptModalOverlay" onclick="closePromptModal(event)">
|
||
<div class="modal" style="max-width:680px;" onclick="event.stopPropagation()">
|
||
<div class="modal-header">
|
||
<i data-lucide="settings" style="width:18px;height:18px;"></i>
|
||
<span id="promptModalTitle">Промпт: Сравнение</span>
|
||
<button class="remove-btn" onclick="closePromptModal()" style="margin-left:auto;font-size:18px;">×</button>
|
||
</div>
|
||
<div class="modal-body" style="padding:16px;">
|
||
<div style="display:flex;gap:6px;margin-bottom:4px;">
|
||
<button class="btn" id="promptTabExtract" style="font-size:11px;height:26px;">📄 Извлечение</button>
|
||
<button class="btn" id="promptTabDiff" style="font-size:11px;height:26px;background:var(--brand-primary);color:#fff;">🔄 Сравнение</button>
|
||
<button class="btn" id="promptTabClassify" style="font-size:11px;height:26px;">🏷️ Классификация</button>
|
||
</div>
|
||
<div style="font-size:10px;color:var(--muted);margin-bottom:10px;">
|
||
Извлечение — для базового договора | Сравнение — для допсоглашений | Классификация — автоопределение типа/даты/контрагента
|
||
</div>
|
||
<textarea id="promptEditor" style="width:100%;height:220px;font-family:monospace;font-size:11px;border:1px solid var(--brand-gray);border-radius:6px;padding:8px;box-sizing:border-box;"></textarea>
|
||
<div style="display:flex;gap:8px;margin-top:8px;align-items:center;">
|
||
<input id="promptName" placeholder="Имя версии" style="width:140px;font-size:11px;border:1px solid var(--brand-gray);border-radius:4px;padding:4px 6px;">
|
||
<input id="promptNotes" placeholder="Что изменили" style="flex:1;font-size:11px;border:1px solid var(--brand-gray);border-radius:4px;padding:4px 6px;">
|
||
<button class="btn" id="promptSave" style="font-size:11px;height:28px;background:var(--green);color:#fff;border-color:var(--green);">Сохранить</button>
|
||
</div>
|
||
<span id="promptStatus" style="font-size:11px;color:var(--muted);display:block;margin-top:4px;"></span>
|
||
<div style="margin-top:12px;font-size:11px;color:var(--muted);font-weight:600;">История версий</div>
|
||
<div id="promptHistory" style="max-height:180px;overflow-y:auto;margin-top:4px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-overlay" id="aboutModalOverlay" onclick="closeAbout(event)">
|
||
<div class="modal" style="max-width:720px;" onclick="event.stopPropagation()">
|
||
<div class="modal-header">
|
||
<i data-lucide="info" style="width:18px;height:18px;"></i>
|
||
<span>О сервисе — архитектура и принцип работы</span>
|
||
<button class="remove-btn" onclick="closeAbout()" style="margin-left:auto;font-size:18px;">×</button>
|
||
</div>
|
||
<div class="modal-body" style="padding:16px;font-size:13px;line-height:1.6;max-height:65vh;overflow-y:auto;" id="aboutBody">
|
||
<h3 style="margin-top:0;">Что это</h3>
|
||
<p>Автоматический разбор и сравнение договоров с помощью ИИ (LLM). Загружаете договоры, допсоглашения и спецификации вперемешку — система сама разбирает что есть что, группирует по контрактам и находит все изменения между версиями.</p>
|
||
<h3>Как пользоваться</h3>
|
||
<p><b>1. Загрузка</b> — выберите файлы (.docx, .doc, .pdf, .zip). Можно загружать всё вперемешку. Порядок не важен — классификация разберётся.</p>
|
||
<p><b>2. Классификация</b> — нажмите «Классифицировать». Система через LLM определит тип, номер, дату, контрагента.</p>
|
||
<p><b>3. Группы</b> — документы автоматически группируются по договорам.</p>
|
||
<p><b>4. Сравнение</b> — для каждой группы нажмите «▶ Сравнить». Результат: ADD/UPDATE/DELETE.</p>
|
||
<p><b>5. Промпты</b> — три вида инструкций для ИИ с версионированием.</p>
|
||
<h3>На выходе</h3>
|
||
<p>Структурированная спецификация + полная история изменений с привязкой к документам-источникам.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/static/state.js?v=1.0.179-flask"></script>
|
||
<script src="/static/app_utils.js?v=1.0.179-flask"></script>
|
||
<script src="/static/files.js?v=1.0.179-flask"></script>
|
||
<script src="/static/groups.js?v=1.0.179-flask"></script>
|
||
<script src="/static/compare.js?v=1.0.179-flask"></script>
|
||
<script src="/static/app.js?v=1.0.179-flask"></script>
|
||
</body>
|
||
</html>
|