diff --git a/src/components/CinemaStudio.js b/src/components/CinemaStudio.js index 62559f6..15faef2 100644 --- a/src/components/CinemaStudio.js +++ b/src/components/CinemaStudio.js @@ -1,7 +1,7 @@ import { muapi } from '../lib/muapi.js'; import { CameraControls } from './CameraControls.js'; -import { buildNanoBananaPrompt, CAMERA_MAP, LENS_MAP } from '../lib/promptUtils.js'; +import { buildNanoBananaPrompt, CAMERA_MAP, LENS_MAP, FOCAL_PERSPECTIVE, APERTURE_EFFECT } from '../lib/promptUtils.js'; import { AuthModal } from './AuthModal.js'; export function CinemaStudio() { @@ -17,6 +17,9 @@ export function CinemaStudio() { focal: 35, aperture: "f/1.4" }; + + // Camera builder panel state + let showCameraBuilder = false; // ========================================== // 1. HERO SECTION (Empty State) @@ -180,6 +183,12 @@ export function CinemaStudio() { createDropdown(['1K', '2K', '4K'], resBtn.dataset.value, (val) => { updateResBtn(val); }, resBtn); }; settingsToolbar.appendChild(resBtn); + + // Camera Builder Toggle Button + const cameraBuilderBtn = document.createElement('button'); + cameraBuilderBtn.className = 'flex items-center gap-1.5 px-3 py-1.5 text-[10px] font-bold text-white/50 hover:text-white transition-colors bg-white/5 hover:bg-white/10 rounded-lg border border-white/5'; + cameraBuilderBtn.innerHTML = ` Builder`; + settingsToolbar.appendChild(cameraBuilderBtn); leftColumn.appendChild(settingsToolbar); promptBar.appendChild(leftColumn); @@ -233,6 +242,114 @@ export function CinemaStudio() { promptBarWrapper.appendChild(promptBar); container.appendChild(promptBarWrapper); + // ========================================== + // 3B. CAMERA BUILDER PANEL (Collapsible) + // ========================================== + const cameraBuilderPanel = document.createElement('div'); + cameraBuilderPanel.className = 'absolute bottom-8 left-4 right-4 md:left-1/2 md:-translate-x-1/2 md:w-full md:max-w-4xl z-20'; + cameraBuilderPanel.style.display = 'none'; // Hidden by default + + const builderCard = document.createElement('div'); + builderCard.className = 'bg-[#1a1a1a] border border-white/10 rounded-2xl p-4 shadow-3xl'; + + builderCard.innerHTML = ` +
+

Camera Builder

+ +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ +
+ +
+ `; + + cameraBuilderPanel.appendChild(builderCard); + container.appendChild(cameraBuilderPanel); + + // Camera Builder toggle logic + cameraBuilderBtn.onclick = () => { + showCameraBuilder = !showCameraBuilder; + cameraBuilderPanel.style.display = showCameraBuilder ? 'block' : 'none'; + if (showCameraBuilder) updateBuilderPreview(); + }; + + const closeBuilderBtn = cameraBuilderPanel.querySelector('#close-builder-btn'); + if (closeBuilderBtn) closeBuilderBtn.onclick = () => { + showCameraBuilder = false; + cameraBuilderPanel.style.display = 'none'; + }; + + // Update builder preview + const updateBuilderPreview = () => { + const camera = builderCard.querySelector('#builder-camera')?.value || currentSettings.camera; + const lens = builderCard.querySelector('#builder-lens')?.value || currentSettings.lens; + const focal = parseInt(builderCard.querySelector('#builder-focal')?.value || currentSettings.focal); + const aperture = builderCard.querySelector('#builder-aperture')?.value || currentSettings.aperture; + + const preview = buildNanoBananaPrompt('', camera, lens, focal, aperture); + const previewEl = builderCard.querySelector('#builder-preview'); + if (previewEl) { + previewEl.textContent = preview || 'Select camera settings to see preview...'; + } + }; + + // Builder event listeners + const builderCamera = builderCard.querySelector('#builder-camera'); + const builderLens = builderCard.querySelector('#builder-lens'); + const builderFocal = builderCard.querySelector('#builder-focal'); + const builderAperture = builderCard.querySelector('#builder-aperture'); + + if (builderCamera) builderCamera.onchange = updateBuilderPreview; + if (builderLens) builderLens.onchange = updateBuilderPreview; + if (builderFocal) builderFocal.onchange = updateBuilderPreview; + if (builderAperture) builderAperture.onchange = updateBuilderPreview; + + const applyBuilderBtn = builderCard.querySelector('#apply-builder-btn'); + if (applyBuilderBtn) { + applyBuilderBtn.onclick = () => { + currentSettings.camera = builderCamera?.value || currentSettings.camera; + currentSettings.lens = builderLens?.value || currentSettings.lens; + currentSettings.focal = parseInt(builderFocal?.value || currentSettings.focal); + currentSettings.aperture = builderAperture?.value || currentSettings.aperture; + updateSummaryCard(); + showCameraBuilder = false; + cameraBuilderPanel.style.display = 'none'; + }; + } + // ========================================== // 3. HISTORY SIDEBAR diff --git a/src/components/ImageStudio.js b/src/components/ImageStudio.js index ef7c7dd..e01bc8c 100644 --- a/src/components/ImageStudio.js +++ b/src/components/ImageStudio.js @@ -4,6 +4,7 @@ import { i2iModels, getAspectRatiosForI2IModel, getResolutionsForI2IModel, getQualityFieldForI2IModel, getMaxImagesForI2IModel } from '../lib/models.js'; +import { ENHANCE_TAGS, QUICK_PROMPTS } from '../lib/promptUtils.js'; import { AuthModal } from './AuthModal.js'; import { createUploadPicker } from './UploadPicker.js'; import { savePendingJob, removePendingJob, getPendingJobs } from '../lib/pendingJobs.js'; @@ -21,6 +22,25 @@ export function ImageStudio() { let uploadedImageUrls = []; // array of uploaded image URLs (multi-image support) let imageMode = false; // false = t2i models, true = i2i models + // Advanced parameters state + let negativePrompt = ''; + let guidanceScale = 7.5; + let steps = 25; + let seed = -1; + let showAdvanced = false; + let selectedStyle = 'None'; + let batchCount = 1; + + // New advanced controls + let customWidth = 0; // 0 means use default (aspect ratio based) + let customHeight = 0; + let referenceStrength = 50; // 0-100, for style reference models + let selectedLora = ''; // LoRA model ID from Civitai + let loraWeight = 1.0; + + // Quick tools panel state + let showToolsPanel = false; + const getCurrentModels = () => imageMode ? i2iModels : t2iModels; const getCurrentAspectRatios = (id) => imageMode ? getAspectRatiosForI2IModel(id) : getAspectRatiosForModel(id); const getCurrentResolutions = (id) => imageMode ? getResolutionsForI2IModel(id) : getResolutionsForModel(id); @@ -156,21 +176,419 @@ export function ImageStudio() { controlsLeft.appendChild(modelBtn); controlsLeft.appendChild(arBtn); controlsLeft.appendChild(qualityBtn); - // Show quality button if the default model has quality/resolution options - const _initResolutions = getResolutionsForModel(defaultModel.id); - qualityBtn.style.display = _initResolutions.length > 0 ? 'flex' : 'none'; - if (_initResolutions.length > 0) document.getElementById('quality-btn-label').textContent = _initResolutions[0]; + const inlineInstructions = createInlineInstructions('image'); + inlineInstructions.classList.add('max-w-4xl', 'mt-8'); + container.appendChild(inlineInstructions); - const generateBtn = document.createElement('button'); - generateBtn.className = 'bg-primary text-black px-6 md:px-8 py-3 md:py-3.5 rounded-xl md:rounded-[1.5rem] font-black text-sm md:text-base hover:shadow-glow hover:scale-105 active:scale-95 transition-all flex items-center justify-center gap-2.5 w-full sm:w-auto shadow-lg'; - generateBtn.innerHTML = `Generate ✨`; + // ========================================== + // 3. QUICK TOOLS PANEL (Prompt Enhancer + Quick Starters) + // ========================================== + const toolsPanel = document.createElement('div'); + toolsPanel.className = 'w-full max-w-4xl mt-6 animate-fade-in-up hidden'; + toolsPanel.id = 'tools-panel'; + + // Build tools panel HTML + toolsPanel.innerHTML = ` +
+
+

Quick Tools

+ +
+ +
+ +
+

Quick Starters

+
+ ${QUICK_PROMPTS.map(q => ` + + `).join('')} +
+
+ + +
+

Prompt Enhancer

+
+ + +
+ +
+ ${Object.entries(ENHANCE_TAGS).map(([category, tags]) => + tags.map(tag => ``).join('') + ).join('')} +
+
+ +
+ +
+
+ + +
+
+
+
+
+
+ `; + + container.appendChild(toolsPanel); - bottomRow.appendChild(controlsLeft); - bottomRow.appendChild(generateBtn); - bar.appendChild(bottomRow); - promptWrapper.appendChild(bar); - container.appendChild(promptWrapper); + // ========================================== + // 4. ADVANCED OPTIONS PANEL + // ========================================== + const STYLE_PRESETS = ['None', 'Photorealistic', 'Anime', 'Cinematic', 'Oil Painting', 'Watercolor', 'Digital Art', 'Concept Art', 'Cyberpunk']; + + const advancedPanel = document.createElement('div'); + advancedPanel.className = 'w-full max-w-4xl mt-6 animate-fade-in-up hidden'; + advancedPanel.id = 'advanced-panel'; + advancedPanel.innerHTML = ` +
+
+

Advanced Options

+ +
+ + +
+ +
+ ${STYLE_PRESETS.map(s => ``).join('')} +
+
+ + +
+ + +
+ + +
+
+
+ + 7.5 +
+ +
+ +
+
+ + 25 +
+ +
+
+ + +
+
+ + +
+ +
+ + +
+
+ + 1 +
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + 50% +
+ +

How much to preserve the reference image characteristics

+
+ + +
+ + +
+ + +
+

Enter a LoRA model ID from Civitai (format: civitai:id@version)

+
+
+ `; + container.appendChild(advancedPanel); + // Advanced panel toggle logic + const toggleAdvanced = () => { + showAdvanced = !showAdvanced; + advancedPanel.classList.toggle('hidden', !showAdvanced); + document.getElementById('advanced-btn-label').textContent = showAdvanced ? 'Less' : 'Advanced'; + }; + + // Add tools panel and advanced panel to container first before accessing their elements + container.appendChild(toolsPanel); + container.appendChild(advancedPanel); + + // Now set up event handlers after elements are in DOM + advancedBtn.onclick = toggleAdvanced; + const closeAdvBtn = advancedPanel.querySelector('#close-adv-btn'); + if (closeAdvBtn) closeAdvBtn.onclick = toggleAdvanced; + + // Quick Tools Panel toggle + const toggleTools = () => { + showToolsPanel = !showToolsPanel; + toolsPanel.classList.toggle('hidden', !showToolsPanel); + if (showToolsPanel) { + // Close advanced panel when opening tools + if (!showAdvanced) { + showAdvanced = true; + advancedPanel.classList.remove('hidden'); + } + } + document.getElementById('tools-btn-label').textContent = showToolsPanel ? 'Tools' : 'Tools'; + }; + + toolsBtn.onclick = toggleTools; + const closeToolsBtn = toolsPanel.querySelector('#close-tools-btn'); + if (closeToolsBtn) closeToolsBtn.onclick = toggleTools; + + // Quick Starter buttons + const quickStarterBtns = toolsPanel.querySelectorAll('.quick-starter-btn'); + quickStarterBtns.forEach(btn => { + btn.onclick = () => { + const prompt = btn.dataset.prompt; + textarea.value = prompt; + textarea.style.height = 'auto'; + const maxHeight = window.innerWidth < 768 ? 150 : 250; + textarea.style.height = Math.min(textarea.scrollHeight, maxHeight) + 'px'; + // Close tools panel after selection + showToolsPanel = false; + toolsPanel.classList.add('hidden'); + }; + }); + + // Prompt Enhancer - selected tags state + const enhanceSelectedTags = new Set(); + const basePromptInput = toolsPanel.querySelector('#base-prompt-input'); + const enhancedPromptDisplay = toolsPanel.querySelector('#enhanced-prompt-display'); + + // Update enhanced prompt display + const updateEnhancedPrompt = () => { + const base = basePromptInput?.value?.trim() || ''; + const tags = Array.from(enhanceSelectedTags).join(', '); + const enhanced = [base, tags].filter(p => p).join(', '); + if (enhancedPromptDisplay) { + enhancedPromptDisplay.textContent = enhanced || 'Your enhanced prompt will appear here...'; + enhancedPromptDisplay.classList.toggle('text-muted', !enhanced); + } + }; + + // Base prompt input handler + if (basePromptInput) { + basePromptInput.oninput = updateEnhancedPrompt; + } + + // Enhance tag buttons + const enhanceTagBtns = toolsPanel.querySelectorAll('.enhance-tag-btn'); + enhanceTagBtns.forEach(btn => { + btn.onclick = () => { + const tag = btn.dataset.tag; + if (enhanceSelectedTags.has(tag)) { + enhanceSelectedTags.delete(tag); + btn.classList.remove('bg-primary', 'text-black'); + btn.classList.add('bg-white/5', 'text-secondary'); + } else { + enhanceSelectedTags.add(tag); + btn.classList.remove('bg-white/5', 'text-secondary'); + btn.classList.add('bg-primary', 'text-black'); + } + updateEnhancedPrompt(); + }; + }); + + // Copy enhanced button + const copyEnhancedBtn = toolsPanel.querySelector('#copy-enhanced-btn'); + if (copyEnhancedBtn) { + copyEnhancedBtn.onclick = () => { + const text = enhancedPromptDisplay?.textContent || ''; + if (text && text !== 'Your enhanced prompt will appear here...') { + navigator.clipboard.writeText(text); + copyEnhancedBtn.textContent = 'Copied!'; + setTimeout(() => { copyEnhancedBtn.textContent = 'Copy'; }, 1500); + } + }; + } + + // Use enhanced button + const useEnhancedBtn = toolsPanel.querySelector('#use-enhanced-btn'); + if (useEnhancedBtn) { + useEnhancedBtn.onclick = () => { + const text = enhancedPromptDisplay?.textContent || ''; + if (text && text !== 'Your enhanced prompt will appear here...') { + textarea.value = text; + textarea.style.height = 'auto'; + const maxHeight = window.innerWidth < 768 ? 150 : 250; + textarea.style.height = Math.min(textarea.scrollHeight, maxHeight) + 'px'; + // Close tools panel after use + showToolsPanel = false; + toolsPanel.classList.add('hidden'); + } + }; + } + + // Negative prompt + const negPromptInput = advancedPanel.querySelector('#negative-prompt-input'); + if (negPromptInput) negPromptInput.oninput = (e) => { negativePrompt = e.target.value; }; + + // Guidance scale slider + const guidanceSlider = advancedPanel.querySelector('#guidance-slider'); + const guidanceValue = advancedPanel.querySelector('#guidance-value'); + if (guidanceSlider && guidanceValue) { + guidanceSlider.oninput = (e) => { + guidanceScale = parseFloat(e.target.value); + guidanceValue.textContent = guidanceScale; + }; + } + + // Steps slider + const stepsSlider = advancedPanel.querySelector('#steps-slider'); + const stepsValue = advancedPanel.querySelector('#steps-value'); + if (stepsSlider && stepsValue) { + stepsSlider.oninput = (e) => { + steps = parseInt(e.target.value); + stepsValue.textContent = steps; + }; + } + + // Seed input + const seedInput = advancedPanel.querySelector('#seed-input'); + if (seedInput) seedInput.oninput = (e) => { seed = parseInt(e.target.value) || -1; }; + + // Randomize seed button + const randSeedBtn = advancedPanel.querySelector('#randomize-seed-btn'); + if (randSeedBtn) { + randSeedBtn.onclick = () => { + seed = Math.floor(Math.random() * 999999999); + if (seedInput) seedInput.value = seed; + }; + } + + // Batch count slider + const batchSlider = advancedPanel.querySelector('#batch-slider'); + const batchValueEl = advancedPanel.querySelector('#batch-value'); + if (batchSlider && batchValueEl) { + batchSlider.oninput = (e) => { + batchCount = parseInt(e.target.value); + batchValueEl.textContent = batchCount; + }; + } + + // Width input + const widthInput = advancedPanel.querySelector('#width-input'); + if (widthInput) { + widthInput.oninput = (e) => { + customWidth = parseInt(e.target.value) || 0; + }; + } + + // Height input + const heightInput = advancedPanel.querySelector('#height-input'); + if (heightInput) { + heightInput.oninput = (e) => { + customHeight = parseInt(e.target.value) || 0; + }; + } + + // Reference strength slider + const refStrengthSlider = advancedPanel.querySelector('#reference-strength-slider'); + const refStrengthValue = advancedPanel.querySelector('#reference-strength-value'); + if (refStrengthSlider && refStrengthValue) { + refStrengthSlider.oninput = (e) => { + referenceStrength = parseInt(e.target.value); + refStrengthValue.textContent = referenceStrength + '%'; + }; + } + + // LoRA input + const loraInput = advancedPanel.querySelector('#lora-input'); + if (loraInput) { + loraInput.oninput = (e) => { + selectedLora = e.target.value.trim(); + }; + } + + // LoRA weight input + const loraWeightInput = advancedPanel.querySelector('#lora-weight-input'); + if (loraWeightInput) { + loraWeightInput.oninput = (e) => { + loraWeight = parseFloat(e.target.value) || 1.0; + }; + } + + // Style preset handlers + advancedPanel.querySelectorAll('.style-preset-btn').forEach(btn => { + btn.onclick = () => { + selectedStyle = btn.dataset.style; + advancedPanel.querySelectorAll('.style-preset-btn').forEach(b => { + b.classList.remove('bg-primary/20', 'text-primary', 'border-primary/30'); + b.classList.add('bg-white/5', 'text-secondary'); + }); + btn.classList.add('bg-primary/20', 'text-primary', 'border-primary/30'); + btn.classList.remove('bg-white/5', 'text-secondary'); + }; + }); // ========================================== // 3. DROPDOWNS (Professional implementation) // ========================================== diff --git a/src/lib/promptUtils.js b/src/lib/promptUtils.js index 6c657c9..fbb32bb 100644 --- a/src/lib/promptUtils.js +++ b/src/lib/promptUtils.js @@ -1,3 +1,21 @@ +export const ENHANCE_TAGS = { + quality: ['professional photography', 'ultra-detailed', '8K resolution', 'high dynamic range', 'award-winning'], + lighting: ['cinematic lighting', 'golden hour', 'dramatic studio lighting', 'soft diffused light', 'neon glow', 'volumetric rays'], + mood: ['moody atmosphere', 'serene and peaceful', 'epic and dramatic', 'warm and cozy', 'dark and mysterious'], + style: ['photorealistic', 'oil painting style', 'watercolor', 'digital art', 'concept art', 'anime style', 'cyberpunk aesthetic'], +}; + +export const QUICK_PROMPTS = [ + { label: 'Portrait', prompt: 'Professional portrait photograph, shallow depth of field, soft studio lighting, 85mm lens' }, + { label: 'Landscape', prompt: 'Breathtaking landscape photograph, golden hour, wide angle, dramatic clouds, 4K' }, + { label: 'Product', prompt: 'Commercial product photography, clean white background, studio lighting, professional' }, + { label: 'Fantasy', prompt: 'Epic fantasy scene, magical atmosphere, volumetric lighting, highly detailed, concept art' }, + { label: 'Sci-Fi', prompt: 'Futuristic sci-fi environment, neon lights, cyberpunk city, rain reflections, cinematic' }, + { label: 'Food', prompt: 'Professional food photography, appetizing, warm lighting, shallow depth of field, editorial' }, + { label: 'Architecture', prompt: 'Architectural photography, dramatic angles, clean lines, modern design, professional' }, + { label: 'Fashion', prompt: 'High fashion editorial, avant-garde styling, studio lighting, Vogue aesthetic, professional' }, +]; + export const CAMERA_MAP = { "Modular 8K Digital": "modular 8K digital cinema camera", "Full-Frame Cine Digital": "full-frame digital cinema camera",