working on crop

This commit is contained in:
Boki 2026-02-12 17:48:16 -05:00
parent 93e2234c4e
commit f74e3e1c85
12 changed files with 1135 additions and 220 deletions

View file

@ -558,7 +558,7 @@
<div style="margin-bottom:16px">
<div class="section-title" style="margin-bottom:6px">Engine</div>
<select id="ocrEngine" class="mode-select" style="width:100%">
<select id="ocrEngine" class="mode-select" style="width:100%" onchange="toggleOcrSections()">
<option value="tesseract">Tesseract</option>
<option value="easyocr">EasyOCR</option>
<option value="paddleocr">PaddleOCR</option>
@ -582,12 +582,52 @@
</div>
<div style="margin-bottom:16px">
<div class="section-title" style="margin-bottom:6px">Tooltip OCR</div>
<div class="section-title" style="margin-bottom:6px">Tooltip Preprocess</div>
<select id="ocrTooltipPreprocess" class="mode-select" style="width:100%" onchange="toggleOcrSections()">
<option value="none">None</option>
<option value="bgsub">Background Subtraction</option>
<option value="tophat">TopHat</option>
</select>
</div>
<div style="margin-bottom:16px">
<div class="section-title" style="margin-bottom:6px">Crop Detection</div>
<div class="settings-grid">
<div class="setting-row">
<label>Diff Threshold</label>
<input type="number" id="ocrDiffThresh" value="20" />
</div>
<div class="setting-row">
<label>Max Gap</label>
<input type="number" id="ocrMaxGap" value="20" />
</div>
<div class="setting-row">
<label>Trim Cutoff</label>
<input type="number" id="ocrTrimCutoff" value="0.4" step="0.05" />
</div>
</div>
</div>
<div style="margin-bottom:16px">
<div class="section-title" style="margin-bottom:6px">OCR Processing</div>
<div class="settings-grid">
<div class="setting-row">
<label>Upscale</label>
<input type="number" id="ocrUpscale" value="2" />
</div>
<div class="setting-row">
<label>Merge Gap (px)</label>
<input type="number" id="ocrMergeGap" value="0" />
</div>
</div>
<div id="tooltipTophatParams" style="display:none;margin-top:8px">
<div class="settings-grid">
<div class="setting-row">
<label>Kernel Size</label>
<input type="number" id="ocrTooltipKernel" value="41" />
</div>
</div>
</div>
<div id="tooltipBgsubParams" style="display:none;margin-top:8px">
<div class="settings-grid">
<div class="setting-row">
@ -607,34 +647,24 @@
<span style="font-size:12px;color:#8b949e">Soft Threshold</span>
</div>
</div>
<div id="tooltipTophatParams" style="display:none;margin-top:8px">
<div id="easyocrParams" style="display:none;margin-top:8px">
<div class="settings-grid">
<div class="setting-row">
<label>Kernel Size</label>
<input type="number" id="ocrTooltipKernel" value="41" />
<label>Link Threshold</label>
<input type="number" id="ocrLinkThreshold" step="0.05" />
</div>
<div class="setting-row">
<label>Text Threshold</label>
<input type="number" id="ocrTextThreshold" step="0.05" />
</div>
<div class="setting-row">
<label>Low Text</label>
<input type="number" id="ocrLowText" step="0.05" />
</div>
<div class="setting-row">
<label>Width Threshold</label>
<input type="number" id="ocrWidthThs" step="0.05" />
</div>
</div>
</div>
</div>
<div style="margin-bottom:16px">
<div class="section-title" style="margin-bottom:6px">Tooltip Detection</div>
<div class="settings-grid">
<div class="setting-row">
<label>Diff Threshold</label>
<input type="number" id="ocrDiffThresh" value="20" />
</div>
<div class="setting-row">
<label>Max Gap</label>
<input type="number" id="ocrMaxGap" value="20" />
</div>
<div class="setting-row">
<label>Trim Cutoff</label>
<input type="number" id="ocrTrimCutoff" value="0.4" step="0.1" />
</div>
<div class="setting-row">
<label>Upscale</label>
<input type="number" id="ocrUpscale" value="2" />
</div>
</div>
</div>
@ -1133,6 +1163,9 @@
const tooltipPp = document.getElementById('ocrTooltipPreprocess').value;
document.getElementById('tooltipBgsubParams').style.display = tooltipPp === 'bgsub' ? '' : 'none';
document.getElementById('tooltipTophatParams').style.display = tooltipPp === 'tophat' ? '' : 'none';
const engine = document.getElementById('ocrEngine').value;
document.getElementById('easyocrParams').style.display = engine === 'easyocr' ? '' : 'none';
}
async function loadOcrSettings() {
@ -1142,18 +1175,24 @@
if (!data.ok) return;
document.getElementById('ocrEngine').value = data.engine || 'easyocr';
document.getElementById('ocrScreenPreprocess').value = data.screenPreprocess || 'none';
document.getElementById('ocrTooltipPreprocess').value = data.tooltipPreprocess || 'bgsub';
document.getElementById('ocrTooltipPreprocess').value = data.tooltipPreprocess || 'tophat';
document.getElementById('ocrSaveDebugImages').checked = data.saveDebugImages !== false;
const tp = data.tooltipParams || {};
document.getElementById('ocrDiffThresh').value = tp.diffThresh ?? 20;
document.getElementById('ocrMaxGap').value = tp.maxGap ?? 20;
document.getElementById('ocrTrimCutoff').value = tp.trimCutoff ?? 0.4;
document.getElementById('ocrUpscale').value = tp.upscale ?? 2;
document.getElementById('ocrDimPercentile').value = tp.dimPercentile ?? 40;
document.getElementById('ocrTextThresh').value = tp.textThresh ?? 60;
document.getElementById('ocrSoftThreshold').checked = !!tp.softThreshold;
document.getElementById('ocrScreenKernel').value = tp.kernelSize ?? 41;
document.getElementById('ocrTooltipKernel').value = tp.kernelSize ?? 41;
const crop = tp.crop || {};
const ocr = tp.ocr || {};
document.getElementById('ocrDiffThresh').value = crop.diffThresh ?? 20;
document.getElementById('ocrMaxGap').value = crop.maxGap ?? 20;
document.getElementById('ocrTrimCutoff').value = crop.trimCutoff ?? 0.4;
document.getElementById('ocrUpscale').value = ocr.upscale ?? 2;
document.getElementById('ocrMergeGap').value = ocr.mergeGap ?? 0;
document.getElementById('ocrTooltipKernel').value = ocr.kernelSize ?? 41;
document.getElementById('ocrDimPercentile').value = ocr.dimPercentile ?? 40;
document.getElementById('ocrTextThresh').value = ocr.textThresh ?? 60;
document.getElementById('ocrSoftThreshold').checked = !!ocr.softThreshold;
document.getElementById('ocrLinkThreshold').value = ocr.linkThreshold ?? '';
document.getElementById('ocrTextThreshold').value = ocr.textThreshold ?? '';
document.getElementById('ocrLowText').value = ocr.lowText ?? '';
document.getElementById('ocrWidthThs').value = ocr.widthThs ?? '';
toggleOcrSections();
} catch {}
}
@ -1161,29 +1200,45 @@
async function saveOcrSettings() {
const tooltipPp = document.getElementById('ocrTooltipPreprocess').value;
const screenPp = document.getElementById('ocrScreenPreprocess').value;
const engine = document.getElementById('ocrEngine').value;
const tooltipParams = {
diffThresh: parseInt(document.getElementById('ocrDiffThresh').value) || 20,
maxGap: parseInt(document.getElementById('ocrMaxGap').value) || 20,
trimCutoff: parseFloat(document.getElementById('ocrTrimCutoff').value) || 0.4,
upscale: parseInt(document.getElementById('ocrUpscale').value) || 2,
useBackgroundSub: tooltipPp === 'bgsub',
crop: {
diffThresh: parseInt(document.getElementById('ocrDiffThresh').value) || 20,
maxGap: parseInt(document.getElementById('ocrMaxGap').value) || 20,
trimCutoff: parseFloat(document.getElementById('ocrTrimCutoff').value) || 0.4,
},
ocr: {
upscale: parseInt(document.getElementById('ocrUpscale').value) || 2,
useBackgroundSub: tooltipPp === 'bgsub',
},
};
if (tooltipPp === 'bgsub') {
tooltipParams.dimPercentile = parseInt(document.getElementById('ocrDimPercentile').value) || 40;
tooltipParams.textThresh = parseInt(document.getElementById('ocrTextThresh').value) || 60;
tooltipParams.softThreshold = document.getElementById('ocrSoftThreshold').checked;
}
const mg = parseInt(document.getElementById('ocrMergeGap').value);
if (mg > 0) tooltipParams.ocr.mergeGap = mg;
if (tooltipPp === 'tophat') {
tooltipParams.kernelSize = parseInt(document.getElementById('ocrTooltipKernel').value) || 41;
tooltipParams.ocr.kernelSize = parseInt(document.getElementById('ocrTooltipKernel').value) || 21;
}
if (screenPp === 'tophat') {
tooltipParams.kernelSize = parseInt(document.getElementById('ocrScreenKernel').value) || 41;
if (tooltipPp === 'bgsub') {
tooltipParams.ocr.dimPercentile = parseInt(document.getElementById('ocrDimPercentile').value) || 40;
tooltipParams.ocr.textThresh = parseInt(document.getElementById('ocrTextThresh').value) || 60;
tooltipParams.ocr.softThreshold = document.getElementById('ocrSoftThreshold').checked;
}
if (engine === 'easyocr') {
const lt = parseFloat(document.getElementById('ocrLinkThreshold').value);
const tt = parseFloat(document.getElementById('ocrTextThreshold').value);
const low = parseFloat(document.getElementById('ocrLowText').value);
const wt = parseFloat(document.getElementById('ocrWidthThs').value);
if (!isNaN(lt)) tooltipParams.ocr.linkThreshold = lt;
if (!isNaN(tt)) tooltipParams.ocr.textThreshold = tt;
if (!isNaN(low)) tooltipParams.ocr.lowText = low;
if (!isNaN(wt)) tooltipParams.ocr.widthThs = wt;
}
const body = {
engine: document.getElementById('ocrEngine').value,
engine,
screenPreprocess: screenPp,
tooltipPreprocess: tooltipPp,
tooltipParams,