feat: HuggingFace image generation (SDXL + FLUX.1) + game gen improvements

- Add Stable Diffusion XL and FLUX.1 Schnell via HuggingFace Inference API
- New ai-worker-hf-image.js Web Worker for HF image generation
- Register hf-sdxl and hf-flux as cloud-image models in ai-models.js
- Add API_KEY_HF storage key for HuggingFace tokens
- Default Image tag model changed from imagen-ultra to hf-sdxl (free tier)
- Add Save/Download button for generated images (ai-image.js)
- Short gen-img: placeholder IDs in editor instead of base64 (renderer.js)
- Add maxTokensOverride to requestAiTask API for game generation (4096 tokens)
- Fix game prompt parsing regexes and HTML fence extraction
- Delete image-gen-test.html comparison page

Author: ijbo

changelogs/CHANGELOG-hf-image-gen.md

@@ -0,0 +1,30 @@
+# CHANGELOG — HuggingFace Image Generation + Game Gen Improvements
+
+**Date:** 2026-03-16
+
+## 🖼️ HuggingFace Image Generation (SDXL + FLUX.1)
+
+Integrated **Stable Diffusion XL** and **FLUX.1 Schnell** as new image generation models via the free HuggingFace Inference API, alongside existing Imagen 4 Ultra and Nano Banana 2.
+
+### New Files
+- `public/ai-worker-hf-image.js` — Web Worker for HuggingFace Inference API image generation (supports both SDXL and FLUX.1 via `workerModelId`)
+
+### Modified Files
+- `js/storage-keys.js` — Added `API_KEY_HF` storage key for HuggingFace tokens
+- `js/ai-models.js` — Registered `hf-sdxl` (Stable Diffusion XL) and `hf-flux` (FLUX.1 Schnell) as cloud-image models
+- `js/ai-docgen.js` — Default Image tag model changed from `imagen-ultra` to `hf-sdxl` (free tier)
+- `js/ai-docgen-generate.js` — Image generation fallback updated to `hf-sdxl`; images now stored in memory registry with short `gen-img:` IDs instead of inline base64
+- `js/ai-image.js` — Added ⬇ **Save** button for downloading generated images as PNG; fallback model updated to `hf-sdxl`; images use short `gen-img:` placeholder IDs in editor
+- `js/renderer.js` — Custom image renderer resolves `gen-img:` URLs from in-memory registry to actual data URIs
+- `js/run-requirements.js` — Updated specialized models list and Image fallback to `hf-sdxl`
+- `tests/feature/model-tag.spec.js` — Updated Image tag default model test to expect `hf-sdxl`
+
+### Deleted Files
+- `image-gen-test.html` — Removed comparison test page (no longer needed)
+
+## 🎮 Game Generation Improvements
+
+- `js/ai-assistant.js` — Added `maxTokensOverride` parameter to `requestAiTask()` API
+- `public/ai-worker.js` — `generate()` now accepts `maxTokensOverride` to override default token limits
+- `public/ai-worker-groq.js`, `public/ai-worker-gemini.js`, `public/ai-worker-lfm.js`, `public/ai-worker-openrouter.js` — Same `maxTokensOverride` support
+- `js/game-docgen.js` — Fixed prompt parsing regexes for single-line tags; improved HTML fence extraction; added debug logging; uses `maxTokensOverride: 4096` for game generation

css/game-docgen.css

@@ -429,3 +429,135 @@
 .dark-mode .ai-game-import-hint {
     color: #9ca3af;
 }
+
+/* ─── Skills Picker Dropdown ─── */
+.ai-game-skill-select {
+    border: 1px solid rgba(16, 185, 129, 0.3);
+    border-radius: 6px;
+    padding: 3px 6px;
+    font-size: 0.75rem;
+    background: transparent;
+    color: inherit;
+    max-width: 150px;
+    cursor: pointer;
+    transition: border-color 0.2s;
+}
+.ai-game-skill-select:hover {
+    border-color: #10b981;
+}
+.ai-game-skill-select:focus {
+    outline: none;
+    border-color: #10b981;
+    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
+}
+
+/* ─── Skill Pills ─── */
+.ai-game-skill-pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    padding: 8px 14px;
+    background: rgba(16, 185, 129, 0.04);
+    border-bottom: 1px solid rgba(16, 185, 129, 0.1);
+}
+
+.ai-game-skill-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 10px;
+    border-radius: 14px;
+    background: rgba(16, 185, 129, 0.1);
+    color: #059669;
+    font-size: 0.72rem;
+    font-weight: 500;
+    cursor: default;
+    transition: all 0.15s;
+    position: relative;
+    user-select: none;
+}
+.ai-game-skill-pill:hover {
+    background: rgba(16, 185, 129, 0.18);
+}
+
+.ai-game-skill-pill-remove {
+    border: none;
+    background: none;
+    color: #6b7280;
+    cursor: pointer;
+    font-size: 0.65rem;
+    padding: 0 2px;
+    line-height: 1;
+    border-radius: 50%;
+    transition: all 0.15s;
+    display: inline-flex;
+    align-items: center;
+    margin-left: 2px;
+}
+.ai-game-skill-pill-remove:hover {
+    color: #ef4444;
+    background: rgba(239, 68, 68, 0.1);
+}
+
+/* ─── Skill Tooltip ─── */
+.ai-game-skill-tooltip {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: #1f2937;
+    color: #e5e7eb;
+    padding: 8px 12px;
+    border-radius: 8px;
+    font-size: 0.72rem;
+    font-weight: 400;
+    line-height: 1.4;
+    white-space: normal;
+    min-width: 200px;
+    max-width: 300px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+    z-index: 100;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s;
+}
+.ai-game-skill-tooltip.visible {
+    opacity: 1;
+}
+.ai-game-skill-tooltip::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 5px solid transparent;
+    border-top-color: #1f2937;
+}
+
+/* ─── Dark Mode: Skills ─── */
+[data-theme="dark"] .ai-game-skill-select,
+.dark-mode .ai-game-skill-select {
+    border-color: rgba(16, 185, 129, 0.4);
+}
+
+[data-theme="dark"] .ai-game-skill-pills,
+.dark-mode .ai-game-skill-pills {
+    background: rgba(16, 185, 129, 0.06);
+    border-bottom-color: rgba(16, 185, 129, 0.15);
+}
+
+[data-theme="dark"] .ai-game-skill-pill,
+.dark-mode .ai-game-skill-pill {
+    background: rgba(16, 185, 129, 0.15);
+    color: #34d399;
+}
+
+[data-theme="dark"] .ai-game-skill-pill:hover,
+.dark-mode .ai-game-skill-pill:hover {
+    background: rgba(16, 185, 129, 0.25);
+}
+
+[data-theme="dark"] .ai-game-skill-pill-remove,
+.dark-mode .ai-game-skill-pill-remove {
+    color: #6b7280;
+}

js/ai-assistant.js

@@ -1171,7 +1171,7 @@
   // ===========================================================
   // Public AI Request API — for non-chat modules (e.g. ai-docgen)
   // ===========================================================
-  M.requestAiTask = function ({ taskType, context, userPrompt, enableThinking, onToken, silent, attachments }) {
+  M.requestAiTask = function ({ taskType, context, userPrompt, enableThinking, onToken, silent, attachments, maxTokensOverride }) {
     return new Promise(function (resolve, reject) {
       // Block if another generation is in progress
       if (aiIsGenerating) {
@@ -1233,7 +1233,8 @@
         userPrompt: userPrompt || '',
         messageId: messageId,
         enableThinking: !!enableThinking,
-        attachments: attachments || []
+        attachments: attachments || [],
+        maxTokensOverride: maxTokensOverride || 0
       });
     });
   };

js/ai-docgen-generate.js

@@ -360,7 +360,7 @@
 
     // Generate image for an {{Image:}} block via the image worker
     async function generateImageForBlock(block, modelId) {
-        var imageModelId = modelId || 'imagen-ultra';
+        var imageModelId = modelId || 'hf-sdxl';
         var providers = M.getCloudProviders ? M.getCloudProviders() : {};
         var provider = providers[imageModelId];
 
@@ -389,7 +389,12 @@
                 if (data.type === 'image-complete') {
                     worker.removeEventListener('message', onMessage);
                     var mime = data.mimeType || 'image/png';
-                    var md = '![' + block.prompt.substring(0, 60) + '](data:' + mime + ';base64,' + data.imageBase64 + ')';
+                    // Store image in registry with short ID for clean editor text
+                    var dataUri = 'data:' + mime + ';base64,' + data.imageBase64;
+                    if (!M._genImages) M._genImages = {};
+                    var genId = Math.random().toString(36).substring(2, 10);
+                    M._genImages[genId] = dataUri;
+                    var md = '![' + block.prompt.substring(0, 60) + '](gen-img:' + genId + ')';
                     resolve(md);
                 } else if (data.type === 'image-error') {
                     worker.removeEventListener('message', onMessage);

js/ai-docgen.js

@@ -118,7 +118,7 @@
             var aiDefaultModel = (M.getCurrentAiModel ? M.getCurrentAiModel() : '') || '';
             M.wrapSelectionWith('{{@AI:\n  @model: ' + (aiDefaultModel || 'qwen-local') + '\n  @prompt: ', '\n}}', placeholder);
         } else if (type === 'Image') {
-            M.wrapSelectionWith('{{@Image:\n  @model: imagen-ultra\n  @prompt: ', '\n}}', placeholder);
+            M.wrapSelectionWith('{{@Image:\n  @model: hf-sdxl\n  @prompt: ', '\n}}', placeholder);
         } else {
             M.wrapSelectionWith('{{@' + type + ': ', '}}', placeholder);
         }

js/ai-image.js

@@ -59,7 +59,7 @@
     function getImagenWorker() {
         if (imagenWorker && imagenWorkerReady) return imagenWorker;
 
-        var imagenConfig = window.AI_MODELS?.['imagen-ultra'];
+        var imagenConfig = window.AI_MODELS?.['hf-sdxl'];
         if (!imagenConfig) return null;
 
         var geminiKey = localStorage.getItem(imagenConfig.keyStorageKey);
@@ -104,7 +104,12 @@
         if (welcome) welcome.remove();
 
         var dataUri = 'data:' + (mimeType || 'image/png') + ';base64,' + imageBase64;
-        var mdText = '![' + prompt + '](' + dataUri + ')';
+
+        // Store image in registry with short ID for clean editor text
+        if (!M._genImages) M._genImages = {};
+        var genId = Math.random().toString(36).substring(2, 10);
+        M._genImages[genId] = dataUri;
+        var mdText = '![' + prompt + '](gen-img:' + genId + ')';
 
         var msg = document.createElement('div');
         msg.className = 'ai-message ai-message-ai';
@@ -121,6 +126,9 @@
             '        <button class="ai-msg-action-btn ai-img-copy-btn" title="Copy markdown">\n' +
             '          <i class="bi bi-clipboard"></i> Copy MD\n' +
             '        </button>\n' +
+            '        <button class="ai-msg-action-btn ai-img-save-btn" title="Download image as PNG">\n' +
+            '          <i class="bi bi-download"></i> Save\n' +
+            '        </button>\n' +
             '      </div>\n';
         aiChatArea.appendChild(msg);
         aiChatArea.scrollTop = aiChatArea.scrollHeight;
@@ -145,13 +153,33 @@
                 setTimeout(function () { self.innerHTML = '<i class="bi bi-clipboard"></i> Copy MD'; }, 1500);
             });
         });
+
+        // Wire up Save button — downloads the image as a PNG file
+        msg.querySelector('.ai-img-save-btn').addEventListener('click', function () {
+            var self = this;
+            try {
+                var a = document.createElement('a');
+                a.href = dataUri;
+                // Generate a safe filename from the prompt
+                var safeName = prompt.replace(/[^a-zA-Z0-9 ]/g, '').trim().replace(/\s+/g, '_').substring(0, 40) || 'generated_image';
+                var ext = (mimeType || 'image/png').split('/')[1] || 'png';
+                a.download = safeName + '.' + ext;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                self.innerHTML = '<i class="bi bi-check-lg"></i> Saved';
+                setTimeout(function () { self.innerHTML = '<i class="bi bi-download"></i> Save'; }, 1500);
+            } catch (err) {
+                M.showToast('Failed to save image: ' + err.message, 'error');
+            }
+        });
     }
 
     // --- Generate image from prompt ---
     function generateImage(prompt, aspectRatio) {
         var currentModel = _ai.currentModel;
         var currentModelCfg = _ai.models[currentModel];
-        var imageModelId = (currentModelCfg && currentModelCfg.isImageModel) ? currentModel : 'imagen-ultra';
+        var imageModelId = (currentModelCfg && currentModelCfg.isImageModel) ? currentModel : 'hf-sdxl';
         var provider = _ai.CLOUD_PROVIDERS[imageModelId];
 
         if (!provider) {
@@ -227,13 +255,13 @@
     var imageChip = document.getElementById('ai-image-chip');
     if (imageChip) {
         imageChip.addEventListener('click', function () {
-            var imagenConfig = window.AI_MODELS?.['imagen-ultra'];
+            var imagenConfig = window.AI_MODELS?.['hf-sdxl'];
             if (!imagenConfig) return;
 
             var geminiKey = localStorage.getItem(imagenConfig.keyStorageKey);
             if (!geminiKey) {
                 if (!_ai.panelOpen) M.openAiPanel();
-                _ai.showApiKeyModal('imagen-ultra');
+                _ai.showApiKeyModal('hf-sdxl');
                 return;
             }
             showImageModal();

js/ai-models.js

@@ -172,6 +172,48 @@
             category: 'cloud-image',
         },
 
+        // ── Cloud: Stable Diffusion XL (HuggingFace) ──────────
+        'hf-sdxl': {
+            label: 'SDXL · HuggingFace',
+            badge: 'SDXL',
+            icon: 'bi bi-brush',
+            isImageModel: true,
+            statusReady: 'Stable Diffusion XL · HuggingFace',
+            workerFile: 'ai-worker-hf-image.js',
+            workerModelId: 'stabilityai/stable-diffusion-xl-base-1.0',
+            keyStorageKey: window.MDView.KEYS.API_KEY_HF,
+            dialogTitle: 'Connect to HuggingFace',
+            dialogDesc: 'Enter your free HuggingFace token to use <strong>Stable Diffusion XL</strong> image generation',
+            dialogPlaceholder: 'hf_xxxxxxxxxxxxxxxxxxxx',
+            dialogLink: 'https://huggingface.co/settings/tokens',
+            dialogLinkText: 'huggingface.co/settings/tokens',
+            dialogIcon: 'bi bi-brush',
+            dropdownName: 'Stable Diffusion XL',
+            dropdownDesc: 'HuggingFace · Free tier · Stability AI',
+            category: 'cloud-image',
+        },
+
+        // ── Cloud: FLUX.1 Schnell (HuggingFace) ──────────────
+        'hf-flux': {
+            label: 'FLUX.1 Schnell · HuggingFace',
+            badge: 'FLUX.1',
+            icon: 'bi bi-palette2',
+            isImageModel: true,
+            statusReady: 'FLUX.1 Schnell · HuggingFace',
+            workerFile: 'ai-worker-hf-image.js',
+            workerModelId: 'black-forest-labs/FLUX.1-schnell',
+            keyStorageKey: window.MDView.KEYS.API_KEY_HF,
+            dialogTitle: 'Connect to HuggingFace',
+            dialogDesc: 'Enter your free HuggingFace token to use <strong>FLUX.1 Schnell</strong> image generation',
+            dialogPlaceholder: 'hf_xxxxxxxxxxxxxxxxxxxx',
+            dialogLink: 'https://huggingface.co/settings/tokens',
+            dialogLinkText: 'huggingface.co/settings/tokens',
+            dialogIcon: 'bi bi-palette2',
+            dropdownName: 'FLUX.1 Schnell',
+            dropdownDesc: 'HuggingFace · Free tier · Black Forest Labs',
+            category: 'cloud-image',
+        },
+
         // ── Cloud: Grok 4.1 Fast via OpenRouter ───────────────
         'openrouter-grok': {
             label: 'Grok 4.1 Fast · xAI',