Spaces:

Dyno1307
/

Translate-V2

Running

App Files Files Community

Dyno1307 commited on 25 days ago

Commit

03b2ad1

verified ·

1 Parent(s): 2d62dcf

Upload 15 files

Browse files

Files changed (16) hide show

.gitattributes +1 -0
frontend/WhatsApp Image 2025-10-07 at 12.52.12.jpeg +0 -0
frontend/backup/index.html +23 -0
frontend/backup/script.js +42 -0
frontend/backup/styles.css +54 -0
frontend/index.html +101 -0
frontend/public/android-chrome-192x192.png +0 -0
frontend/public/android-chrome-512x512.png +3 -0
frontend/public/apple-touch-icon.png +0 -0
frontend/public/favicon-16x16.png +0 -0
frontend/public/favicon-32x32.png +0 -0
frontend/public/favicon.ico +0 -0
frontend/public/site.webmanifest +1 -0
frontend/script.js +337 -0
frontend/site.webmanifest +1 -0
frontend/styles.css +512 -0

.gitattributes CHANGED Viewed

@@ -35,3 +35,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 data/processed/nepali.en filter=lfs diff=lfs merge=lfs -text
 data/processed/nepali.ne filter=lfs diff=lfs merge=lfs -text

 *tfevents* filter=lfs diff=lfs merge=lfs -text
 data/processed/nepali.en filter=lfs diff=lfs merge=lfs -text
 data/processed/nepali.ne filter=lfs diff=lfs merge=lfs -text
+frontend/public/android-chrome-512x512.png filter=lfs diff=lfs merge=lfs -text

frontend/WhatsApp Image 2025-10-07 at 12.52.12.jpeg ADDED Viewed

frontend/backup/index.html ADDED Viewed

	@@ -0,0 +1,23 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Saksi Translation</title>
+    <link rel="stylesheet" href="/frontend/styles.css">
+    <script src="/frontend/script.js" defer></script>
+</head>
+<body>
+    <div class="container">
+        <h1>Saksi Translation</h1>
+        <textarea id="text-to-translate" rows="5" placeholder="Enter text to translate..."></textarea>
+        <select id="source-language">
+            <option value="nepali">Nepali</option>
+            <option value="sinhala">Sinhala</option>
+        </select>
+        <button id="translate-button">Translate</button>
+        <h2>Translated Text:</h2>
+        <div id="output"></div>
+    </div>
+</body>
+</html>

frontend/backup/script.js ADDED Viewed

	@@ -0,0 +1,42 @@

+document.addEventListener('DOMContentLoaded', () => {
+    const translateButton = document.getElementById('translate-button');
+    const textToTranslate = document.getElementById('text-to-translate');
+    const sourceLanguage = document.getElementById('source-language');
+    const outputDiv = document.getElementById('output');
+    translateButton.addEventListener('click', async () => {
+        const text = textToTranslate.value;
+        const lang = sourceLanguage.value;
+        outputDiv.innerText = "Translating...";
+        if (!text.trim()) {
+            outputDiv.innerText = "Please enter some text to translate.";
+            return;
+        }
+        try {
+            const response = await fetch('/translate', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'accept': 'application/json'
+                },
+                body: JSON.stringify({
+                    text: text,
+                    source_language: lang
+                })
+            });
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.detail || 'An error occurred');
+            }
+            const data = await response.json();
+            outputDiv.innerText = data.translated_text;
+        } catch (error) {
+            outputDiv.innerText = `Error: ${error.message}`;
+        }
+    });
+});

frontend/backup/styles.css ADDED Viewed

	@@ -0,0 +1,54 @@

+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    background-color: #f0f2f5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+.container {
+    background-color: #fff;
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 500px;
+}
+h1 {
+    text-align: center;
+    color: #1c1e21;
+}
+textarea {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #dddfe2;
+    border-radius: 6px;
+    margin-bottom: 1rem;
+    font-size: 1rem;
+    resize: vertical;
+}
+select, button {
+    width: 100%;
+    padding: 0.75rem;
+    border-radius: 6px;
+    border: 1px solid #dddfe2;
+    font-size: 1rem;
+    margin-bottom: 1rem;
+}
+button {
+    background-color: #1877f2;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+}
+button:hover {
+    background-color: #166fe5;
+}
+#output {
+    margin-top: 1rem;
+    padding: 1rem;
+    background-color: #f0f2f5;
+    border-radius: 6px;
+    min-height: 50px;
+}

frontend/index.html ADDED Viewed

	@@ -0,0 +1,101 @@

+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Anuvaad AI</title>
+    <meta name="description" content="Anuvaad AI - Nepali and Sinhala to English Machine Translation">
+    <link rel="stylesheet" href="/frontend/styles.css">
+    <script src="/frontend/script.js" defer></script>
+    <!-- Preload brand logo for faster first paint -->
+    <link rel="preload" as="image" href="/frontend/public/android-chrome-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/frontend/public/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/frontend/public/favicon-16x16.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/frontend/public/apple-touch-icon.png">
+    <link rel="manifest" href="/frontend/public/site.webmanifest">
+    <!-- Optional larger icons -->
+    <link rel="icon" type="image/png" sizes="192x192" href="/frontend/public/android-chrome-192x192.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="/frontend/public/android-chrome-512x512.png">
+</head>
+<body>
+    <header class="header">
+        <div class="brand">
+            <a href="/" class="brand-link" aria-label="Go to home">
+                <img src="/frontend/public/android-chrome-192x192.png" alt="Anuvaad AI logo" class="brand-logo" width="44" height="44" decoding="async" fetchpriority="high">
+                <span class="brand-text">Anuvaad.ai</span>
+            </a>
+        </div>
+        <div class="tagline">Nepali and Sinhala to English translation</div>
+        <div class="header-actions">
+            <!-- Theme selector in header -->
+            <label for="theme-select" class="sr-only">Theme</label>
+            <select id="theme-select" class="theme-select" aria-label="Theme">
+              <option value="gradient">Gradient (Default)</option>
+              <option value="light">Light</option>
+              <option value="dark">Dark</option>
+              <option value="ocean">Ocean</option>
+              <option value="sunset">Sunset</option>
+              <option value="forest">Forest</option>
+              <option value="rose">Rose</option>
+              <option value="slate">Slate</option>
+            </select>
+            <button id="theme-toggle" class="ghost" aria-label="Toggle theme">Dark mode</button>
+            <!-- Header status indicator -->
+        </div>
+    </header>
+    <main class="container">
+        <div class="grid">
+            <section class="panel">
+                <label for="text-to-translate" class="label">Enter text to translate</label>
+                <textarea id="text-to-translate" rows="10" placeholder="Type or paste text here. For batch translation, enter one sentence per line."></textarea>
+                <div class="controls">
+                    <div class="control">
+                        <label for="source-language" class="label">Source language</label>
+                        <select id="source-language"></select>
+                        <small id="lang-detect-hint" class="hint" aria-live="polite"></small>
+                    </div>
+                    <div class="control toggle">
+                        <label class="checkbox-label">
+                            <input type="checkbox" id="batch-toggle" />
+                            Batch mode
+                        </label>
+                        <small class="hint">Translate multiple lines at once</small>
+                    </div>
+                    <!-- Borrowed words / names correction toggle -->
+                    <div class="control toggle">
+                        <label class="checkbox-label">
+                            <input type="checkbox" id="borrowed-toggle" checked />
+                            Fix borrowed words and names
+                        </label>
+                        <small class="hint">Transliterate and correct English-like names (e.g., Coco Beach)</small>
+                    </div>
+                    <!-- Dataset processing (no data display to users) -->
+                    <div class="control">
+                        <label for="process-data-button" class="label">Dataset processing</label>
+                        <button id="process-data-button" class="ghost" aria-label="Process dataset">Process data</button>
+                        <small id="process-data-status" class="hint" aria-live="polite"></small>
+                    </div>
+                </div>
+                <div class="actions">
+                    <button id="translate-button" class="primary">Translate</button>
+                    <button id="clear-button" class="ghost" aria-label="Clear input">Clear</button>
+                </div>
+            </section>
+            <section class="panel">
+                <div class="panel-header">
+                    <h2>Translated Text</h2>
+                    <div class="panel-actions">
+                        <button id="copy-button" class="ghost" aria-label="Copy output">Copy</button>
+                        <button id="download-button" class="ghost" aria-label="Download output">Download</button>
+                        <button id="share-button" class="ghost" aria-label="Share link">Share</button>
+                    </div>
+                </div>
+                <div id="output" class="output" role="status" aria-live="polite"></div>
+            </section>
+        </div>
+    </main>
+    <footer class="footer">
+        <span>Powered by NLLB and FastAPI</span>
+    </footer>
+</body>
+</html>

frontend/public/android-chrome-192x192.png ADDED Viewed

frontend/public/android-chrome-512x512.png ADDED Viewed

Git LFS Details

SHA256: 46bd2b1389188ca0c79f00cdddf968941810274b68d3d9c2a14e5fb4ec2d5eb7
Pointer size: 131 Bytes
Size of remote file: 151 kB

frontend/public/apple-touch-icon.png ADDED Viewed

frontend/public/favicon-16x16.png ADDED Viewed

frontend/public/favicon-32x32.png ADDED Viewed

frontend/public/favicon.ico ADDED Viewed

frontend/public/site.webmanifest ADDED Viewed

	@@ -0,0 +1 @@


1	+ {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

frontend/script.js ADDED Viewed

	@@ -0,0 +1,337 @@

+document.addEventListener('DOMContentLoaded', async () => {
+    const translateButton = document.getElementById('translate-button');
+    const clearButton = document.getElementById('clear-button');
+    const copyButton = document.getElementById('copy-button');
+    const downloadButton = document.getElementById('download-button');
+    const shareButton = document.getElementById('share-button');
+    const textToTranslate = document.getElementById('text-to-translate');
+    const sourceLanguage = document.getElementById('source-language');
+    const outputDiv = document.getElementById('output');
+    const batchToggle = document.getElementById('batch-toggle');
+    const langDetectHint = document.getElementById('lang-detect-hint');
+    const themeToggle = document.getElementById('theme-toggle');
+    const processDataButton = document.getElementById('process-data-button');
+    const processDataStatus = document.getElementById('process-data-status');
+    // Debounce timer for detection
+    let detectTimer = null;
+    const detectDelay = 250;
+    // Populate languages dynamically
+    try {
+        const langRes = await fetch('/languages');
+        const langData = await langRes.json();
+        const langs = (langData && langData.supported_languages) || ['nepali', 'sinhala'];
+        sourceLanguage.innerHTML = '';
+        langs.forEach(l => {
+            const opt = document.createElement('option');
+            opt.value = l;
+            opt.textContent = l.charAt(0).toUpperCase() + l.slice(1);
+            sourceLanguage.appendChild(opt);
+        });
+    } catch (e) {
+        // Fallback
+        sourceLanguage.innerHTML = '<option value="nepali">Nepali</option><option value="sinhala">Sinhala</option>';
+    }
+    // Theme toggle
+    // Ensure default gradient theme on first load unless user saved preference
+    (function() {
+      const savedTheme = localStorage.getItem('theme');
+      if (!savedTheme) {
+        document.documentElement.setAttribute('data-theme', 'gradient');
+      }
+    })();
+    themeToggle.addEventListener('click', () => {
+        const html = document.documentElement;
+        const isDark = html.getAttribute('data-theme') === 'dark';
+        html.setAttribute('data-theme', isDark ? 'light' : 'dark');
+        themeToggle.textContent = isDark ? 'Light mode' : 'Dark mode';
+        localStorage.setItem('anuvaad_theme', isDark ? 'light' : 'dark');
+    });
+    const savedTheme = localStorage.getItem('anuvaad_theme');
+    if (savedTheme) {
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? 'Dark mode' : 'Light mode';
+    }
+    function setLoading(isLoading) {
+        translateButton.disabled = isLoading;
+        translateButton.textContent = isLoading ? 'Translating…' : 'Translate';
+        outputDiv.setAttribute('aria-busy', String(isLoading));
+    }
+    // Basic language auto-detect by script characters (debounced)
+    textToTranslate.addEventListener('input', () => {
+        clearTimeout(detectTimer);
+        detectTimer = setTimeout(async () => {
+            const sample = (textToTranslate.value || '').slice(0, 200);
+            let detected = '';
+            // Backend-assisted detection for robustness
+            try {
+                const res = await fetch('/detect', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json', 'accept': 'application/json' },
+                    body: JSON.stringify({ text: sample })
+                });
+                if (res.ok) {
+                    const data = await res.json();
+                    detected = data.detected_language || '';
+                }
+            } catch (e) {
+                // ignore detection errors, fallback to script-based
+            }
+            if (!detected) {
+                const hasDevanagari = /[\u0900-\u097F]/.test(sample);
+                const hasSinhala = /[\u0D80-\u0DFF]/.test(sample);
+                if (hasDevanagari) detected = 'nepali';
+                else if (hasSinhala) detected = 'sinhala';
+            }
+            if (detected) {
+                sourceLanguage.value = detected;
+                langDetectHint.textContent = `Detected: ${detected}`;
+            } else {
+                langDetectHint.textContent = '';
+            }
+        }, detectDelay);
+    });
+    translateButton.addEventListener('click', async () => {
+        const text = (textToTranslate.value || '').trim();
+        const lang = sourceLanguage.value;
+        const isBatch = batchToggle && batchToggle.checked;
+        const borrowedFixEl = document.getElementById('borrowed-toggle');
+        const borrowedFix = borrowedFixEl ? borrowedFixEl.checked : true;
+        outputDiv.innerHTML = '';
+        if (!text) {
+            outputDiv.innerText = 'Please enter some text to translate.';
+            return;
+        }
+        setLoading(true);
+        try {
+            let response;
+            if (isBatch) {
+                const texts = text.split('\n').map(t => t.trim()).filter(Boolean);
+                if (texts.length === 0) {
+                    outputDiv.innerText = 'Please provide at least one non-empty line for batch translation.';
+                    setLoading(false);
+                    return;
+                }
+                response = await fetch('/batch-translate', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'accept': 'application/json'
+                    },
+                    body: JSON.stringify({ texts, source_language: lang, borrowed_fix: borrowedFix })
+                });
+            } else {
+                response = await fetch('/translate', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'accept': 'application/json'
+                    },
+                    body: JSON.stringify({ text, source_language: lang, borrowed_fix: borrowedFix })
+                });
+            }
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                throw new Error(errorData.detail || 'An error occurred while translating.');
+            }
+            const data = await response.json();
+            if (isBatch) {
+                const results = data.translated_texts || [];
+                const table = document.createElement('table');
+                table.className = 'result-table';
+                const thead = document.createElement('thead');
+                thead.innerHTML = '<tr><th>#</th><th>Source</th><th>Translation</th></tr>';
+                table.appendChild(thead);
+                const tbody = document.createElement('tbody');
+                const sources = text.split('\n').map(t => t.trim()).filter(Boolean);
+                results.forEach((t, idx) => {
+                    const tr = document.createElement('tr');
+                    const tdIdx = document.createElement('td'); tdIdx.textContent = String(idx + 1);
+                    const tdSrc = document.createElement('td'); tdSrc.textContent = sources[idx] || '';
+                    const tdDst = document.createElement('td'); tdDst.textContent = t;
+                    tr.appendChild(tdIdx); tr.appendChild(tdSrc); tr.appendChild(tdDst);
+                    tbody.appendChild(tr);
+                });
+                table.appendChild(tbody);
+                outputDiv.appendChild(table);
+                downloadButton.dataset.csv = toCSV(sources, results);
+            } else {
+                outputDiv.innerText = data.translated_text || data.translation || '';
+                downloadButton.dataset.csv = toCSV([text], [outputDiv.innerText]);
+            }
+        } catch (error) {
+            outputDiv.innerText = `Error: ${error.message}`;
+        } finally {
+            setLoading(false);
+        }
+    });
+    // Allow Ctrl+Enter to trigger translation
+    textToTranslate.addEventListener('keydown', (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+            translateButton.click();
+        }
+    });
+    // Clear button
+    clearButton.addEventListener('click', () => {
+        textToTranslate.value = '';
+        outputDiv.innerHTML = '';
+        downloadButton.removeAttribute('data-csv');
+    });
+    // Hide dataset processing controls from users (keep in DOM, but not visible)
+    if (processDataButton) {
+        const datasetControl = processDataButton.closest('.control');
+        if (datasetControl) datasetControl.hidden = true;
+        const datasetLabel = document.querySelector('label[for="process-data-button"]');
+        if (datasetLabel) datasetLabel.hidden = true;
+        if (processDataStatus) processDataStatus.hidden = true;
+    }
+    // Hide borrowed words/names UI text while preserving functionality
+    const borrowedFixEl = document.getElementById('borrowed-toggle');
+    if (borrowedFixEl) {
+        const borrowedControl = borrowedFixEl.closest('.control');
+        // Keep the control present only during translation flow but hidden from display
+        if (borrowedControl) borrowedControl.hidden = true;
+        const borrowedLabel = borrowedFixEl.closest('label');
+        if (borrowedLabel) {
+            borrowedLabel.hidden = true;
+            // Remove any visible text nodes to avoid displaying borrowed words/names text
+            borrowedLabel.childNodes.forEach(node => {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    node.textContent = '';
+                }
+            });
+        }
+        const borrowedHint = borrowedControl ? borrowedControl.querySelector('small.hint') : null;
+        if (borrowedHint) {
+            borrowedHint.hidden = true;
+            borrowedHint.textContent = '';
+        }
+        // Remove the input element itself to ensure it never appears on screen
+        borrowedFixEl.remove();
+    }
+    // Helper to trigger dataset processing without user interaction
+    async function triggerProcessData() {
+        if (!processDataStatus) return;
+        try {
+            const res = await fetch('/process-data', { method: 'POST' });
+            if (!res.ok) {
+                const err = await res.json().catch(() => ({}));
+                throw new Error(err.detail || 'Failed to process dataset');
+            }
+            const data = await res.json();
+            // Update hidden status for diagnostics; users won't see it
+            processDataStatus.textContent = `Processed: ${data.processed_files} files, ${data.total_lines} lines`;
+        } catch (e) {
+            processDataStatus.textContent = `Error: ${e.message}`;
+        }
+    }
+    // Automatically process dataset on page load (runs once)
+    triggerProcessData();
+    // Dataset processing trigger (kept inside DOMContentLoaded for scope safety)
+    if (processDataButton) {
+        processDataButton.addEventListener('click', async () => {
+            // Even if clicked (hidden), keep behavior consistent
+            processDataStatus.textContent = 'Processing dataset…';
+            try {
+                const res = await fetch('/process-data', { method: 'POST' });
+                if (!res.ok) {
+                    const err = await res.json().catch(() => ({}));
+                    throw new Error(err.detail || 'Failed to process dataset');
+                }
+                const data = await res.json();
+                processDataStatus.textContent = `Processed: ${data.processed_files} files, ${data.total_lines} lines`;
+            } catch (e) {
+                processDataStatus.textContent = `Error: ${e.message}`;
+            }
+        });
+    }
+    // Copy button
+    copyButton.addEventListener('click', async () => {
+        const text = outputDiv.innerText || '';
+        if (!text) return;
+        try {
+            await navigator.clipboard.writeText(text);
+        } catch (e) {
+            // Fallback for older browsers
+            const ta = document.createElement('textarea');
+            ta.value = text;
+            document.body.appendChild(ta);
+            ta.select();
+            document.execCommand('copy');
+            document.body.removeChild(ta);
+        }
+    });
+    // Download CSV
+    downloadButton.addEventListener('click', () => {
+        const csv = downloadButton.dataset.csv;
+        if (!csv) return;
+        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'translations.csv';
+        a.click();
+        URL.revokeObjectURL(url);
+    });
+    // Share result
+    shareButton.addEventListener('click', async () => {
+        const text = outputDiv.innerText || '';
+        if (!text) return;
+        try {
+            await navigator.share({ text });
+        } catch (e) {
+            // Ignore if not supported
+        }
+    });
+    function toCSV(sources, results) {
+        const rows = sources.map((s, i) => [s, results[i] || '']);
+        const csvRows = rows.map(r => r.map(v => '"' + String(v).replaceAll('"', '""') + '"').join(','));
+        return 'source,translation\n' + csvRows.join('\n');
+    }
+    // Theme select
+    const themeSelect = document.getElementById('theme-select');
+    if (themeSelect) {
+      const saved = localStorage.getItem('theme');
+      const initial = saved || 'gradient';
+      document.documentElement.setAttribute('data-theme', initial);
+      themeSelect.value = initial;
+      themeSelect.addEventListener('change', (e) => {
+        const v = e.target.value;
+        document.documentElement.setAttribute('data-theme', v);
+        localStorage.setItem('theme', v);
+      });
+    }
+    const themeToggleEl = document.getElementById('theme-toggle');
+    if (themeToggleEl) {
+      themeToggleEl.addEventListener('click', () => {
+        const html = document.documentElement;
+        const isDark = html.getAttribute('data-theme') === 'dark';
+        html.setAttribute('data-theme', isDark ? 'light' : 'dark');
+        localStorage.setItem('theme', isDark ? 'light' : 'dark');
+      });
+    }
+});

frontend/site.webmanifest ADDED Viewed

	@@ -0,0 +1 @@


1	+ {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

frontend/styles.css ADDED Viewed

	@@ -0,0 +1,512 @@

+/* Base variables as fallback; specific themes override below */
+:root {
+  --bg: #f8fafc;
+  --bg-soft: #f1f5f9;
+  --card: #ffffff;
+  --text: #0f172a;
+  --muted: #64748b;
+  --primary: #3b82f6;
+  --primary-hover: #2563eb;
+  --ghost: #e2e8f0;
+  --ghost-hover: #cbd5e1;
+}
+/* Default gradient theme */
+html[data-theme="gradient"] {
+  --bg: #f8fafc;           /* soft off-white */
+  --bg-soft: #f1f5f9;      /* misty grey */
+  --card: #ffffff;         /* pure card surface */
+  --text: #0f172a;         /* rich charcoal */
+  --muted: #64748b;        /* calm slate */
+  --primary: #3b82f6;      /* vibrant blue */
+  --primary-hover: #2563eb;/* deeper blue */
+  --ghost: #e2e8f0;        /* airy grey */
+  --ghost-hover: #cbd5e1;  /* gentle hover */
+}
+/* Light theme (flat look) */
+html[data-theme="light"] {
+  --bg: #ffffff;
+  --bg-soft: #ffffff;
+  --card: #ffffff;
+  --text: #0f172a;
+  --muted: #64748b;
+  --primary: #3b82f6;
+  --primary-hover: #2563eb;
+  --ghost: #eef2f7;
+  --ghost-hover: #e4e9f2;
+}
+/* Dark theme */
+html[data-theme="dark"] {
+  --bg: #0f172a;           /* midnight navy */
+  --bg-soft: #1e293b;      /* subtle charcoal */
+  --card: #1e293b;         /* sleek card */
+  --text: #f1f5f9;         /* crisp white */
+  --muted: #94a3b8;        /* muted silver */
+  --ghost: #334155;        /* muted slate */
+  --ghost-hover: #475569;  /* soft hover */
+}
+/* Ocean theme */
+html[data-theme="ocean"] {
+  --bg: #e0f2fe;           /* sky tint */
+  --bg-soft: #bae6fd;      /* light ocean */
+  --card: #ffffff;
+  --text: #0f172a;
+  --muted: #0ea5e9;
+  --primary: #06b6d4;      /* cyan */
+  --primary-hover: #0891b2;/* deep cyan */
+  --ghost: #e0f2fe;
+  --ghost-hover: #bae6fd;
+}
+/* Sunset theme */
+html[data-theme="sunset"] {
+  --bg: #fff7ed;           /* peach */
+  --bg-soft: #fde68a;      /* amber */
+  --card: #ffffff;
+  --text: #0f172a;
+  --muted: #ea580c;        /* warm orange */
+  --primary: #f97316;      /* orange */
+  --primary-hover: #ea580c;/* deeper orange */
+  --ghost: #fff1e6;
+  --ghost-hover: #ffe4c7;
+}
+/* Forest theme */
+html[data-theme="forest"] {
+  --bg: #dcfce7;           /* mint */
+  --bg-soft: #a7f3d0;      /* light green */
+  --card: #ffffff;
+  --text: #0f172a;
+  --muted: #16a34a;        /* deep green */
+  --primary: #22c55e;      /* green */
+  --primary-hover: #16a34a;/* deeper green */
+  --ghost: #e7ffe9;
+  --ghost-hover: #d1fadf;
+}
+/* Rose theme */
+html[data-theme="rose"] {
+  --bg: #ffe4e6;           /* blush */
+  --bg-soft: #fecdd3;      /* soft rose */
+  --card: #ffffff;
+  --text: #0f172a;
+  --muted: #e11d48;        /* rose */
+  --primary: #f43f5e;      /* vibrant rose */
+  --primary-hover: #e11d48;/* deep rose */
+  --ghost: #fff1f2;
+  --ghost-hover: #ffe4e6;
+}
+/* Slate theme (neutral) */
+html[data-theme="slate"] {
+  --bg: #f1f5f9;           /* light slate */
+  --bg-soft: #e2e8f0;      /* soft slate */
+  --card: #ffffff;
+  --text: #0f172a;
+  --muted: #64748b;        /* slate */
+  --primary: #64748b;      /* neutral accent */
+  --primary-hover: #475569;/* deeper slate */
+  --ghost: #eceff4;
+  --ghost-hover: #e1e6ee;
+}
+/* Header theme selector styling */
+.theme-select {
+  padding: 0.5rem 0.75rem;
+  border-radius: 10px;
+  border: 1px solid var(--ghost-hover);
+  background: var(--ghost);
+  color: var(--text);
+}
+:root {
+    /* Fresh, vibrant palette */
+    --bg: #0b1020;           /* deep navy */
+    --bg-soft: #10172a;      /* softer navy */
+    --card: #ffffff;         /* cards on light theme */
+    --text: #0e1a2b;         /* dark text on light surfaces */
+    --muted: #64748b;        /* slate */
+    --primary: #7c3aed;      /* purple */
+    --primary-hover: #6d28d9;/* darker purple */
+    --ghost: #f1f5f9;        /* light slate */
+    --ghost-hover: #e2e8f0;  /* hover slate */
+}
+html[data-theme="dark"] {
+    --bg: #0b1020;           /* deep navy */
+    --bg-soft: #10172a;      /* softer navy */
+    --card: #0b1220;         /* dark cards */
+    --text: #e2e8f0;         /* light text */
+    --muted: #94a3b8;        /* slate-muted */
+    --ghost: #0f172a;        /* ghost dark */
+    --ghost-hover: #1f2937;  /* ghost hover dark */
+}
+.header-actions {
+    margin-top: 0.5rem;
+}
+/* Utility: visually hidden (for sr-only labels) */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+/* Adjust body gradient to respect theme */
+body {
+  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-soft) 100%);
+}
+.header {
+    width: 100%;
+    max-width: 1100px;
+    padding: 2rem 1rem 0.5rem 1rem;
+    margin: 0 auto;
+    color: #fff;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: 0.75rem 1rem; /* row/column gap for wrap */
+}
+/* Arrange brand, tagline, and actions for better UX */
+.brand { order: 0; }
+.tagline { order: 0; text-align: center; margin: 0.5rem auto; }
+.header-actions { order: 0; margin: 0.5rem auto; }
+@media (min-width: 768px) {
+  .header {
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+  .header-actions {
+    margin: 0 auto;
+    order: 0;
+    justify-content: center;
+    align-items: center;
+  }
+}
+/* Prevent overflow of actions on small screens */
+.header-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+/* Improve status pill semantics and visibility */
+.status {
+    padding: 0.35rem 0.6rem;
+    border-radius: 999px;
+    font-size: 0.85rem;
+    background-color: var(--ghost);
+    color: var(--text);
+}
+.brand {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: 2.25rem; /* more prominent */
+    font-weight: 800;
+}
+.brand-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.75rem;
+    text-decoration: none;
+    color: inherit;
+}
+.brand-text {
+    letter-spacing: 0.15px; /* slightly tighter for script fonts */
+    color: var(--text); /* adapt to theme for proper contrast */
+    text-shadow: none;
+    font-family: cursive; /* handwriting-style via generic cursive fallback */
+}
+html[data-theme="dark"] .brand-text {
+    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
+}
+.brand-logo {
+    width: 44px;
+    height: 44px;
+    border-radius: 10px;
+    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
+}
+@media (max-width: 640px) {
+  .brand {
+    font-size: 1.8rem;
+  }
+  .brand-logo {
+    width: 36px;
+    height: 36px;
+  }
+}
+.tagline {
+    flex: 1 1 100%; /* occupy a full row under the brand for perfect placement */
+    font-size: 1.05rem;
+    line-height: 1.5;
+    letter-spacing: 0.2px;
+    color: var(--muted); /* theme-aware secondary text for better visibility */
+    margin-top: 0.25rem;
+    text-shadow: none;
+}
+html[data-theme="dark"] .tagline {
+    color: var(--muted);
+    text-shadow: 0 1px 1.5px rgba(0,0,0,0.25); /* subtle lift on dark background */
+}
+.container {
+    background-color: var(--card);
+    padding: 1.5rem;
+    border-radius: 14px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+    width: 100%;
+    max-width: 1100px;
+    margin: 1rem auto;
+}
+.grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.25rem;
+    align-items: stretch; /* ensure panels have equal height for similar dimensions */
+    justify-items: stretch;
+}
+.grid > .panel {
+    height: 100%;
+}
+.panel {
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    padding: 1rem;
+    display: flex;              /* ensure inner elements are placed correctly */
+    flex-direction: column;     /* stack content in order */
+    gap: 0.75rem;               /* balanced spacing between children */
+}
+.panel > * {                    /* normalize child spacing */
+    margin: 0;
+}
+/* keep header layout consistent within the panel */
+.panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+}
+.panel-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+.label {
+    display: block;
+    font-size: 0.9rem;
+    color: var(--muted);
+    margin-bottom: 0.5rem;
+}
+/* Ensure consistent sizing and prevent overflow misalignment */
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+/* Prevent panels and form controls from exceeding their containers */
+.panel, textarea, select {
+    max-width: 100%;
+}
+/* Ensure textarea aligns properly within its panel */
+textarea {
+    display: block;
+}
+/* Hide any accidental overflow from internal content */
+.panel {
+    overflow: hidden;
+}
+textarea {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px; /* restore rounded corners */
+    margin-bottom: 1rem;
+    font-size: 1rem;
+    resize: vertical;
+}
+.controls {
+    display: block;
+}
+.controls .control { /* full-width block and natural spacing */
+    width: 100%;
+    margin-bottom: 1rem;
+}
+.control select {
+    width: 100%;
+    padding: 0.65rem 0.75rem;
+    border-radius: 10px;
+    border: 1px solid #e5e7eb;
+    font-size: 1rem;
+    background-color: #fff;
+}
+.toggle {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+.checkbox-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    user-select: none;
+}
+.hint {
+    color: var(--muted);
+}
+.actions {
+    display: flex;
+    gap: 0.5rem;
+}
+button.primary {
+    padding: 0.9rem 1rem;
+    border-radius: 10px;
+    border: none;
+    font-size: 1rem;
+    background-color: var(--primary);
+    color: #fff;
+    cursor: pointer;
+}
+button.primary:hover {
+    background-color: var(--primary-hover);
+}
+button.primary:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+}
+button.ghost {
+    padding: 0.9rem 1rem;
+    border-radius: 10px;
+    border: 1px solid #e5e7eb;
+    font-size: 1rem;
+    background-color: var(--ghost);
+    color: var(--text);
+    cursor: pointer;
+}
+button.ghost:hover {
+    background-color: var(--ghost-hover);
+}
+.output {
+    padding: 1rem;
+    background-color: #f9fafb;
+    border-radius: 10px;
+    min-height: 120px;
+    border: 1px solid #e5e7eb;
+}
+.result-list {
+    margin: 0;
+    padding-left: 1.25rem;
+}
+.footer {
+    width: 100%;
+    max-width: 1100px;
+    text-align: right;
+    color: #cbd5e1;
+    padding: 0.5rem 1rem 1.5rem 1rem;
+}
+@media (max-width: 900px) {
+    .grid {
+        grid-template-columns: 1fr;
+    }
+    .actions {
+        flex-wrap: wrap;
+    }
+}
+/* Table styles for batch alignment */
+.result-table {
+    width: 100%;
+    border-collapse: collapse;
+    background: #fff;
+}
+.result-table th, .result-table td {
+    border: 1px solid #e5e7eb;
+    padding: 0.5rem 0.6rem;
+    vertical-align: top;
+}
+.result-table th {
+    background: #f3f4f6;
+    text-align: left;
+}
+.result-table tr:nth-child(even) td {
+    background: #fafafa;
+}
+/* Smooth theme transitions */
+html, body, .container, .panel, textarea, select, button, .output {
+    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+/* Elevated panel hover for subtle depth */
+.panel:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+}
+/* Improved focus visibility and accessibility */
+textarea:focus-visible, select:focus-visible, button:focus-visible {
+    outline: 3px solid rgba(37, 99, 235, 0.35);
+    outline-offset: 2px;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+}
+/* Harmonize output surface with theme variables */
+.output {
+    background-color: var(--ghost);
+    color: var(--text);
+}
+/* Button hover and active subtle animations */
+button.primary:hover, button.ghost:hover {
+    transform: translateY(-1px);
+}
+button.primary:active, button.ghost:active {
+    transform: translateY(0);
+}