Added style browser.

templates/actions/index.html

@@ -4,6 +4,8 @@
 <div class="d-flex justify-content-between align-items-center mb-4">
     <h2>Action Gallery</h2>
     <div class="d-flex">
+        <button id="batch-generate-btn" class="btn btn-outline-success me-2">Generate Missing Covers</button>
+        <button id="regenerate-all-btn" class="btn btn-outline-danger me-2">Regenerate All Covers</button>
         <a href="{{ url_for('create_action') }}" class="btn btn-success me-2">Create New Action</a>
         <form action="{{ url_for('rescan_actions') }}" method="post">
             <button type="submit" class="btn btn-outline-primary">Rescan Action Files</button>
@@ -11,6 +13,17 @@
     </div>
 </div>
 
+<!-- Batch Progress Bar -->
+<div id="batch-progress-container" class="card mb-4 d-none">
+    <div class="card-body">
+        <h5 id="batch-status-text">Batch Generating Actions...</h5>
+        <div class="progress mt-2" role="progressbar" aria-label="Batch Progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+            <div id="batch-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 0%">0%</div>
+        </div>
+        <p id="current-item-name" class="small text-muted mt-2 mb-0"></p>
+    </div>
+</div>
+
 <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
     {% for action in actions %}
     <div class="col" id="card-{{ action.slug }}">
@@ -39,3 +52,138 @@
     {% endfor %}
 </div>
 {% endblock %}
+
+{% block scripts %}
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        const batchBtn = document.getElementById('batch-generate-btn');
+        const regenAllBtn = document.getElementById('regenerate-all-btn');
+        const progressBar = document.getElementById('batch-progress-bar');
+        const container = document.getElementById('batch-progress-container');
+        const statusText = document.getElementById('batch-status-text');
+        const itemNameText = document.getElementById('current-item-name');
+        
+        const clientId = 'actions_batch_' + Math.random().toString(36).substring(2, 15);
+        const socket = new WebSocket(`ws://127.0.0.1:8188/ws?clientId=${clientId}`);
+        
+        let currentPromptId = null;
+        let resolveGeneration = null;
+
+        socket.addEventListener('message', (event) => {
+            const msg = JSON.parse(event.data);
+            if (msg.type === 'executing') {
+                if (msg.data.node === null && msg.data.prompt_id === currentPromptId) {
+                    if (resolveGeneration) resolveGeneration();
+                }
+            }
+        });
+
+        async function waitForCompletion(promptId) {
+            return new Promise((resolve) => {
+                const checkResolve = () => {
+                    clearInterval(pollInterval);
+                    resolve();
+                };
+                resolveGeneration = checkResolve;
+                const pollInterval = setInterval(async () => {
+                    try {
+                        const resp = await fetch(`/check_status/${promptId}`);
+                        const data = await resp.json();
+                        if (data.status === 'finished') {
+                            checkResolve();
+                        }
+                    } catch (err) {}
+                }, 2000);
+            });
+        }
+
+        async function runBatch() {
+            const response = await fetch('/get_missing_actions');
+            const data = await response.json();
+            const missing = data.missing;
+
+            if (missing.length === 0) {
+                alert("No actions missing cover images.");
+                return;
+            }
+
+            batchBtn.disabled = true;
+            regenAllBtn.disabled = true;
+            container.classList.remove('d-none');
+            
+            let completed = 0;
+            for (const item of missing) {
+                completed++;
+                const percent = Math.round((completed / missing.length) * 100);
+                progressBar.style.width = `${percent}%`;
+                progressBar.textContent = `${percent}%`;
+                statusText.textContent = `Batch Generating Actions: ${completed} / ${missing.length}`;
+                itemNameText.textContent = `Current: ${item.name}`;
+
+                try {
+                    // Random character for action preview
+                    const genResp = await fetch(`/action/${item.slug}/generate`, {
+                        method: 'POST',
+                        body: new URLSearchParams({ 
+                            'action': 'replace', 
+                            'client_id': clientId,
+                            'character_slug': '__random__' 
+                        }),
+                        headers: { 'X-Requested-With': 'XMLHttpRequest' }
+                    });
+                    const genData = await genResp.json();
+                    currentPromptId = genData.prompt_id;
+
+                    await waitForCompletion(currentPromptId);
+
+                    const finResp = await fetch(`/action/${item.slug}/finalize_generation/${currentPromptId}`, {
+                        method: 'POST',
+                        body: new URLSearchParams({ 'action': 'replace' })
+                    });
+                    const finData = await finResp.json();
+
+                    if (finData.success) {
+                        const img = document.getElementById(`img-${item.slug}`);
+                        const noImgSpan = document.getElementById(`no-img-${item.slug}`);
+                        if (img) {
+                            img.src = finData.image_url;
+                            img.classList.remove('d-none');
+                        }
+                        if (noImgSpan) noImgSpan.classList.add('d-none');
+                    }
+                } catch (err) {
+                    console.error(`Failed for ${item.name}:`, err);
+                }
+            }
+
+            statusText.textContent = "Batch Action Generation Complete!";
+            itemNameText.textContent = "";
+            batchBtn.disabled = false;
+            regenAllBtn.disabled = false;
+            setTimeout(() => { container.classList.add('d-none'); }, 5000);
+        }
+
+        batchBtn.addEventListener('click', async () => {
+            const response = await fetch('/get_missing_actions');
+            const data = await response.json();
+            if (data.missing.length === 0) {
+                alert("No actions missing cover images.");
+                return;
+            }
+            if (!confirm(`Generate cover images for ${data.missing.length} actions?`)) return;
+            runBatch();
+        });
+
+        regenAllBtn.addEventListener('click', async () => {
+            if (!confirm("This will unassign ALL current action cover images and generate new ones. Proceed?")) return;
+            
+            const clearResp = await fetch('/clear_all_action_covers', { method: 'POST' });
+            if (clearResp.ok) {
+                document.querySelectorAll('.img-container img').forEach(img => img.classList.add('d-none'));
+                document.querySelectorAll('.img-container .text-muted').forEach(span => span.classList.remove('d-none'));
+                runBatch();
+            }
+        });
+    });
+</script>
+{% endblock %}