| """ |
| Inline Text Editing / Post-Edit Layout |
| |
| Annotators directly edit displayed text, with the system tracking insertions, |
| deletions, and substitutions as a structured diff. Used for MT post-editing, |
| grammar correction, text simplification, and paraphrase generation. |
| |
| Research: WMT post-editing shared tasks; MQM-APE (COLING 2025). |
| """ |
|
|
| import logging |
|
|
| from .identifier_utils import ( |
| safe_generate_layout, |
| generate_element_identifier, |
| generate_validation_attribute, |
| escape_html_content, |
| generate_layout_attributes |
| ) |
|
|
|
|
| logger = logging.getLogger(__name__) |
|
|
|
|
| def generate_text_edit_layout(annotation_scheme): |
| """ |
| Generate HTML for an Inline Text Editing interface. |
| |
| Args: |
| annotation_scheme (dict): Configuration including: |
| - name: Schema identifier |
| - description: Display description |
| - source_field: Field in data containing text to edit |
| - show_diff: Whether to show real-time diff highlighting |
| - show_edit_distance: Whether to show edit distance counter |
| - allow_reset: Whether to show "Reset to original" button |
| |
| Returns: |
| tuple: (html_string, key_bindings) |
| """ |
| return safe_generate_layout(annotation_scheme, _generate_text_edit_layout_internal) |
|
|
|
|
| def _generate_text_edit_layout_internal(annotation_scheme): |
| schema_name = annotation_scheme['name'] |
| description = annotation_scheme['description'] |
| source_field = annotation_scheme.get('source_field', '') |
| show_diff = annotation_scheme.get('show_diff', True) |
| show_edit_distance = annotation_scheme.get('show_edit_distance', True) |
| allow_reset = annotation_scheme.get('allow_reset', True) |
|
|
| layout_attrs = generate_layout_attributes(annotation_scheme) |
| validation = generate_validation_attribute(annotation_scheme) |
| identifiers = generate_element_identifier(schema_name, schema_name, "hidden") |
|
|
| reset_btn = "" |
| if allow_reset: |
| reset_btn = f""" |
| <button type="button" class="text-edit-reset-btn" |
| onclick="textEditReset('{escape_html_content(schema_name)}')"> |
| Reset to Original |
| </button> |
| """ |
|
|
| diff_display = "" |
| if show_diff: |
| diff_display = f""" |
| <div class="text-edit-diff-display" id="{schema_name}-diff"> |
| <div class="text-edit-diff-label">Changes:</div> |
| <div class="text-edit-diff-content" id="{schema_name}-diff-content"></div> |
| </div> |
| """ |
|
|
| edit_distance_display = "" |
| if show_edit_distance: |
| edit_distance_display = f""" |
| <div class="text-edit-stats" id="{schema_name}-stats"> |
| <span class="text-edit-stat">Words changed: <strong id="{schema_name}-word-dist">0</strong></span> |
| <span class="text-edit-stat">Chars changed: <strong id="{schema_name}-char-dist">0</strong></span> |
| </div> |
| """ |
|
|
| html = f""" |
| <form id="{escape_html_content(schema_name)}" class="annotation-form shadcn-text-edit-container" |
| action="javascript:void(0)" |
| data-annotation-id="{escape_html_content(str(annotation_scheme.get('annotation_id', '')))}" |
| data-annotation-type="text_edit" |
| data-schema-name="{escape_html_content(schema_name)}" |
| data-source-field="{escape_html_content(source_field)}" |
| {layout_attrs}> |
| <fieldset schema_name="{escape_html_content(schema_name)}"> |
| <legend class="shadcn-text-edit-title">{escape_html_content(description)}</legend> |
| |
| <div class="text-edit-source-block" id="{schema_name}-source"> |
| <div class="text-edit-source-label">Original:</div> |
| <div class="text-edit-source-text" id="{schema_name}-source-text"></div> |
| </div> |
| |
| <div class="text-edit-editor-block"> |
| <div class="text-edit-editor-label">Edit below:</div> |
| <textarea class="text-edit-textarea annotation-input" |
| id="{schema_name}-editor" |
| name="{identifiers['name']}" |
| schema="{identifiers['schema']}" |
| label_name="{identifiers['label_name']}" |
| validation="{validation}" |
| rows="5" |
| oninput="textEditOnInput('{escape_html_content(schema_name)}')"></textarea> |
| </div> |
| |
| {edit_distance_display} |
| {diff_display} |
| |
| <div class="text-edit-controls"> |
| {reset_btn} |
| </div> |
| |
| <input type="hidden" |
| class="annotation-input text-edit-data-input" |
| id="{identifiers['id']}" |
| name="{identifiers['name']}-data" |
| schema="{identifiers['schema']}" |
| label_name="{identifiers['label_name']}" |
| validation="{validation}" |
| value=""> |
| </fieldset> |
| </form> |
| |
| <script> |
| (function() {{ |
| window.textEditOnInput = function(schemaName) {{ |
| var editor = document.getElementById(schemaName + '-editor'); |
| var sourceText = document.getElementById(schemaName + '-source-text').textContent || ''; |
| var editedText = editor.value; |
| |
| // Compute word-level edit distance |
| var srcWords = sourceText.trim().split(/\\s+/).filter(function(w) {{ return w; }}); |
| var editWords = editedText.trim().split(/\\s+/).filter(function(w) {{ return w; }}); |
| var wordDist = levenshtein(srcWords, editWords); |
| var charDist = levenshteinStr(sourceText, editedText); |
| |
| // Update stats |
| var wordEl = document.getElementById(schemaName + '-word-dist'); |
| var charEl = document.getElementById(schemaName + '-char-dist'); |
| if (wordEl) wordEl.textContent = wordDist; |
| if (charEl) charEl.textContent = charDist; |
| |
| // Update diff display |
| var diffContent = document.getElementById(schemaName + '-diff-content'); |
| if (diffContent) {{ |
| diffContent.innerHTML = computeWordDiff(srcWords, editWords); |
| }} |
| |
| // Store result in hidden input |
| var data = JSON.stringify({{ |
| edited_text: editedText, |
| original_text: sourceText, |
| edit_distance_chars: charDist, |
| edit_distance_words: wordDist |
| }}); |
| var hiddenInput = document.getElementById(schemaName).querySelector('.text-edit-data-input'); |
| hiddenInput.value = data; |
| hiddenInput.setAttribute('data-modified', 'true'); |
| hiddenInput.dispatchEvent(new Event('change', {{ bubbles: true }})); |
| }}; |
| |
| window.textEditReset = function(schemaName) {{ |
| var sourceText = document.getElementById(schemaName + '-source-text').textContent || ''; |
| document.getElementById(schemaName + '-editor').value = sourceText; |
| textEditOnInput(schemaName); |
| }}; |
| |
| function levenshtein(a, b) {{ |
| var m = a.length, n = b.length; |
| var dp = Array.from({{length: m + 1}}, function() {{ return new Array(n + 1).fill(0); }}); |
| for (var i = 0; i <= m; i++) dp[i][0] = i; |
| for (var j = 0; j <= n; j++) dp[0][j] = j; |
| for (var i = 1; i <= m; i++) |
| for (var j = 1; j <= n; j++) |
| dp[i][j] = a[i-1] === b[j-1] ? dp[i-1][j-1] : |
| 1 + Math.min(dp[i-1][j], dp[i][j-1], dp[i-1][j-1]); |
| return dp[m][n]; |
| }} |
| |
| function levenshteinStr(a, b) {{ |
| // Character-level Levenshtein with optimization for long strings |
| var m = a.length, n = b.length; |
| if (m === 0) return n; |
| if (n === 0) return m; |
| // Use two-row optimization |
| var prev = new Array(n + 1); |
| var curr = new Array(n + 1); |
| for (var j = 0; j <= n; j++) prev[j] = j; |
| for (var i = 1; i <= m; i++) {{ |
| curr[0] = i; |
| for (var j = 1; j <= n; j++) |
| curr[j] = a[i-1] === b[j-1] ? prev[j-1] : |
| 1 + Math.min(prev[j], curr[j-1], prev[j-1]); |
| var tmp = prev; prev = curr; curr = tmp; |
| }} |
| return prev[n]; |
| }} |
| |
| function computeWordDiff(srcWords, editWords) {{ |
| // Simple word diff visualization |
| var html = ''; |
| var si = 0, ei = 0; |
| // Use LCS-based approach |
| var lcs = lcsWords(srcWords, editWords); |
| var li = 0; |
| si = 0; ei = 0; |
| |
| while (si < srcWords.length || ei < editWords.length) {{ |
| if (li < lcs.length && si < srcWords.length && ei < editWords.length && |
| srcWords[si] === lcs[li] && editWords[ei] === lcs[li]) {{ |
| html += '<span class="text-edit-diff-same">' + escapeHtml(lcs[li]) + '</span> '; |
| si++; ei++; li++; |
| }} else if (li < lcs.length && ei < editWords.length && editWords[ei] === lcs[li]) {{ |
| html += '<span class="text-edit-diff-del">' + escapeHtml(srcWords[si]) + '</span> '; |
| si++; |
| }} else if (li < lcs.length && si < srcWords.length && srcWords[si] === lcs[li]) {{ |
| html += '<span class="text-edit-diff-ins">' + escapeHtml(editWords[ei]) + '</span> '; |
| ei++; |
| }} else {{ |
| if (si < srcWords.length) {{ |
| html += '<span class="text-edit-diff-del">' + escapeHtml(srcWords[si]) + '</span> '; |
| si++; |
| }} |
| if (ei < editWords.length) {{ |
| html += '<span class="text-edit-diff-ins">' + escapeHtml(editWords[ei]) + '</span> '; |
| ei++; |
| }} |
| }} |
| }} |
| return html; |
| }} |
| |
| function lcsWords(a, b) {{ |
| var m = a.length, n = b.length; |
| var dp = Array.from({{length: m + 1}}, function() {{ return new Array(n + 1).fill(0); }}); |
| for (var i = 1; i <= m; i++) |
| for (var j = 1; j <= n; j++) |
| dp[i][j] = a[i-1] === b[j-1] ? dp[i-1][j-1] + 1 : Math.max(dp[i-1][j], dp[i][j-1]); |
| // Backtrack |
| var result = []; |
| var i = m, j = n; |
| while (i > 0 && j > 0) {{ |
| if (a[i-1] === b[j-1]) {{ result.unshift(a[i-1]); i--; j--; }} |
| else if (dp[i-1][j] > dp[i][j-1]) i--; |
| else j--; |
| }} |
| return result; |
| }} |
| |
| function escapeHtml(str) {{ |
| var div = document.createElement('div'); |
| div.textContent = str; |
| return div.innerHTML; |
| }} |
| }})(); |
| </script> |
| """ |
|
|
| logger.info(f"Generated text edit layout for {schema_name}") |
| return html, [] |
|
|
