| import { normalizeText } from './text_preprocessing.js'; |
| import { correctText } from './correction_inference.js'; |
| import { tokenize, extractTrackedEdits, renderHighlighted } from './tracked_edits.js'; |
| import { categorizeErrors } from './error_categories.js'; |
| import { checkMeaningPreservation } from './meaning_preservation.js'; |
| import { detectOvercorrection } from './overcorrection_warning.js'; |
| import { correctBatch, downloadCsv } from './batch_correction.js'; |
| import { renderEvaluationDashboard } from './evaluation_dashboard.js'; |
|
|
| const state = { metadata: null, batchRows: [], samples: null }; |
| const $ = (selector) => document.querySelector(selector); |
| const $$ = (selector) => [...document.querySelectorAll(selector)]; |
|
|
| function confidenceProxy(meaning, tracked, mode) { |
| const editRatio = tracked.changedTokenCount / Math.max(1, tracked.sourceTokenCount); |
| const modeComponent = mode === 'live-browser-model' ? 0.72 : 0.52; |
| const score = Math.max(0, Math.min(1, modeComponent * 0.45 + meaning.score * 0.45 + (1 - Math.min(1, editRatio)) * 0.1)); |
| return { |
| score, |
| label: score >= 0.8 ? 'high' : score >= 0.6 ? 'medium' : 'low', |
| note: 'Confidence proxy only; not a calibrated correctness probability.', |
| }; |
| } |
|
|
| function enrich(generation) { |
| const tracked = extractTrackedEdits(generation.original, generation.corrected); |
| const categories = categorizeErrors(tracked); |
| const meaning = checkMeaningPreservation(generation.original, generation.corrected); |
| const over = detectOvercorrection(tracked, meaning, false, categories.categories); |
| const confidence = confidenceProxy(meaning, tracked, generation.mode); |
| return { ...generation, tracked, categories, meaning, over, confidence }; |
| } |
|
|
| function setStatus(message, type = 'neutral') { |
| const element = $('#run-status'); |
| element.className = `run-status ${type}`; |
| element.textContent = message; |
| } |
|
|
| function renderResult(result) { |
| $('#results-panel').hidden = false; |
| $('#original-output').textContent = result.original; |
| $('#corrected-output').textContent = result.corrected; |
| $('#original-highlight').innerHTML = renderHighlighted(tokenize(result.original), result.tracked.edits, 'source'); |
| $('#corrected-highlight').innerHTML = renderHighlighted(tokenize(result.corrected), result.tracked.edits, 'target'); |
| $('#mode-badge').textContent = result.mode.replaceAll('-', ' '); |
| $('#confidence-value').textContent = `${(result.confidence.score * 100).toFixed(0)}% (${result.confidence.label})`; |
| $('#meaning-value').textContent = `${(result.meaning.score * 100).toFixed(0)}%`; |
| $('#latency-value').textContent = `${result.latencyMs.toFixed(1)} ms`; |
| $('#edit-count-value').textContent = String(result.tracked.wordLevelEditCount); |
| $('#category-list').innerHTML = result.categories.categories.map((category) => `<span class="tag">${category}</span>`).join(''); |
| $('#edit-list').innerHTML = result.categories.categorizedEdits.length |
| ? result.categories.categorizedEdits.map((edit) => `<li><span class="edit-op">${edit.operation}</span><code>${edit.before || '∅'}</code><span>→</span><code>${edit.after || '∅'}</code><span class="tag subtle">${edit.category}</span></li>`).join('') |
| : '<li>No edits detected.</li>'; |
| const warning = $('#overcorrection-warning'); |
| warning.className = `warning-card ${result.over.flag ? 'active' : 'clear'}`; |
| warning.innerHTML = `<strong>${result.over.message}</strong>${result.over.reasons.length ? `<ul>${result.over.reasons.map((reason) => `<li>${reason}</li>`).join('')}</ul>` : ''}`; |
| $('#meaning-warnings').innerHTML = result.meaning.warnings.length ? result.meaning.warnings.map((warningText) => `<li>${warningText}</li>`).join('') : '<li>No heuristic meaning warning detected.</li>'; |
| $('#fallback-disclosure').hidden = result.mode === 'live-browser-model'; |
| } |
|
|
| async function runSingle() { |
| const text = normalizeText($('#text-input').value); |
| if (!text) { setStatus('Enter a sentence or paragraph first.', 'error'); return; } |
| $('#run-button').disabled = true; |
| setStatus('Running correction…', 'loading'); |
| try { |
| const result = enrich(await correctText(text, state.metadata, (progress) => setStatus(progress?.status ?? 'Loading browser model…', 'loading'))); |
| renderResult(result); |
| setStatus(result.mode === 'live-browser-model' ? 'Live browser model completed.' : 'Fallback demonstration completed. Review the disclosure.', result.mode === 'live-browser-model' ? 'success' : 'warning'); |
| } catch (error) { |
| setStatus(error.message, 'error'); |
| } finally { |
| $('#run-button').disabled = false; |
| } |
| } |
|
|
| function renderBatchTable(rows) { |
| const body = $('#batch-results-body'); |
| body.innerHTML = rows.map((row) => `<tr> |
| <td>${row.rowId}</td><td>${row.original}</td><td>${row.corrected}</td><td>${row.tracked.wordLevelEditCount}</td> |
| <td>${row.categories.categories.join(', ')}</td><td>${(row.confidence.score*100).toFixed(0)}%</td><td>${(row.meaning.score*100).toFixed(0)}%</td><td>${row.over.flag ? 'Review' : 'No'}</td><td>${row.latencyMs.toFixed(1)}</td> |
| </tr>`).join(''); |
| $('#batch-result-panel').hidden = false; |
| } |
|
|
| async function runBatch() { |
| $('#batch-run-button').disabled = true; |
| try { |
| state.batchRows = await correctBatch($('#batch-input').value, state.metadata, enrich); |
| renderBatchTable(state.batchRows); |
| } catch (error) { |
| setStatus(error.message, 'error'); |
| } finally { |
| $('#batch-run-button').disabled = false; |
| } |
| } |
|
|
| function setupTabs() { |
| $$('.tab-button').forEach((button) => button.addEventListener('click', () => { |
| $$('.tab-button').forEach((item) => item.classList.toggle('active', item === button)); |
| $$('.tab-panel').forEach((panel) => { panel.hidden = panel.id !== button.dataset.tab; }); |
| })); |
| } |
|
|
| function setupSamples() { |
| const select = $('#sample-select'); |
| const samples = [...state.samples.sentences, ...state.samples.paragraphs]; |
| select.innerHTML = '<option value="">Choose a safe sample…</option>' + samples.map((sample, index) => `<option value="${index}">${sample.slice(0, 76)}${sample.length > 76 ? '…' : ''}</option>`).join(''); |
| select.addEventListener('change', () => { if (select.value !== '') $('#text-input').value = samples[Number(select.value)]; }); |
| } |
|
|
| async function initialize() { |
| const [metadataResponse, samplesResponse] = await Promise.all([fetch(new URL('./metadata.json', import.meta.url)), fetch(new URL('./sample_texts/samples.json', import.meta.url))]); |
| state.metadata = await metadataResponse.json(); |
| state.samples = await samplesResponse.json(); |
| $('#deployment-mode').textContent = state.metadata.enable_live_model ? 'Live browser ONNX model configured' : 'Static fallback mode active'; |
| $('#model-name').textContent = state.metadata.selected_base_model; |
| $('#legacy-model-name').textContent = state.metadata.legacy_notebook_model; |
| setupTabs(); setupSamples(); renderEvaluationDashboard($('#evaluation-dashboard'), state.metadata); |
| $('#run-button').addEventListener('click', runSingle); |
| $('#batch-run-button').addEventListener('click', runBatch); |
| $('#download-button').addEventListener('click', () => downloadCsv(state.batchRows)); |
| $('#clear-button').addEventListener('click', () => { $('#text-input').value=''; $('#results-panel').hidden=true; setStatus('Ready.', 'neutral'); }); |
| setStatus('Ready.', 'neutral'); |
| } |
|
|
| initialize().catch((error) => setStatus(`Application initialization failed: ${error.message}`, 'error')); |
|
|
