feat: expand output filename placeholders with {model}, {date}, {datetime}

Adds support for {sourceLang}, {model}, {date}, {datetime} in the web UI
naming convention, and regenerates the output filename at translation
time so A/B testing the same file across different models produces
distinct, identifiable output files. Model names are sanitized for
cross-platform filename safety (slashes, colons, etc.).

Closes #129

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: hydropix

.env.example

@@ -17,7 +17,11 @@ HOST=127.0.0.1  # Server host (127.0.0.1 for localhost only, 0.0.0.0 for all net
 OUTPUT_DIR=translated_files  # Directory for translated output files
 
 # Output filename pattern (naming convention)
-# Use {originalName}, {targetLang}, {sourceLang}, {model}, {ext} as placeholders
+# Placeholders: {originalName}, {targetLang}, {sourceLang}, {model}, {date}, {datetime}, {ext}
+#   {date}     → YYYY-MM-DD
+#   {datetime} → YYYY-MM-DD_HH-MM-SS
+#   {model}    → sanitized (e.g., "anthropic/claude-4.5-haiku" → "anthropic_claude-4.5-haiku")
+# Example for model A/B testing: {originalName} ({targetLang}) ({model})_{date}.{ext}
 OUTPUT_FILENAME_PATTERN={originalName} ({targetLang}).{ext}
 
 # LLM Provider Settings

src/config.py

@@ -245,7 +245,7 @@
 OUTPUT_DIR = os.getenv('OUTPUT_DIR', 'translated_files')
 
 # Output filename pattern
-# Use {originalName}, {targetLang}, {sourceLang}, {model}, {ext} as placeholders
+# Placeholders: {originalName}, {targetLang}, {sourceLang}, {model}, {date}, {datetime}, {ext}
 OUTPUT_FILENAME_PATTERN = os.getenv('OUTPUT_FILENAME_PATTERN', '{originalName} ({targetLang}).{ext}')
 
 # Debug mode (reload after .env is loaded)

src/web/static/js/files/file-upload.js

@@ -17,34 +17,73 @@ const FILE_QUEUE_STORAGE_KEY = 'tbl_file_queue';
 let lastUploadedFileName = null;
 
 /**
- * Generate output filename based on pattern
- * @param {File} file - Original file
- * @param {string} pattern - Output pattern (e.g., "{originalName} ({targetLang}).{ext}")
+ * Sanitize a value to be safe in a filename across Windows/macOS/Linux.
+ * Strips path separators and reserved chars, collapses whitespace.
+ */
+function sanitizeFilenamePart(value) {
+    if (value === null || value === undefined) return '';
+    return String(value)
+        .replace(/[\/\\:*?"<>|]+/g, '_')
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+
+/**
+ * Resolve a language value from a <select> + custom <input> pair,
+ * falling back to 'Translated' / 'Source' when empty.
+ */
+function resolveLanguageValue(selectId, customId, fallback) {
+    const selectEl = DomHelpers.getElement(selectId);
+    const customEl = DomHelpers.getElement(customId);
+    let value = selectEl?.value || '';
+    if (value === 'Other') {
+        value = customEl?.value?.trim() || '';
+    }
+    return value || fallback;
+}
+
+/**
+ * Generate output filename based on pattern.
+ * Supported placeholders: {originalName}, {targetLang}, {sourceLang}, {model}, {date}, {datetime}, {ext}
+ *
+ * @param {File|{name: string}} file - Original file (only .name is used)
+ * @param {string} pattern - Output pattern
+ * @param {Object} [overrides] - Optional explicit values that win over DOM lookups
+ * @param {string} [overrides.sourceLang]
+ * @param {string} [overrides.targetLang]
+ * @param {string} [overrides.model]
  * @returns {string} Generated filename
  */
-function generateOutputFilename(file, pattern) {
+export function generateOutputFilename(file, pattern, overrides = {}) {
     const fileExtension = file.name.split('.').pop().toLowerCase();
     const originalNameWithoutExt = file.name.replace(/\.[^/.]+$/, "");
 
-    // Get target language from the form
-    const targetLangSelect = DomHelpers.getElement('targetLang');
-    const customTargetLang = DomHelpers.getElement('customTargetLang');
-    let targetLang = targetLangSelect?.value || '';
-
-    // If "Other" is selected, use the custom input value
-    if (targetLang === 'Other') {
-        targetLang = customTargetLang?.value?.trim() || '';
+    const targetLang = overrides.targetLang
+        || resolveLanguageValue('targetLang', 'customTargetLang', 'Translated');
+    const sourceLang = overrides.sourceLang
+        || resolveLanguageValue('sourceLang', 'customSourceLang', 'Source');
+    const model = overrides.model ?? DomHelpers.getValue('model') ?? '';
+
+    const now = new Date();
+    const pad = (n) => String(n).padStart(2, '0');
+    const date = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`;
+    const datetime = `${date}_${pad(now.getHours())}-${pad(now.getMinutes())}-${pad(now.getSeconds())}`;
+
+    const replacements = {
+        '{originalName}': sanitizeFilenamePart(originalNameWithoutExt),
+        '{targetLang}': sanitizeFilenamePart(targetLang),
+        '{sourceLang}': sanitizeFilenamePart(sourceLang),
+        '{model}': sanitizeFilenamePart(model),
+        '{date}': date,
+        '{datetime}': datetime,
+        '{ext}': fileExtension
+    };
+
+    let result = pattern || '{originalName} ({targetLang}).{ext}';
+    for (const [token, value] of Object.entries(replacements)) {
+        result = result.split(token).join(value);
     }
-
-    // Use "Translated" as fallback if no language specified
-    if (!targetLang) {
-        targetLang = 'Translated';
-    }
-
-    return pattern
-        .replace("{originalName}", originalNameWithoutExt)
-        .replace("{targetLang}", targetLang)
-        .replace("{ext}", fileExtension);
+    return result;
 }
 
 /**

src/web/static/js/translation/batch-controller.js

@@ -13,7 +13,7 @@ import { Validators } from '../utils/validators.js';
 import { ApiKeyUtils } from '../utils/api-key-utils.js';
 import { StatusManager } from '../utils/status-manager.js';
 import { ProgressManager } from './progress-manager.js';
-import { FileUpload } from '../files/file-upload.js';
+import { FileUpload, generateOutputFilename } from '../files/file-upload.js';
 import { TranslationTracker } from './translation-tracker.js';
 
 /**
@@ -39,6 +39,23 @@ function getTranslationConfig(file) {
     const targetLanguageVal = file.targetLanguage;
 
     const provider = DomHelpers.getValue('llmProvider');
+    const currentModel = DomHelpers.getValue('model') || '';
+
+    // Regenerate output filename at translation time so placeholders like
+    // {model}, {date}, {datetime} reflect the current run. The value stored
+    // on the file object was computed at upload time and may be stale,
+    // especially when the same file is re-translated with a different model.
+    const outputPattern = DomHelpers.getValue('outputFilenamePattern')
+        || '{originalName} ({targetLang}).{ext}';
+    const resolvedOutputFilename = generateOutputFilename(
+        { name: file.name },
+        outputPattern,
+        {
+            sourceLang: sourceLanguageVal,
+            targetLang: targetLanguageVal,
+            model: currentModel
+        }
+    );
 
     const promptOptions = {
         preserve_technical_content: true,
@@ -53,7 +70,7 @@ function getTranslationConfig(file) {
     const config = {
         source_language: sourceLanguageVal,
         target_language: targetLanguageVal,
-        model: DomHelpers.getValue('model'),
+        model: currentModel,
         llm_api_endpoint: provider === 'openai' ?
                          DomHelpers.getValue('openaiEndpoint') :
                          DomHelpers.getValue('apiEndpoint'),
@@ -66,7 +83,7 @@ function getTranslationConfig(file) {
         poe_api_key: provider === 'poe' ? ApiKeyUtils.getValue('poeApiKey') : '',
         nim_api_key: provider === 'nim' ? ApiKeyUtils.getValue('nimApiKey') : '',
         input_filename: file.name,
-        output_filename: file.outputFilename,
+        output_filename: resolvedOutputFilename,
         file_type: file.fileType,
         prompt_options: promptOptions,
         bilingual_output: DomHelpers.getElement('bilingualMode')?.checked || false,

src/web/templates/translation_interface.html

@@ -333,9 +333,9 @@ <h3>Drop files to translate</h3>
                     <div class="form-group" style="margin-bottom: 15px;">
                         <label>Naming Convention</label>
                         <div class="neu-inset-light">
-                            <input type="text" class="form-control" id="outputFilenamePattern" value="{originalName} ({targetLang}).{ext}" title="Use {originalName}, {targetLang} as placeholders">
+                            <input type="text" class="form-control" id="outputFilenamePattern" value="{originalName} ({targetLang}).{ext}" title="Use {originalName}, {targetLang}, {sourceLang}, {model}, {date}, {datetime}, {ext} as placeholders">
                         </div>
-                        <small style="color: var(--text-muted-light); font-size: 0.75rem; margin-top: 0.5rem; display: block;">Placeholders: {originalName}, {targetLang}, {ext} — Example: Book (French).epub</small>
+                        <small style="color: var(--text-muted-light); font-size: 0.75rem; margin-top: 0.5rem; display: block;">Placeholders: {originalName}, {targetLang}, {sourceLang}, {model}, {date}, {datetime}, {ext} — Example: {originalName} ({targetLang}) ({model})_{date}.{ext}</small>
                     </div>
 
                     <!-- Save Settings Button -->