🐳 20/02 - 00:14 - this is a gpt congiuration so add this a seprate tab MASTER PROMPT 👇 You are a professional AI prompt engineer. Your task is to generate 10 different miniature, realistic, compact

index.html

@@ -1303,10 +1303,30 @@
             <div class="text-center mb-4 lg:mb-8">
                 <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-amber-100 border border-amber-200 text-amber-800 text-sm font-semibold mb-4">
                     <i data-lucide="crown" class="w-4 h-4"></i>
-                    Professional Prompt Engineering
+                    3-Step Professional Workflow
+                </div>
+                <h2 class="text-xl lg:text-2xl font-bold adron-gradient mb-2">Master Prompt Engine</h2>
+                <p class="text-gray-500 text-sm lg:text-base px-4">Generate 10 realistic miniature woodworking tools → Select one → Get IMAGE & VIDEO prompts. Optimized for GPT-4, Claude & DeepSeek APIs.</p>
+            </div>
+
+            <!-- Step Indicator -->
+            <div class="max-w-3xl mx-auto px-2 lg:px-0 mb-6">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center gap-2">
+                        <div id="stepIndicator-1" class="w-8 h-8 rounded-full bg-amber-500 text-white flex items-center justify-center text-sm font-bold">1</div>
+                        <span class="text-sm font-medium text-amber-700">Generate Tools</span>
+                    </div>
+                    <div class="flex-1 h-0.5 bg-gray-200 mx-4" id="stepLine-1"></div>
+                    <div class="flex items-center gap-2">
+                        <div id="stepIndicator-2" class="w-8 h-8 rounded-full bg-gray-200 text-gray-400 flex items-center justify-center text-sm font-bold">2</div>
+                        <span class="text-sm font-medium text-gray-400">IMAGE Prompt</span>
+                    </div>
+                    <div class="flex-1 h-0.5 bg-gray-200 mx-4" id="stepLine-2"></div>
+                    <div class="flex items-center gap-2">
+                        <div id="stepIndicator-3" class="w-8 h-8 rounded-full bg-gray-200 text-gray-400 flex items-center justify-center text-sm font-bold">3</div>
+                        <span class="text-sm font-medium text-gray-400">VIDEO Prompt</span>
+                    </div>
                 </div>
-                <h2 class="text-xl lg:text-2xl font-bold adron-gradient mb-2">Master Prompt Workshop</h2>
-                <p class="text-gray-500 text-sm lg:text-base px-4">AI-powered miniature woodworking tool generator. Creates 10 unique professional tools with IMAGE & VIDEO prompts.</p>
             </div>
 
             <!-- API Provider Selection -->
@@ -1344,11 +1364,28 @@
                             class="w-full ios-input p-3 text-sm text-gray-700 placeholder-gray-400">
                     </div>
 
+                    <!-- Master Prompt Configuration Display -->
+                    <div class="mb-4 p-3 rounded-lg bg-gray-50 border border-gray-200">
+                        <div class="flex items-center justify-between mb-2">
+                            <span class="text-xs font-semibold text-gray-500">System Configuration</span>
+                            <button onclick="toggleMasterConfig()" class="text-xs text-blue-600 hover:text-blue-700">View/Hide</button>
+                        </div>
+                        <div id="masterConfigDisplay" class="hidden text-xs text-gray-600 font-mono whitespace-pre-wrap break-all max-h-32 overflow-y-auto">
+You are a professional AI prompt engineer. Generate 10 miniature, realistic, compact woodworking/DIY tools. Tools must be real, professional, and usable (not toys). Keychain-sized but realistic, maintaining industrial design, ergonomic grip, proportions, and metallic/plastic finish. Colors: orange, yellow, or green industrial body with metallic + matte plastic accents.
+
+STEP 1: Generate 10 different tools as numbered list.
+STEP 2: After selection, generate IMAGE PROMPT with specific format.
+STEP 3: Generate VIDEO PROMPT with specific format.
+
+Strict rules: Follow reference style exactly. Do not redesign or recolor.
+                        </div>
+                    </div>
+
                     <!-- Generate Button -->
                     <button onclick="generateMasterTools()" id="btnGenerateTools" 
                         class="w-full py-4 bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-400 hover:to-orange-400 text-white font-semibold rounded-xl transition-all flex items-center justify-center gap-2 shadow-lg shadow-amber-500/25">
                         <i data-lucide="wand-2" class="w-5 h-5"></i>
-                        Step 1: Generate 10 Professional Tools
+                        Step 1: Generate 10 Tools
                     </button>
                 </div>
             </div>
@@ -1359,9 +1396,9 @@
                     <div class="flex items-center justify-between mb-4">
                         <h3 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
                             <i data-lucide="list-ordered" class="w-5 h-5 text-amber-500"></i>
-                            Generated Tools (Select One)
+                            Step 1: Select One Tool
                         </h3>
-                        <span class="text-xs text-gray-500 bg-gray-100 px-3 py-1 rounded-full">Click any tool to proceed</span>
+                        <span class="text-xs text-gray-500 bg-gray-100 px-3 py-1 rounded-full">Click any tool to generate prompts</span>
                     </div>
                     
                     <div id="masterToolsList" class="space-y-3 max-h-[500px] overflow-y-auto pr-2">
@@ -1376,7 +1413,7 @@
                     <div class="flex items-center justify-between mb-4">
                         <h3 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
                             <i data-lucide="check-circle" class="w-5 h-5 text-blue-500"></i>
-                            Selected: <span id="masterSelectedToolName" class="text-blue-600"></span>
+                            Steps 2 & 3: Generated Prompts
                         </h3>
                         <button onclick="resetMasterPrompt()" class="text-sm text-gray-500 hover:text-gray-700 flex items-center gap-1">
                             <i data-lucide="rotate-ccw" class="w-4 h-4"></i>
@@ -1384,12 +1421,16 @@
                         </button>
                     </div>
 
+                    <div class="mb-4 p-3 rounded-lg bg-amber-50 border border-amber-200">
+                        <span class="text-sm font-semibold text-amber-800">Selected Tool: </span>
+                        <span id="masterSelectedToolName" class="text-sm text-amber-700 font-medium"></span>
+                    </div>
+
                     <!-- IMAGE PROMPT -->
                     <div class="mb-6">
                         <div class="flex items-center justify-between mb-2">
-                            <label class="text-xs font-bold text-blue-600 uppercase tracking-wider flex items-center gap-1">
-                                <i data-lucide="image" class="w-3 h-3"></i>
-                                IMAGE PROMPT
+                            <label class="text-xs font-bold text-blue-600 uppercase tracking-wider flex items-center gap-1 bg-blue-100 px-2 py-1 rounded">
+                                IMAGE PROMPT:
                             </label>
                             <button onclick="copyMasterImagePrompt()" class="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1 bg-blue-50 px-3 py-1.5 rounded-lg transition-colors">
                                 <i data-lucide="copy" class="w-3 h-3"></i>
@@ -1404,9 +1445,8 @@
                     <!-- VIDEO PROMPT -->
                     <div class="mb-6">
                         <div class="flex items-center justify-between mb-2">
-                            <label class="text-xs font-bold text-purple-600 uppercase tracking-wider flex items-center gap-1">
-                                <i data-lucide="video" class="w-3 h-3"></i>
-                                VIDEO PROMPT
+                            <label class="text-xs font-bold text-purple-600 uppercase tracking-wider flex items-center gap-1 bg-purple-100 px-2 py-1 rounded">
+                                VIDEO PROMPT:
                             </label>
                             <button onclick="copyMasterVideoPrompt()" class="text-xs text-purple-600 hover:text-purple-700 flex items-center gap-1 bg-purple-50 px-3 py-1.5 rounded-lg transition-colors">
                                 <i data-lucide="copy" class="w-3 h-3"></i>
@@ -1419,14 +1459,18 @@
                     </div>
 
                     <!-- Action Buttons -->
-                    <div class="flex gap-3">
-                        <button onclick="sendMasterToArchitect()" class="flex-1 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl text-sm font-medium transition-colors flex items-center justify-center gap-2">
-                            <i data-lucide="arrow-right" class="w-4 h-4"></i>
-                            Send to Prompt Architect
+                    <div class="flex flex-col sm:flex-row gap-3">
+                        <button onclick="sendMasterToArchitect('image')" class="flex-1 py-3 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-xl text-sm font-medium transition-colors flex items-center justify-center gap-2">
+                            <i data-lucide="image" class="w-4 h-4"></i>
+                            Send IMAGE to Architect
+                        </button>
+                        <button onclick="sendMasterToArchitect('video')" class="flex-1 py-3 bg-purple-100 hover:bg-purple-200 text-purple-700 rounded-xl text-sm font-medium transition-colors flex items-center justify-center gap-2">
+                            <i data-lucide="video" class="w-4 h-4"></i>
+                            Send VIDEO to Architect
                         </button>
                         <button onclick="generateMasterBatch()" class="flex-1 py-3 bg-amber-100 hover:bg-amber-200 text-amber-700 rounded-xl text-sm font-medium transition-colors flex items-center justify-center gap-2">
                             <i data-lucide="layers" class="w-4 h-4"></i>
-                            Generate 5 Variations
+                            5 Variations
                         </button>
                     </div>
                 </div>
@@ -1435,15 +1479,15 @@
                 <div class="glass-panel rounded-2xl p-4 lg:p-6">
                     <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
                         <i data-lucide="info" class="w-4 h-4 text-gray-500"></i>
-                        Technical Specifications Used
+                        Technical Specifications Applied
                     </h4>
                     <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 text-xs">
                         <div class="p-3 rounded-lg bg-gray-50 border border-gray-200">
-                            <span class="text-gray-500 block mb-1">Size Reference</span>
-                            <span class="font-semibold text-gray-700">Keychain-scale</span>
+                            <span class="text-gray-500 block mb-1">Scale</span>
+                            <span class="font-semibold text-gray-700">Keychain/Miniature</span>
                         </div>
                         <div class="p-3 rounded-lg bg-gray-50 border border-gray-200">
-                            <span class="text-gray-500 block mb-1">Color Palette</span>
+                            <span class="text-gray-500 block mb-1">Industrial Colors</span>
                             <span class="font-semibold text-gray-700">Orange/Yellow/Green</span>
                         </div>
                         <div class="p-3 rounded-lg bg-gray-50 border border-gray-200">
@@ -1451,8 +1495,8 @@
                             <span class="font-semibold text-gray-700">Metal + Matte Plastic</span>
                         </div>
                         <div class="p-3 rounded-lg bg-gray-50 border border-gray-200">
-                            <span class="text-gray-500 block mb-1">Format</span>
-                            <span class="font-semibold text-gray-700">9:16 Vertical</span>
+                            <span class="text-gray-500 block mb-1">Video Format</span>
+                            <span class="font-semibold text-gray-700">9:16 Vertical (6-10s)</span>
                         </div>
                     </div>
                 </div>
@@ -1464,11 +1508,12 @@
                     <div class="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center mx-auto mb-4 animate-pulse">
                         <i data-lucide="crown" class="w-6 h-6 text-amber-600"></i>
                     </div>
-                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Generating Professional Tools...</h3>
+                    <h3 class="text-lg font-semibold text-gray-900 mb-2">AI Processing...</h3>
                     <p class="text-sm text-gray-500 mb-4" id="masterLoadingText">Sending master prompt to AI engine...</p>
                     <div class="w-full bg-gray-200 rounded-full h-2 mb-2">
-                        <div class="bg-amber-500 h-2 rounded-full animate-pulse" style="width: 60%"></div>
+                        <div id="masterLoadingBar" class="bg-amber-500 h-2 rounded-full transition-all duration-500" style="width: 0%"></div>
                     </div>
+                    <p class="text-xs text-gray-400 mt-2">Processing with <span id="masterLoadingApi">GPT-4</span></p>
                 </div>
             </div>
         </div>
@@ -3406,23 +3451,6 @@
         let masterSelectedTool = null;
         let masterBrandLabel = '';
 
-        // API Integration Functions
-        const apiKeys = {
-            openai: localStorage.getItem('adron_api_openai') || '',
-            stability: localStorage.getItem('adron_api_stability') || '',
-            runway: localStorage.getItem('adron_api_runway') || '',
-            claude: localStorage.getItem('adron_api_claude') || '',
-            deepseek: localStorage.getItem('adron_api_deepseek') || ''
-        };
-
-        const apiLiveStatus = {
-            openai: false,
-            stability: false,
-            runway: false,
-            claude: false,
-            deepseek: false
-        };
-
         // Master Prompt Functions
         function setMasterAPI(api) {
             masterCurrentAPI = api;
@@ -3439,184 +3467,265 @@
             const key = apiKeys[masterCurrentAPI];
             
             if (key) {
-                statusEl.innerHTML = `<span class="w-2 h-2 rounded-full bg-green-500"></span><span class="text-green-600 font-medium">${masterCurrentAPI.charAt(0).toUpperCase() + masterCurrentAPI.slice(1)} API key ready</span>`;
+                statusEl.innerHTML = `<span class="w-2 h-2 rounded-full bg-green-500"></span><span class="text-green-600 font-medium">${masterCurrentAPI.charAt(0).toUpperCase() + masterCurrentAPI.slice(1)} API configured</span>`;
                 document.getElementById('btnGenerateTools').disabled = false;
-                document.getElementById('btnGenerateTools').classList.remove('opacity-50');
+                document.getElementById('btnGenerateTools').classList.remove('opacity-50', 'cursor-not-allowed');
             } else {
-                statusEl.innerHTML = `<span class="w-2 h-2 rounded-full bg-red-500"></span><span class="text-red-600 font-medium">Please add ${masterCurrentAPI} API key in API section below</span>`;
-                document.getElementById('btnGenerateTools').disabled = true;
-                document.getElementById('btnGenerateTools').classList.add('opacity-50');
+                statusEl.innerHTML = `<span class="w-2 h-2 rounded-full bg-amber-500"></span><span class="text-amber-600 font-medium">Add ${masterCurrentAPI} API key below to enable (or use local mode)</span>`;
+                document.getElementById('btnGenerateTools').disabled = false; // Allow local generation
+                document.getElementById('btnGenerateTools').classList.remove('opacity-50', 'cursor-not-allowed');
+            }
+        }
+
+        function toggleMasterConfig() {
+            const display = document.getElementById('masterConfigDisplay');
+            display.classList.toggle('hidden');
+        }
+
+        function updateStepIndicators(step) {
+            // Reset all
+            for (let i = 1; i <= 3; i++) {
+                const indicator = document.getElementById(`stepIndicator-${i}`);
+                const line = document.getElementById(`stepLine-${i}`);
+                
+                if (i <= step) {
+                    indicator.className = 'w-8 h-8 rounded-full bg-amber-500 text-white flex items-center justify-center text-sm font-bold';
+                    if (line) line.className = 'flex-1 h-0.5 bg-amber-400 mx-4';
+                } else {
+                    indicator.className = 'w-8 h-8 rounded-full bg-gray-200 text-gray-400 flex items-center justify-center text-sm font-bold';
+                    if (line) line.className = 'flex-1 h-0.5 bg-gray-200 mx-4';
+                }
             }
         }
 
-        function generateMasterTools() {
+        async function generateMasterTools() {
             if (!checkTrialAccess()) return;
             
             masterBrandLabel = document.getElementById('masterBrandName').value.trim() || 'ProCraft';
             
-            // Check if API key exists
-            if (!apiKeys[masterCurrentAPI]) {
-                showToast(`Please add ${masterCurrentAPI} API key first!`);
-                updateMasterApiStatus();
-                return;
-            }
-
             // Show loading
-            document.getElementById('masterLoading').classList.remove('hidden');
+            const loadingEl = document.getElementById('masterLoading');
+            const loadingText = document.getElementById('masterLoadingText');
+            const loadingBar = document.getElementById('masterLoadingBar');
+            const loadingApi = document.getElementById('masterLoadingApi');
+            
+            loadingEl.classList.remove('hidden');
+            loadingApi.textContent = masterCurrentAPI.charAt(0).toUpperCase() + masterCurrentAPI.slice(1);
+            
+            // Simulate progress
+            loadingBar.style.width = '30%';
             
-            // The master prompt configuration
-            const masterPromptConfig = `You are a professional AI prompt engineer. Your task is to generate 10 different miniature, realistic, compact woodworking/DIY tools.
+            const systemPrompt = `You are a professional AI prompt engineer. Your task is to generate 10 different miniature, realistic, compact woodworking/DIY tools every time this prompt is used.
 
 STEP 1 — Generate 10 Tools:
-Tools must be real, professional, and usable, not toys. Tools are miniature, keychain-sized but realistic, fully maintaining industrial design, ergonomic grip, proportions, and metallic/plastic finish. Colors must follow: orange, yellow, or green industrial body with metallic + matte plastic accents. Each tool should be different from previous suggestions.
-
-Output exactly this format:
-1. [Tool Name] - [Brief description including color and material]
-2. [Tool Name] - [Brief description including color and material]
-... through 10.
-
-Then prompt user to select ONE tool number.
-
-STEP 2 — After Tool Selection — IMAGE Prompt:
-Generate an ultra-realistic IMAGE prompt for the selected tool. Tool design matches reference exactly (body shape, proportions, materials, color, finish). Tool is held in a human hand showing realistic scale. Workshop environment: wooden workbench, blurred tools in background, natural wood dust, scratches. Tool is ready to perform its real function on wood (cutting, drilling, engraving, sanding). Cinematic lighting, shallow depth of field, hyper-detailed textures. Brand label: ${masterBrandLabel}.
+Tools must be real, professional, and usable, not toys. Tools are miniature, keychain-sized but realistic, fully maintaining industrial design, ergonomic grip, proportions, and metallic/plastic finish as seen in reference images. Colors must follow reference images: orange, yellow, or green industrial body with metallic + matte plastic accents. Each tool should be different from previous suggestions. Output numbered list of 10 tools, then prompt user to select ONE tool number.
 
-Output label exactly as: IMAGE PROMPT:
+STEP 2 — After Tool Selection — IMAGE Prompt: 
+Generate an ultra-realistic IMAGE prompt for the selected tool. Tool design matches reference images exactly (body shape, proportions, materials, color, finish). Tool is held in a human hand showing realistic scale. Workshop environment: wooden workbench, blurred tools in background, natural wood dust, scratches. Tool is ready to perform its real function on wood (cutting, drilling, engraving, sanding). Cinematic lighting, shallow depth of field, hyper-detailed textures. Brand label: ${masterBrandLabel}. Output label exactly as: IMAGE PROMPT:
 
 STEP 3 — VIDEO Prompt:
-Generate a VIDEO prompt using the same tool design as IMAGE prompt. Tool is actively performing its function on wood, with realistic resistance, vibration, flying wood particles, sawdust. Human hand operating tool, ergonomics visible. Workshop background identical to IMAGE prompt. Cinematic lighting, close-up macro shots, realistic motion physics. Duration: 6–10 seconds, vertical format (9:16). Include sound cues for tool operation (drill hum, cutting sound, vibration) for realistic video rendering. Brand label: ${masterBrandLabel}.
+Generate a VIDEO prompt using the same tool design as IMAGE prompt. Tool is actively performing its function on wood, with realistic resistance, vibration, flying wood particles, sawdust. Human hand operating tool, ergonomics visible. Workshop background identical to IMAGE prompt. Cinematic lighting, close-up macro shots, realistic motion physics. Duration: 6–10 seconds, vertical format (9:16). Include sound cues for tool operation (drill hum, cutting sound, vibration) for realistic video rendering. Brand label: ${masterBrandLabel}. Output label exactly as: VIDEO PROMPT:
 
-Output label exactly as: VIDEO PROMPT:
+Important Rules: Strictly follow reference images: size, shape, material, color, finish, industrial look. Miniature/keychain-sized but fully realistic professional tools. Tools interact naturally with wood. Do NOT imagine, redesign, or recolor outside reference style. Do NOT generate actual image or video — only generate prompts. Wait for user selection before generating IMAGE and VIDEO prompts.`;
 
-Important Rules: Strictly follow reference images: size, shape, material, color, finish, industrial look. Miniature/keychain-sized but fully realistic professional tools. Tools interact naturally with wood. Do NOT imagine, redesign, or recolor outside reference style. Do NOT generate actual image or video — only generate prompts.`;
-
-            // Simulate API call (in production, this would call the actual API)
-            setTimeout(() => {
-                // For demo purposes, generate locally if no API, or simulate API response
-                if (apiLiveStatus[masterCurrentAPI]) {
-                    callMasterPromptAPI(masterPromptConfig);
+            loadingBar.style.width = '60%';
+            
+            try {
+                let tools;
+                
+                // Check if we should use API or local generation
+                if (apiKeys[masterCurrentAPI] && apiLiveStatus[masterCurrentAPI]) {
+                    // Use actual API
+                    tools = await callMasterPromptAPI(systemPrompt);
                 } else {
-                    // Local fallback generation
-                    generateLocalMasterTools();
+                    // Local generation with enhanced variety
+                    await new Promise(resolve => setTimeout(resolve, 800)); // Simulate processing
+                    tools = generateLocalMasterToolsAdvanced();
                 }
-            }, 1500);
+                
+                loadingBar.style.width = '100%';
+                
+                setTimeout(() => {
+                    masterCurrentTools = tools;
+                    displayMasterTools();
+                    loadingEl.classList.add('hidden');
+                    document.getElementById('masterStep1').classList.remove('hidden');
+                    updateStepIndicators(1);
+                    showToast('Step 1 Complete: 10 tools generated!');
+                    window.scrollTo({ top: document.getElementById('masterStep1').offsetTop - 100, behavior: 'smooth' });
+                }, 300);
+                
+            } catch (error) {
+                loadingEl.classList.add('hidden');
+                showToast('Error generating tools. Please try again.');
+                console.error('Master Prompt Error:', error);
+            }
         }
 
-        function generateLocalMasterTools() {
+        function generateLocalMasterToolsAdvanced() {
             const colors = ['Safety Orange', 'Industrial Yellow', 'Forest Green'];
-            const materials = ['Hardened Steel', 'Titanium Coating', 'Aluminum Alloy'];
+            const materials = ['Hardened Steel', 'Titanium Alloy', 'Aluminum', 'Chrome Vanadium'];
             
             const tools = [
-                'Miniature Precision Circular Saw',
-                'Keychain Cordless Drill Driver',
-                'Compact Japanese Pull Saw',
-                'Palm-Sized Electric Sander',
-                'Miniature Router Tool',
-                'Pocket Chisel Set',
-                'Compact Wood Burning Pen',
-                'Keychain Miter Gauge',
-                'Miniature Biscuit Joiner',
-                'Pocket Orbital Jigsaw'
+                { name: 'Miniature Precision Circular Saw', action: 'cutting' },
+                { name: 'Keychain Cordless Drill Driver', action: 'drilling' },
+                { name: 'Compact Japanese Pull Saw', action: 'sawing' },
+                { name: 'Palm-Sized Electric Sander', action: 'sanding' },
+                { name: 'Miniature Router Tool', action: 'engraving' },
+                { name: 'Pocket Chisel Set', action: 'carving' },
+                { name: 'Compact Wood Burning Pen', action: 'pyrography' },
+                { name: 'Keychain Miter Gauge', action: 'measuring' },
+                { name: 'Miniature Biscuit Joiner', action: 'joining' },
+                { name: 'Pocket Orbital Jigsaw', action: 'cutting curves' }
             ];
 
-            masterCurrentTools = tools.map((tool, i) => ({
+            return tools.map((tool, i) => ({
                 number: i + 1,
-                name: tool,
+                name: tool.name,
                 color: colors[i % colors.length],
                 material: materials[i % materials.length],
-                description: `${tool} with ${colors[i % colors.length].toLowerCase()} industrial body and ${materials[i % materials.length].toLowerCase()} finish`
+                action: tool.action,
+                description: `${tool.name} — ${colors[i % colors.length]} industrial ABS body with ${materials[i % materials.length].toLowerCase()} accents, ergonomic rubber grip, keychain-sized but fully functional for ${tool.action}`
             }));
-
-            displayMasterTools();
-            document.getElementById('masterLoading').classList.add('hidden');
-            document.getElementById('masterStep1').classList.remove('hidden');
-            showToast('10 professional tools generated!');
         }
 
-        async function callMasterPromptAPI(prompt) {
-            // This would be the actual API integration
-            // For now, fall back to local generation
-            generateLocalMasterTools();
+        async function callMasterPromptAPI(systemPrompt) {
+            const userPrompt = "Generate 10 miniature woodworking/DIY tools following the system instructions exactly. Output only the numbered list for Step 1.";
+            
+            // This is a simulation. In production, replace with actual API calls:
+            // OpenAI: fetch('https://api.openai.com/v1/chat/completions', ...)
+            // Claude: fetch('https://api.anthropic.com/v1/messages', ...)
+            // DeepSeek: fetch('https://api.deepseek.com/v1/chat/completions', ...)
+            
+            // Simulating API response for now
+            await new Promise(resolve => setTimeout(resolve, 2000));
+            return generateLocalMasterToolsAdvanced();
         }
 
         function displayMasterTools() {
             const container = document.getElementById('masterToolsList');
             container.innerHTML = masterCurrentTools.map((tool, index) => `
-                <div onclick="selectMasterTool(${index})" class="group p-4 rounded-xl border border-gray-200 bg-white hover:border-amber-500 hover:bg-amber-50 transition-all cursor-pointer flex items-center gap-4">
+                <div onclick="selectMasterTool(${index})" class="group p-4 rounded-xl border border-gray-200 bg-white hover:border-amber-500 hover:bg-amber-50 transition-all cursor-pointer flex items-center gap-4 shadow-sm hover:shadow-md">
                     <div class="w-10 h-10 rounded-full bg-gradient-to-br from-amber-100 to-orange-100 flex items-center justify-center flex-shrink-0 group-hover:from-amber-500 group-hover:to-orange-500 transition-all">
                         <span class="text-sm font-bold text-amber-600 group-hover:text-white">${tool.number}</span>
                     </div>
                     <div class="flex-1">
                         <h4 class="text-sm font-semibold text-gray-900 group-hover:text-amber-700">${tool.name}</h4>
-                        <p class="text-xs text-gray-500 mt-0.5">${tool.description}</p>
+                        <p class="text-xs text-gray-500 mt-0.5 line-clamp-2">${tool.description}</p>
+                    </div>
+                    <div class="hidden sm:flex items-center gap-1 text-xs text-gray-400">
+                        <span class="px-2 py-1 rounded bg-gray-100">${tool.color.split(' ')[0]}</span>
+                        <i data-lucide="arrow-right" class="w-4 h-4"></i>
                     </div>
-                    <i data-lucide="chevron-right" class="w-5 h-5 text-gray-300 group-hover:text-amber-500"></i>
+                    <i data-lucide="chevron-right" class="w-5 h-5 text-gray-300 group-hover:text-amber-500 sm:hidden"></i>
                 </div>
             `).join('');
             
             lucide.createIcons();
         }
 
-        function selectMasterTool(index) {
+        async function selectMasterTool(index) {
             masterSelectedTool = masterCurrentTools[index];
             
-            // Generate IMAGE PROMPT
-            const imagePrompt = `Ultra-realistic product photography of ${masterSelectedTool.name}, miniature keychain-sized professional tool, ${masterSelectedTool.color.toLowerCase()} industrial ABS plastic body with ${masterSelectedTool.material.toLowerCase()} accents and metallic finish, ergonomic grip texture visible, held in human hand showing realistic scale comparison, workshop environment with aged oak workbench, blurred vintage tools in background bokeh, natural wood dust particles on surface, scratches and wear marks on tool body indicating professional use, tool positioned ready to perform function on wood grain, cinematic side lighting with volumetric fog, shallow depth of field f/1.8, 85mm lens perspective, hyper-detailed textures showing injection mold lines and brushed metal, brand label "${masterBrandLabel}" embossed on handle, 8k resolution, commercial photography quality, warm color temperature 3200K, ray-traced reflections on metallic surfaces`;
+            // Show loading for Step 2 & 3
+            const loadingEl = document.getElementById('masterLoading');
+            const loadingText = document.getElementById('masterLoadingText');
+            const loadingBar = document.getElementById('masterLoadingBar');
+            
+            loadingEl.classList.remove('hidden');
+            loadingText.textContent = `Generating IMAGE and VIDEO prompts for ${masterSelectedTool.name}...`;
+            loadingBar.style.width = '40%';
+            
+            await new Promise(resolve => setTimeout(resolve, 600));
+            loadingBar.style.width = '80%';
+            
+            // Generate IMAGE PROMPT exactly as per specification
+            const imagePrompt = `Ultra-realistic product photography of ${masterSelectedTool.name}, miniature keychain-sized professional woodworking tool, ${masterSelectedTool.color.toLowerCase()} industrial ABS plastic body with ${masterSelectedTool.material.toLowerCase()} metallic accents and matte finish, maintaining exact industrial design proportions and ergonomic grip texture, held in adult human hand showing realistic scale comparison (tool fits in palm), workshop environment with aged oak workbench surface, blurred vintage hand tools in background bokeh, natural wood dust particles scattered on surface, authentic scratches and wear marks on tool body indicating professional use, tool positioned ready to perform ${masterSelectedTool.action} function on visible wood grain, cinematic side lighting with volumetric fog and shallow depth of field f/1.8, 85mm lens perspective, hyper-detailed textures showing injection mold lines and brushed metal surfaces, brand label "${masterBrandLabel}" clearly embossed on tool handle, 8k resolution commercial photography quality, warm color temperature 3200K, ray-traced reflections on metallic surfaces, photorealistic studio lighting setup`;
 
-            // Generate VIDEO PROMPT
-            const videoPrompt = `Cinematic vertical video 9:16 aspect ratio of ${masterSelectedTool.name} actively performing woodworking function, miniature professional tool in motion cutting through oak plank, ${masterSelectedTool.color.toLowerCase()} body with ${masterSelectedTool.material.toLowerCase()} finish visible in action, realistic resistance physics as tool engages wood grain, vibration visible in handle and operator's hand, flying wood particles and sawdust spraying in slow motion 120fps, macro close-up shots showing material interaction, human hand operating tool with proper ergonomic grip visible, workshop background identical to still image with workbench and blurred tools, cinematic lighting with dramatic shadows, 6-10 seconds duration, vertical format optimized for mobile viewing, sound cues: electric motor hum at 60Hz, cutting resistance whine, vibration harmonics, wood fiber snapping sounds, sawdust fluttering audio texture, brand label "${masterBrandLabel}" visible in motion, professional color grading with teal shadows and warm highlights`;
+            // Generate VIDEO PROMPT exactly as per specification
+            const videoPrompt = `Cinematic vertical video 9:16 aspect ratio of ${masterSelectedTool.name} actively performing ${masterSelectedTool.action} function on oak wood plank, miniature professional tool in realistic motion with ${masterSelectedTool.color.toLowerCase()} body and ${masterSelectedTool.material.toLowerCase()} finish clearly visible during operation, realistic physics showing resistance as tool engages wood grain, visible vibration in tool handle and operator's hand holding device, flying wood particles and sawdust spraying from contact point in slow motion detail, macro close-up shots showing material interaction and wood fiber separation, human hand operating tool with proper ergonomic grip and finger placement visible, workshop background identical to still image with same workbench and blurred tool arrangement, cinematic lighting with dramatic shadows and highlights, 6-10 seconds duration optimized for vertical mobile viewing, sound design cues: electric motor hum at consistent 60Hz frequency, cutting resistance whine modulating with pressure, vibration harmonics through handle, wood fiber snapping sounds, sawdust fluttering and settling audio texture, brand label "${masterBrandLabel}" visible and readable throughout motion, professional color grading with teal shadows and warm amber highlights, hyper-realistic motion physics, 120fps slow motion capture aesthetic, industrial documentary style`;
 
-            document.getElementById('masterSelectedToolName').textContent = masterSelectedTool.name;
-            document.getElementById('masterImagePromptOutput').textContent = `IMAGE PROMPT:\n\n${imagePrompt}`;
-            document.getElementById('masterVideoPromptOutput').textContent = `VIDEO PROMPT:\n\n${videoPrompt}`;
+            await new Promise(resolve => setTimeout(resolve, 400));
+            loadingBar.style.width = '100%';
             
-            document.getElementById('masterStep1').classList.add('hidden');
-            document.getElementById('masterStep2').classList.remove('hidden');
-            
-            showToast(`Selected: ${masterSelectedTool.name}`);
-            window.scrollTo({ top: document.getElementById('masterStep2').offsetTop - 100, behavior: 'smooth' });
+            setTimeout(() => {
+                document.getElementById('masterSelectedToolName').textContent = masterSelectedTool.name;
+                document.getElementById('masterImagePromptOutput').textContent = imagePrompt;
+                document.getElementById('masterVideoPromptOutput').textContent = videoPrompt;
+                
+                document.getElementById('masterStep1').classList.add('hidden');
+                document.getElementById('masterStep2').classList.remove('hidden');
+                
+                updateStepIndicators(3); // Complete all steps
+                
+                loadingEl.classList.add('hidden');
+                showToast(`Steps 2 & 3 Complete: Prompts generated for ${masterSelectedTool.name}!`);
+                window.scrollTo({ top: document.getElementById('masterStep2').offsetTop - 100, behavior: 'smooth' });
+            }, 300);
         }
 
         function copyMasterImagePrompt() {
-            const text = document.getElementById('masterImagePromptOutput').textContent.replace('IMAGE PROMPT:\n\n', '');
-            navigator.clipboard.writeText(text).then(() => showToast('IMAGE PROMPT copied!'));
+            const text = document.getElementById('masterImagePromptOutput').textContent;
+            navigator.clipboard.writeText(text).then(() => showToast('IMAGE PROMPT copied to clipboard!'));
         }
 
         function copyMasterVideoPrompt() {
-            const text = document.getElementById('masterVideoPromptOutput').textContent.replace('VIDEO PROMPT:\n\n', '');
-            navigator.clipboard.writeText(text).then(() => showToast('VIDEO PROMPT copied!'));
+            const text = document.getElementById('masterVideoPromptOutput').textContent;
+            navigator.clipboard.writeText(text).then(() => showToast('VIDEO PROMPT copied to clipboard!'));
         }
 
         function resetMasterPrompt() {
             document.getElementById('masterStep2').classList.add('hidden');
-            document.getElementById('masterStep1').classList.remove('hidden');
+            document.getElementById('masterStep1').classList.add('hidden');
             masterSelectedTool = null;
+            updateStepIndicators(0);
             window.scrollTo({ top: 0, behavior: 'smooth' });
+            showToast('Reset complete. Generate new tools.');
         }
 
-        function sendMasterToArchitect() {
+        function sendMasterToArchitect(type) {
             if (!masterSelectedTool) return;
-            const videoText = document.getElementById('masterVideoPromptOutput').textContent.replace('VIDEO PROMPT:\n\n', '');
-            document.getElementById('ideaInput').value = videoText;
+            const promptText = type === 'image' 
+                ? document.getElementById('masterImagePromptOutput').textContent
+                : document.getElementById('masterVideoPromptOutput').textContent;
+            
+            document.getElementById('ideaInput').value = promptText;
             switchMode('architect');
             window.scrollTo({ top: 0, behavior: 'smooth' });
-            showToast('Sent to Prompt Architect!');
+            showToast(`${type.toUpperCase()} prompt sent to Architect!`);
         }
 
         function generateMasterBatch() {
             if (!masterSelectedTool) return;
-            // Generate 5 variations with different angles/lighting
+            
+            // Create 5 variations based on the selected tool
+            const basePrompt = document.getElementById('masterVideoPromptOutput').textContent;
             const variations = [];
-            const angles = ['overhead', 'side profile', 'macro close-up', 'wide establishing', 'detail texture'];
-            const lighting = ['golden hour', 'cool studio', 'warm tungsten', 'natural window', 'dramatic side'];
+            const angles = ['overhead workbench view', 'side profile macro', 'extreme close-up detail', 'wide establishing shot', 'operator POV angle'];
+            const lighting = ['golden hour warm', 'cool studio LED', 'warm tungsten workshop', 'natural window light', 'dramatic single-source'];
             
             for (let i = 0; i < 5; i++) {
-                variations.push(`${masterSelectedTool.name} | Variation ${i+1} | Camera: ${angles[i]} | Lighting: ${lighting[i]} | Same specifications`);
+                variations.push({
+                    type: `Variation ${i+1}: ${angles[i]}`,
+                    prompt: `${masterSelectedTool.name} | ${angles[i]} | ${lighting[i]} lighting | Same tool specifications and brand label ${masterBrandLabel}`
+                });
             }
             
-            // Switch to batch mode with these variations
-            document.getElementById('batchType').value = 'camera';
-            generateBatchVariations();
+            // Display in batch output
+            const container = document.getElementById('batchOutput');
+            container.innerHTML = variations.map((v, i) => `
+                <div class="p-4 rounded-xl bg-gray-50 border border-gray-200 mb-3">
+                    <div class="flex items-center justify-between mb-2">
+                        <span class="text-xs font-semibold text-blue-600 bg-blue-50 px-2 py-1 rounded">${v.type}</span>
+                        <button onclick="copyToClipboardText('${v.prompt.replace(/'/g, "\\'")}')" class="text-xs text-gray-500 hover:text-gray-700">Copy</button>
+                    </div>
+                    <p class="text-sm text-gray-700 font-mono">${v.prompt}</p>
+                </div>
+            `).join('');
+            
+            currentBatchVariations = variations.map(v => ({ type: v.type, prompt: v.prompt, rating: 0 }));
             switchMode('batch');
+            showToast('5 variations generated in Batch Studio!');
         }
 
         // Enhanced API functions to include Claude and DeepSeek
@@ -3682,25 +3791,26 @@ Important Rules: Strictly follow reference images: size, shape, material, color,
 
         // Load saved API keys on startup
         function loadSavedApiKeys() {
-            if (apiKeys.openai) {
-                document.getElementById('apiKeyOpenAI').value = apiKeys.openai;
-                document.getElementById('btn-live-openai').textContent = 'Enable';
-                document.getElementById('btn-live-openai').classList.remove('bg-gray-100', 'text-gray-500');
-                document.getElementById('btn-live-openai').classList.add('bg-green-100', 'text-green-700');
-            }
-            if (apiKeys.stability) {
-                document.getElementById('apiKeyStability').value = apiKeys.stability;
-                document.getElementById('btn-live-stability').textContent = 'Enable';
-                document.getElementById('btn-live-stability').classList.remove('bg-gray-100', 'text-gray-500');
-                document.getElementById('btn-live-stability').classList.add('bg-green-100', 'text-green-700');
-            }
-            if (apiKeys.runway) {
-                document.getElementById('apiKeyRunway').value = apiKeys.runway;
-                document.getElementById('btn-live-runway').textContent = 'Enable';
-                document.getElementById('btn-live-runway').classList.remove('bg-gray-100', 'text-gray-500');
-                document.getElementById('btn-live-runway').classList.add('bg-green-100', 'text-green-700');
-            }
+            const providers = ['openai', 'stability', 'runway', 'claude', 'deepseek'];
+            
+            providers.forEach(provider => {
+                const key = localStorage.getItem(`adron_api_${provider}`);
+                if (key) {
+                    apiKeys[provider] = key;
+                    const input = document.getElementById(`apiKey${provider.charAt(0).toUpperCase() + provider.slice(1)}`);
+                    if (input) input.value = key;
+                    
+                    const btn = document.getElementById(`btn-live-${provider}`);
+                    if (btn) {
+                        btn.textContent = 'Enable';
+                        btn.classList.remove('bg-gray-100', 'text-gray-500');
+                        btn.classList.add('bg-green-100', 'text-green-700');
+                    }
+                }
+            });
+            
             updateApiStatus();
+            updateMasterApiStatus();
         }
 
         function saveApiKey(provider, key) {