feat(optimizer): add diff highlighting

Expose diff_mode + original snapshot in API, compute sentence-level diff on backend, and render/persist diff view in UI.

Made-with: Cursor

models.py

@@ -82,6 +82,12 @@ class OptimizerRequest(BaseModel):
     language: str = "en"
     target_title: str = ""
     competitor_titles: List[str] = Field(default_factory=list)
+    # Base for highlighting what changed in this optimization run.
+    # - diff_from_input: compare with `target_text` passed in this request (snapshot before optimization)
+    # - diff_from_original: compare with `original_target_text` from the first snapshot in session
+    diff_mode: str = "diff_from_input"  # diff_from_input | diff_from_original
+    original_target_text: Optional[str] = None
+    original_target_title: Optional[str] = None
 
     api_key: str
     api_base_url: str = "https://api.deepseek.com/v1"
@@ -106,6 +112,13 @@ class OptimizerResponse(BaseModel):
     optimization_mode: str = "balanced"
     phrase_strategy_mode: str = "auto"
     bert_stage_target: float = 0.70
+    diff_mode: str = ""
+    # HTML with <mark class="diff-changed"> around changed parts.
+    diff_body_html: str = ""
+    diff_title_html: str = ""
+    # List of (type/from/to) blocks for "что именно поменять".
+    diff_changes: List[Dict[str, str]] = Field(default_factory=list)
+    diff_title_changes: List[Dict[str, str]] = Field(default_factory=list)
     error: str = ""
     stopped_early: bool = False
     stop_reason: str = ""

optimizer.py

@@ -1,4 +1,6 @@
 import json
+import difflib
+import html as html_lib
 import re
 from itertools import combinations
 from typing import Any, Dict, List, Optional, Tuple
@@ -53,6 +55,69 @@ def _split_sentences(text: str) -> List[str]:
     return parts
 
 
+def _escape_html(v: Any) -> str:
+    return html_lib.escape(str(v or ""), quote=True)
+
+
+def _diff_sentences_html(before_text: str, after_text: str) -> Tuple[str, List[Dict[str, str]]]:
+    """
+    sentence-level diff for UI highlighting.
+    Возвращает:
+      - html для отображения ТОЛЬКО after_text (optimized),
+      - список блоков что было/что стало (для "что именно менять").
+    """
+    before_sents = _split_sentences(before_text)
+    after_sents = _split_sentences(after_text)
+
+    matcher = difflib.SequenceMatcher(None, before_sents, after_sents, autojunk=False)
+    parts: List[str] = []
+    changes: List[Dict[str, str]] = []
+
+    for tag, i1, i2, j1, j2 in matcher.get_opcodes():
+        if tag == "equal":
+            for j in range(j1, j2):
+                parts.append(_escape_html(after_sents[j]))
+        elif tag == "replace":
+            from_txt = " ".join(before_sents[i1:i2]).strip()
+            to_txt = " ".join(after_sents[j1:j2]).strip()
+            changes.append({"type": "replace", "from": from_txt, "to": to_txt})
+            for j in range(j1, j2):
+                parts.append(
+                    f'<mark class="diff-changed" data-diff-kind="replace">{_escape_html(after_sents[j])}</mark>'
+                )
+        elif tag == "insert":
+            to_txt = " ".join(after_sents[j1:j2]).strip()
+            changes.append({"type": "insert", "from": "", "to": to_txt})
+            for j in range(j1, j2):
+                parts.append(
+                    f'<mark class="diff-changed" data-diff-kind="insert">{_escape_html(after_sents[j])}</mark>'
+                )
+        elif tag == "delete":
+            from_txt = " ".join(before_sents[i1:i2]).strip()
+            changes.append({"type": "delete", "from": from_txt, "to": ""})
+        else:
+            # Defensive: should not happen.
+            for j in range(j1, j2):
+                parts.append(_escape_html(after_sents[j]))
+
+    diff_html = " ".join(parts).strip()
+    return diff_html, changes
+
+
+def _diff_title_html(before_title: str, after_title: str) -> Tuple[str, List[Dict[str, str]]]:
+    before_t = (before_title or "").strip()
+    after_t = (after_title or "").strip()
+    if before_t == after_t:
+        return "", []
+    if not after_t:
+        # Title removed: show nothing in UI, but keep "from/to" for debug.
+        return "", [{"type": "delete", "from": before_t, "to": ""}]
+    return (
+        f'<mark class="diff-changed" data-diff-kind="replace">{_escape_html(after_t)}</mark>',
+        [{"type": "replace", "from": before_t, "to": after_t}],
+    )
+
+
 def _max_sentences_for_level(cascade_level: int, operation: str) -> int:
     if operation == "insert":
         return 2
@@ -1585,6 +1650,18 @@ def optimize_text(
     target_title = str(request_data.get("target_title", "") or "")
     competitor_titles = [str(x) for x in (request_data.get("competitor_titles") or [])]
 
+    diff_mode_used = str(request_data.get("diff_mode", "diff_from_input") or "diff_from_input").strip().lower()
+    if diff_mode_used not in {"diff_from_input", "diff_from_original"}:
+        diff_mode_used = "diff_from_input"
+    diff_base_text = target_text
+    diff_base_title = target_title
+    if diff_mode_used == "diff_from_original":
+        diff_base_text = str(request_data.get("original_target_text") or target_text or "").strip()
+        diff_base_title = str(request_data.get("original_target_title") or target_title or "").strip()
+    else:
+        diff_base_text = (target_text or "").strip()
+        diff_base_title = (target_title or "").strip()
+
     api_key = str(request_data.get("api_key", "")).strip()
     if not api_key:
         raise ValueError("API key is required.")
@@ -1663,6 +1740,22 @@ def optimize_text(
             _ot = (current_title or "").strip()
         if not _ot:
             _ot = (target_title or "").strip()
+
+        diff_body_html = ""
+        diff_changes: List[Dict[str, str]] = []
+        if (diff_base_text or "").strip() != (current_text or "").strip():
+            dh, dc = _diff_sentences_html(diff_base_text or "", current_text or "")
+            if dc:
+                diff_body_html = dh
+                diff_changes = dc
+
+        diff_title_html = ""
+        diff_title_changes: List[Dict[str, str]] = []
+        if (diff_base_title or "").strip() != (_ot or "").strip():
+            dth, dtc = _diff_title_html(diff_base_title or "", _ot or "")
+            if dtc:
+                diff_title_html = dth
+                diff_title_changes = dtc
         return {
             "ok": True,
             "optimized_text": current_text,
@@ -1674,6 +1767,11 @@ def optimize_text(
             "optimization_mode": optimization_mode,
             "phrase_strategy_mode": phrase_strategy_mode,
             "bert_stage_target": round(bert_stage_target, 4),
+            "diff_mode": diff_mode_used,
+            "diff_body_html": diff_body_html,
+            "diff_title_html": diff_title_html,
+            "diff_changes": diff_changes,
+            "diff_title_changes": diff_title_changes,
             "stopped_early": stopped_early,
             "stop_reason": stop_reason,
         }

static/js/app.js

@@ -4,7 +4,7 @@
     let semanticTermSortBy = 'target_weight';
     let semanticTermSortDir = 'desc';
     let availableUserAgents = [];
-    const PROJECT_SCHEMA_VERSION = 1;
+    const PROJECT_SCHEMA_VERSION = 2;
 
     /** Без операторов ?? / ?. — совместимость с SES lockdown на Hugging Face Spaces */
     function nv(v, d) {
@@ -13,6 +13,63 @@
 
     let optimizerStreamJobId = null;
 
+    const OPT_DIFF_ORIG_BODY_KEY = 'optimizerOriginalTargetText_v1';
+    const OPT_DIFF_ORIG_TITLE_KEY = 'optimizerOriginalTargetTitle_v1';
+
+    function getOptimizerDiffModeValue() {
+        const el = document.getElementById('optimizerDiffMode');
+        const v = el && el.value ? String(el.value) : 'diff_from_input';
+        return v === 'diff_from_original' ? 'diff_from_original' : 'diff_from_input';
+    }
+
+    function loadOptimizerOriginalSnapshot() {
+        try {
+            const body = localStorage.getItem(OPT_DIFF_ORIG_BODY_KEY);
+            const title = localStorage.getItem(OPT_DIFF_ORIG_TITLE_KEY);
+            return { body: body, title: title };
+        } catch (e) {
+            return { body: null, title: null };
+        }
+    }
+
+    function ensureOptimizerOriginalSnapshot() {
+        // Создаём снимок “оригинала” при первом запуске в режиме diff_from_original.
+        const snapshot = loadOptimizerOriginalSnapshot();
+        let body = snapshot.body;
+        let title = snapshot.title;
+
+        const currentBody = (document.getElementById('targetText').value || '');
+        const currentTitle = (document.getElementById('targetTitle').value || '');
+
+        try {
+            if (body === null) {
+                localStorage.setItem(OPT_DIFF_ORIG_BODY_KEY, currentBody);
+                body = currentBody;
+            }
+            if (title === null) {
+                localStorage.setItem(OPT_DIFF_ORIG_TITLE_KEY, currentTitle);
+                title = currentTitle;
+            }
+        } catch (e) {
+            // Best-effort: если localStorage недоступен, просто вернём то, что сейчас в форме.
+            body = currentBody;
+            title = currentTitle;
+        }
+        return { body: body, title: title };
+    }
+
+    function resetOptimizerDiffOriginal() {
+        const currentBody = (document.getElementById('targetText').value || '');
+        const currentTitle = (document.getElementById('targetTitle').value || '');
+        try {
+            localStorage.setItem(OPT_DIFF_ORIG_BODY_KEY, currentBody);
+            localStorage.setItem(OPT_DIFF_ORIG_TITLE_KEY, currentTitle);
+            alert('Оригинал для сравнения обновлён.');
+        } catch (e) {
+            alert('Не удалось обновить снимок в localStorage. Проверьте настройки браузера.');
+        }
+    }
+
     function optimizerLogAppend(line) {
         const el = document.getElementById('optimizerRunLog');
         if (!el) return;
@@ -266,6 +323,13 @@
     }
 
     function saveProject() {
+        const diffMode = getOptimizerDiffModeValue();
+        const origSnap = loadOptimizerOriginalSnapshot();
+        const curBody = document.getElementById('targetText').value || '';
+        const curTitle = document.getElementById('targetTitle').value || '';
+        // В проекте всегда держим оригинал, даже если снимок ещё не создавался.
+        const origBody = (origSnap && origSnap.body !== null) ? origSnap.body : curBody;
+        const origTitle = (origSnap && origSnap.title !== null) ? origSnap.title : curTitle;
         const projectData = {
             app: "seo-ai-editor",
             schema_version: PROJECT_SCHEMA_VERSION,
@@ -275,10 +339,10 @@
                 target_url: document.getElementById('targetUrlInput').value,
                 competitor_urls: document.getElementById('competitorUrlsInput').value,
                 fetch_user_agent: document.getElementById('urlUserAgentSelect').value,
-                target_text: document.getElementById('targetText').value,
+                target_text: curBody,
                 keywords: document.getElementById('keywordsInput').value,
                 competitors: collectCompetitorTexts(),
-                target_title: document.getElementById('targetTitle').value,
+                target_title: curTitle,
                 competitor_titles: collectCompetitorTitles(),
                 semantic_threshold: Number(document.getElementById('semanticThreshold').value || 50),
                 semantic_compression: Number(document.getElementById('semanticCompression').value || 0.1),
@@ -290,7 +354,12 @@
                 optimizer_temperature: Number(document.getElementById('optimizerTemp').value || 0.25),
                 optimizer_bert_stage_target: Number(document.getElementById('optimizerBertStageTarget').value || 0.70),
                 optimizer_mode: document.getElementById('optimizerMode').value,
-                optimizer_phrase_strategy: document.getElementById('optimizerPhraseStrategy').value
+                optimizer_phrase_strategy: document.getElementById('optimizerPhraseStrategy').value,
+
+                // Diff highlight settings (for persistence across sessions)
+                optimizer_diff_mode: diffMode,
+                optimizer_original_target_text: origBody,
+                optimizer_original_target_title: origTitle
             },
             state: {
                 analysis_result: currentData,
@@ -343,6 +412,8 @@
         document.getElementById('optimizerBertStageTarget').value = 0.70;
         document.getElementById('optimizerMode').value = 'balanced';
         document.getElementById('optimizerPhraseStrategy').value = 'auto';
+        const diffSel = document.getElementById('optimizerDiffMode');
+        if (diffSel) diffSel.value = 'diff_from_input';
 
         // Competitor text fields
         const competitorsList = document.getElementById('competitorsList');
@@ -370,6 +441,14 @@
         document.getElementById('semanticResultsContainer').innerHTML = '<div class="text-center text-muted py-5">Нажмите "Запустить Semantic Core", чтобы построить граф и разметку.</div>';
         document.getElementById('summaryResultsContainer').innerHTML = '<div class="text-center text-muted py-5">Запустите анализ, чтобы увидеть итоговые рекомендации.</div>';
         document.getElementById('optimizerResultsContainer').innerHTML = '<div class="text-center text-muted py-5">Запустите основной анализ и затем оптимизацию.</div>';
+
+        // Чтобы режим "оригинал" не сравнивался с прошлым проектом.
+        try {
+            localStorage.removeItem(OPT_DIFF_ORIG_BODY_KEY);
+            localStorage.removeItem(OPT_DIFF_ORIG_TITLE_KEY);
+        } catch (e) {
+            // ignore
+        }
     }
 
     function applyProjectData(project) {
@@ -399,6 +478,27 @@
         document.getElementById('optimizerMode').value = inp.optimizer_mode || 'balanced';
         document.getElementById('optimizerPhraseStrategy').value = inp.optimizer_phrase_strategy || 'auto';
 
+        // Restore diff-mode and original snapshot from project (if present).
+        try {
+            const savedMode = String(nv(inp.optimizer_diff_mode, '') || '').trim();
+            const mode = (savedMode === 'diff_from_original') ? 'diff_from_original' : 'diff_from_input';
+            const diffSel = document.getElementById('optimizerDiffMode');
+            if (diffSel) diffSel.value = mode;
+
+            const savedOrigBody = nv(inp.optimizer_original_target_text, null);
+            const savedOrigTitle = nv(inp.optimizer_original_target_title, null);
+            if (savedOrigBody !== null || savedOrigTitle !== null) {
+                localStorage.setItem(OPT_DIFF_ORIG_BODY_KEY, String(savedOrigBody || ''));
+                localStorage.setItem(OPT_DIFF_ORIG_TITLE_KEY, String(savedOrigTitle || ''));
+            } else {
+                // If project has no snapshot, clear any leftovers.
+                localStorage.removeItem(OPT_DIFF_ORIG_BODY_KEY);
+                localStorage.removeItem(OPT_DIFF_ORIG_TITLE_KEY);
+            }
+        } catch (e) {
+            // ignore
+        }
+
         // Title character counter refresh
         const titleLen = (inp.target_title || '').length;
         const counter = document.getElementById('titleCharCount');
@@ -579,6 +679,42 @@
             ? `<div class="alert alert-light border mb-3"><strong>Title после оптимизации:</strong><br><code class="small">${safeHtml(optTitle)}</code><div class="small text-muted mt-1">Кнопка «Применить в Target» подставит этот текст в поле Title.</div></div>`
             : '';
 
+        const diffModeLabel = data.diff_mode === 'diff_from_original' ? 'Оригинал (снимок)' : 'Входной текст';
+        const diffChanges = Array.isArray(data.diff_changes) ? data.diff_changes : [];
+        const diffChangesRows = diffChanges
+            .slice(0, 50)
+            .map((c) => {
+                const kind = c.type || '-';
+                const fromTxt = c.from ? safeHtml(c.from) : '-';
+                const toTxt = c.to ? safeHtml(c.to) : '-';
+                return `<tr>
+                    <td>${safeHtml(kind)}</td>
+                    <td><div style="max-width: 420px; white-space: normal;">${fromTxt}</div></td>
+                    <td><div style="max-width: 420px; white-space: normal;">${toTxt}</div></td>
+                </tr>`;
+            }).join('');
+
+        const diffCard = data.diff_body_html
+            ? `<div class="stat-card mt-3">
+                <h6 class="card-title">Подсветка изменений в Target</h6>
+                <div class="small mb-2 text-muted">Режим: <strong>${safeHtml(diffModeLabel)}</strong></div>
+                <div class="border rounded p-3" style="background:#fff; line-height: 1.8; word-break: break-word;">${data.diff_body_html}</div>
+                <div class="mt-3">
+                    <div class="small fw-semibold text-muted mb-1">Фрагменты (что было / что стало)</div>
+                    <div class="table-responsive">
+                        <table class="table table-sm table-bordered mb-0">
+                            <thead class="table-light">
+                                <tr><th>Тип</th><th>Было</th><th>Стало</th></tr>
+                            </thead>
+                            <tbody>
+                                ${diffChangesRows || '<tr><td colspan="3" class="text-center text-muted">Изменений не найдено.</td></tr>'}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>`
+            : '';
+
         const base = data.baseline_metrics || {};
         const fin = data.final_metrics || {};
         const rows = [
@@ -685,7 +821,7 @@
             </div>`;
         }).join('');
 
-        container.innerHTML = earlyBanner + titleBanner + `
+        container.innerHTML = earlyBanner + titleBanner + diffCard + `
             <div class="stat-card">
                 <h6 class="card-title">Результат оптимизации</h6>
                 <div class="small mb-2">Применено правок: <strong>${data.applied_changes || 0}</strong></div>
@@ -773,7 +909,10 @@
             temperature: Number(document.getElementById('optimizerTemp').value || 0.25),
             bert_stage_target: Number(document.getElementById('optimizerBertStageTarget').value || 0.70),
             optimization_mode: document.getElementById('optimizerMode').value || 'balanced',
-            phrase_strategy_mode: document.getElementById('optimizerPhraseStrategy').value || 'auto'
+            phrase_strategy_mode: document.getElementById('optimizerPhraseStrategy').value || 'auto',
+            diff_mode: diffMode,
+            original_target_text: originalTargetText,
+            original_target_title: originalTargetTitle
         };
 
         const runBtn = document.getElementById('btnRunLlmOpt');
@@ -786,6 +925,15 @@
         optimizerRunUiClear();
         optimizerLogAppend('Соединение с сервером (SSE)…');
 
+        const diffMode = getOptimizerDiffModeValue();
+        let originalTargetText = null;
+        let originalTargetTitle = null;
+        if (diffMode === 'diff_from_original') {
+            const snap = ensureOptimizerOriginalSnapshot();
+            originalTargetText = snap.body;
+            originalTargetTitle = snap.title;
+        }
+
         const t0 = Date.now();
         const tick = setInterval(function () {
             const el = document.getElementById('optimizerElapsed');

templates/index.html

@@ -9,6 +9,8 @@
         body { background-color: #f8f9fa; }
         .editor-box { min-height: 300px; font-family: 'Georgia', serif; font-size: 1.1rem; }
         .stat-card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); padding: 20px; margin-bottom: 20px; }
+        .diff-changed { background-color: #fff3cd; padding: 0 2px; border-radius: 4px; }
+        .diff-unchanged { }
         .loading-overlay { 
             display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
             background: rgba(255,255,255,0.8); z-index: 9999; text-align: center; padding-top: 20%; 
@@ -328,6 +330,21 @@
                                 <div class="form-text">Выбор стратегии остается у пользователя.</div>
                             </div>
                         </div>
+                        <div class="row g-2 mt-1">
+                            <div class="col-md-6">
+                                <label class="form-label small text-muted mb-1">Подсветка изменений (Target)</label>
+                                <select id="optimizerDiffMode" class="form-select">
+                                    <option value="diff_from_input" selected>Относительно текста перед запуском</option>
+                                    <option value="diff_from_original">Относительно оригинала (снимок)</option>
+                                </select>
+                                <div class="form-text">
+                                    Если выбран режим «оригинал», при первом запуске автоматически сохраняется снимок текущего `Target`.
+                                </div>
+                            </div>
+                            <div class="col-md-3 d-grid align-items-end">
+                                <button type="button" class="btn btn-outline-secondary" onclick="resetOptimizerDiffOriginal()">Сбросить оригинал</button>
+                            </div>
+                        </div>
                         <div class="d-flex gap-2 mt-3 flex-wrap align-items-center">
                             <button type="button" class="btn btn-dark" id="btnRunLlmOpt" onclick="runLlmOptimization()">Запустить оптимизацию</button>
                             <button type="button" class="btn btn-outline-danger" id="btnStopLlmOpt" disabled onclick="requestStopOptimizer()">Остановить</button>