296 lines
14 KiB
HTML
296 lines
14 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<style>
|
|
.diff-changed { background-color: #fff3cd; transition: background 0.5s; }
|
|
.diff-added { background-color: #d1e7dd; transition: background 0.5s; }
|
|
.diff-removed { background-color: #f8d7da; text-decoration: line-through; opacity: 0.7; transition: background 0.5s; }
|
|
.select-checkbox { transform: scale(1.2); cursor: pointer; }
|
|
</style>
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2><i class="fas fa-balance-scale me-2"></i>Review Changes</h2>
|
|
</div>
|
|
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle me-2"></i>Review the AI's proposed changes below. You can accept them, discard them, or ask for further refinements on the <strong>New Draft</strong>.
|
|
</div>
|
|
|
|
<!-- Actions Bar -->
|
|
<div class="card shadow-sm mb-4 sticky-top" style="top: 20px; z-index: 100;">
|
|
<div class="card-body bg-light">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-6">
|
|
<form id="refineForm" onsubmit="submitRefine(event)" class="d-flex">
|
|
<input type="hidden" name="source" value="draft">
|
|
<input type="hidden" name="selected_keys" id="refineSelectedKeys">
|
|
<input type="text" name="instruction" class="form-control me-2" placeholder="Refine this draft further (e.g. 'Fix the name spelling')..." required>
|
|
<button type="submit" id="btnRefine" class="btn btn-warning text-nowrap"><i class="fas fa-magic me-1"></i> Refine Draft</button>
|
|
</form>
|
|
</div>
|
|
<div class="col-md-6 text-end">
|
|
<form action="/project/{{ project.id }}/refine_bible/confirm" method="POST" class="d-inline">
|
|
<input type="hidden" name="selected_keys" id="confirmSelectedKeys">
|
|
<div class="form-check form-switch d-inline-block me-3 align-middle">
|
|
<input class="form-check-input" type="checkbox" id="syncScroll" checked>
|
|
<label class="form-check-label small" for="syncScroll">Sync Scroll</label>
|
|
</div>
|
|
<button type="button" class="btn btn-outline-secondary me-2" id="btnSelectAll" style="display:none;"><i class="fas fa-check-square me-1"></i> Select All</button>
|
|
<button type="submit" name="action" value="decline" class="btn btn-outline-danger me-2"><i class="fas fa-times me-1"></i> Discard</button>
|
|
<button type="submit" name="action" value="accept_selected" class="btn btn-outline-success me-2" id="btnAcceptSelected" disabled><i class="fas fa-check-double me-1"></i> Accept Selected</button>
|
|
<button type="submit" name="action" value="accept" class="btn btn-success"><i class="fas fa-check me-1"></i> Accept Changes</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% macro render_bible(bible) %}
|
|
<div class="mb-3">
|
|
<h6 class="text-muted text-uppercase small fw-bold border-bottom pb-1">Metadata</h6>
|
|
<dl class="row small mb-0">
|
|
<dt class="col-sm-4">Title</dt><dd class="col-sm-8"><input type="checkbox" class="select-checkbox me-2 d-none" value="meta.title"><span data-diff-key="meta.title">{{ bible.project_metadata.title }}</span></dd>
|
|
<dt class="col-sm-4">Genre</dt><dd class="col-sm-8"><input type="checkbox" class="select-checkbox me-2 d-none" value="meta.genre"><span data-diff-key="meta.genre">{{ bible.project_metadata.genre }}</span></dd>
|
|
<dt class="col-sm-4">Tone</dt><dd class="col-sm-8"><input type="checkbox" class="select-checkbox me-2 d-none" value="meta.tone"><span data-diff-key="meta.tone">{{ bible.project_metadata.style.tone }}</span></dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<h6 class="text-muted text-uppercase small fw-bold border-bottom pb-1">Characters ({{ bible.characters|length }})</h6>
|
|
<ul class="list-unstyled small">
|
|
{% for c in bible.characters %}
|
|
<li class="mb-2" data-diff-key="char.{{ loop.index0 }}">
|
|
<input type="checkbox" class="select-checkbox me-2 d-none" value="char.{{ loop.index0 }}">
|
|
<strong data-diff-key="char.{{ loop.index0 }}.name">{{ c.name }}</strong> <span class="badge bg-light text-dark border" data-diff-key="char.{{ loop.index0 }}.role">{{ c.role }}</span><br>
|
|
<span class="text-muted ms-4" data-diff-key="char.{{ loop.index0 }}.desc">{{ c.description }}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<h6 class="text-muted text-uppercase small fw-bold border-bottom pb-1">Plot Structure</h6>
|
|
{% for book in bible.books %}
|
|
<div class="mb-2" data-diff-key="book.{{ book.book_number }}">
|
|
<input type="checkbox" class="select-checkbox me-2 d-none" value="book.{{ book.book_number }}">
|
|
<strong data-diff-key="book.{{ book.book_number }}.title">Book {{ book.book_number }}: {{ book.title }}</strong>
|
|
<p class="fst-italic small text-muted mb-1 ms-4" data-diff-key="book.{{ book.book_number }}.instr">{{ book.manual_instruction }}</p>
|
|
<ol class="small ps-3 mb-0">
|
|
{% for beat in book.plot_beats %}
|
|
<li><input type="checkbox" class="select-checkbox me-2 d-none" value="book.{{ book.book_number }}.beat.{{ loop.index0 }}"><span data-diff-key="book.{{ book.book_number }}.beat.{{ loop.index0 }}">{{ beat }}</span></li>
|
|
{% endfor %}
|
|
</ol>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
<div class="row">
|
|
<!-- ORIGINAL -->
|
|
<div class="col-md-6">
|
|
<div class="card border-secondary mb-4">
|
|
<div class="card-header bg-secondary text-white">
|
|
<h5 class="mb-0">Original</h5>
|
|
</div>
|
|
<div class="card-body bg-light" id="original-col" style="max-height: 800px; overflow-y: auto;">
|
|
{{ render_bible(original) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- NEW DRAFT -->
|
|
<div class="col-md-6">
|
|
<div class="card border-success mb-4">
|
|
<div class="card-header bg-success text-white">
|
|
<h5 class="mb-0">New Draft</h5>
|
|
</div>
|
|
<div class="card-body bg-white" id="new-col" style="max-height: 800px; overflow-y: auto;">
|
|
{{ render_bible(new) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
let refinePollInterval = null;
|
|
|
|
function showLoading(form) {
|
|
const btn = form.querySelector('button[type="submit"]');
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Refining...';
|
|
}
|
|
|
|
function submitRefine(event) {
|
|
event.preventDefault();
|
|
const form = event.target;
|
|
showLoading(form);
|
|
|
|
const instruction = form.querySelector('input[name="instruction"]').value;
|
|
const source = form.querySelector('input[name="source"]').value;
|
|
const selectedKeys = form.querySelector('input[name="selected_keys"]').value;
|
|
|
|
fetch(`/project/{{ project.id }}/refine_bible`, {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({ instruction: instruction, source: source, selected_keys: selectedKeys })
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.task_id) {
|
|
const modalHtml = `
|
|
<div class="modal fade" id="refineProgressModal" tabindex="-1" data-bs-backdrop="static">
|
|
<div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-body text-center p-4">
|
|
<div class="spinner-border text-warning mb-3" style="width: 3rem; height: 3rem;"></div>
|
|
<h4>Refining Draft...</h4><p class="text-muted">The AI is processing your changes.</p>
|
|
</div></div></div>
|
|
</div>`;
|
|
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
|
const modal = new bootstrap.Modal(document.getElementById('refineProgressModal'));
|
|
modal.show();
|
|
|
|
refinePollInterval = setInterval(() => {
|
|
fetch(`/task_status/${data.task_id}`).then(r => r.json()).then(status => {
|
|
if (status.status === 'completed') window.location.reload();
|
|
});
|
|
}, 2000);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
alert("Request failed: " + err);
|
|
const btn = form.querySelector('button[type="submit"]');
|
|
btn.disabled = false;
|
|
btn.innerHTML = '<i class="fas fa-magic me-1"></i> Refine Draft';
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const original = document.getElementById('original-col');
|
|
const newDraft = document.getElementById('new-col');
|
|
const confirmInput = document.getElementById('confirmSelectedKeys');
|
|
const refineInput = document.getElementById('refineSelectedKeys');
|
|
const btnAcceptSelected = document.getElementById('btnAcceptSelected');
|
|
const btnRefine = document.getElementById('btnRefine');
|
|
const btnSelectAll = document.getElementById('btnSelectAll');
|
|
|
|
// 1. Highlight Differences
|
|
const newElements = newDraft.querySelectorAll('[data-diff-key]');
|
|
newElements.forEach(el => {
|
|
const key = el.getAttribute('data-diff-key');
|
|
const origEl = original.querySelector(`[data-diff-key="${key}"]`);
|
|
|
|
// Find associated checkbox (it might be a sibling or parent wrapper)
|
|
// In our macro, checkbox is usually a sibling of the span with data-diff-key
|
|
let checkbox = el.parentElement.querySelector(`input[value="${key}"]`);
|
|
if (!checkbox) {
|
|
// Try finding it in the parent li/div if the key matches the container
|
|
// Also handle nested keys: char.0.name -> char.0
|
|
let parentKey = key;
|
|
if (key.startsWith('char.') && key.split('.').length > 2) {
|
|
parentKey = key.split('.').slice(0, 2).join('.');
|
|
} else if (key.startsWith('book.') && key.split('.').length === 3 && key.split('.')[2] !== 'beat') {
|
|
// book.1.title -> book.1 (but book.1.beat.0 stays book.1.beat.0)
|
|
parentKey = key.split('.').slice(0, 2).join('.');
|
|
}
|
|
|
|
const container = el.closest('li, div');
|
|
checkbox = container ? container.querySelector(`input[value="${parentKey}"]`) : null;
|
|
}
|
|
|
|
if (!origEl) {
|
|
el.classList.add('diff-added');
|
|
el.title = "New item added";
|
|
if (checkbox) {
|
|
checkbox.classList.remove('d-none');
|
|
checkbox.checked = true;
|
|
}
|
|
} else if (el.innerText.trim() !== origEl.innerText.trim()) {
|
|
el.classList.add('diff-changed');
|
|
origEl.classList.add('diff-changed');
|
|
el.title = "Changed from original";
|
|
if (checkbox) {
|
|
checkbox.classList.remove('d-none');
|
|
checkbox.checked = true;
|
|
}
|
|
}
|
|
});
|
|
|
|
// Check for removed items
|
|
const origElements = original.querySelectorAll('[data-diff-key]');
|
|
origElements.forEach(el => {
|
|
const key = el.getAttribute('data-diff-key');
|
|
const newEl = newDraft.querySelector(`[data-diff-key="${key}"]`);
|
|
if (!newEl) {
|
|
el.classList.add('diff-removed');
|
|
el.title = "Removed in new draft";
|
|
}
|
|
});
|
|
|
|
// Show Select All if there are visible checkboxes
|
|
if (newDraft.querySelector('.select-checkbox:not(.d-none)')) {
|
|
btnSelectAll.style.display = 'inline-block';
|
|
}
|
|
|
|
function updateSelectionState() {
|
|
const checkboxes = newDraft.querySelectorAll('.select-checkbox:checked');
|
|
const keys = Array.from(checkboxes).map(cb => cb.value);
|
|
const jsonKeys = JSON.stringify(keys);
|
|
|
|
confirmInput.value = jsonKeys;
|
|
refineInput.value = jsonKeys;
|
|
|
|
const count = keys.length;
|
|
|
|
// Update Accept Button
|
|
btnAcceptSelected.disabled = count === 0;
|
|
btnAcceptSelected.innerHTML = count > 0 ?
|
|
`<i class="fas fa-check-double me-1"></i> Accept ${count} Selected` :
|
|
`<i class="fas fa-check-double me-1"></i> Accept Selected`;
|
|
|
|
// Update Refine Button
|
|
btnRefine.innerHTML = count > 0 ?
|
|
`<i class="fas fa-magic me-1"></i> Refine ${count} Selected` :
|
|
`<i class="fas fa-magic me-1"></i> Refine Draft`;
|
|
}
|
|
|
|
// 2. Handle Checkbox Selection
|
|
newDraft.addEventListener('change', function(e) {
|
|
if (e.target.classList.contains('select-checkbox')) {
|
|
updateSelectionState();
|
|
}
|
|
});
|
|
|
|
btnSelectAll.addEventListener('click', function() {
|
|
const checkboxes = newDraft.querySelectorAll('.select-checkbox:not(.d-none)');
|
|
const allChecked = Array.from(checkboxes).every(cb => cb.checked);
|
|
checkboxes.forEach(cb => cb.checked = !allChecked);
|
|
updateSelectionState();
|
|
});
|
|
|
|
// Initialize state with default selections
|
|
updateSelectionState();
|
|
|
|
// 3. Sync Scroll
|
|
let isSyncingLeft = false;
|
|
let isSyncingRight = false;
|
|
|
|
original.onscroll = function() {
|
|
if (!isSyncingLeft && document.getElementById('syncScroll').checked) {
|
|
isSyncingRight = true;
|
|
newDraft.scrollTop = this.scrollTop;
|
|
}
|
|
isSyncingLeft = false;
|
|
};
|
|
|
|
newDraft.onscroll = function() {
|
|
if (!isSyncingRight && document.getElementById('syncScroll').checked) {
|
|
isSyncingLeft = true;
|
|
original.scrollTop = this.scrollTop;
|
|
}
|
|
isSyncingRight = false;
|
|
};
|
|
});
|
|
</script>
|
|
{% endblock %} |