thethreemagi/bookapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed refinement

Browse Source
This commit is contained in:
=
2026-02-04 22:00:08 -05:00
parent ca221f0fb3
commit 3a80307cc2
3 changed files with 158 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
templates/bible_comparison.html
View File

@@ -25,16 +25,19 @@
<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" class="btn btn-warning text-nowrap"><i class="fas fa-magic me-1"></i> Refine Draft</button>
<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>
@@ -46,9 +49,9 @@
<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" data-diff-key="meta.title">{{ bible.project_metadata.title }}</dd>
<dt class="col-sm-4">Genre</dt><dd class="col-sm-8" data-diff-key="meta.genre">{{ bible.project_metadata.genre }}</dd>
<dt class="col-sm-4">Tone</dt><dd class="col-sm-8" data-diff-key="meta.tone">{{ bible.project_metadata.style.tone }}</dd>
<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>
@@ -57,8 +60,9 @@
<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" data-diff-key="char.{{ loop.index0 }}.desc">{{ c.description }}</span>
<span class="text-muted ms-4" data-diff-key="char.{{ loop.index0 }}.desc">{{ c.description }}</span>
</li>
{% endfor %}
</ul>
@@ -68,11 +72,12 @@
<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" data-diff-key="book.{{ book.book_number }}.instr">{{ book.manual_instruction }}</p>
<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 data-diff-key="book.{{ book.book_number }}.beat.{{ loop.index0 }}">{{ beat }}</li>
<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>
@@ -118,9 +123,57 @@ function showLoading(form) {
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]');
@@ -128,13 +181,39 @@ document.addEventListener('DOMContentLoaded', function() {
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;
}
}
});
@@ -148,8 +227,52 @@ document.addEventListener('DOMContentLoaded', function() {
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';
}
// 2. Sync Scroll
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;