New comparison feature.

templates/project_review.html

@@ -12,7 +12,7 @@
                 <p class="text-muted">The AI has generated your characters and plot structure. Review them below and refine if needed.</p>
                 
                 <!-- Refinement Bar -->
-                <form action="/project/{{ project.id }}/refine_bible" method="POST" class="mb-4" onsubmit="showLoading(this)">
+                <form id="refineForm" onsubmit="submitRefine(event)" class="mb-4">
                     <div class="input-group shadow-sm">
                         <span class="input-group-text bg-warning text-dark"><i class="fas fa-magic"></i></span>
                         <input type="text" name="instruction" class="form-control" placeholder="AI Instruction: e.g. 'Change the ending of Book 1', 'Add a plot point about the ring', 'Make the tone darker'" required>
@@ -88,5 +88,40 @@ function showLoading(form) {
     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;
+    
+    fetch(`/project/{{ project.id }}/refine_bible`, {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({ instruction: instruction, source: 'original' })
+    })
+    .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 Bible...</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();
+            
+            setInterval(() => {
+                fetch(`/task_status/${data.task_id}`).then(r => r.json()).then(status => {
+                    if (status.status === 'completed') window.location.href = `/project/{{ project.id }}/bible_comparison`;
+                });
+            }, 2000);
+        }
+    });
+}
 </script>
 {% endblock %}