From 6b6ba3c62c87315f195d44054dfa779c870e22b8 Mon Sep 17 00:00:00 2001
From: Vito Sansevero <vito.sansevero@gmail.com>
Date: Tue, 3 Jun 2025 17:03:18 -0700
Subject: [PATCH 1/6] feat(prompt_manager): add prepend and append text options

---
 prompt_manager.py |  56 ++++-
 web/admin.html    |  76 ++++++-
 web/metadata.html | 558 ++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 677 insertions(+), 13 deletions(-)
 create mode 100644 web/metadata.html

diff --git a/prompt_manager.py b/prompt_manager.py
index 6fb19a1..f54848c 100644
--- a/prompt_manager.py
+++ b/prompt_manager.py
@@ -92,6 +92,12 @@ class PromptManager(ComfyNodeABC):
                 "search_text": (IO.STRING, {
                     "default": "",
                     "tooltip": "Search for past prompts containing this text"
+                }),
+                "prepend_text": (IO.STRING, {
+                    "tooltip": "Text to prepend to the main prompt (connected STRING nodes will be added before the main text)"
+                }),
+                "append_text": (IO.STRING, {
+                    "tooltip": "Text to append to the main prompt (connected STRING nodes will be added after the main text)"
                 })
             }
         }
@@ -114,7 +120,9 @@ class PromptManager(ComfyNodeABC):
         text: str,
         category: str = "",
         tags: str = "",
-        search_text: str = ""
+        search_text: str = "",
+        prepend_text: str = "",
+        append_text: str = ""
     ) -> Tuple[Any]:
         """
         Encode the text prompt and save it to the database.
@@ -125,6 +133,8 @@ class PromptManager(ComfyNodeABC):
             category: Optional category for organization
             tags: Comma-separated tags
             search_text: Text to search for in past prompts
+            prepend_text: Text to prepend to the main prompt
+            append_text: Text to append to the main prompt
             
         Returns:
             Tuple containing the conditioning for the diffusion model
@@ -132,6 +142,20 @@ class PromptManager(ComfyNodeABC):
         Raises:
             RuntimeError: If clip input is invalid
         """
+        # Combine prepend, main text, and append text
+        final_text = ""
+        if prepend_text and prepend_text.strip():
+            final_text += prepend_text.strip() + " "
+        final_text += text
+        if append_text and append_text.strip():
+            final_text += " " + append_text.strip()
+        
+        # Use the combined text for encoding
+        encoding_text = final_text
+        
+        # For database storage, save the original main text with metadata about prepend/append
+        storage_text = text
+        
         # Search functionality is now handled by the JavaScript UI
         # The search parameters are still available for backend processing if needed
         
@@ -147,23 +171,33 @@ class PromptManager(ComfyNodeABC):
         
         # Save prompt to database and set execution context for gallery tracking
         prompt_id = None
-        if text and text.strip():
-            self.logger.debug(f"Processing prompt text: {text[:100]}...")
+        if storage_text and storage_text.strip():
+            self.logger.debug(f"Processing prompt text: {storage_text[:100]}...")
+            
+            # Add prepend/append info to tags if they exist
+            extended_tags = self._parse_tags(tags) or []
+            if prepend_text and prepend_text.strip():
+                extended_tags.append(f"prepend:{prepend_text.strip()[:50]}")
+            if append_text and append_text.strip():
+                extended_tags.append(f"append:{append_text.strip()[:50]}")
+            
             try:
                 prompt_id = self._save_prompt_to_database(
-                    text=text.strip(),  # Always strip whitespace
+                    text=storage_text.strip(),  # Always strip whitespace
                     category=category.strip() if category else None,
-                    tags=self._parse_tags(tags)
+                    tags=extended_tags if extended_tags else None
                 )
                 
                 # Set current prompt for image tracking
                 if prompt_id:
                     execution_id = self.prompt_tracker.set_current_prompt(
-                        prompt_text=text.strip(),
+                        prompt_text=encoding_text.strip(),  # Use final combined text for tracking
                         additional_data={
                             'category': category.strip() if category else None,
-                            'tags': self._parse_tags(tags),
-                            'prompt_id': prompt_id
+                            'tags': extended_tags,
+                            'prompt_id': prompt_id,
+                            'prepend_text': prepend_text.strip() if prepend_text else None,
+                            'append_text': append_text.strip() if append_text else None
                         }
                     )
                     self.logger.info(f"Set execution context: {execution_id} for prompt ID: {prompt_id}")
@@ -173,9 +207,9 @@ class PromptManager(ComfyNodeABC):
                 self.logger.warning(f"Failed to save prompt to database: {e}")
                 # Already logged above, no need for additional print
         
-        # Perform standard CLIP text encoding
-        self.logger.debug("Performing CLIP text encoding")
-        tokens = clip.tokenize(text)
+        # Perform standard CLIP text encoding using the combined text
+        self.logger.debug(f"Performing CLIP text encoding on combined text: {encoding_text[:100]}...")
+        tokens = clip.tokenize(encoding_text)
         conditioning = clip.encode_from_tokens_scheduled(tokens)
         
         self.logger.debug("CLIP encoding completed successfully")
diff --git a/web/admin.html b/web/admin.html
index 7c22d44..744fef1 100644
--- a/web/admin.html
+++ b/web/admin.html
@@ -2843,7 +2843,9 @@
                     this.updateMetadataPanel(comfyData, imageSrc);
                 } catch (error) {
                     console.error('Error extracting metadata:', error);
-                    this.showMetadataError();
+                    
+                    // Try fallback: get prompt from database using current image
+                    await this.tryFallbackMetadata(imageSrc);
                 }
             }
 
@@ -3129,12 +3131,82 @@
             }
 
             async copyPrompt(type) {
-                if (!this.currentMetadata) return;
+                console.log('copyPrompt called with type:', type);
+                console.log('currentMetadata:', this.currentMetadata);
+                
+                if (!this.currentMetadata) {
+                    console.error('No metadata available for copying');
+                    this.showNotification('❌ No metadata available for copying', 'error');
+                    return;
+                }
                 
                 const text = type === 'positive' ? this.currentMetadata.positivePrompt : this.currentMetadata.negativePrompt;
+                console.log('Copying text:', text?.substring(0, 100));
+                
+                if (!text || text === 'No prompt found' || text === 'No negative prompt found') {
+                    this.showNotification(`❌ No ${type} prompt available`, 'error');
+                    return;
+                }
+                
                 await this.copyToClipboard(text);
             }
 
+            async tryFallbackMetadata(imageSrc) {
+                console.log('Trying fallback metadata extraction for:', imageSrc);
+                
+                try {
+                    // Try to get prompt from current gallery image data
+                    let fallbackPrompt = 'No prompt found';
+                    
+                    if (this.currentGalleryImages && this.currentImageIndex !== null && this.currentGalleryImages[this.currentImageIndex]) {
+                        const currentImage = this.currentGalleryImages[this.currentImageIndex];
+                        console.log('Current image data:', currentImage);
+                        
+                        // If we have prompt_id, try to get the prompt from our local prompts array
+                        if (currentImage.prompt_id && this.prompts) {
+                            const prompt = this.prompts.find(p => p.id === currentImage.prompt_id);
+                            if (prompt) {
+                                fallbackPrompt = prompt.text;
+                                console.log('Found prompt from database:', fallbackPrompt.substring(0, 100));
+                            }
+                        }
+                    }
+                    
+                    // Set fallback metadata
+                    this.currentMetadata = {
+                        positivePrompt: fallbackPrompt,
+                        negativePrompt: 'No negative prompt found',
+                        checkpoint: 'Unknown',
+                        steps: 'Unknown',
+                        cfgScale: 'Unknown',
+                        sampler: 'Unknown',
+                        seed: 'Unknown',
+                        workflow: null,
+                        prompt: null
+                    };
+                    
+                    // Update metadata panel with fallback data
+                    this.updateMetadataPanel({}, imageSrc);
+                    
+                } catch (error) {
+                    console.error('Fallback metadata extraction failed:', error);
+                    this.showMetadataError();
+                    
+                    // Set empty metadata as last resort
+                    this.currentMetadata = {
+                        positivePrompt: 'No prompt found',
+                        negativePrompt: 'No negative prompt found',
+                        checkpoint: 'Unknown',
+                        steps: 'Unknown',
+                        cfgScale: 'Unknown',
+                        sampler: 'Unknown',
+                        seed: 'Unknown',
+                        workflow: null,
+                        prompt: null
+                    };
+                }
+            }
+
             async copyAllMetadata() {
                 if (!this.currentMetadata) return;
                 
diff --git a/web/metadata.html b/web/metadata.html
new file mode 100644
index 0000000..c8479b0
--- /dev/null
+++ b/web/metadata.html
@@ -0,0 +1,558 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Gallery - Generation Data</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        /* Ensure the layout takes full height and prevents overflow */
+        html, body {
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+        
+        /* Ensure image container uses flexbox properly */
+        #image-area {
+            min-height: 0; /* Allow flex child to shrink */
+        }
+        
+        /* Make sure the image scales properly */
+        #main-image {
+            max-width: calc(100% - 2rem); /* Account for padding */
+            max-height: calc(100% - 2rem); /* Account for padding */
+        }
+    </style>
+    <script>
+        let currentWorkflowData = null;
+
+        function openInFileExplorer(path) {
+            // For Windows file explorer
+            if (navigator.platform.indexOf('Win') > -1) {
+                // This will work in Electron apps or desktop environments
+                try {
+                    window.require('child_process').exec(`explorer /select,"${path}"`);
+                } catch (e) {
+                    // Fallback: copy path to clipboard and show alert
+                    navigator.clipboard.writeText(path).then(() => {
+                        alert('File path copied to clipboard: ' + path);
+                    }).catch(() => {
+                        alert('File path: ' + path);
+                    });
+                }
+            } else {
+                // For other platforms, just copy to clipboard
+                navigator.clipboard.writeText(path).then(() => {
+                    alert('File path copied to clipboard: ' + path);
+                }).catch(() => {
+                    alert('File path: ' + path);
+                });
+            }
+        }
+
+        async function copyToClipboard(text, button) {
+            try {
+                await navigator.clipboard.writeText(text);
+                // Show temporary feedback
+                const originalContent = button.innerHTML;
+                button.innerHTML = '✓ Copied!';
+                button.classList.add('text-green-400');
+                setTimeout(() => {
+                    button.innerHTML = originalContent;
+                    button.classList.remove('text-green-400');
+                }, 1000);
+            } catch (err) {
+                alert('Copy failed: ' + err);
+            }
+        }
+
+        function copyPositivePrompt(event) {
+            if (currentWorkflowData && currentWorkflowData.positivePrompt) {
+                copyToClipboard(currentWorkflowData.positivePrompt, event.target.closest('button'));
+            }
+        }
+
+        function copyNegativePrompt(event) {
+            if (currentWorkflowData && currentWorkflowData.negativePrompt) {
+                copyToClipboard(currentWorkflowData.negativePrompt, event.target.closest('button'));
+            }
+        }
+
+        function downloadWorkflowJSON() {
+            if (currentWorkflowData && currentWorkflowData.workflow) {
+                const dataStr = JSON.stringify(currentWorkflowData.workflow, null, 2);
+                const dataBlob = new Blob([dataStr], {type: 'application/json'});
+                const url = URL.createObjectURL(dataBlob);
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = 'comfyui_workflow.json';
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                URL.revokeObjectURL(url);
+            }
+        }
+
+        async function copyAllData() {
+            if (!currentWorkflowData) return;
+            
+            const allData = `Checkpoint: ${currentWorkflowData.checkpoint || 'Unknown'}
+Positive Prompt: ${currentWorkflowData.positivePrompt}
+Negative Prompt: ${currentWorkflowData.negativePrompt}
+Steps: ${currentWorkflowData.steps || 'Unknown'}
+CFG Scale: ${currentWorkflowData.cfgScale || 'Unknown'}
+Sampler: ${currentWorkflowData.sampler || 'Unknown'}
+Seed: ${currentWorkflowData.seed || 'Unknown'}`;
+            
+            await copyToClipboard(allData);
+        }
+
+        async function parsePNGMetadata(arrayBuffer) {
+            const dataView = new DataView(arrayBuffer);
+            let offset = 8; // Skip PNG signature
+            const metadata = {};
+
+            while (offset < arrayBuffer.byteLength - 8) {
+                const length = dataView.getUint32(offset);
+                const type = new TextDecoder().decode(arrayBuffer.slice(offset + 4, offset + 8));
+                
+                if (type === 'tEXt' || type === 'iTXt' || type === 'zTXt') {
+                    const chunkData = arrayBuffer.slice(offset + 8, offset + 8 + length);
+                    let text;
+                    
+                    if (type === 'tEXt') {
+                        text = new TextDecoder().decode(chunkData);
+                    } else if (type === 'iTXt') {
+                        // iTXt format: keyword\0compression\0language\0translated_keyword\0text
+                        const textData = new TextDecoder().decode(chunkData);
+                        const parts = textData.split('\0');
+                        if (parts.length >= 5) {
+                            metadata[parts[0]] = parts[4];
+                        }
+                        text = textData;
+                    } else if (type === 'zTXt') {
+                        // zTXt is compressed - basic parsing (might need proper decompression)
+                        text = new TextDecoder().decode(chunkData);
+                    }
+                    
+                    // Parse the text chunk for key-value pairs
+                    const nullIndex = text.indexOf('\0');
+                    if (nullIndex !== -1) {
+                        const key = text.substring(0, nullIndex);
+                        const value = text.substring(nullIndex + 1);
+                        metadata[key] = value;
+                    }
+                }
+                
+                offset += 8 + length + 4; // Move to next chunk (8 = length + type, 4 = CRC)
+            }
+
+            return metadata;
+        }
+
+        function extractComfyUIData(metadata) {
+            // Look for ComfyUI workflow data in various possible fields
+            let workflowData = null;
+            let promptData = null;
+
+            // Common ComfyUI metadata field names
+            const workflowFields = ['workflow', 'Workflow', 'comfy', 'ComfyUI'];
+            const promptFields = ['prompt', 'Prompt', 'parameters', 'Parameters'];
+
+            for (const field of workflowFields) {
+                if (metadata[field]) {
+                    try {
+                        workflowData = JSON.parse(metadata[field]);
+                        break;
+                    } catch (e) {
+                        console.log('Failed to parse workflow field:', field);
+                    }
+                }
+            }
+
+            for (const field of promptFields) {
+                if (metadata[field]) {
+                    try {
+                        promptData = JSON.parse(metadata[field]);
+                        break;
+                    } catch (e) {
+                        console.log('Failed to parse prompt field:', field);
+                    }
+                }
+            }
+
+            return { workflow: workflowData, prompt: promptData };
+        }
+
+        function updateDataPanel(comfyData, filename) {
+            const dataPanel = document.getElementById('data-panel-content');
+            if (!dataPanel) return;
+
+            // Extract information from ComfyUI workflow
+            let checkpoint = 'Unknown';
+            let positivePrompt = 'No prompt found';
+            let negativePrompt = 'No negative prompt found';
+            let steps = 'Unknown';
+            let cfgScale = 'Unknown';
+            let sampler = 'Unknown';
+            let seed = 'Unknown';
+
+            // Parse prompt data first (more reliable for actual generation parameters)
+            if (comfyData.prompt) {
+                console.log('Parsing prompt data...');
+                const promptNodes = comfyData.prompt;
+                
+                for (const nodeId in promptNodes) {
+                    const node = promptNodes[nodeId];
+                    console.log(`Node ${nodeId}:`, node.class_type, node);
+                    
+                    // Checkpoint
+                    if (node.class_type === 'CheckpointLoaderSimple' && node.inputs) {
+                        checkpoint = node.inputs.ckpt_name || checkpoint;
+                    }
+                    
+                    // Prompts - need to identify which is positive vs negative
+                    if (node.class_type === 'PromptManager' && node.inputs && node.inputs.text) {
+                        // PromptManager typically contains the positive prompt
+                        positivePrompt = node.inputs.text;
+                        console.log('Found PromptManager with text:', positivePrompt.substring(0, 100));
+                    }
+                    
+                    if (node.class_type === 'CLIPTextEncode' && node.inputs && node.inputs.text) {
+                        // Check if this looks like a negative prompt
+                        const text = node.inputs.text.toLowerCase();
+                        if (text.includes('bad anatomy') || text.includes('unfinished') || 
+                            text.includes('censored') || text.includes('weird anatomy') ||
+                            text.includes('negative') || text.includes('embedding:')) {
+                            negativePrompt = node.inputs.text;
+                            console.log('Found negative prompt:', negativePrompt.substring(0, 100));
+                        } else if (positivePrompt === 'No prompt found') {
+                            // If we haven't found a positive prompt yet, this might be it
+                            positivePrompt = node.inputs.text;
+                            console.log('Found potential positive prompt:', positivePrompt.substring(0, 100));
+                        }
+                    }
+                    
+                    // Sampling parameters
+                    if (node.class_type === 'KSampler' && node.inputs) {
+                        seed = node.inputs.seed || seed;
+                        steps = node.inputs.steps || steps;
+                        cfgScale = node.inputs.cfg || cfgScale;
+                        sampler = node.inputs.sampler_name || sampler;
+                    }
+                }
+            }
+
+            // Fallback to workflow parsing if prompt parsing didn't work well
+            if (comfyData.workflow && (positivePrompt === 'No prompt found' || checkpoint === 'Unknown')) {
+                console.log('Falling back to workflow parsing...');
+                const nodes = comfyData.workflow.nodes || [];
+                
+                // Look for checkpoint loader
+                const checkpointNode = nodes.find(node => 
+                    node.type === 'CheckpointLoaderSimple' || 
+                    node.type === 'CheckpointLoader'
+                );
+                if (checkpointNode && checkpointNode.widgets_values) {
+                    checkpoint = checkpointNode.widgets_values[0] || checkpoint;
+                }
+
+                // Look for prompts in workflow nodes
+                const textEncodeNodes = nodes.filter(node => node.type === 'CLIPTextEncode');
+                const promptManagerNodes = nodes.filter(node => node.type === 'PromptManager');
+                
+                // Check PromptManager first for positive prompt
+                if (promptManagerNodes.length > 0 && promptManagerNodes[0].widgets_values) {
+                    positivePrompt = promptManagerNodes[0].widgets_values[0] || positivePrompt;
+                }
+                
+                // For negative prompt, look for CLIPTextEncode that isn't the positive
+                for (const node of textEncodeNodes) {
+                    if (node.widgets_values && node.widgets_values[0]) {
+                        const text = node.widgets_values[0].toLowerCase();
+                        if (text.includes('bad anatomy') || text.includes('unfinished') || 
+                            text.includes('censored') || text.includes('weird anatomy')) {
+                            negativePrompt = node.widgets_values[0];
+                            break;
+                        }
+                    }
+                }
+
+                // Look for sampler
+                const samplerNode = nodes.find(node => 
+                    node.type === 'KSampler' || 
+                    node.type === 'KSamplerAdvanced'
+                );
+                if (samplerNode && samplerNode.widgets_values) {
+                    seed = samplerNode.widgets_values[0] || seed;
+                    steps = samplerNode.widgets_values[1] || steps;
+                    cfgScale = samplerNode.widgets_values[2] || cfgScale;
+                    sampler = samplerNode.widgets_values[3] || sampler;
+                }
+            }
+
+            // Update the HTML
+            dataPanel.innerHTML = `
+                <!-- File Path -->
+                <div>
+                    <h2 class="text-sm font-medium text-gray-300 mb-2">File Path</h2>
+                    <div class="text-sm text-blue-400 hover:text-blue-300 cursor-pointer bg-gray-800 p-2 rounded break-all" onclick="openInFileExplorer('${filename}')">
+                        ${filename}
+                    </div>
+                </div>
+
+                <!-- Resources used -->
+                <div>
+                    <h2 class="text-sm font-medium text-gray-300 mb-2">Resources used</h2>
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <div class="text-blue-400 hover:text-blue-300 cursor-pointer">${checkpoint}</div>
+                            <div class="text-xs text-gray-500">ComfyUI Generated</div>
+                        </div>
+                        <span class="px-2 py-1 text-xs bg-gray-700 text-gray-300 rounded">CHECKPOINT</span>
+                    </div>
+                </div>
+
+                <!-- Prompt -->
+                <div>
+                    <div class="flex items-center gap-2 mb-2">
+                        <h2 class="text-sm font-medium text-gray-300">Prompt</h2>
+                        <span class="px-2 py-1 text-xs bg-orange-600 text-orange-100 rounded">COMFYUI</span>
+                        <button class="ml-auto text-gray-400 hover:text-gray-300" onclick="copyPositivePrompt(event)">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="text-sm text-gray-300 bg-gray-800 p-3 rounded max-h-32 overflow-y-auto">
+                        ${positivePrompt.substring(0, 200)}${positivePrompt.length > 200 ? '...' : ''}
+                    </div>
+                    ${positivePrompt.length > 200 ? '<button class="text-blue-400 hover:text-blue-300 text-sm mt-1" onclick="showFullPrompt(\'positive\')">Show more</button>' : ''}
+                </div>
+
+                <!-- Negative prompt -->
+                <div>
+                    <div class="flex items-center justify-between mb-2">
+                        <h2 class="text-sm font-medium text-gray-300">Negative prompt</h2>
+                        <button class="text-gray-400 hover:text-gray-300" onclick="copyNegativePrompt(event)">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="text-sm text-gray-300 bg-gray-800 p-3 rounded max-h-32 overflow-y-auto">
+                        ${negativePrompt.substring(0, 200)}${negativePrompt.length > 200 ? '...' : ''}
+                    </div>
+                    ${negativePrompt.length > 200 ? '<button class="text-blue-400 hover:text-blue-300 text-sm mt-1" onclick="showFullPrompt(\'negative\')">Show more</button>' : ''}
+                </div>
+
+                <!-- Other metadata -->
+                <div>
+                    <h2 class="text-sm font-medium text-gray-300 mb-3">Other metadata</h2>
+                    <div class="flex flex-wrap gap-2">
+                        <span class="px-2 py-1 text-xs bg-gray-700 text-gray-300 rounded">CFG SCALE: ${cfgScale}</span>
+                        <span class="px-2 py-1 text-xs bg-gray-700 text-gray-300 rounded">STEPS: ${steps}</span>
+                        <span class="px-2 py-1 text-xs bg-gray-700 text-gray-300 rounded">SAMPLER: ${sampler}</span>
+                    </div>
+                    <div class="mt-2">
+                        <span class="px-2 py-1 text-xs bg-gray-700 text-gray-300 rounded">SEED: ${seed}</span>
+                    </div>
+                </div>
+
+                <!-- Raw Workflow Data -->
+                <div>
+                    <h2 class="text-sm font-medium text-gray-300 mb-2">ComfyUI Workflow</h2>
+                    <div class="flex items-center gap-2">
+                        <button class="text-blue-400 hover:text-blue-300 text-sm" onclick="showWorkflowData()">View Raw Workflow JSON</button>
+                        <button class="text-blue-400 hover:text-blue-300" onclick="downloadWorkflowJSON()" title="Download JSON">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            `;
+
+            // Store the full data for later use
+            currentWorkflowData = {
+                positivePrompt,
+                negativePrompt,
+                checkpoint,
+                steps,
+                cfgScale,
+                sampler,
+                seed,
+                workflow: comfyData.workflow,
+                prompt: comfyData.prompt
+            };
+        }
+
+        function showFullPrompt(type) {
+            if (currentWorkflowData) {
+                const prompt = type === 'positive' ? currentWorkflowData.positivePrompt : currentWorkflowData.negativePrompt;
+                const newWindow = window.open('', '_blank');
+                newWindow.document.write(`
+                    <html>
+                        <head><title>${type.charAt(0).toUpperCase() + type.slice(1)} Prompt</title></head>
+                        <body style="background: #111; color: #fff; font-family: monospace; padding: 20px;">
+                            <h2>${type.charAt(0).toUpperCase() + type.slice(1)} Prompt</h2>
+                            <div style="background: #222; padding: 15px; border-radius: 5px; white-space: pre-wrap; line-height: 1.5;">${prompt}</div>
+                            <button onclick="navigator.clipboard.writeText(\`${prompt.replace(/`/g, '\\`')}\`).then(() => alert('Copied!'))" style="margin-top: 20px; padding: 10px 20px; background: #444; color: #fff; border: none; border-radius: 5px; cursor: pointer;">Copy to Clipboard</button>
+                        </body>
+                    </html>
+                `);
+            }
+        }
+
+        function showWorkflowData() {
+            if (currentWorkflowData && currentWorkflowData.workflow) {
+                const newWindow = window.open('', '_blank');
+                newWindow.document.write(`
+                    <html>
+                        <head><title>ComfyUI Workflow Data</title></head>
+                        <body style="background: #111; color: #fff; font-family: monospace; padding: 20px;">
+                            <h2>ComfyUI Workflow JSON</h2>
+                            <pre style="background: #222; padding: 15px; border-radius: 5px; overflow: auto;">${JSON.stringify(currentWorkflowData.workflow, null, 2)}</pre>
+                        </body>
+                    </html>
+                `);
+            }
+        }
+
+        async function handleImageUpload(event) {
+            const file = event.target.files[0];
+            if (!file) return;
+
+            try {
+                const arrayBuffer = await file.arrayBuffer();
+                const metadata = await parsePNGMetadata(arrayBuffer);
+                const comfyData = extractComfyUIData(metadata);
+                
+                // Update the image display
+                const img = document.getElementById('main-image');
+                const url = URL.createObjectURL(file);
+                img.src = url;
+                
+                // Update data panel
+                updateDataPanel(comfyData, file.name);
+                
+                console.log('Extracted metadata:', metadata);
+                console.log('ComfyUI data:', comfyData);
+                
+            } catch (error) {
+                console.error('Error processing image:', error);
+                alert('Error processing image: ' + error.message);
+            }
+        }
+
+        // Initialize drag and drop
+        function initializeDragDrop() {
+            const imageArea = document.getElementById('image-area');
+            
+            imageArea.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                imageArea.classList.add('bg-gray-900');
+            });
+            
+            imageArea.addEventListener('dragleave', (e) => {
+                e.preventDefault();
+                imageArea.classList.remove('bg-gray-900');
+            });
+            
+            imageArea.addEventListener('drop', (e) => {
+                e.preventDefault();
+                imageArea.classList.remove('bg-gray-900');
+                
+                const files = e.dataTransfer.files;
+                if (files.length > 0) {
+                    const file = files[0];
+                    if (file.type === 'image/png') {
+                        const event = { target: { files: [file] } };
+                        handleImageUpload(event);
+                    } else {
+                        alert('Please drop a PNG file');
+                    }
+                }
+            });
+        }
+
+        // Initialize when page loads
+        window.addEventListener('load', initializeDragDrop);
+        
+        // Handle window resize to ensure image stays properly sized
+        window.addEventListener('resize', () => {
+            // The CSS will handle the responsive sizing automatically
+            // but we can trigger any additional adjustments if needed
+        });
+    </script>
+</head>
+<body class="bg-black text-gray-100 font-sans overflow-hidden">
+    <div class="h-screen flex">
+        <!-- Main Image Area -->
+        <div id="image-area" class="flex-1 flex items-center justify-center p-4 bg-black relative border-2 border-dashed border-transparent transition-colors min-w-0">
+            <!-- Upload prompt overlay -->
+            <div class="absolute inset-0 flex flex-col items-center justify-center text-gray-500 pointer-events-none">
+                <svg class="w-16 h-16 mb-4 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
+                </svg>
+                <p class="text-lg mb-2">Drag & Drop PNG with ComfyUI Workflow</p>
+                <p class="text-sm">Or click to browse files</p>
+            </div>
+            
+            <!-- File input -->
+            <input type="file" id="file-input" accept=".png" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" onchange="handleImageUpload(event)">
+            
+            <!-- Navigation arrows -->
+            <button class="absolute left-4 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-gray-800 bg-opacity-50 hover:bg-opacity-75 rounded-full flex items-center justify-center text-white transition-all z-10">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+                </svg>
+            </button>
+            
+            <!-- Main Image -->
+            <div class="w-full h-full flex items-center justify-center z-10 pointer-events-none">
+                <img id="main-image" 
+                     src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='1200' viewBox='0 0 800 1200'%3E%3Crect width='800' height='1200' fill='%23374151'/%3E%3Ctext x='400' y='600' font-family='Arial' font-size='24' fill='%23D1D5DB' text-anchor='middle'%3EDrop PNG Here%3C/text%3E%3Ctext x='400' y='640' font-family='Arial' font-size='16' fill='%239CA3AF' text-anchor='middle'%3EComfyUI Workflow%3C/text%3E%3C/svg%3E" 
+                     alt="Generated Image" 
+                     class="max-w-full max-h-full object-contain rounded shadow-2xl">
+            </div>
+            
+            <button class="absolute right-4 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-gray-800 bg-opacity-50 hover:bg-opacity-75 rounded-full flex items-center justify-center text-white transition-all z-10">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                </svg>
+            </button>
+        </div>
+
+        <!-- Generation Data Panel -->
+        <div class="w-96 bg-gray-900 border-l border-gray-700 flex flex-col">
+            <!-- Header -->
+            <div class="flex items-center justify-between p-4 border-b border-gray-700">
+                <div class="flex items-center gap-2">
+                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                    </svg>
+                    <h1 class="text-lg font-medium text-white">Generation data</h1>
+                </div>
+                <button class="text-xs text-blue-400 hover:text-blue-300 transition-colors" onclick="copyAllData()">
+                    📋 COPY ALL
+                </button>
+            </div>
+
+            <!-- Scrollable Content -->
+            <div id="data-panel-content" class="flex-1 overflow-y-auto p-4 space-y-6">
+                <!-- Initial placeholder content -->
+                <div class="text-center text-gray-500 py-8">
+                    <svg class="w-16 h-16 mx-auto mb-4 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                    </svg>
+                    <p class="text-lg mb-2">No Image Loaded</p>
+                    <p class="text-sm">Upload a PNG with embedded ComfyUI workflow to view generation data</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file

From 389d739303bf9d7454cdf8c51ae7b326bba38fd1 Mon Sep 17 00:00:00 2001
From: Vito Sansevero <vito.sansevero@gmail.com>
Date: Tue, 3 Jun 2025 17:03:29 -0700
Subject: [PATCH 2/6] refactor(admin): improve notification z-index handling

---
 web/admin.html | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/web/admin.html b/web/admin.html
index 744fef1..69c76b8 100644
--- a/web/admin.html
+++ b/web/admin.html
@@ -1256,7 +1256,13 @@
 
             showNotification(message, type = "info") {
                 const notification = document.createElement("div");
-                notification.className = `fixed top-4 right-4 px-6 py-4 rounded-lg shadow-lg z-50 transition-all duration-300 transform translate-x-full`;
+                
+                // Check if image viewer is open and use higher z-index
+                const imageViewerModal = document.getElementById('imageViewerModal');
+                const isImageViewerOpen = imageViewerModal && !imageViewerModal.classList.contains('hidden');
+                const zIndex = isImageViewerOpen ? 'z-[10000]' : 'z-50';
+                
+                notification.className = `fixed top-4 right-4 px-6 py-4 rounded-lg shadow-lg ${zIndex} transition-all duration-300 transform translate-x-full`;
                 
                 const colors = {
                     success: "bg-green-600 text-white",
@@ -1273,7 +1279,11 @@
                 setTimeout(() => notification.classList.remove("translate-x-full"), 100);
                 setTimeout(() => {
                     notification.classList.add("translate-x-full");
-                    setTimeout(() => document.body.removeChild(notification), 300);
+                    setTimeout(() => {
+                        if (notification.parentNode) {
+                            document.body.removeChild(notification);
+                        }
+                    }, 300);
                 }, 3000);
             }
 
@@ -3131,17 +3141,12 @@
             }
 
             async copyPrompt(type) {
-                console.log('copyPrompt called with type:', type);
-                console.log('currentMetadata:', this.currentMetadata);
-                
                 if (!this.currentMetadata) {
-                    console.error('No metadata available for copying');
                     this.showNotification('❌ No metadata available for copying', 'error');
                     return;
                 }
                 
                 const text = type === 'positive' ? this.currentMetadata.positivePrompt : this.currentMetadata.negativePrompt;
-                console.log('Copying text:', text?.substring(0, 100));
                 
                 if (!text || text === 'No prompt found' || text === 'No negative prompt found') {
                     this.showNotification(`❌ No ${type} prompt available`, 'error');

From e13d4f028487d07b7947d13574ac415d21fb7fbb Mon Sep 17 00:00:00 2001
From: Vito Sansevero <vito.sansevero@gmail.com>
Date: Tue, 3 Jun 2025 17:05:53 -0700
Subject: [PATCH 3/6] refactor(api): update html path in PromptManagerAPI

---
 py/api.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/py/api.py b/py/api.py
index 63d6204..4b96101 100644
--- a/py/api.py
+++ b/py/api.py
@@ -131,7 +131,7 @@ class PromptManagerAPI:
                 current_dir = os.path.dirname(
                     os.path.dirname(os.path.abspath(__file__))
                 )
-                html_path = os.path.join(current_dir, "gallery.html")
+                html_path = os.path.join(current_dir, "web", "metadata.html")
 
                 if os.path.exists(html_path):
                     with open(html_path, "r", encoding="utf-8") as f:

From 704f5e0d4c9040091d55d86eb22005947b8064da Mon Sep 17 00:00:00 2001
From: Vito Sansevero <vito.sansevero@gmail.com>
Date: Tue, 3 Jun 2025 17:06:11 -0700
Subject: [PATCH 4/6] chore: remove gallery.html file

---
 gallery.html | 558 ---------------------------------------------------
 1 file changed, 558 deletions(-)
 delete mode 100644 gallery.html

diff --git a/gallery.html b/gallery.html
deleted file mode 100644
index c8479b0..0000000
--- a/gallery.html
+++ /dev/null
@@ -1,558 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Image Gallery - Generation Data</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <style>
-        /* Ensure the layout takes full height and prevents overflow */
-        html, body {
-            height: 100%;
-            margin: 0;
-            padding: 0;
-            overflow: hidden;
-        }
-        
-        /* Ensure image container uses flexbox properly */
-        #image-area {
-            min-height: 0; /* Allow flex child to shrink */
-        }
-        
-        /* Make sure the image scales properly */
-        #main-image {
-            max-width: calc(100% - 2rem); /* Account for padding */
-            max-height: calc(100% - 2rem); /* Account for padding */
-        }
-    </style>
-    <script>
-        let currentWorkflowData = null;
-
-        function openInFileExplorer(path) {
-            // For Windows file explorer
-            if (navigator.platform.indexOf('Win') > -1) {
-                // This will work in Electron apps or desktop environments
-                try {
-                    window.require('child_process').exec(`explorer /select,"${path}"`);
-                } catch (e) {
-                    // Fallback: copy path to clipboard and show alert
-                    navigator.clipboard.writeText(path).then(() => {
-                        alert('File path copied to clipboard: ' + path);
-                    }).catch(() => {
-                        alert('File path: ' + path);
-                    });
-                }
-            } else {
-                // For other platforms, just copy to clipboard
-                navigator.clipboard.writeText(path).then(() => {
-                    alert('File path copied to clipboard: ' + path);
-                }).catch(() => {
-                    alert('File path: ' + path);
-                });
-            }
-        }
-
-        async function copyToClipboard(text, button) {
-            try {
-                await navigator.clipboard.writeText(text);
-                // Show temporary feedback
-                const originalContent = button.innerHTML;
-                button.innerHTML = '✓ Copied!';
-                button.classList.add('text-green-400');
-                setTimeout(() => {
-                    button.innerHTML = originalContent;
-                    button.classList.remove('text-green-400');
-                }, 1000);
-            } catch (err) {
-                alert('Copy failed: ' + err);
-            }
-        }
-
-        function copyPositivePrompt(event) {
-            if (currentWorkflowData && currentWorkflowData.positivePrompt) {
-                copyToClipboard(currentWorkflowData.positivePrompt, event.target.closest('button'));
-            }
-        }
-
-        function copyNegativePrompt(event) {
-            if (currentWorkflowData && currentWorkflowData.negativePrompt) {
-                copyToClipboard(currentWorkflowData.negativePrompt, event.target.closest('button'));
-            }
-        }
-
-        function downloadWorkflowJSON() {
-            if (currentWorkflowData && currentWorkflowData.workflow) {
-                const dataStr = JSON.stringify(currentWorkflowData.workflow, null, 2);
-                const dataBlob = new Blob([dataStr], {type: 'application/json'});
-                const url = URL.createObjectURL(dataBlob);
-                const link = document.createElement('a');
-                link.href = url;
-                link.download = 'comfyui_workflow.json';
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
-                URL.revokeObjectURL(url);
-            }
-        }
-
-        async function copyAllData() {
-            if (!currentWorkflowData) return;
-            
-            const allData = `Checkpoint: ${currentWorkflowData.checkpoint || 'Unknown'}
-Positive Prompt: ${currentWorkflowData.positivePrompt}
-Negative Prompt: ${currentWorkflowData.negativePrompt}
-Steps: ${currentWorkflowData.steps || 'Unknown'}
-CFG Scale: ${currentWorkflowData.cfgScale || 'Unknown'}
-Sampler: ${currentWorkflowData.sampler || 'Unknown'}
-Seed: ${currentWorkflowData.seed || 'Unknown'}`;
-            
-            await copyToClipboard(allData);
-        }
-
-        async function parsePNGMetadata(arrayBuffer) {
-            const dataView = new DataView(arrayBuffer);
-            let offset = 8; // Skip PNG signature
-            const metadata = {};
-
-            while (offset < arrayBuffer.byteLength - 8) {
-                const length = dataView.getUint32(offset);
-                const type = new TextDecoder().decode(arrayBuffer.slice(offset + 4, offset + 8));
-                
-                if (type === 'tEXt' || type === 'iTXt' || type === 'zTXt') {
-                    const chunkData = arrayBuffer.slice(offset + 8, offset + 8 + length);
-                    let text;
-                    
-                    if (type === 'tEXt') {
-                        text = new TextDecoder().decode(chunkData);
-                    } else if (type === 'iTXt') {
-                        // iTXt format: keyword\0compression\0language\0translated_keyword\0text
-                        const textData = new TextDecoder().decode(chunkData);
-                        const parts = textData.split('\0');
-                        if (parts.length >= 5) {
-                            metadata[parts[0]] = parts[4];
-                        }
-                        text = textData;
-                    } else if (type === 'zTXt') {
-                        // zTXt is compressed - basic parsing (might need proper decompression)
-                        text = new TextDecoder().decode(chunkData);
-                    }
-                    
-                    // Parse the text chunk for key-value pairs
-                    const nullIndex = text.indexOf('\0');
-                    if (nullIndex !== -1) {
-                        const key = text.substring(0, nullIndex);
-                        const value = text.substring(nullIndex + 1);
-                        metadata[key] = value;
-                    }
-                }
-                
-                offset += 8 + length + 4; // Move to next chunk (8 = length + type, 4 = CRC)
-            }
-
-            return metadata;
-        }
-
-        function extractComfyUIData(metadata) {
-            // Look for ComfyUI workflow data in various possible fields
-            let workflowData = null;
-            let promptData = null;
-
-            // Common ComfyUI metadata field names
-            const workflowFields = ['workflow', 'Workflow', 'comfy', 'ComfyUI'];
-            const promptFields = ['prompt', 'Prompt', 'parameters', 'Parameters'];
-
-            for (const field of workflowFields) {
-                if (metadata[field]) {
-                    try {
-                        workflowData = JSON.parse(metadata[field]);
-                        break;
-                    } catch (e) {
-                        console.log('Failed to parse workflow field:', field);
-                    }
-                }
-            }
-
-            for (const field of promptFields) {
-                if (metadata[field]) {
-                    try {
-                        promptData = JSON.parse(metadata[field]);
-                        break;
-                    } catch (e) {
-                        console.log('Failed to parse prompt field:', field);
-                    }
-                }
-            }
-
-            return { workflow: workflowData, prompt: promptData };
-        }
-
-        function updateDataPanel(comfyData, filename) {
-            const dataPanel = document.getElementById('data-panel-content');
-            if (!dataPanel) return;
-
-            // Extract information from ComfyUI workflow
-            let checkpoint = 'Unknown';
-            let positivePrompt = 'No prompt found';
-            let negativePrompt = 'No negative prompt found';
-            let steps = 'Unknown';
-            let cfgScale = 'Unknown';
-            let sampler = 'Unknown';
-            let seed = 'Unknown';
-
-            // Parse prompt data first (more reliable for actual generation parameters)
-            if (comfyData.prompt) {
-                console.log('Parsing prompt data...');
-                const promptNodes = comfyData.prompt;
-                
-                for (const nodeId in promptNodes) {
-                    const node = promptNodes[nodeId];
-                    console.log(`Node ${nodeId}:`, node.class_type, node);
-                    
-                    // Checkpoint
-                    if (node.class_type === 'CheckpointLoaderSimple' && node.inputs) {
-                        checkpoint = node.inputs.ckpt_name || checkpoint;
-                    }
-                    
-                    // Prompts - need to identify which is positive vs negative
-                    if (node.class_type === 'PromptManager' && node.inputs && node.inputs.text) {
-                        // PromptManager typically contains the positive prompt
-                        positivePrompt = node.inputs.text;
-                        console.log('Found PromptManager with text:', positivePrompt.substring(0, 100));
-                    }
-                    
-                    if (node.class_type === 'CLIPTextEncode' && node.inputs && node.inputs.text) {
-                        // Check if this looks like a negative prompt
-                        const text = node.inputs.text.toLowerCase();
-                        if (text.includes('bad anatomy') || text.includes('unfinished') || 
-                            text.includes('censored') || text.includes('weird anatomy') ||
-                            text.includes('negative') || text.includes('embedding:')) {
-                            negativePrompt = node.inputs.text;
-                            console.log('Found negative prompt:', negativePrompt.substring(0, 100));
-                        } else if (positivePrompt === 'No prompt found') {
-                            // If we haven't found a positive prompt yet, this might be it
-                            positivePrompt = node.inputs.text;
-                            console.log('Found potential positive prompt:', positivePrompt.substring(0, 100));
-                        }
-                    }
-                    
-                    // Sampling parameters
-                    if (node.class_type === 'KSampler' && node.inputs) {
-                        seed = node.inputs.seed || seed;
-                        steps = node.inputs.steps || steps;
-                        cfgScale = node.inputs.cfg || cfgScale;
-                        sampler = node.inputs.sampler_name || sampler;
-                    }
-                }
-            }
-
-            // Fallback to workflow parsing if prompt parsing didn't work well
-            if (comfyData.workflow && (positivePrompt === 'No prompt found' || checkpoint === 'Unknown')) {
-                console.log('Falling back to workflow parsing...');
-                const nodes = comfyData.workflow.nodes || [];
-                
-                // Look for checkpoint loader
-                const checkpointNode = nodes.find(node => 
-                    node.type === 'CheckpointLoaderSimple' || 
-                    node.type === 'CheckpointLoader'
-                );
-                if (checkpointNode && checkpointNode.widgets_values) {
-                    checkpoint = checkpointNode.widgets_values[0] || checkpoint;
-                }
-
-                // Look for prompts in workflow nodes
-                const textEncodeNodes = nodes.filter(node => node.type === 'CLIPTextEncode');
-                const promptManagerNodes = nodes.filter(node => node.type === 'PromptManager');
-                
-                // Check PromptManager first for positive prompt
-                if (promptManagerNodes.length > 0 && promptManagerNodes[0].widgets_values) {
-                    positivePrompt = promptManagerNodes[0].widgets_values[0] || positivePrompt;
-                }
-                
-                // For negative prompt, look for CLIPTextEncode that isn't the positive
-                for (const node of textEncodeNodes) {
-                    if (node.widgets_values && node.widgets_values[0]) {
-                        const text = node.widgets_values[0].toLowerCase();
-                        if (text.includes('bad anatomy') || text.includes('unfinished') || 
-                            text.includes('censored') || text.includes('weird anatomy')) {
-                            negativePrompt = node.widgets_values[0];
-                            break;
-                        }
-                    }
-                }
-
-                // Look for sampler
-                const samplerNode = nodes.find(node => 
-                    node.type === 'KSampler' || 
-                    node.type === 'KSamplerAdvanced'
-                );
-                if (samplerNode && samplerNode.widgets_values) {
-                    seed = samplerNode.widgets_values[0] || seed;
-                    steps = samplerNode.widgets_values[1] || steps;
-                    cfgScale = samplerNode.widgets_values[2] || cfgScale;
-                    sampler = samplerNode.widgets_values[3] || sampler;
-                }
-            }
-
-            // Update the HTML
-            dataPanel.innerHTML = `
-                <!-- File Path -->
-                <div>
-                    <h2 class="text-sm font-medium text-gray-300 mb-2">File Path</h2>
-                    <div class="text-sm text-blue-400 hover:text-blue-300 cursor-pointer bg-gray-800 p-2 rounded break-all" onclick="openInFileExplorer('${filename}')">
-                        ${filename}
-                    </div>
-                </div>
-
-                <!-- Resources used -->
-                <div>
-                    <h2 class="text-sm font-medium text-gray-300 mb-2">Resources used</h2>
-                    <div class="flex items-center justify-between">
-                        <div>
-                            <div class="text-blue-400 hover:text-blue-300 cursor-pointer">${checkpoint}</div>
-                            <div class="text-xs text-gray-500">ComfyUI Generated</div>
-                        </div>
-                        <span class="px-2 py-1 text-xs bg-gray-700 text-gray-300 rounded">CHECKPOINT</span>
-                    </div>
-                </div>
-
-                <!-- Prompt -->
-                <div>
-                    <div class="flex items-center gap-2 mb-2">
-                        <h2 class="text-sm font-medium text-gray-300">Prompt</h2>
-                        <span class="px-2 py-1 text-xs bg-orange-600 text-orange-100 rounded">COMFYUI</span>
-                        <button class="ml-auto text-gray-400 hover:text-gray-300" onclick="copyPositivePrompt(event)">
-                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="text-sm text-gray-300 bg-gray-800 p-3 rounded max-h-32 overflow-y-auto">
-                        ${positivePrompt.substring(0, 200)}${positivePrompt.length > 200 ? '...' : ''}
-                    </div>
-                    ${positivePrompt.length > 200 ? '<button class="text-blue-400 hover:text-blue-300 text-sm mt-1" onclick="showFullPrompt(\'positive\')">Show more</button>' : ''}
-                </div>
-
-                <!-- Negative prompt -->
-                <div>
-                    <div class="flex items-center justify-between mb-2">
-                        <h2 class="text-sm font-medium text-gray-300">Negative prompt</h2>
-                        <button class="text-gray-400 hover:text-gray-300" onclick="copyNegativePrompt(event)">
-                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="text-sm text-gray-300 bg-gray-800 p-3 rounded max-h-32 overflow-y-auto">
-                        ${negativePrompt.substring(0, 200)}${negativePrompt.length > 200 ? '...' : ''}
-                    </div>
-                    ${negativePrompt.length > 200 ? '<button class="text-blue-400 hover:text-blue-300 text-sm mt-1" onclick="showFullPrompt(\'negative\')">Show more</button>' : ''}
-                </div>
-
-                <!-- Other metadata -->
-                <div>
-                    <h2 class="text-sm font-medium text-gray-300 mb-3">Other metadata</h2>
-                    <div class="flex flex-wrap gap-2">
-                        <span class="px-2 py-1 text-xs bg-gray-700 text-gray-300 rounded">CFG SCALE: ${cfgScale}</span>
-                        <span class="px-2 py-1 text-xs bg-gray-700 text-gray-300 rounded">STEPS: ${steps}</span>
-                        <span class="px-2 py-1 text-xs bg-gray-700 text-gray-300 rounded">SAMPLER: ${sampler}</span>
-                    </div>
-                    <div class="mt-2">
-                        <span class="px-2 py-1 text-xs bg-gray-700 text-gray-300 rounded">SEED: ${seed}</span>
-                    </div>
-                </div>
-
-                <!-- Raw Workflow Data -->
-                <div>
-                    <h2 class="text-sm font-medium text-gray-300 mb-2">ComfyUI Workflow</h2>
-                    <div class="flex items-center gap-2">
-                        <button class="text-blue-400 hover:text-blue-300 text-sm" onclick="showWorkflowData()">View Raw Workflow JSON</button>
-                        <button class="text-blue-400 hover:text-blue-300" onclick="downloadWorkflowJSON()" title="Download JSON">
-                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-            `;
-
-            // Store the full data for later use
-            currentWorkflowData = {
-                positivePrompt,
-                negativePrompt,
-                checkpoint,
-                steps,
-                cfgScale,
-                sampler,
-                seed,
-                workflow: comfyData.workflow,
-                prompt: comfyData.prompt
-            };
-        }
-
-        function showFullPrompt(type) {
-            if (currentWorkflowData) {
-                const prompt = type === 'positive' ? currentWorkflowData.positivePrompt : currentWorkflowData.negativePrompt;
-                const newWindow = window.open('', '_blank');
-                newWindow.document.write(`
-                    <html>
-                        <head><title>${type.charAt(0).toUpperCase() + type.slice(1)} Prompt</title></head>
-                        <body style="background: #111; color: #fff; font-family: monospace; padding: 20px;">
-                            <h2>${type.charAt(0).toUpperCase() + type.slice(1)} Prompt</h2>
-                            <div style="background: #222; padding: 15px; border-radius: 5px; white-space: pre-wrap; line-height: 1.5;">${prompt}</div>
-                            <button onclick="navigator.clipboard.writeText(\`${prompt.replace(/`/g, '\\`')}\`).then(() => alert('Copied!'))" style="margin-top: 20px; padding: 10px 20px; background: #444; color: #fff; border: none; border-radius: 5px; cursor: pointer;">Copy to Clipboard</button>
-                        </body>
-                    </html>
-                `);
-            }
-        }
-
-        function showWorkflowData() {
-            if (currentWorkflowData && currentWorkflowData.workflow) {
-                const newWindow = window.open('', '_blank');
-                newWindow.document.write(`
-                    <html>
-                        <head><title>ComfyUI Workflow Data</title></head>
-                        <body style="background: #111; color: #fff; font-family: monospace; padding: 20px;">
-                            <h2>ComfyUI Workflow JSON</h2>
-                            <pre style="background: #222; padding: 15px; border-radius: 5px; overflow: auto;">${JSON.stringify(currentWorkflowData.workflow, null, 2)}</pre>
-                        </body>
-                    </html>
-                `);
-            }
-        }
-
-        async function handleImageUpload(event) {
-            const file = event.target.files[0];
-            if (!file) return;
-
-            try {
-                const arrayBuffer = await file.arrayBuffer();
-                const metadata = await parsePNGMetadata(arrayBuffer);
-                const comfyData = extractComfyUIData(metadata);
-                
-                // Update the image display
-                const img = document.getElementById('main-image');
-                const url = URL.createObjectURL(file);
-                img.src = url;
-                
-                // Update data panel
-                updateDataPanel(comfyData, file.name);
-                
-                console.log('Extracted metadata:', metadata);
-                console.log('ComfyUI data:', comfyData);
-                
-            } catch (error) {
-                console.error('Error processing image:', error);
-                alert('Error processing image: ' + error.message);
-            }
-        }
-
-        // Initialize drag and drop
-        function initializeDragDrop() {
-            const imageArea = document.getElementById('image-area');
-            
-            imageArea.addEventListener('dragover', (e) => {
-                e.preventDefault();
-                imageArea.classList.add('bg-gray-900');
-            });
-            
-            imageArea.addEventListener('dragleave', (e) => {
-                e.preventDefault();
-                imageArea.classList.remove('bg-gray-900');
-            });
-            
-            imageArea.addEventListener('drop', (e) => {
-                e.preventDefault();
-                imageArea.classList.remove('bg-gray-900');
-                
-                const files = e.dataTransfer.files;
-                if (files.length > 0) {
-                    const file = files[0];
-                    if (file.type === 'image/png') {
-                        const event = { target: { files: [file] } };
-                        handleImageUpload(event);
-                    } else {
-                        alert('Please drop a PNG file');
-                    }
-                }
-            });
-        }
-
-        // Initialize when page loads
-        window.addEventListener('load', initializeDragDrop);
-        
-        // Handle window resize to ensure image stays properly sized
-        window.addEventListener('resize', () => {
-            // The CSS will handle the responsive sizing automatically
-            // but we can trigger any additional adjustments if needed
-        });
-    </script>
-</head>
-<body class="bg-black text-gray-100 font-sans overflow-hidden">
-    <div class="h-screen flex">
-        <!-- Main Image Area -->
-        <div id="image-area" class="flex-1 flex items-center justify-center p-4 bg-black relative border-2 border-dashed border-transparent transition-colors min-w-0">
-            <!-- Upload prompt overlay -->
-            <div class="absolute inset-0 flex flex-col items-center justify-center text-gray-500 pointer-events-none">
-                <svg class="w-16 h-16 mb-4 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
-                </svg>
-                <p class="text-lg mb-2">Drag & Drop PNG with ComfyUI Workflow</p>
-                <p class="text-sm">Or click to browse files</p>
-            </div>
-            
-            <!-- File input -->
-            <input type="file" id="file-input" accept=".png" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" onchange="handleImageUpload(event)">
-            
-            <!-- Navigation arrows -->
-            <button class="absolute left-4 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-gray-800 bg-opacity-50 hover:bg-opacity-75 rounded-full flex items-center justify-center text-white transition-all z-10">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-                </svg>
-            </button>
-            
-            <!-- Main Image -->
-            <div class="w-full h-full flex items-center justify-center z-10 pointer-events-none">
-                <img id="main-image" 
-                     src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='1200' viewBox='0 0 800 1200'%3E%3Crect width='800' height='1200' fill='%23374151'/%3E%3Ctext x='400' y='600' font-family='Arial' font-size='24' fill='%23D1D5DB' text-anchor='middle'%3EDrop PNG Here%3C/text%3E%3Ctext x='400' y='640' font-family='Arial' font-size='16' fill='%239CA3AF' text-anchor='middle'%3EComfyUI Workflow%3C/text%3E%3C/svg%3E" 
-                     alt="Generated Image" 
-                     class="max-w-full max-h-full object-contain rounded shadow-2xl">
-            </div>
-            
-            <button class="absolute right-4 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-gray-800 bg-opacity-50 hover:bg-opacity-75 rounded-full flex items-center justify-center text-white transition-all z-10">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-                </svg>
-            </button>
-        </div>
-
-        <!-- Generation Data Panel -->
-        <div class="w-96 bg-gray-900 border-l border-gray-700 flex flex-col">
-            <!-- Header -->
-            <div class="flex items-center justify-between p-4 border-b border-gray-700">
-                <div class="flex items-center gap-2">
-                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
-                    </svg>
-                    <h1 class="text-lg font-medium text-white">Generation data</h1>
-                </div>
-                <button class="text-xs text-blue-400 hover:text-blue-300 transition-colors" onclick="copyAllData()">
-                    📋 COPY ALL
-                </button>
-            </div>
-
-            <!-- Scrollable Content -->
-            <div id="data-panel-content" class="flex-1 overflow-y-auto p-4 space-y-6">
-                <!-- Initial placeholder content -->
-                <div class="text-center text-gray-500 py-8">
-                    <svg class="w-16 h-16 mx-auto mb-4 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
-                    </svg>
-                    <p class="text-lg mb-2">No Image Loaded</p>
-                    <p class="text-sm">Upload a PNG with embedded ComfyUI workflow to view generation data</p>
-                </div>
-            </div>
-        </div>
-    </div>
-</body>
-</html>
\ No newline at end of file

From 102390c95a9ae22c6965049dd72620cd630f9b64 Mon Sep 17 00:00:00 2001
From: Vito Sansevero <vito.sansevero@gmail.com>
Date: Tue, 3 Jun 2025 17:06:27 -0700
Subject: [PATCH 5/6] docs: Update metadata viewer path in README.md

---
 README.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index ac55b13..22fd403 100644
--- a/README.md
+++ b/README.md
@@ -53,13 +53,13 @@ ComfyUI Prompt Manager functions as a drop-in replacement for ComfyUI's standard
 - **Generation Parameters**: Recover steps, CFG scale, sampler, seed, and model information
 - **Multi-Node Support**: Handles PromptManager, CLIPTextEncode, and other node types
 - **Copy & Export**: One-click copying of prompts and workflow JSON download
-- **Standalone Viewer**: Dedicated metadata analysis tool at `/prompt_manager/gallery.html`
+- **Standalone Viewer**: Dedicated metadata analysis tool at `/prompt_manager/metadata.html`
 - **Drag & Drop Interface**: Easy analysis by dropping PNG files directly into the viewer
 - **Error Handling**: Robust parsing with NaN value cleaning and malformed JSON recovery
 
 ### 📋 Standalone Metadata Viewer
 
-- **Independent Tool**: Access at `http://localhost:8188/prompt_manager/gallery.html`
+- **Independent Tool**: Access at `http://localhost:8188/prompt_manager/metadata.html`
 - **Real-time Analysis**: Instant PNG metadata extraction and display
 - **Comprehensive Display**: Shows all discoverable ComfyUI workflow information
 - **Export Capabilities**: Download workflow JSON files for reuse
@@ -131,7 +131,7 @@ ComfyUI Prompt Manager functions as a drop-in replacement for ComfyUI's standard
 
 5. **Access the web interface**:
    - **Admin Dashboard**: `http://localhost:8188/prompt_manager/admin` - Full management interface
-   - **Metadata Viewer**: `http://localhost:8188/prompt_manager/gallery.html` - Standalone PNG analysis tool
+   - **Metadata Viewer**: `http://localhost:8188/prompt_manager/metadata.html` - Standalone PNG analysis tool
    - **Simple Interface**: `http://localhost:8188/prompt_manager/` - Basic prompt browser
 
 ### Prerequisites
@@ -182,7 +182,7 @@ The image gallery automatically captures and links generated images:
 
 Use the standalone metadata viewer to analyze any ComfyUI-generated PNG:
 
-1. **Open the metadata viewer** at `http://localhost:8188/prompt_manager/gallery.html`
+1. **Open the metadata viewer** at `http://localhost:8188/prompt_manager/metadata.html`
 2. **Drag and drop** any PNG file with ComfyUI workflow data
 3. **View extracted information**:
    - **Prompts**: Copy positive/negative prompts with one click
@@ -334,7 +334,7 @@ CREATE TABLE generated_images (
 - **`web/admin.html`** - Advanced admin dashboard with metadata panel
 - **`web/index.html`** - Simple web interface
 - **`web/prompt_manager.js`** - JavaScript functionality
-- **`gallery.html`** - Standalone PNG metadata viewer
+- **`web/metadata.html`** - Standalone PNG metadata viewer
 
 ### File Structure
 
@@ -362,8 +362,8 @@ ComfyUI_PromptManager/
 ├── web/
 │   ├── admin.html               # Advanced admin dashboard
 │   ├── index.html               # Simple web interface
+│   ├── metadata.html            # Standalone metadata viewer
 │   └── prompt_manager.js        # JavaScript functionality
-├── gallery.html                # Standalone metadata viewer
 ├── tests/
 │   ├── __init__.py
 │   └── test_basic.py            # Test suite
@@ -554,7 +554,7 @@ MIT License - see LICENSE file for details.
 ### v3.0.0 (Metadata Analysis Release)
 
 - **🔬 PNG Metadata Analysis**: Advanced ComfyUI workflow extraction from PNG images
-- **📋 Standalone Metadata Viewer**: Dedicated tool at `/gallery.html` for analyzing any ComfyUI image
+- **📋 Standalone Metadata Viewer**: Dedicated tool at `/web/metadata.html` for analyzing any ComfyUI image
 - **🖼️ Integrated Metadata Panel**: Real-time workflow analysis in the image viewer
 - **📸 Bulk Image Scanning**: Mass import and analysis of existing ComfyUI output directories
 - **🛠️ System Management Suite**: Complete backup, restore, maintenance, and diagnostic tools

From 4505e62261bbbba5b081808e928df17ec89a7264 Mon Sep 17 00:00:00 2001
From: Vito Sansevero <vito.sansevero@gmail.com>
Date: Tue, 3 Jun 2025 17:07:08 -0700
Subject: [PATCH 6/6] chore: bump version to 3.0.1 in pyproject.toml

---
 pyproject.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pyproject.toml b/pyproject.toml
index 843fd5b..5770aea 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,7 +1,7 @@
 [project]
 name = "promptmanager"
 description = "A powerful ComfyUI custom node that extends the standard text encoder with persistent prompt storage, advanced search capabilities, and an automatic image gallery system using SQLite."
-version = "3.0.0"
+version = "3.0.1"
 license = {file = "LICENSE"}
 dependencies = ["# Core dependencies for PromptManager", "# Note: Most dependencies are already included with ComfyUI", "# Already included with Python standard library:", "# - sqlite3", "# - hashlib", "# - json", "# - datetime", "# - os", "# - typing", "# - threading", "# - uuid", "# Required for gallery functionality:", "watchdog>=2.1.0              # For file system monitoring", "Pillow>=8.0.0                # For image metadata extraction (usually included with ComfyUI)", "# Optional dependencies for enhanced search functionality:", "# fuzzywuzzy[speedup]>=0.18.0  # For fuzzy string matching (optional)", "# sqlalchemy>=1.4.0            # For advanced ORM features (optional)", "# Development dependencies (optional):", "# pytest>=6.0.0                # For running tests", "# black>=22.0.0                # For code formatting", "# flake8>=4.0.0                # For linting", "# mypy>=0.910                   # For type checking"]