image: Refac B/F. #2

assets/plugins/imageGenerator.js

@@ -22,8 +22,7 @@
     isConnecting = true;
     var protocol = window.location.protocol === 'https:' 
       ? 'wss:' : 'ws:';
-    var wsUrl = protocol + '//' + 
-      window.location.host;
+    var wsUrl = protocol + '//' + window.location.host;
     
     ws = new WebSocket(wsUrl);
     
@@ -76,36 +75,35 @@
   var handleWebSocketMessage = function(data) {
     if (!data || !data.type) return;
     
-    switch(data.type) {
-      case 'progressUpdate':
-        updateProgressUI(data.progress);
-        break;
-        
-      case 'generationStarted':
-        showGeneratingUI();
-        break;
-        
-      case 'generationComplete':
-        handleGenerationComplete(data.images);
-        break;
-        
-      case 'generationError':
-        handleGenerationError(data.error);
-        break;
-        
-      case 'generationCancelled':
-        handleGenerationCancelled();
-        break;
-        
-      case 'imageDeleted':
-        handleImageDeleted(data.images);
-        break;
+    var handlers = {
+      'progressUpdate': function() { 
+        updateProgressUI(data.progress); 
+      },
+      'generationStarted': showGeneratingUI,
+      'generationComplete': function() { 
+        handleGenerationComplete(data.images); 
+      },
+      'generationError': function() { 
+        handleGenerationError(data.error); 
+      },
+      'generationCancelled': handleGenerationCancelled,
+      'imageDeleted': function() { 
+        handleImageDeleted(data.images); 
+      }
+    };
+    
+    if (handlers[data.type]) {
+      handlers[data.type]();
     }
   };
   
   var updateProgressUI = function(progress) {
-    var progressFill = document.querySelector('.progress-fill');
-    var progressText = document.querySelector('.progress-text');
+    var progressFill = document.querySelector(
+      '.progress-fill'
+    );
+    var progressText = document.querySelector(
+      '.progress-text'
+    );
     
     if (progressFill) {
       progressFill.style.width = progress + '%';
@@ -117,46 +115,51 @@
     }
   };
   
+  var toggleFormInputs = function(disabled) {
+    var form = document.getElementById('generateForm');
+    var inputs = form ? form.querySelectorAll(
+      'input, select, textarea'
+    ) : [];
+    
+    Array.prototype.forEach.call(inputs, function(input) {
+      input.disabled = disabled;
+    });
+  };
+  
   var showGeneratingUI = function() {
     var outputSection = document.querySelector(
       '.image-output-section'
     );
-    var form = document.getElementById('generateForm');
-    var inputs = form ? 
-      form.querySelectorAll('input, select, textarea') : [];
     
-    Array.prototype.forEach.call(inputs, function(input) {
-      input.disabled = true;
-    });
+    toggleFormInputs(true);
     
     if (outputSection) {
       outputSection.classList.remove('has-images');
-      outputSection.innerHTML = 
-        '<div class="loading-container">' +
-        '<div class="loading-spinner" ' +
-        'style="margin: 0 auto 20px;"></div>' +
-        '<p class="loading-text">Generating your image...</p>' +
-        '<div class="progress-bar">' +
-        '<div class="progress-fill" style="width: 0%;"></div>' +
-        '</div>' +
-        '<p class="progress-text">0% Complete</p>' +
-        '</div>';
+      outputSection.innerHTML = [
+        '<div class="loading-container">',
+        '<div class="loading-spinner" ',
+        'style="margin: 0 auto 20px;"></div>',
+        '<p class="loading-text">',
+        'Generating your image...</p>',
+        '<div class="progress-bar">',
+        '<div class="progress-fill" ',
+        'style="width: 0%;"></div>',
+        '</div>',
+        '<p class="progress-text">0% Complete</p>',
+        '</div>'
+      ].join('');
     }
     
     updateButtonsForGeneration(true);
   };
   
   var hideGeneratingUI = function() {
-    var form = document.getElementById('generateForm');
-    var inputs = form ? 
-      form.querySelectorAll('input, select, textarea') : [];
-    
-    Array.prototype.forEach.call(inputs, function(input) {
-      input.disabled = false;
-    });
-    
+    toggleFormInputs(false);
     updateButtonsForGeneration(false);
-    window.validateInputs && window.validateInputs();
+    
+    if (window.validateInputs) {
+      window.validateInputs();
+    }
   };
   
   var resetToInitialState = function() {
@@ -177,20 +180,59 @@
     if (!outputSection) return;
     
     outputSection.classList.remove('has-images');
-    outputSection.innerHTML = 
-      '<svg class="placeholder-icon" width="80" height="80" ' +
-      'viewBox="0 0 24 24" fill="none">' +
-      '<path d="M21 3H3C2 3 1 4 1 5V19C1 20 2 21 3 21H21C22 ' +
-      '21 23 20 23 19V5C23 4 22 3 21 3ZM21 19H3V5H21V19Z" ' +
-      'fill="currentColor"/>' +
-      '<path d="M4.5 16.5L9 12L11.5 14.5L16 10L19.5 13.5" ' +
-      'stroke="currentColor" stroke-width="1.5" ' +
-      'stroke-linecap="round"/>' +
-      '<circle cx="8" cy="8.5" r="1.5" fill="currentColor"/>' +
-      '</svg>' +
-      '<p class="placeholder-text">' +
-      'No images generated yet. Start creating amazing visuals!' +
-      '</p>';
+    outputSection.innerHTML = [
+      '<svg class="placeholder-icon" ',
+      'width="80" height="80" ',
+      'viewBox="0 0 24 24" fill="none">',
+      '<path d="M21 3H3C2 3 1 4 1 5V19C1 20 2 21 ',
+      '3 21H21C22 21 23 20 23 19V5C23 4 22 3 21 3Z',
+      'M21 19H3V5H21V19Z" fill="currentColor"/>',
+      '<path d="M4.5 16.5L9 12L11.5 14.5L16 10L',
+      '19.5 13.5" stroke="currentColor" ',
+      'stroke-width="1.5" stroke-linecap="round"/>',
+      '<circle cx="8" cy="8.5" r="1.5" ',
+      'fill="currentColor"/>',
+      '</svg>',
+      '<p class="placeholder-text">',
+      'No images generated yet. ',
+      'Start creating amazing visuals!',
+      '</p>'
+    ].join('');
+  };
+  
+  var createButton = function(type, isGenerating) {
+    var icons = {
+      stop: '<rect x="4" y="4" width="16" height="16" ' +
+            'rx="3" fill="currentColor"/>',
+      play: '<path d="M3 20V4L22 12L3 20ZM5 17L16.85 ' +
+            '12L5 7V10.5L11 12L5 13.5V17Z" ' +
+            'fill="currentColor"/>'
+    };
+    
+    if (isGenerating) {
+      return [
+        '<button type="button" ',
+        'onclick="cancelGeneration()" ',
+        'class="btn btn-danger">',
+        '<svg class="button-icon" viewBox="0 0 24 24" ',
+        'fill="none">',
+        icons.stop,
+        '</svg>',
+        'Stop Generation',
+        '</button>'
+      ].join('');
+    }
+    
+    return [
+      '<button type="submit" id="submitBtn" disabled ',
+      'class="btn btn-primary">',
+      '<svg class="button-icon" viewBox="0 0 24 24" ',
+      'fill="none">',
+      icons.play,
+      '</svg>',
+      'Generate Image',
+      '</button>'
+    ].join('');
   };
   
   var updateButtonsForGeneration = function(isGenerating) {
@@ -200,29 +242,10 @@
     
     if (!buttonsContainer) return;
     
-    if (isGenerating) {
-      buttonsContainer.innerHTML = 
-        '<button type="button" onclick="cancelGeneration()" ' +
-        'class="btn btn-danger">' +
-        '<svg class="button-icon" viewBox="0 0 24 24" ' +
-        'fill="none">' +
-        '<rect x="4" y="4" width="16" height="16" rx="3" ' +
-        'fill="currentColor"/>' +
-        '</svg>' +
-        'Stop Generation' +
-        '</button>';
-    } else {
-      buttonsContainer.innerHTML = 
-        '<button type="submit" id="submitBtn" disabled ' +
-        'class="btn btn-primary">' +
-        '<svg class="button-icon" viewBox="0 0 24 24" ' +
-        'fill="none">' +
-        '<path d="M3 20V4L22 12L3 20ZM5 17L16.85 12L5 7V10.5' +
-        'L11 12L5 13.5V17Z" fill="currentColor"/>' +
-        '</svg>' +
-        'Generate Image' +
-        '</button>';
-    }
+    buttonsContainer.innerHTML = createButton(
+      isGenerating ? 'stop' : 'play', 
+      isGenerating
+    );
   };
   
   var handleGenerationComplete = function(images) {
@@ -245,6 +268,66 @@
     displayImages(currentImages);
   };
   
+  var createImageCard = function(image, index) {
+    var downloadIcon = [
+      '<path d="M12 16L7 11L8.4 9.55L11 12.15V4H13',
+      'V12.15L15.6 9.55L17 11L12 16Z" ',
+      'fill="currentColor"/>',
+      '<path d="M4 20C3.45 20 2.98 19.8 2.59 19.41',
+      'C2.2 19.02 2 18.55 2 18V15H4V18H20V15H22V18',
+      'C22 18.55 21.8 19.02 21.41 19.41C21.02 19.8 ',
+      '20.55 20 20 20H4Z" fill="currentColor"/>'
+    ].join('');
+    
+    var deleteIcon = [
+      '<path d="M18.3 5.71C17.91 5.32 17.28 5.32 ',
+      '16.89 5.71L12 10.59L7.11 5.7C6.72 5.31 6.09 ',
+      '5.31 5.7 5.7C5.31 6.09 5.31 6.72 5.7 7.11',
+      'L10.59 12L5.7 16.89C5.31 17.28 5.31 17.91 ',
+      '5.7 18.3C6.09 18.69 6.72 18.69 7.11 18.3L12 ',
+      '13.41L16.89 18.3C17.28 18.69 17.91 18.69 ',
+      '18.3 18.3C18.69 17.91 18.69 17.28 18.3 ',
+      '16.89L13.41 12L18.3 7.11C18.68 6.73 18.68 ',
+      '6.09 18.3 5.71Z" fill="currentColor"/>'
+    ].join('');
+    
+    return [
+      '<div class="image-card">',
+      '<img src="data:image/png;base64,',
+      image.base64,
+      '" alt="', image.prompt, '">',
+      '<div class="image-actions">',
+      '<a href="data:image/png;base64,',
+      image.base64,
+      '" download="generated-', image.id, '.png" ',
+      'class="action-btn">',
+      '<svg class="action-icon" viewBox="0 0 24 24" ',
+      'fill="none">',
+      downloadIcon,
+      '</svg>',
+      '</a>',
+      '<button type="button" onclick="deleteImage(',
+      index,
+      ')" class="action-btn">',
+      '<svg class="action-icon" viewBox="0 0 24 24" ',
+      'fill="none">',
+      deleteIcon,
+      '</svg>',
+      '</button>',
+      '</div>',
+      '<div class="image-info">',
+      '<p class="image-prompt">', image.prompt, '</p>',
+      '<p class="image-meta">',
+      '<span class="image-model">',
+      image.model.toUpperCase(),
+      '</span> | ',
+      image.size,
+      '</p>',
+      '</div>',
+      '</div>'
+    ].join('');
+  };
+  
   var displayImages = function(images) {
     var outputSection = document.querySelector(
       '.image-output-section'
@@ -256,73 +339,38 @@
       showPlaceholder();
     } else {
       outputSection.classList.add('has-images');
-      var html = '<div class="image-grid">';
+      var html = ['<div class="image-grid">'];
       
       images.forEach(function(image, index) {
-        html += 
-          '<div class="image-card">' +
-          '<img src="data:image/png;base64,' + image.base64 + 
-          '" alt="' + image.prompt + '">' +
-          '<div class="image-actions">' +
-          '<a href="data:image/png;base64,' + image.base64 + 
-          '" download="generated-' + image.id + '.png" ' +
-          'class="action-btn">' +
-          '<svg class="action-icon" viewBox="0 0 24 24" ' +
-          'fill="none">' +
-          '<path d="M12 16L7 11L8.4 9.55L11 12.15V4H13V12.15' +
-          'L15.6 9.55L17 11L12 16Z" fill="currentColor"/>' +
-          '<path d="M4 20C3.45 20 2.98 19.8 2.59 19.41C2.2 ' +
-          '19.02 2 18.55 2 18V15H4V18H20V15H22V18C22 18.55 ' +
-          '21.8 19.02 21.41 19.41C21.02 19.8 20.55 20 20 20H4Z" ' +
-          'fill="currentColor"/>' +
-          '</svg>' +
-          '</a>' +
-          '<button type="button" onclick="deleteImage(' + 
-          index + ')" class="action-btn">' +
-          '<svg class="action-icon" viewBox="0 0 24 24" ' +
-          'fill="none">' +
-          '<path d="M18.3 5.71C17.91 5.32 17.28 5.32 16.89 ' +
-          '5.71L12 10.59L7.11 5.7C6.72 5.31 6.09 5.31 5.7 ' +
-          '5.7C5.31 6.09 5.31 6.72 5.7 7.11L10.59 12L5.7 ' +
-          '16.89C5.31 17.28 5.31 17.91 5.7 18.3C6.09 18.69 ' +
-          '6.72 18.69 7.11 18.3L12 13.41L16.89 18.3C17.28 ' +
-          '18.69 17.91 18.69 18.3 18.3C18.69 17.91 18.69 ' +
-          '17.28 18.3 16.89L13.41 12L18.3 7.11C18.68 6.73 ' +
-          '18.68 6.09 18.3 5.71Z" fill="currentColor"/>' +
-          '</svg>' +
-          '</button>' +
-          '</div>' +
-          '<div class="image-info">' +
-          '<p class="image-prompt">' + image.prompt + '</p>' +
-          '<p class="image-meta">' +
-          '<span class="image-model">' + 
-          image.model.toUpperCase() + '</span> | ' + 
-          image.size + '</p>' +
-          '</div>' +
-          '</div>';
+        html.push(createImageCard(image, index));
       });
       
-      html += '</div>';
-      outputSection.innerHTML = html;
+      html.push('</div>');
+      outputSection.innerHTML = html.join('');
     }
   };
   
   var showErrorModal = function(error) {
-    var existingModal = document.getElementById('errorModal');
+    var existingModal = document.getElementById(
+      'errorModal'
+    );
+    
     if (existingModal) existingModal.remove();
     
     var modal = document.createElement('div');
     modal.id = 'errorModal';
     modal.className = 'modal-overlay';
-    modal.innerHTML = 
-      '<div class="modal-content modal-error-content">' +
-      '<div class="modal-inner">' +
-      '<h3 class="modal-error-title">Error</h3>' +
-      '<p class="modal-error-text">' + error + '</p>' +
-      '<button onclick="closeErrorModal()" ' +
-      'class="btn btn-primary w-full">OK</button>' +
-      '</div>' +
-      '</div>';
+    modal.innerHTML = [
+      '<div class="modal-content ',
+      'modal-error-content">',
+      '<div class="modal-inner">',
+      '<h3 class="modal-error-title">Error</h3>',
+      '<p class="modal-error-text">', error, '</p>',
+      '<button onclick="closeErrorModal()" ',
+      'class="btn btn-primary w-full">OK</button>',
+      '</div>',
+      '</div>'
+    ].join('');
     
     document.body.appendChild(modal);
   };
@@ -338,9 +386,8 @@
     xhr.onload = function() {
       try {
         var response = JSON.parse(xhr.responseText);
-        if (response.success) {
-          currentImages = response.images || [];
-          displayImages(currentImages);
+        if (!response.success && response.error) {
+          showErrorModal(response.error);
         }
       } catch (e) {}
     };
@@ -357,30 +404,43 @@
       '.image-output-section'
     );
     
-    if (outputSection && outputSection.classList.contains('has-images')) {
-      var imageCards = outputSection.querySelectorAll('.image-card');
-      if (imageCards && imageCards.length > 0) {
-        currentImages = [];
-        imageCards.forEach(function(card) {
-          var img = card.querySelector('img');
-          var prompt = card.querySelector('.image-prompt');
-          var model = card.querySelector('.image-model');
-          var meta = card.querySelector('.image-meta');
-          
-          if (img && img.src && img.src.includes('base64,')) {
-            var base64 = img.src.split('base64,')[1];
-            var size = meta ? meta.textContent.split('|')[1] : '';
-            currentImages.push({
-              id: 'existing-' + Math.random().toString(36).substring(2, 15),
-              base64: base64,
-              prompt: prompt ? prompt.textContent : '',
-              model: model ? model.textContent.toLowerCase() : '',
-              size: size ? size.trim() : ''
-            });
-          }
+    if (!outputSection || 
+        !outputSection.classList.contains('has-images')) {
+      return;
+    }
+    
+    var imageCards = outputSection.querySelectorAll(
+      '.image-card'
+    );
+    
+    if (!imageCards || imageCards.length === 0) return;
+    
+    currentImages = [];
+    
+    imageCards.forEach(function(card) {
+      var img = card.querySelector('img');
+      var prompt = card.querySelector('.image-prompt');
+      var model = card.querySelector('.image-model');
+      var meta = card.querySelector('.image-meta');
+      
+      if (img && img.src && img.src.includes('base64,')) {
+        var base64 = img.src.split('base64,')[1];
+        var size = meta 
+          ? meta.textContent.split('|')[1] 
+          : '';
+        
+        currentImages.push({
+          id: 'existing-' + Math.random()
+            .toString(36).substring(2, 15),
+          base64: base64,
+          prompt: prompt ? prompt.textContent : '',
+          model: model 
+            ? model.textContent.toLowerCase() 
+            : '',
+          size: size ? size.trim() : ''
         });
       }
-    }
+    });
   };
   
   connectWebSocket();