chrisf/sparkvault
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mockup): rename to Image Mockup Studio and add inline generator selector

Browse Source
This commit is contained in:
airent106 committed 2026-10-29 12:05:52 -06:00
1 parent 3368d7201c
commit 25d24a53a6
2 files changed
+68 -34
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/index.html
+33 -23
View File
@@ -132,7 +132,7 @@
</select>
<label class="filter-checkbox">
<input type="checkbox" id="filter-has-mockup" />
<span>🍌 Has Mockup (<span id="stat-mockups-count">0</span>)</span>
<span>🖼️ Has Mockup (<span id="stat-mockups-count">0</span>)</span>
</label>
<select id="filter-sort" class="filter-select" aria-label="Sort ideas">
<option value="score">Sort: Priority Score</option>
@@ -378,7 +378,7 @@
📝 Workbench & Notes
</button>
<button type="button" class="drawer-tab" data-drawer-tab="mockup">
🎨 Mockup Studio <span id="drawer-mockup-count" class="tab-pill">0</span>
🖼️ Image Mockup Studio <span id="drawer-mockup-count" class="tab-pill">0</span>
</button>
<button type="button" class="drawer-tab" data-drawer-tab="whack">
💡 Brainstorm Prompts <span id="drawer-whack-count" class="tab-pill">0</span>
@@ -526,17 +526,27 @@
</div>
</div>
<!-- TAB 2: NANO BANANA 2.1 VISUAL MOCKUP STUDIO -->
<!-- TAB 2: IMAGE MOCKUP STUDIO -->
<div id="drawer-tab-mockup" class="drawer-tab-panel hidden">
<div class="mockup-studio-layout">
<!-- Left: Generator & Interactive T-Shirt / Product Compositor -->
<div class="mockup-controls-pane">
<div class="studio-card">
<div class="studio-card-header">
<h3>🍌 Nano Banana 2.1 AI Mockup Generator</h3>
<h3>🖼️ Image Mockup Studio</h3>
<button type="button" id="btn-studio-auto-prompt" class="btn btn-ghost btn-xs">✨ Auto-Prompt from Idea</button>
</div>
<div class="field-group">
<label for="nb-generator-select">AI Image Generator Engine</label>
<select id="nb-generator-select" class="filter-select full-width">
<option value="codex-image-gen">🤖 OpenAI Codex (gpt-5.6-sol / Built-in image_gen) — High-Res PNG</option>
<option value="gemini-nano-banana-2.1">✨ Google Gemini (Nano Banana 2.1 / Flash-Lite Vector Fallback)</option>
<option value="gemini-3-pro-image">🎨 Google Gemini Pro Image (Studio Detail)</option>
<option value="gemini-3.1-flash-lite-image">⚡ Google Gemini Flash-Lite Image (Fast Sketch)</option>
</select>
</div>
<div class="form-row-2">
<div>
<label for="nb-template-select">Product / Surface Preset</label>
@@ -550,7 +560,7 @@
</select>
</div>
<div>
<label for="nb-whack-twist-select">Optional Whack Pack Twist</label>
<label for="nb-whack-twist-select">Optional Prompt Twist</label>
<select id="nb-whack-twist-select" class="filter-select full-width">
<option value="">None (Direct Concept)</option>
</select>
@@ -579,20 +589,20 @@
<!-- Iterative Image-to-Image Edit Banner (Active when a mockup is selected for refinement) -->
<div id="nb-edit-mode-box" class="nb-edit-box hidden">
<div class="nb-edit-header">
<span>🍌 <strong>Iterative Edit Mode:</strong> Refining <em id="nb-edit-target-label">Selected Mockup</em></span>
<span>✨ <strong>Iterative Edit Mode:</strong> Refining <em id="nb-edit-target-label">Selected Mockup</em></span>
<button type="button" id="btn-nb-clear-edit" class="btn btn-ghost btn-xs">Cancel Edit Mode</button>
</div>
<input
type="text"
id="nb-edit-instruction-input"
class="text-input"
placeholder="Tell Nano Banana what to change (e.g. 'Move graphic to left-chest pocket on a forest green shirt')"
placeholder="Describe what to change (e.g. 'Move graphic to left-chest pocket on a forest green shirt')"
/>
</div>
<div class="studio-action-row">
<button type="button" id="btn-generate-nano-banana" class="btn btn-primary">
🎨 Generate AI Mockup (Codex / Nano Banana)
🖼️ Generate Image Mockup
</button>
<span id="nb-generation-status" class="muted-label"></span>
</div>
@@ -680,7 +690,7 @@
<div class="studio-card">
<div class="studio-card-header">
<h3>🖼️ Idea Mockup Gallery</h3>
<span class="muted-label">Click 'Refine with 🍌' to iterate on any mockup</span>
<span class="muted-label">Click '✨ Refine' to iterate on any mockup</span>
</div>
<div id="drawer-mockup-gallery" class="drawer-mockup-gallery"></div>
</div>
@@ -719,37 +729,37 @@
</div>
</aside>
<!-- MODAL: NANO BANANA 2.1 SETTINGS -->
<!-- MODAL: AI GENERATOR & PROFILE SETTINGS -->
<div id="settings-modal" class="modal-backdrop hidden">
<div class="modal-card">
<div class="modal-header">
<h3>🍌 Nano Banana 2.1 (Gemini Image API) Settings</h3>
<h3>⚙️ AI Mockup Generator & Profile Settings</h3>
<button type="button" id="btn-close-settings" class="btn btn-ghost btn-sm">✕</button>
</div>
<form id="settings-form" class="modal-body">
<p class="muted-label">
SparkVault uses Google's <strong>Nano Banana 2.1 (`gemini-nano-banana-2.1`)</strong> via the official `@google/genai` Interactions API for text-to-image product mockups and multi-turn conversational image editing.
Choose which AI generator powers the <strong>Image Mockup Studio</strong> (you can also switch generators anytime directly inside the Studio tab).
</p>
<div class="field-group">
<label for="settings-api-key">Gemini API Key (`GEMINI_API_KEY`)</label>
<label for="settings-model-select">Default Image Mockup Generator</label>
<select id="settings-model-select" class="filter-select full-width">
<option value="codex-image-gen">🤖 OpenAI Codex (gpt-5.6-sol + Built-in image_gen) [Recommended]</option>
<option value="gemini-nano-banana-2.1">✨ Google Gemini (Nano Banana 2.1 / Flash-Lite Vector Fallback)</option>
<option value="gemini-3-pro-image">🎨 Google Gemini Pro Image (High-Detail Studio)</option>
<option value="gemini-3.1-flash-lite-image">⚡ Google Gemini Flash-Lite Image (Fast Sketch)</option>
</select>
</div>
<div class="field-group">
<label for="settings-api-key">Optional Google Gemini API Key (`GEMINI_API_KEY`)</label>
<input
type="password"
id="settings-api-key"
class="text-input"
placeholder="Paste your AI Studio / Gemini API key (AIza...)"
placeholder="Only needed if using Google Gemini models (AIza...)"
autocomplete="off"
/>
<small id="settings-key-status" class="muted-label"></small>
</div>
<div class="field-group">
<label for="settings-model-select">AI Mockup Engine / Model</label>
<select id="settings-model-select" class="filter-select full-width">
<option value="codex-image-gen">codex-image-gen — OpenAI Codex (gpt-5.6-sol + Built-in image_gen) [Recommended]</option>
<option value="gemini-nano-banana-2.1">gemini-nano-banana-2.1 — Nano Banana 2.1 (Google Gemini)</option>
<option value="gemini-3-pro-image">gemini-3-pro-image — Nano Banana Pro (High-Detail Studio)</option>
<option value="gemini-3.1-flash-lite-image">gemini-3.1-flash-lite-image — Nano Banana 2 Lite (Ultra-Fast)</option>
</select>
</div>
<div class="field-group">
<label for="settings-user-background">🎲 Personal Background & Tastes (Used by '🎲 Random Idea')</label>
<textarea