explodeview 0.2.1 → 1.0.1

package/src/explodeview.js

@@ -64,6 +64,80 @@
       .stpv-info-sub { font-size:0.7rem; font-weight:300; color:rgba(255,255,255,0.55); margin-top:4px; letter-spacing:0.04em; text-shadow:0 1px 4px rgba(0,0,0,0.4); }
       .stpv-info-detail { font-size:0.6rem; color:rgba(255,255,255,0.35); margin-top:8px; line-height:1.6; }
       .stpv-info-line { width:30px; height:2px; margin-top:8px; border-radius:1px; }
+
+      /* AI Render button glow */
+      .stpv-cbtn.stpv-ai-btn { position:relative; }
+      .stpv-cbtn.stpv-ai-btn::after { content:''; position:absolute; inset:-2px; border-radius:7px; background:linear-gradient(135deg,rgba(0,85,164,0.3),rgba(255,209,0,0.3)); opacity:0; transition:opacity 0.3s; z-index:-1; }
+      .stpv-cbtn.stpv-ai-btn:hover::after { opacity:1; }
+
+      /* AI Render slide-out panel */
+      .stpv-ai-panel { position:absolute; top:0; right:0; bottom:0; width:340px; max-width:85%; background:rgba(10,14,26,0.96); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-left:1px solid rgba(255,255,255,0.06); z-index:30; transform:translateX(100%); transition:transform 0.35s cubic-bezier(0.4,0,0.2,1); display:flex; flex-direction:column; }
+      .stpv-ai-panel.open { transform:translateX(0); }
+      .stpv-ai-panel-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.06); flex-shrink:0; }
+      .stpv-ai-panel-title { font-size:0.7rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; background:linear-gradient(90deg,#4da6ff,#FFD100); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
+      .stpv-ai-close { background:none; border:none; color:#667; font-size:1.1rem; cursor:pointer; padding:4px 8px; border-radius:4px; transition:all 0.2s; }
+      .stpv-ai-close:hover { color:#fff; background:rgba(255,255,255,0.06); }
+      .stpv-ai-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:16px; }
+      .stpv-ai-body::-webkit-scrollbar { width:4px; }
+      .stpv-ai-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:2px; }
+
+      /* AI Panel form elements */
+      .stpv-ai-section { display:flex; flex-direction:column; gap:6px; }
+      .stpv-ai-label { font-size:0.55rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:#556; }
+      .stpv-ai-textarea { width:100%; min-height:72px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:6px; color:#ccd; font-size:0.75rem; padding:10px 12px; font-family:inherit; resize:vertical; outline:none; transition:border-color 0.2s; box-sizing:border-box; }
+      .stpv-ai-textarea:focus { border-color:rgba(0,85,164,0.5); }
+      .stpv-ai-textarea::placeholder { color:#334; }
+
+      .stpv-ai-select { width:100%; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:6px; color:#ccd; font-size:0.72rem; padding:8px 12px; font-family:inherit; outline:none; cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23556' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; box-sizing:border-box; }
+      .stpv-ai-select:focus { border-color:rgba(0,85,164,0.5); }
+      .stpv-ai-select option { background:#0a0e1a; color:#ccd; }
+
+      /* Style presets */
+      .stpv-ai-presets { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
+      .stpv-ai-preset { padding:8px 10px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:6px; cursor:pointer; text-align:center; font-size:0.6rem; letter-spacing:0.06em; color:#667; transition:all 0.2s; }
+      .stpv-ai-preset:hover { border-color:rgba(255,255,255,0.15); color:#99a; }
+      .stpv-ai-preset.active { border-color:rgba(0,85,164,0.5); background:rgba(0,85,164,0.1); color:#4da6ff; }
+      .stpv-ai-preset-icon { font-size:1rem; margin-bottom:3px; display:block; }
+
+      /* Materials chips */
+      .stpv-ai-chips { display:flex; flex-wrap:wrap; gap:4px; }
+      .stpv-ai-chip { display:flex; align-items:center; gap:4px; padding:3px 8px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:12px; font-size:0.55rem; color:#889; }
+      .stpv-ai-chip-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
+
+      /* Generate button */
+      .stpv-ai-generate { width:100%; padding:11px 16px; background:linear-gradient(135deg,#0055A4,#003d75); border:1px solid rgba(0,85,164,0.5); border-radius:6px; color:#fff; font-size:0.7rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; font-family:inherit; transition:all 0.25s; flex-shrink:0; }
+      .stpv-ai-generate:hover { background:linear-gradient(135deg,#0066c4,#0055A4); box-shadow:0 4px 20px rgba(0,85,164,0.3); }
+      .stpv-ai-generate:disabled { opacity:0.4; cursor:not-allowed; }
+      .stpv-ai-generate.generating { animation:stpv-pulse 1.5s ease infinite; }
+      @keyframes stpv-pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
+
+      /* API key input */
+      .stpv-ai-key-input { width:100%; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:6px; color:#ccd; font-size:0.7rem; padding:8px 12px; font-family:monospace; outline:none; transition:border-color 0.2s; box-sizing:border-box; }
+      .stpv-ai-key-input:focus { border-color:rgba(0,85,164,0.5); }
+      .stpv-ai-key-input::placeholder { color:#334; font-family:inherit; }
+      .stpv-ai-key-status { font-size:0.55rem; color:#556; margin-top:2px; }
+      .stpv-ai-key-status.ok { color:#4a8; }
+      .stpv-ai-key-status.err { color:#c55; }
+
+      /* Gallery */
+      .stpv-ai-gallery { display:flex; flex-direction:column; gap:8px; }
+      .stpv-ai-gallery-item { position:relative; border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,0.06); cursor:pointer; transition:border-color 0.2s; }
+      .stpv-ai-gallery-item:hover { border-color:rgba(255,255,255,0.15); }
+      .stpv-ai-gallery-item img { width:100%; display:block; }
+      .stpv-ai-gallery-actions { position:absolute; bottom:0; left:0; right:0; padding:6px 8px; background:linear-gradient(transparent,rgba(0,0,0,0.8)); display:flex; gap:4px; justify-content:flex-end; opacity:0; transition:opacity 0.2s; }
+      .stpv-ai-gallery-item:hover .stpv-ai-gallery-actions { opacity:1; }
+      .stpv-ai-dl-btn { padding:3px 8px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); border-radius:4px; color:#dde; font-size:0.5rem; cursor:pointer; font-family:inherit; letter-spacing:0.06em; text-transform:uppercase; transition:all 0.2s; }
+      .stpv-ai-dl-btn:hover { background:rgba(0,85,164,0.3); border-color:rgba(0,85,164,0.5); }
+
+      /* Empty gallery state */
+      .stpv-ai-empty { text-align:center; padding:24px 16px; color:#334; }
+      .stpv-ai-empty-icon { font-size:2rem; margin-bottom:8px; opacity:0.4; }
+      .stpv-ai-empty-text { font-size:0.6rem; line-height:1.6; }
+
+      /* Preview thumbnail */
+      .stpv-ai-preview { border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,0.06); }
+      .stpv-ai-preview img { width:100%; display:block; }
+      .stpv-ai-preview-label { font-size:0.5rem; color:#445; text-align:center; padding:4px; letter-spacing:0.08em; }
     `;
     container.appendChild(style);
   }
@@ -132,6 +206,8 @@
           <button class="stpv-cbtn" data-action="free-rotate" title="${captions.titleFreeRotate}">&#9978;</button>
           <div class="stpv-cdiv"></div>
           <button class="stpv-cbtn" data-action="reset" title="${captions.titleReset}">&#8634;</button>
+          <div class="stpv-cdiv"></div>
+          <button class="stpv-cbtn stpv-ai-btn" data-action="ai-render" title="AI Render">&#10024;</button>
         </div>
         <div class="stpv-info">
           <div class="stpv-info-num"></div>
@@ -140,6 +216,82 @@
           <div class="stpv-info-detail"></div>
           <div class="stpv-info-line"></div>
         </div>
+        <div class="stpv-ai-panel">
+          <div class="stpv-ai-panel-header">
+            <div class="stpv-ai-panel-title">&#10024; AI Render</div>
+            <button class="stpv-ai-close">&times;</button>
+          </div>
+          <div class="stpv-ai-body">
+            <div class="stpv-ai-section">
+              <div class="stpv-ai-label">Scene Preview</div>
+              <div class="stpv-ai-preview">
+                <img class="stpv-ai-preview-img" alt="Current view" />
+                <div class="stpv-ai-preview-label">Current camera view will be used as reference</div>
+              </div>
+            </div>
+            <div class="stpv-ai-section">
+              <div class="stpv-ai-label">Scene Prompt</div>
+              <textarea class="stpv-ai-textarea" placeholder="Modern bike shop, wooden floor, glass walls, natural light, studio photography..."></textarea>
+            </div>
+            <div class="stpv-ai-section">
+              <div class="stpv-ai-label">Style Preset</div>
+              <div class="stpv-ai-presets">
+                <div class="stpv-ai-preset active" data-preset="product">
+                  <span class="stpv-ai-preset-icon">&#128247;</span>Product Photo
+                </div>
+                <div class="stpv-ai-preset" data-preset="marketing">
+                  <span class="stpv-ai-preset-icon">&#127775;</span>Marketing Shot
+                </div>
+                <div class="stpv-ai-preset" data-preset="technical">
+                  <span class="stpv-ai-preset-icon">&#128295;</span>Technical
+                </div>
+                <div class="stpv-ai-preset" data-preset="artistic">
+                  <span class="stpv-ai-preset-icon">&#127912;</span>Artistic
+                </div>
+              </div>
+            </div>
+            <div class="stpv-ai-section">
+              <div class="stpv-ai-label">Detected Materials</div>
+              <div class="stpv-ai-chips"></div>
+            </div>
+            <div class="stpv-ai-section">
+              <div class="stpv-ai-label">AI Model</div>
+              <select class="stpv-ai-select stpv-ai-model-select">
+                <option value="gemini-flash-image">Gemini 2.0 Flash — Image Gen (FREE)</option>
+                <option value="gemini-nano-banana">Nano Banana v1 — Gemini 2.5 Flash</option>
+                <option value="stability-sdxl">Stability AI — SDXL</option>
+                <option value="stability-sd3">Stability AI — SD3</option>
+                <option value="openai-dall-e-3">OpenAI — DALL·E 3</option>
+                <option value="fal-flux">Fal.ai — FLUX</option>
+                <option value="replicate-custom">Replicate — Custom Model</option>
+              </select>
+            </div>
+            <div class="stpv-ai-section">
+              <div class="stpv-ai-label">API Key</div>
+              <input type="password" class="stpv-ai-key-input" placeholder="Paste your API key..." />
+              <div class="stpv-ai-key-hint"></div>
+              <div class="stpv-ai-key-status">Key is stored in browser only, never sent to our servers.</div>
+            </div>
+            <div class="stpv-ai-section">
+              <div class="stpv-ai-label">Output Format</div>
+              <select class="stpv-ai-select stpv-ai-format-select">
+                <option value="png">PNG (lossless)</option>
+                <option value="jpg">JPG (smaller file)</option>
+                <option value="webp">WebP (modern)</option>
+              </select>
+            </div>
+            <button class="stpv-ai-generate">&#10024; Generate Render</button>
+            <div class="stpv-ai-section">
+              <div class="stpv-ai-label">Gallery</div>
+              <div class="stpv-ai-gallery">
+                <div class="stpv-ai-empty">
+                  <div class="stpv-ai-empty-icon">&#128444;</div>
+                  <div class="stpv-ai-empty-text">No renders yet.<br/>Configure your scene and hit Generate.</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     `;
     injectStyles(container.querySelector('.stpv'));
@@ -185,6 +337,7 @@
       this._setupLights();
       this._setupControls();
       this._bindUI();
+      this._initAIRender();
 
       // Load parts
       await this._loadParts();
@@ -254,7 +407,7 @@
       this.camera = new T.PerspectiveCamera(35, w / h, 1, 15000);
       this.camera.position.set(3000, 1800, 3000);
 
-      this.renderer = new T.WebGLRenderer({ antialias: true, powerPreference: 'high-performance' });
+      this.renderer = new T.WebGLRenderer({ antialias: true, powerPreference: 'high-performance', preserveDrawingBuffer: true });
       this.renderer.setSize(w, h);
       this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
       this.renderer.shadowMap.enabled = true;
@@ -497,6 +650,11 @@
         btn.addEventListener('click', () => {
           const action = btn.dataset.action;
 
+          if (action === 'ai-render') {
+            this._toggleAIPanel();
+            return;
+          }
+
           if (action === 'expand') {
             self.explodeLevel = Math.min(3.0, self.explodeLevel + 0.25);
             self.manualMode = true;
@@ -548,6 +706,459 @@
       btn.classList.add('active');
     }
 
+    // ─── AI Render System ───
+
+    _initAIRender() {
+      this.aiPanel = this.el.querySelector('.stpv-ai-panel');
+      this.aiRenders = [];
+      this.aiActivePreset = 'product';
+
+      // Style preset prompt templates
+      this.aiPresets = {
+        product: { suffix: 'professional product photography, studio lighting, clean white cyclorama background, soft shadows, 8K, commercial quality' },
+        marketing: { suffix: 'lifestyle marketing photography, dramatic lighting, shallow depth of field, premium brand aesthetic, magazine quality, cinematic' },
+        technical: { suffix: 'technical documentation rendering, neutral gray background, even lighting, precise detail, engineering visualization, orthographic feel' },
+        artistic: { suffix: 'artistic 3D render, volumetric lighting, ray-traced, Octane render style, dramatic atmosphere, creative composition, award-winning CGI' },
+      };
+
+      // Panel toggle
+      const closeBtn = this.aiPanel.querySelector('.stpv-ai-close');
+      closeBtn.addEventListener('click', () => this._toggleAIPanel(false));
+
+      // Presets
+      this.aiPanel.querySelectorAll('.stpv-ai-preset').forEach(p => {
+        p.addEventListener('click', () => {
+          this.aiPanel.querySelectorAll('.stpv-ai-preset').forEach(pp => pp.classList.remove('active'));
+          p.classList.add('active');
+          this.aiActivePreset = p.dataset.preset;
+        });
+      });
+
+      // Populate detected materials from assemblies
+      this._populateMaterialChips();
+
+      // Model selector — persist choice
+      const modelSel = this.aiPanel.querySelector('.stpv-ai-model-select');
+      const savedModel = this._aiStorageGet('ai-model');
+      if (savedModel) modelSel.value = savedModel;
+      modelSel.addEventListener('change', () => this._aiStorageSet('ai-model', modelSel.value));
+
+      // API key — persist per provider prefix
+      const keyInput = this.aiPanel.querySelector('.stpv-ai-key-input');
+      const keyStatus = this.aiPanel.querySelector('.stpv-ai-key-status');
+      const keyHint = this.aiPanel.querySelector('.stpv-ai-key-hint');
+
+      const providerHints = {
+        gemini: '🍌 FREE — 500 images/day. Get key at aistudio.google.com',
+        stability: 'Get key at platform.stability.ai (~$0.03/render)',
+        openai: 'Get key at platform.openai.com (~$0.04/render)',
+        fal: 'Get key at fal.ai/dashboard',
+        replicate: 'Get key at replicate.com/account',
+      };
+
+      const loadKey = () => {
+        const provider = modelSel.value.split('-')[0];
+        const saved = this._aiStorageGet('ai-key-' + provider);
+        keyInput.value = saved || '';
+        keyStatus.className = 'stpv-ai-key-status' + (saved ? ' ok' : '');
+        keyStatus.textContent = saved ? 'Key saved for this provider.' : 'Key is stored in browser only, never sent to our servers.';
+        keyHint.textContent = providerHints[provider] || '';
+        keyHint.style.cssText = 'font-size:0.55rem;color:#4a8;margin-bottom:4px;';
+      };
+      loadKey();
+      modelSel.addEventListener('change', loadKey);
+      keyInput.addEventListener('change', () => {
+        const provider = modelSel.value.split('-')[0];
+        this._aiStorageSet('ai-key-' + provider, keyInput.value);
+        loadKey();
+      });
+
+      // Generate button
+      const genBtn = this.aiPanel.querySelector('.stpv-ai-generate');
+      genBtn.addEventListener('click', () => this._aiGenerate());
+    }
+
+    _toggleAIPanel(forceState) {
+      const open = forceState !== undefined ? forceState : !this.aiPanel.classList.contains('open');
+      this.aiPanel.classList.toggle('open', open);
+      if (open) {
+        // Capture current canvas as preview
+        this._aiCapturePreview();
+      }
+    }
+
+    _aiCapturePreview() {
+      // Force a render to ensure the canvas is current
+      this.renderer.render(this.scene, this.camera);
+      const dataURL = this.renderer.domElement.toDataURL('image/png');
+      const img = this.aiPanel.querySelector('.stpv-ai-preview-img');
+      img.src = dataURL;
+      this._aiCurrentCapture = dataURL;
+    }
+
+    _populateMaterialChips() {
+      const chipsEl = this.aiPanel.querySelector('.stpv-ai-chips');
+      if (!this.assemblies.length) {
+        chipsEl.innerHTML = '<span style="font-size:0.55rem;color:#445">No assemblies detected</span>';
+        return;
+      }
+      chipsEl.innerHTML = '';
+      for (const asm of this.assemblies) {
+        const chip = document.createElement('span');
+        chip.className = 'stpv-ai-chip';
+        chip.innerHTML = `<span class="stpv-ai-chip-dot" style="background:${asm.color}"></span>${asm.name}`;
+        chipsEl.appendChild(chip);
+      }
+    }
+
+    _aiBuildPrompt() {
+      const userPrompt = this.aiPanel.querySelector('.stpv-ai-textarea').value.trim();
+      const preset = this.aiPresets[this.aiActivePreset];
+
+      // Build material context from assemblies
+      let materialCtx = '';
+      if (this.assemblies.length) {
+        const matParts = this.assemblies.map(a => {
+          const name = (a.name || a.key || '').toLowerCase();
+          return name;
+        }).filter(Boolean);
+        if (matParts.length) materialCtx = 'The object includes components: ' + matParts.join(', ') + '. ';
+      }
+
+      const scene = userPrompt || 'a clean studio environment with professional lighting';
+      return `Photorealistic render of an industrial/mechanical product in ${scene}. ${materialCtx}${preset.suffix}`;
+    }
+
+    async _aiGenerate() {
+      const genBtn = this.aiPanel.querySelector('.stpv-ai-generate');
+      const modelSel = this.aiPanel.querySelector('.stpv-ai-model-select');
+      const keyInput = this.aiPanel.querySelector('.stpv-ai-key-input');
+      const model = modelSel.value;
+      const apiKey = keyInput.value.trim();
+
+      if (!apiKey) {
+        this._aiShowKeyError('Please enter an API key first.');
+        keyInput.focus();
+        return;
+      }
+
+      // Capture fresh screenshot
+      this._aiCapturePreview();
+
+      const prompt = this._aiBuildPrompt();
+      const format = this.aiPanel.querySelector('.stpv-ai-format-select').value;
+
+      genBtn.disabled = true;
+      genBtn.classList.add('generating');
+      genBtn.textContent = '⟳ Generating...';
+
+      try {
+        const imageURL = await this._aiCallProvider(model, apiKey, prompt, this._aiCurrentCapture);
+        this._aiAddToGallery(imageURL, prompt, model, format);
+      } catch (err) {
+        console.error('AI Render error:', err);
+        this._aiShowKeyError(err.message || 'Generation failed. Check your API key and try again.');
+      } finally {
+        genBtn.disabled = false;
+        genBtn.classList.remove('generating');
+        genBtn.textContent = '✨ Generate Render';
+      }
+    }
+
+    async _aiCallProvider(model, apiKey, prompt, referenceImage) {
+      const provider = model.split('-')[0];
+      const imageBase64 = referenceImage.replace(/^data:image\/\w+;base64,/, '');
+
+      if (provider === 'gemini') {
+        return await this._aiCallGemini(model, apiKey, prompt, imageBase64);
+      } else if (provider === 'stability') {
+        return await this._aiCallStability(model, apiKey, prompt, imageBase64);
+      } else if (provider === 'openai') {
+        return await this._aiCallOpenAI(apiKey, prompt, imageBase64);
+      } else if (provider === 'fal') {
+        return await this._aiCallFal(apiKey, prompt, imageBase64);
+      } else if (provider === 'replicate') {
+        return await this._aiCallReplicate(apiKey, prompt, imageBase64);
+      }
+      throw new Error('Unknown provider: ' + provider);
+    }
+
+    async _aiCallGemini(model, apiKey, prompt, imageBase64) {
+      // Map model dropdown values to Gemini API model names
+      const modelMap = {
+        'gemini-flash': 'gemini-2.5-flash-image',                        // Nano Banana v1
+        'gemini-flash-image': 'gemini-2.5-flash-image',                  // Nano Banana v1 (alias)
+        'gemini-nano-banana': 'gemini-2.5-flash-image',                  // Nano Banana v1
+        'gemini-nano-banana-2': 'gemini-3.1-flash-image-preview',        // Nano Banana v2
+      };
+      const geminiModel = modelMap[model] || 'gemini-2.5-flash-image';
+      const endpoint = `https://generativelanguage.googleapis.com/v1beta/models/${geminiModel}:generateContent?key=${apiKey}`;
+
+      const body = {
+        contents: [{
+          parts: [
+            {
+              inline_data: {
+                mime_type: 'image/png',
+                data: imageBase64,
+              }
+            },
+            {
+              text: `You are a photorealistic product rendering engine. Take this 3D CAD viewer screenshot and transform it into a photorealistic product render. ${prompt}. Output ONLY the rendered image, no text.`
+            }
+          ]
+        }],
+        generationConfig: {
+          responseModalities: ['TEXT', 'IMAGE'],
+        }
+      };
+
+      const res = await fetch(endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+
+      if (!res.ok) {
+        const errText = await res.text();
+        let msg = `Gemini API error ${res.status}`;
+        try {
+          const errJson = JSON.parse(errText);
+          const errCode = errJson?.error?.status || '';
+          const errMsg = errJson?.error?.message || '';
+          if (res.status === 429 || errCode === 'RESOURCE_EXHAUSTED') {
+            msg = 'Free tier quota exhausted. Resets daily at midnight Pacific. Try tomorrow or switch to paid plan.';
+          } else if (res.status === 404) {
+            msg = `Model "${geminiModel}" not found. It may have been retired.`;
+          } else if (res.status === 403) {
+            msg = 'API key not authorised for image generation.';
+          } else if (errMsg) {
+            msg = errMsg.length > 120 ? errMsg.slice(0, 120) + '…' : errMsg;
+          }
+        } catch (_) {}
+        throw new Error(msg);
+      }
+
+      const data = await res.json();
+
+      // Find the image part in the response
+      const candidates = data.candidates || [];
+      for (const candidate of candidates) {
+        const parts = (candidate.content && candidate.content.parts) || [];
+        for (const part of parts) {
+          if (part.inlineData && part.inlineData.mimeType && part.inlineData.mimeType.startsWith('image/')) {
+            return `data:${part.inlineData.mimeType};base64,${part.inlineData.data}`;
+          }
+        }
+      }
+      throw new Error('Gemini returned no image. The model may have declined the request. Try adjusting your prompt.');
+    }
+
+    async _aiCallStability(model, apiKey, prompt, imageBase64) {
+      const engineId = model === 'stability-sd3' ? 'sd3-medium' : 'stable-diffusion-xl-1024-v1-0';
+      const isSD3 = model === 'stability-sd3';
+
+      // Convert base64 to blob for image-to-image
+      const blob = this._aiBase64ToBlob(imageBase64, 'image/png');
+
+      const formData = new FormData();
+      formData.append('init_image', blob, 'reference.png');
+      formData.append('init_image_mode', 'IMAGE_STRENGTH');
+      formData.append('image_strength', '0.35');
+      formData.append('text_prompts[0][text]', prompt);
+      formData.append('text_prompts[0][weight]', '1');
+      formData.append('cfg_scale', '7');
+      formData.append('samples', '1');
+      formData.append('steps', '30');
+
+      const endpoint = isSD3
+        ? 'https://api.stability.ai/v2beta/stable-image/generate/sd3'
+        : `https://api.stability.ai/v1/generation/${engineId}/image-to-image`;
+
+      const headers = {
+        'Authorization': `Bearer ${apiKey}`,
+        'Accept': 'application/json',
+      };
+
+      if (isSD3) {
+        // SD3 uses different API shape
+        const fd = new FormData();
+        fd.append('prompt', prompt);
+        fd.append('image', blob, 'reference.png');
+        fd.append('strength', '0.4');
+        fd.append('mode', 'image-to-image');
+        fd.append('output_format', 'png');
+
+        const res = await fetch(endpoint, { method: 'POST', headers, body: fd });
+        if (!res.ok) throw new Error(`Stability API error: ${res.status} ${await res.text()}`);
+        const data = await res.json();
+        return 'data:image/png;base64,' + data.image;
+      }
+
+      const res = await fetch(endpoint, { method: 'POST', headers, body: formData });
+      if (!res.ok) throw new Error(`Stability API error: ${res.status} ${await res.text()}`);
+      const data = await res.json();
+      return 'data:image/png;base64,' + data.artifacts[0].base64;
+    }
+
+    async _aiCallOpenAI(apiKey, prompt, imageBase64) {
+      const res = await fetch('https://api.openai.com/v1/images/edits', {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${apiKey}` },
+        body: (() => {
+          const fd = new FormData();
+          fd.append('image', this._aiBase64ToBlob(imageBase64, 'image/png'), 'reference.png');
+          fd.append('prompt', prompt);
+          fd.append('model', 'dall-e-3');
+          fd.append('size', '1024x1024');
+          fd.append('n', '1');
+          return fd;
+        })(),
+      });
+      if (!res.ok) throw new Error(`OpenAI API error: ${res.status} ${await res.text()}`);
+      const data = await res.json();
+      if (data.data[0].b64_json) return 'data:image/png;base64,' + data.data[0].b64_json;
+      return data.data[0].url;
+    }
+
+    async _aiCallFal(apiKey, prompt, imageBase64) {
+      const res = await fetch('https://fal.run/fal-ai/flux/dev/image-to-image', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Key ${apiKey}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          prompt,
+          image_url: 'data:image/png;base64,' + imageBase64,
+          strength: 0.65,
+          num_images: 1,
+          image_size: 'landscape_16_9',
+        }),
+      });
+      if (!res.ok) throw new Error(`Fal.ai API error: ${res.status} ${await res.text()}`);
+      const data = await res.json();
+      return data.images[0].url;
+    }
+
+    async _aiCallReplicate(apiKey, prompt, imageBase64) {
+      const res = await fetch('https://api.replicate.com/v1/predictions', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${apiKey}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          model: 'stability-ai/sdxl',
+          input: {
+            prompt,
+            image: 'data:image/png;base64,' + imageBase64,
+            prompt_strength: 0.65,
+            num_outputs: 1,
+          },
+        }),
+      });
+      if (!res.ok) throw new Error(`Replicate API error: ${res.status} ${await res.text()}`);
+      const prediction = await res.json();
+
+      // Poll for result
+      let result = prediction;
+      while (result.status !== 'succeeded' && result.status !== 'failed') {
+        await new Promise(r => setTimeout(r, 2000));
+        const poll = await fetch(result.urls.get, {
+          headers: { 'Authorization': `Bearer ${apiKey}` },
+        });
+        result = await poll.json();
+      }
+      if (result.status === 'failed') throw new Error('Replicate generation failed');
+      return result.output[0];
+    }
+
+    _aiBase64ToBlob(base64, mime) {
+      const byteChars = atob(base64);
+      const byteArray = new Uint8Array(byteChars.length);
+      for (let i = 0; i < byteChars.length; i++) byteArray[i] = byteChars.charCodeAt(i);
+      return new Blob([byteArray], { type: mime });
+    }
+
+    _aiAddToGallery(imageURL, prompt, model, format) {
+      const gallery = this.aiPanel.querySelector('.stpv-ai-gallery');
+      // Remove empty state
+      const empty = gallery.querySelector('.stpv-ai-empty');
+      if (empty) empty.remove();
+
+      const render = { url: imageURL, prompt, model, format, timestamp: Date.now() };
+      this.aiRenders.unshift(render);
+
+      const item = document.createElement('div');
+      item.className = 'stpv-ai-gallery-item';
+      item.innerHTML = `
+        <img src="${imageURL}" alt="AI Render" />
+        <div class="stpv-ai-gallery-actions">
+          <button class="stpv-ai-dl-btn" data-fmt="png">PNG</button>
+          <button class="stpv-ai-dl-btn" data-fmt="jpg">JPG</button>
+          <button class="stpv-ai-dl-btn" data-fmt="webp">WebP</button>
+        </div>
+      `;
+
+      // Download handlers
+      item.querySelectorAll('.stpv-ai-dl-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          this._aiDownloadRender(imageURL, btn.dataset.fmt);
+        });
+      });
+
+      gallery.prepend(item);
+    }
+
+    async _aiDownloadRender(imageURL, format) {
+      const canvas = document.createElement('canvas');
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+
+      await new Promise((resolve, reject) => {
+        img.onload = resolve;
+        img.onerror = reject;
+        img.src = imageURL;
+      });
+
+      canvas.width = img.naturalWidth;
+      canvas.height = img.naturalHeight;
+      const ctx = canvas.getContext('2d');
+      ctx.drawImage(img, 0, 0);
+
+      const mimeMap = { png: 'image/png', jpg: 'image/jpeg', webp: 'image/webp' };
+      const mime = mimeMap[format] || 'image/png';
+      const quality = format === 'png' ? undefined : 0.92;
+
+      const dataURL = canvas.toDataURL(mime, quality);
+      const link = document.createElement('a');
+      link.download = `explodeview-render-${Date.now()}.${format}`;
+      link.href = dataURL;
+      link.click();
+    }
+
+    _aiShowKeyError(msg) {
+      const status = this.aiPanel.querySelector('.stpv-ai-key-status');
+      status.className = 'stpv-ai-key-status err';
+      status.textContent = msg;
+      setTimeout(() => {
+        status.className = 'stpv-ai-key-status';
+        const provider = this.aiPanel.querySelector('.stpv-ai-model-select').value.split('-')[0];
+        const saved = this._aiStorageGet('ai-key-' + provider);
+        status.textContent = saved ? 'Key saved for this provider.' : 'Key is stored in browser only, never sent to our servers.';
+      }, 4000);
+    }
+
+    _aiStorageGet(key) {
+      try { return localStorage.getItem('stpv-' + key); } catch { return null; }
+    }
+
+    _aiStorageSet(key, val) {
+      try { localStorage.setItem('stpv-' + key, val); } catch { /* noop */ }
+    }
+
     _animate() {
       const T = this.THREE;
       const clock = new T.Clock();