Spaces:

Andyx1976
/

Manual_captioning_tool

Running

App Files Files Community

Andyx1976 commited on 7 days ago

Commit

c511686

verified ·

1 Parent(s): b607269

Update index.html

Browse files

Files changed (1) hide show

index.html +795 -19

index.html CHANGED Viewed

@@ -1,19 +1,795 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dataset Caption Tag Manager</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- JSZip for Firefox/Fallback Export -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        dark: { 900: '#11111b', 800: '#1e1e2e', 700: '#313244', 600: '#45475a', 500: '#585b70' },
+                        accent: { primary: '#89b4fa', secondary: '#cba6f7', danger: '#f38ba8', success: '#a6e3a1' }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar { width: 8px; height: 8px; }
+        ::-webkit-scrollbar-track { background: #1e1e2e; }
+        ::-webkit-scrollbar-thumb { background: #45475a; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #585b70; }
+        body { font-family: system-ui, -apple-system, sans-serif; background-color: #11111b; color: #cdd6f4; overflow: hidden; }
+        .img-card { transition: transform 0.1s, box-shadow 0.1s; }
+        .img-card.selected { box-shadow: 0 0 0 4px #89b4fa; transform: scale(0.98); }
+        .tag-pill { display: inline-flex; align-items: center; background: #313244; padding: 2px 8px; border-radius: 12px; font-size: 0.85rem; margin: 2px; border: 1px solid #cba6f7; cursor: pointer; transition: background 0.2s;}
+        .tag-pill:hover { background: #45475a; }
+        #lightbox { display: none; background: rgba(0,0,0,0.85); backdrop-filter: blur(4px); z-index: 50; }
+        #lightbox.active { display: flex; }
+        #lightbox img { max-height: 90vh; max-width: 90vw; object-fit: contain; }
+        #custom-modal { display: none; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); z-index: 60; }
+        #custom-modal.active { display: flex; }
+        .drop-zone-overlay { display: none; background: rgba(137, 180, 250, 0.2); border: 4px dashed #89b4fa; z-index: 40;}
+        body.dragover .drop-zone-overlay { display: flex; }
+    </style>
+</head>
+<body class="h-screen flex flex-col">
+    <!-- Top Navigation Bar -->
+    <header class="bg-dark-800 border-b border-dark-700 p-3 flex flex-wrap items-center justify-between gap-4 shrink-0">
+        <div class="flex items-center gap-2">
+            <h1 class="text-xl font-bold text-accent-primary mr-4">TagManager</h1>
+            <button id="btn-load-folder" class="bg-dark-700 hover:bg-dark-600 text-white px-3 py-1.5 rounded text-sm flex items-center gap-2 transition" title="Requires Chromium">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>
+                Load Folder
+            </button>
+            <span class="text-dark-500 text-xs">-or-</span>
+            <input type="file" id="btn-load-files" multiple accept="image/*,.txt" class="text-sm text-gray-400 file:mr-2 file:py-1 file:px-2 file:rounded file:border-0 file:text-sm file:bg-dark-700 file:text-white hover:file:bg-dark-600 cursor-pointer" title="Fallback for Firefox or specific files">
+            <div class="w-px h-6 bg-dark-600 mx-2"></div>
+            <button id="btn-undo" class="bg-dark-700 hover:bg-dark-600 text-white px-3 py-1.5 rounded text-sm flex items-center gap-2 transition disabled:opacity-50 disabled:cursor-not-allowed">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"></path></svg>
+                Undo (<span id="undo-count">0</span>)
+            </button>
+            <!-- New Sort Lines Button -->
+            <button id="btn-sort-lines" class="bg-dark-700 hover:bg-dark-600 text-white border border-transparent px-3 py-1.5 rounded text-sm flex items-center gap-2 transition" title="Toggle sorting order of the master list">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path></svg>
+                <span id="sort-label">Sort: Time</span>
+            </button>
+        </div>
+        <div class="flex items-center gap-3">
+            <div class="flex items-center gap-1">
+                <label class="text-xs text-dark-400">Prefix:</label>
+                <input type="text" id="global-prefix" class="bg-dark-900 border border-dark-600 rounded px-2 py-1 text-sm w-32 focus:border-accent-primary outline-none" placeholder="e.g. triggerword,">
+            </div>
+            <div class="flex items-center gap-1">
+                <label class="text-xs text-dark-400">Suffix:</label>
+                <input type="text" id="global-suffix" class="bg-dark-900 border border-dark-600 rounded px-2 py-1 text-sm w-32 focus:border-accent-primary outline-none" placeholder="e.g. masterpiece">
+            </div>
+            <label class="flex items-center gap-2 text-sm cursor-pointer ml-2">
+                <input type="checkbox" id="toggle-uncaptioned" class="rounded bg-dark-900 border-dark-600 text-accent-primary focus:ring-accent-primary">
+                Uncaptioned Only
+            </label>
+            <!-- Select/Deselect All Buttons -->
+            <div class="flex items-center gap-1 ml-1">
+                <button id="btn-select-all" class="text-xs bg-dark-700 hover:bg-dark-600 px-2 py-1.5 rounded text-dark-300 hover:text-white transition" title="Select all currently visible images">Select All</button>
+                <button id="btn-deselect-all" class="text-xs bg-dark-700 hover:bg-dark-600 px-2 py-1.5 rounded text-dark-300 hover:text-white transition" title="Deselect all images">Deselect</button>
+            </div>
+            <div class="w-px h-6 bg-dark-600 mx-2"></div>
+            <button id="btn-export-folder" class="bg-accent-primary hover:bg-blue-400 text-dark-900 font-medium px-3 py-1.5 rounded text-sm flex items-center gap-2 transition" title="Overwrites/Saves .txt directly (Chromium Only)">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"></path></svg>
+                Save to Folder
+            </button>
+            <button id="btn-export-zip" class="bg-dark-700 hover:bg-dark-600 text-white border border-dark-500 px-3 py-1.5 rounded text-sm flex items-center gap-2 transition" title="Downloads a .zip of all .txt files (All Browsers)">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
+                Export ZIP
+            </button>
+        </div>
+    </header>
+    <!-- Main Layout -->
+    <main class="flex-1 flex overflow-hidden">
+        <!-- Image Grid -->
+        <div id="grid-container" class="flex-1 overflow-y-auto p-4 relative">
+            <div class="flex justify-between items-center mb-4 text-sm text-dark-400">
+                <span id="status-text">0 Images Loaded</span>
+                <span class="italic text-xs">Shift+Click to multi-select. Ctrl+Click to toggle.</span>
+            </div>
+            <div id="image-grid" class="grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-4">
+                <!-- Images will be injected here -->
+            </div>
+        </div>
+        <!-- Right Sidebar (Master List) -->
+        <div class="w-80 bg-dark-800 border-l border-dark-700 flex flex-col shrink-0">
+            <!-- Lines Section -->
+            <div class="flex-1 flex flex-col min-h-0">
+                <div class="p-3 bg-dark-700 font-semibold text-sm flex justify-between items-center">
+                    <span>Sentences / Lines</span>
+                    <span class="text-xs text-dark-400 font-normal">Click to apply selected</span>
+                </div>
+                <div class="p-2 border-b border-dark-600 flex gap-2">
+                    <input type="text" id="input-new-line" class="flex-1 bg-dark-900 border border-dark-600 rounded px-2 py-1 text-sm focus:border-accent-secondary outline-none" placeholder="New line (Enter)">
+                    <button id="btn-add-line" class="bg-dark-600 hover:bg-dark-500 px-2 rounded">+</button>
+                </div>
+                <div id="list-lines" class="flex-1 overflow-y-auto p-2 flex flex-col gap-1">
+                    <!-- Lines will be injected here -->
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Overlay UI -->
+    <div class="drop-zone-overlay absolute inset-0 items-center justify-center pointer-events-none">
+        <div class="bg-dark-800 p-8 rounded-xl border border-accent-primary shadow-2xl flex flex-col items-center">
+            <svg class="w-16 h-16 text-accent-primary mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
+            <h2 class="text-2xl font-bold">Drop Images/Folders Here</h2>
+        </div>
+    </div>
+    <div id="lightbox" class="fixed inset-0 items-center justify-center">
+        <img id="lightbox-img" src="" alt="High-res preview">
+    </div>
+    <!-- Custom Modal -->
+    <div id="custom-modal" class="fixed inset-0 items-center justify-center">
+        <div class="bg-dark-800 border border-dark-600 rounded-lg shadow-xl w-96 p-5 flex flex-col gap-4">
+            <h3 id="modal-title" class="text-lg font-bold">Title</h3>
+            <p id="modal-desc" class="text-sm text-dark-400">Description</p>
+            <input type="text" id="modal-input" class="bg-dark-900 border border-dark-600 rounded px-3 py-2 text-sm focus:border-accent-primary outline-none">
+            <div class="flex justify-end gap-2 mt-2">
+                <button id="modal-cancel" class="px-4 py-2 rounded text-sm bg-dark-700 hover:bg-dark-600 transition">Cancel</button>
+                <button id="modal-confirm" class="px-4 py-2 rounded text-sm bg-accent-primary text-dark-900 font-bold hover:bg-blue-400 transition">Confirm</button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // --- State Management ---
+        const imageStore = {}; // { id: { file, url, name, hash } }
+        let directoryHandle = null; // For File System API saving
+        let state = {
+            imageOrder: [], // [id1, id2]
+            imageTags: {}, // { id: [tagId1, tagId2] }
+            tags: {}, // { tagId: { text: "cat" } }
+            selected: [], // [id1, id2]
+            globalPrefix: "",
+            globalSuffix: "",
+            showUncaptioned: false
+        };
+        const history = []; // Stack of cloned states (max 3)
+        let lastSelectedIdx = -1;
+        let isSortedAlphabetically = false; // View state for sidebar sorting
+        // --- Core Functions ---
+        const generateId = () => Math.random().toString(36).substr(2, 9);
+        const pushState = () => {
+            history.push(JSON.parse(JSON.stringify(state)));
+            if (history.length > 3) history.shift();
+            updateUndoUI();
+        };
+        const popState = () => {
+            if (history.length === 0) return;
+            state = history.pop();
+            lastSelectedIdx = -1;
+            updateUndoUI();
+            renderAll();
+        };
+        const updateUndoUI = () => {
+            const btn = document.getElementById('btn-undo');
+            const count = document.getElementById('undo-count');
+            count.textContent = history.length;
+            btn.disabled = history.length === 0;
+        };
+        const createTag = (text) => {
+            text = text.trim();
+            if (!text) return null;
+            // Check if exists
+            for (const [id, tag] of Object.entries(state.tags)) {
+                if (tag.text.toLowerCase() === text.toLowerCase()) return id;
+            }
+            const id = generateId();
+            state.tags[id] = { text };
+            return id;
+        };
+        // --- UI & Rendering ---
+        const renderAll = () => {
+            renderGrid();
+            renderSidebar();
+            updateStatus();
+            document.getElementById('global-prefix').value = state.globalPrefix;
+            document.getElementById('global-suffix').value = state.globalSuffix;
+            document.getElementById('toggle-uncaptioned').checked = state.showUncaptioned;
+        };
+        const updateStatus = () => {
+            document.getElementById('status-text').textContent =
+                `${state.imageOrder.length} Images Loaded | ${state.selected.length} Selected`;
+        };
+        const renderSidebar = () => {
+            const listLines = document.getElementById('list-lines');
+            listLines.innerHTML = '';
+            const lines = [];
+            for (const [id, tag] of Object.entries(state.tags)) {
+                lines.push({id, ...tag});
+            }
+            // Apply Sort filter if enabled
+            if (isSortedAlphabetically) {
+                lines.sort((a, b) => a.text.localeCompare(b.text));
+            }
+            lines.forEach(l => {
+                const el = document.createElement('div');
+                el.className = 'bg-dark-900 border border-dark-600 rounded p-2 text-sm text-dark-300 hover:border-accent-secondary cursor-pointer group relative flex items-center min-h-[40px]';
+                el.innerHTML = `
+                    <p class="pr-12 break-words whitespace-normal">${l.text}</p>
+                    <div class="absolute right-2 top-1/2 -translate-y-1/2 hidden group-hover:flex gap-2">
+                        <button class="hover:text-accent-primary" onclick="editTag(event, '${l.id}')"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg></button>
+                        <button class="text-accent-danger hover:text-red-400" onclick="deleteMasterTag(event, '${l.id}')"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg></button>
+                    </div>
+                `;
+                el.onclick = () => applyTagToSelected(l.id);
+                listLines.appendChild(el);
+            });
+        };
+        const renderGrid = () => {
+            const grid = document.getElementById('image-grid');
+            grid.innerHTML = '';
+            let visibleOrder = state.imageOrder;
+            if (state.showUncaptioned) {
+                visibleOrder = visibleOrder.filter(id => state.imageTags[id].length === 0);
+            }
+            visibleOrder.forEach((id, displayIdx) => {
+                const imgData = imageStore[id];
+                const isSelected = state.selected.includes(id);
+                const tagIds = state.imageTags[id];
+                const card = document.createElement('div');
+                card.className = `img-card bg-dark-800 rounded-lg overflow-hidden border border-dark-700 flex flex-col ${isSelected ? 'selected' : ''}`;
+                card.dataset.id = id;
+                card.dataset.idx = state.imageOrder.indexOf(id);
+                // Thumbnail area
+                const imgWrap = document.createElement('div');
+                imgWrap.className = 'relative h-48 w-full cursor-pointer bg-dark-900 group';
+                imgWrap.innerHTML = `
+                    <img src="${imgData.url}" loading="lazy" class="w-full h-full object-contain">
+                    <div class="absolute inset-0 bg-black/50 hidden group-hover:flex items-center justify-center pointer-events-none">
+                        <span class="text-white text-xs bg-dark-900/80 px-2 py-1 rounded border border-dark-600">Select</span>
+                    </div>
+                    <button class="absolute top-2 right-2 bg-dark-900/80 p-1 rounded hidden group-hover:block hover:bg-accent-primary text-white hover:text-dark-900 transition z-10" onclick="openLightbox(event, '${imgData.url}')" title="Zoom">
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path></svg>
+                    </button>
+                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2 text-xs truncate pointer-events-none">${imgData.name}</div>
+                `;
+                imgWrap.onclick = (e) => handleImageSelect(e, id, state.imageOrder.indexOf(id));
+                // Tags area
+                const tagsWrap = document.createElement('div');
+                tagsWrap.className = 'p-2 flex-1 flex flex-col gap-2 min-h-[80px] bg-dark-800';
+                const pillsContainer = document.createElement('div');
+                pillsContainer.className = 'flex flex-wrap gap-1 flex-1 content-start';
+                tagIds.forEach(tagId => {
+                    const tagDef = state.tags[tagId];
+                    if (!tagDef) return; // safety
+                    const pill = document.createElement('span');
+                    pill.className = `tag-pill group flex items-start text-left`;
+                    const textDisplay = `<span class="break-words whitespace-normal leading-tight py-0.5">${tagDef.text}</span>`;
+                    pill.innerHTML = `${textDisplay} <button class="ml-1 text-dark-400 group-hover:text-accent-danger flex-shrink-0" onclick="removeTagFromImage(event, '${id}', '${tagId}')">&times;</button>`;
+                    pillsContainer.appendChild(pill);
+                });
+                // Input to add tag to specific image
+                const inputWrap = document.createElement('div');
+                inputWrap.innerHTML = `<input type="text" class="w-full bg-dark-900 border border-dark-600 rounded px-2 py-1 text-xs outline-none focus:border-accent-primary" placeholder="Add sentence/line to this image (Enter)" onkeydown="handleImageInputKey(event, '${id}')">`;
+                tagsWrap.appendChild(pillsContainer);
+                tagsWrap.appendChild(inputWrap);
+                card.appendChild(imgWrap);
+                card.appendChild(tagsWrap);
+                grid.appendChild(card);
+            });
+        };
+        // --- Interaction Logic ---
+        const handleImageSelect = (e, id, idx) => {
+            pushState();
+            if (e.shiftKey && lastSelectedIdx !== -1) {
+                // Range select
+                const start = Math.min(lastSelectedIdx, idx);
+                const end = Math.max(lastSelectedIdx, idx);
+                for (let i = start; i <= end; i++) {
+                    const currId = state.imageOrder[i];
+                    if (!state.selected.includes(currId)) state.selected.push(currId);
+                }
+            } else if (e.ctrlKey || e.metaKey) {
+                // Toggle
+                const sIdx = state.selected.indexOf(id);
+                if (sIdx > -1) state.selected.splice(sIdx, 1);
+                else state.selected.push(id);
+                lastSelectedIdx = idx;
+            } else {
+                // Single select (or deselect all if clicking already selected)
+                if (state.selected.length === 1 && state.selected[0] === id) {
+                    state.selected = [];
+                    lastSelectedIdx = -1;
+                } else {
+                    state.selected = [id];
+                    lastSelectedIdx = idx;
+                }
+            }
+            renderGridClasses();
+            updateStatus();
+        };
+        const renderGridClasses = () => {
+            document.querySelectorAll('.img-card').forEach(card => {
+                if (state.selected.includes(card.dataset.id)) card.classList.add('selected');
+                else card.classList.remove('selected');
+            });
+        }
+        const applyTagToSelected = (tagId) => {
+            if (state.selected.length === 0) {
+                showModal("Info", "Select one or more images first to apply this line.", null, false);
+                return;
+            }
+            pushState();
+            let applied = 0;
+            state.selected.forEach(imgId => {
+                if (!state.imageTags[imgId].includes(tagId)) {
+                    state.imageTags[imgId].push(tagId);
+                    applied++;
+                }
+            });
+            if (applied > 0) renderGrid();
+        };
+        const removeTagFromImage = (e, imgId, tagId) => {
+            e.stopPropagation();
+            pushState();
+            state.imageTags[imgId] = state.imageTags[imgId].filter(t => t !== tagId);
+            renderGrid();
+        };
+        const handleImageInputKey = (e, imgId) => {
+            if (e.key === 'Enter' && e.target.value.trim()) {
+                pushState();
+                const text = e.target.value.trim();
+                const tagId = createTag(text);
+                if (!state.imageTags[imgId].includes(tagId)) {
+                    state.imageTags[imgId].push(tagId);
+                }
+                e.target.value = '';
+                renderAll();
+            }
+        };
+        const deleteMasterTag = (e, tagId) => {
+            e.stopPropagation();
+            pushState();
+            // Remove from master list
+            delete state.tags[tagId];
+            // Remove from all images
+            for (const imgId of state.imageOrder) {
+                state.imageTags[imgId] = state.imageTags[imgId].filter(t => t !== tagId);
+            }
+            renderAll();
+        };
+        const editTag = (e, tagId) => {
+            e.stopPropagation();
+            const tag = state.tags[tagId];
+            showModal("Edit Line", "Modify the text. Changes will reflect on all linked images.", (newVal) => {
+                if (newVal) {
+                    pushState();
+                    state.tags[tagId].text = newVal;
+                    renderAll();
+                }
+            }, true, tag.text);
+        };
+        // --- File Handling & Importing ---
+        const processFiles = async (filesArray) => {
+            const images = [];
+            const texts = {}; // lowercase basename -> content
+            for (const file of filesArray) {
+                if (!file || !file.name) continue;
+                const name = file.name;
+                const ext = name.slice((name.lastIndexOf(".") - 1 >>> 0) + 2).toLowerCase();
+                if (['jpg', 'jpeg', 'png', 'webp'].includes(ext)) {
+                    images.push(file);
+                } else if (ext === 'txt') {
+                    const baseName = name.replace(/\.[^/.]+$/, "").toLowerCase();
+                    const text = await file.text();
+                    texts[baseName] = text;
+                }
+            }
+            if (images.length === 0) return;
+            pushState();
+            images.forEach(imgFile => {
+                const baseName = imgFile.name.replace(/\.[^/.]+$/, "");
+                const hash = imgFile.name + imgFile.size; // Basic dup check
+                // Skip duplicates
+                let isDup = false;
+                for (const existingId of state.imageOrder) {
+                    if (imageStore[existingId].hash === hash) { isDup = true; break; }
+                }
+                if (isDup) return;
+                const id = generateId();
+                imageStore[id] = {
+                    file: imgFile,
+                    url: URL.createObjectURL(imgFile),
+                    name: imgFile.name,
+                    hash: hash,
+                    baseName: baseName
+                };
+                state.imageOrder.push(id);
+                state.imageTags[id] = [];
+                // Import logic: Check if matching txt exists
+                if (texts[baseName.toLowerCase()]) {
+                    const content = texts[baseName.toLowerCase()];
+                    // Split by comma for tags
+                    const parts = content.split(',').map(s => s.trim()).filter(s => s);
+                    parts.forEach(part => {
+                        const tagId = createTag(part);
+                        if (!state.imageTags[id].includes(tagId)) {
+                            state.imageTags[id].push(tagId);
+                        }
+                    });
+                }
+            });
+            renderAll();
+        };
+        // --- Event Listeners ---
+        // Add Master Lines
+        document.getElementById('input-new-line').addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') document.getElementById('btn-add-line').click();
+        });
+        document.getElementById('btn-add-line').addEventListener('click', () => {
+            const inp = document.getElementById('input-new-line');
+            if(inp.value.trim()) { pushState(); createTag(inp.value); inp.value = ''; renderSidebar(); }
+        });
+        // Toggle Sorting Logic
+        document.getElementById('btn-sort-lines').addEventListener('click', (e) => {
+            isSortedAlphabetically = !isSortedAlphabetically;
+            const btn = e.currentTarget;
+            const label = document.getElementById('sort-label');
+            if (isSortedAlphabetically) {
+                label.textContent = 'Sort: A-Z';
+                btn.classList.replace('text-white', 'text-accent-primary');
+                btn.classList.replace('border-transparent', 'border-accent-primary');
+            } else {
+                label.textContent = 'Sort: Time';
+                btn.classList.replace('text-accent-primary', 'text-white');
+                btn.classList.replace('border-accent-primary', 'border-transparent');
+            }
+            renderSidebar();
+        });
+        // Top Bar inputs & Toggles
+        document.getElementById('global-prefix').addEventListener('input', e => state.globalPrefix = e.target.value);
+        document.getElementById('global-suffix').addEventListener('input', e => state.globalSuffix = e.target.value);
+        document.getElementById('toggle-uncaptioned').addEventListener('change', e => {
+            state.showUncaptioned = e.target.checked;
+            renderGrid();
+        });
+        document.getElementById('btn-select-all').addEventListener('click', () => {
+            if (state.imageOrder.length === 0) return;
+            pushState();
+            let visibleOrder = state.imageOrder;
+            if (state.showUncaptioned) {
+                visibleOrder = visibleOrder.filter(id => state.imageTags[id].length === 0);
+            }
+            state.selected = [...visibleOrder];
+            renderGridClasses();
+            updateStatus();
+        });
+        document.getElementById('btn-deselect-all').addEventListener('click', () => {
+            if (state.selected.length === 0) return;
+            pushState();
+            state.selected = [];
+            lastSelectedIdx = -1;
+            renderGridClasses();
+            updateStatus();
+        });
+        document.getElementById('btn-undo').addEventListener('click', popState);
+        // Lightbox
+        const lightbox = document.getElementById('lightbox');
+        const openLightbox = (e, url) => {
+            e.stopPropagation();
+            document.getElementById('lightbox-img').src = url;
+            lightbox.classList.add('active');
+        };
+        lightbox.addEventListener('click', () => lightbox.classList.remove('active'));
+        // Load folder via standard input fallback
+        document.getElementById('btn-load-files').addEventListener('change', (e) => {
+            processFiles(Array.from(e.target.files));
+            e.target.value = ''; // reset
+        });
+        // Load folder via API (Chromium)
+        document.getElementById('btn-load-folder').addEventListener('click', async () => {
+            if (!window.showDirectoryPicker) {
+                showModal("Browser Unsupported", "Direct folder access is only available in Chromium browsers (Chrome, Edge, Brave). Please use the 'Load Files' fallback button next to it.", null, false);
+                return;
+            }
+            try {
+                directoryHandle = await window.showDirectoryPicker({ mode: 'readwrite' });
+                const files = [];
+                for await (const entry of directoryHandle.values()) {
+                    if (entry.kind === 'file') {
+                        files.push(await entry.getFile());
+                    }
+                }
+                processFiles(files);
+            } catch (err) {
+                console.warn(err);
+            }
+        });
+        // --- Chromium-Proof Drag and Drop ---
+        document.body.addEventListener('dragover', e => { e.preventDefault(); document.body.classList.add('dragover'); });
+        document.body.addEventListener('dragleave', e => { if (e.target === document.body || e.relatedTarget === null) document.body.classList.remove('dragover'); });
+        document.body.addEventListener('drop', e => {
+            e.preventDefault();
+            document.body.classList.remove('dragover');
+            const files = [];
+            const dirEntries = [];
+            if (e.dataTransfer.items) {
+                // Parse synchronously! Chromium will clear e.dataTransfer.items if we yield/await here.
+                for (let i = 0; i < e.dataTransfer.items.length; i++) {
+                    const item = e.dataTransfer.items[i];
+                    if (item.kind === 'file') {
+                        const entry = item.webkitGetAsEntry ? item.webkitGetAsEntry() : null;
+                        if (entry && entry.isDirectory) {
+                            dirEntries.push(entry);
+                        } else {
+                            const file = item.getAsFile();
+                            if (file) files.push(file);
+                        }
+                    }
+                }
+            } else if (e.dataTransfer.files) {
+                for (let i = 0; i < e.dataTransfer.files.length; i++) {
+                    files.push(e.dataTransfer.files[i]);
+                }
+            }
+            // Fast path for normal file drops
+            if (dirEntries.length === 0) {
+                if (files.length > 0) processFiles(files);
+                return;
+            }
+            // Complex path for dropped folders (Recursive reading)
+            const readDir = (dirEntry) => {
+                return new Promise(resolve => {
+                    const dirReader = dirEntry.createReader();
+                    const allEntries = [];
+                    const readBatch = () => {
+                        dirReader.readEntries(async (entries) => {
+                            if (entries.length === 0) {
+                                // Batch finished, now process the collected entries
+                                const filePromises = allEntries.map(ent => {
+                                    return new Promise(res => {
+                                        if (ent.isFile) {
+                                            ent.file(f => res(f), () => res(null));
+                                        } else if (ent.isDirectory) {
+                                            readDir(ent).then(res); // Recurse inside
+                                        } else {
+                                            res(null);
+                                        }
+                                    });
+                                });
+                                const nestedFiles = await Promise.all(filePromises);
+                                resolve(nestedFiles.flat().filter(f => f !== null));
+                            } else {
+                                allEntries.push(...entries);
+                                readBatch(); // Fetch next batch of 100 entries
+                            }
+                        }, () => resolve([])); // Error fallback
+                    };
+                    readBatch();
+                });
+            };
+            // Process all dropped directory entries
+            Promise.all(dirEntries.map(readDir)).then(results => {
+                files.push(...results.flat());
+                if (files.length > 0) processFiles(files);
+            });
+        });
+        // Get Caption String for an Image
+        const getCaptionString = (id) => {
+            const tagIds = state.imageTags[id];
+            let elements = [];
+            if (state.globalPrefix) elements.push(state.globalPrefix.trim());
+            tagIds.forEach(tid => {
+                if(state.tags[tid]) elements.push(state.tags[tid].text);
+            });
+            if (state.globalSuffix) elements.push(state.globalSuffix.trim());
+            // Join properly avoiding double commas
+            return elements.join(', ').replace(/,\s*,/g, ',').trim();
+        };
+        // Export ZIP
+        document.getElementById('btn-export-zip').addEventListener('click', async () => {
+            if (state.imageOrder.length === 0) return showModal("Info", "No images loaded.", null, false);
+            const zip = new JSZip();
+            let count = 0;
+            state.imageOrder.forEach(id => {
+                const text = getCaptionString(id);
+                if (text) {
+                    const baseName = imageStore[id].baseName;
+                    zip.file(`${baseName}.txt`, text);
+                    count++;
+                }
+            });
+            if (count === 0) return showModal("Info", "No captions to export.", null, false);
+            const btn = document.getElementById('btn-export-zip');
+            const originalText = btn.innerHTML;
+            btn.innerHTML = 'Generating...';
+            zip.generateAsync({type:"blob"}).then(function(content) {
+                const a = document.createElement("a");
+                a.href = URL.createObjectURL(content);
+                a.download = "captions_export.zip";
+                a.click();
+                btn.innerHTML = originalText;
+            });
+        });
+        // Export to Folder (Direct API)
+        document.getElementById('btn-export-folder').addEventListener('click', async () => {
+            if (!window.showDirectoryPicker) {
+                showModal("Browser Unsupported", "Saving directly to a folder requires a Chromium browser. Please use 'Export ZIP' instead.", null, false);
+                return;
+            }
+            if (state.imageOrder.length === 0) return showModal("Info", "No images loaded.", null, false);
+            let handleToUse = directoryHandle;
+            if (!handleToUse) {
+                try {
+                    handleToUse = await window.showDirectoryPicker({ mode: 'readwrite' });
+                } catch(e) { return; } // User cancelled
+            }
+            const btn = document.getElementById('btn-export-folder');
+            const originalText = btn.innerHTML;
+            btn.innerHTML = 'Saving...';
+            let count = 0;
+            try {
+                for (const id of state.imageOrder) {
+                    const text = getCaptionString(id);
+                    if (text) {
+                        const baseName = imageStore[id].baseName;
+                        const fileHandle = await handleToUse.getFileHandle(`${baseName}.txt`, { create: true });
+                        const writable = await fileHandle.createWritable();
+                        // Flux standard dictates utf-8
+                        await writable.write(new Blob([text], {type: 'text/plain;charset=utf-8'}));
+                        await writable.close();
+                        count++;
+                    }
+                }
+                showModal("Success", `Saved ${count} caption files directly to folder.`, null, false);
+            } catch (err) {
+                showModal("Error", "Permission to write denied or folder access lost. " + err.message, null, false);
+            } finally {
+                btn.innerHTML = originalText;
+            }
+        });
+        // --- Custom Modal UI ---
+        const modal = document.getElementById('custom-modal');
+        const modalTitle = document.getElementById('modal-title');
+        const modalDesc = document.getElementById('modal-desc');
+        const modalInput = document.getElementById('modal-input');
+        const btnCancel = document.getElementById('modal-cancel');
+        const btnConfirm = document.getElementById('modal-confirm');
+        let modalConfirmCallback = null;
+        const showModal = (title, desc, onConfirm, showInput = false, defaultVal = "") => {
+            modalTitle.textContent = title;
+            modalDesc.textContent = desc;
+            if (showInput) {
+                modalInput.style.display = 'block';
+                modalInput.value = defaultVal;
+            } else {
+                modalInput.style.display = 'none';
+            }
+            btnCancel.style.display = onConfirm ? 'block' : 'none';
+            modalConfirmCallback = onConfirm;
+            modal.classList.add('active');
+            if (showInput) modalInput.focus();
+        };
+        const closeModal = () => {
+            modal.classList.remove('active');
+            modalConfirmCallback = null;
+        };
+        btnCancel.addEventListener('click', closeModal);
+        btnConfirm.addEventListener('click', () => {
+            const val = modalInput.value.trim();
+            if (modalConfirmCallback) modalConfirmCallback(val);
+            closeModal();
+        });
+        modalInput.addEventListener('keydown', e => {
+            if (e.key === 'Enter') btnConfirm.click();
+        });
+    </script>
+</body>
+</html>