135 lines
6.2 KiB
HTML
135 lines
6.2 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="color-scheme" content="light dark" />
|
|
<title>L2 Market Parser</title>
|
|
</head>
|
|
<body>
|
|
<div id="app" class="app-shell">
|
|
<header class="app-header">
|
|
<div>
|
|
<p class="eyebrow">Локальный прототип</p>
|
|
<h1>L2 Market Parser</h1>
|
|
</div>
|
|
<div id="global-status" class="status" data-tone="neutral" role="status" aria-live="polite">
|
|
Готов к работе
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="step-nav" aria-label="Разделы">
|
|
<button class="step-nav__item is-active" type="button" data-view="sources" aria-current="page">
|
|
<span>1</span> Источники
|
|
</button>
|
|
<button class="step-nav__item" type="button" data-view="calibration">
|
|
<span>2</span> Калибровка
|
|
</button>
|
|
<button class="step-nav__item" type="button" data-view="results">
|
|
<span>3</span> Результат
|
|
</button>
|
|
</nav>
|
|
|
|
<main>
|
|
<section id="view-sources" class="view is-active" aria-labelledby="sources-title">
|
|
<div class="section-heading">
|
|
<div>
|
|
<p class="eyebrow">Захват экрана</p>
|
|
<h2 id="sources-title">Окна игры</h2>
|
|
<p>Добавь каждое окно отдельно. Браузер спросит, какое окно разрешено захватывать.</p>
|
|
</div>
|
|
<button id="add-source" class="button button--primary" type="button">Добавить окно</button>
|
|
</div>
|
|
<div id="source-list" class="source-list"></div>
|
|
</section>
|
|
|
|
<section id="view-calibration" class="view" aria-labelledby="calibration-title" hidden>
|
|
<div class="section-heading section-heading--compact">
|
|
<div>
|
|
<p class="eyebrow">Образец интерфейса</p>
|
|
<h2 id="calibration-title">Калибровка</h2>
|
|
<p>Сначала отметь небольшой неизменяемый якорь, затем области с названием и ценой.</p>
|
|
</div>
|
|
<div class="button-row">
|
|
<select id="calibration-source" aria-label="Окно для снимка"></select>
|
|
<button id="capture-reference" class="button" type="button">Снимок из окна</button>
|
|
<label class="button file-button">
|
|
Загрузить скриншот
|
|
<input id="reference-file" type="file" accept="image/*" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="calibration-layout">
|
|
<div class="canvas-stage">
|
|
<div id="canvas-empty" class="empty-state">
|
|
<strong>Нужен скриншот</strong>
|
|
<span>Сделай снимок выбранного окна или загрузи готовое изображение.</span>
|
|
</div>
|
|
<canvas id="calibration-canvas" hidden></canvas>
|
|
</div>
|
|
|
|
<aside class="inspector" aria-label="Настройки калибровки">
|
|
<div class="field-stack">
|
|
<label for="region-type">Что выделяем</label>
|
|
<select id="region-type">
|
|
<option value="anchor">Якорь окна торговли</option>
|
|
<option value="item">Название предмета</option>
|
|
<option value="price">Цена</option>
|
|
<option value="quantity">Количество</option>
|
|
<option value="text">Другой текст</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="field-stack">
|
|
<label for="region-label">Подпись поля</label>
|
|
<input id="region-label" type="text" placeholder="Например, Цена 1" />
|
|
</div>
|
|
|
|
<p id="draw-hint" class="hint">Протяни рамку вокруг небольшого постоянного элемента торгового окна.</p>
|
|
|
|
<div class="field-stack">
|
|
<div class="range-label">
|
|
<label for="match-threshold">Порог совпадения</label>
|
|
<output id="threshold-value" for="match-threshold">0.80</output>
|
|
</div>
|
|
<input id="match-threshold" type="range" min="0.50" max="0.99" step="0.01" value="0.80" />
|
|
</div>
|
|
|
|
<div class="inspector__section">
|
|
<div class="inspector__title">
|
|
<h3>Области</h3>
|
|
<span id="region-count">0</span>
|
|
</div>
|
|
<div id="region-list" class="region-list"></div>
|
|
</div>
|
|
|
|
<div class="inspector__actions">
|
|
<button id="save-calibration" class="button button--primary" type="button">Сохранить</button>
|
|
<button id="clear-calibration" class="button button--quiet" type="button">Сбросить</button>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="view-results" class="view" aria-labelledby="results-title" hidden>
|
|
<div class="section-heading">
|
|
<div>
|
|
<p class="eyebrow">Проверка пайплайна</p>
|
|
<h2 id="results-title">Распознанные данные</h2>
|
|
<p>Для каждого окна ищется якорь, затем OCR читает откалиброванные области.</p>
|
|
</div>
|
|
<div class="button-row">
|
|
<button id="copy-results" class="button" type="button" disabled>Копировать JSON</button>
|
|
<button id="recognize-all" class="button button--primary" type="button">Распознать все</button>
|
|
</div>
|
|
</div>
|
|
<div id="results-list" class="results-list"></div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html>
|