assets/plugins/webLoader.js

//
// SPDX-FileCopyrightText: Hadad <[email protected]>
// SPDX-License-Identifier: Apache-2.0
//

(function () {
  'use strict';

  var sanitizeInput = function (raw, encode) {
    if (!raw) return '';
    var clean = raw;

    if (typeof DOMPurify !== 'undefined') {
      clean = DOMPurify.sanitize(clean, {
        ALLOWED_TAGS: [],
        ALLOWED_ATTR: []
      });
    }

    if (typeof filterXSS !== 'undefined') {
      clean = filterXSS(clean, {
        whiteList: {}
      });
    }

    if (encode === true && typeof he !== 'undefined') {
      clean = he.encode(clean, {
        encodeEverything: false
      });
    }

    return clean;
  };

  var noop = function () {};
  var methods = [
    'log', 'error', 'warn', 'info', 'debug', 'trace',
    'dir', 'table', 'time', 'timeEnd', 'timeLog', 'group',
    'groupEnd', 'assert', 'count', 'countReset', 'profile',
    'profileEnd', 'clear', 'dirxml', 'exception',
    'groupCollapsed'
  ];

  var disableConsole = function () {
    methods.forEach(function (m) {
      try {
        window.console[m] = noop;
      } catch (e) {}
    });

    try {
      Object.defineProperty(window, 'console', {
        value: Object.freeze(Object.create(null)),
        writable: false,
        configurable: false
      });
    } catch (e) {}
  };

  disableConsole();

  var InitWelcomeModal = function () {
    try {
      var hasShown = localStorage.getItem('welcomeModalShown');
      if (!hasShown) {
        var modal = document.getElementById('welcomeModal');
        if (modal) {
          modal.style.display = 'flex';
        }
      }
    } catch (e) {
      var modal = document.getElementById('welcomeModal');
      if (modal) {
        modal.style.display = 'flex';
      }
    }
  };

  var closeWelcomeModal = function () {
    var modal = document.getElementById('welcomeModal');
    if (modal) {
      modal.style.display = 'none';
      try {
        localStorage.setItem('welcomeModalShown', 'true');
      } catch (e) {}
    }
  };

  var closeErrorModal = function () {
    var modal = document.getElementById('errorModal');
    if (modal) {
      modal.style.animation = 'fadeIn 0.5s ease reverse';
      setTimeout(function () {
        modal.remove();
      }, 500);
    }
  };

  var validateInputs = function () {
    var model = document.getElementById('modelSelect');
    var size = document.getElementById('sizeSelect');
    var prompt = document.getElementById('promptInput');
    var submitBtn = document.getElementById('submitBtn');

    if (!model || !size || !prompt || !submitBtn) return;

    var modelValue = model.value;
    var sizeValue = size.value;
    var promptValue = sanitizeInput(prompt.value);

    var isValid = !!modelValue &&
      !!sizeValue &&
      !!promptValue &&
      promptValue.length > 0;

    if (isValid) {
      var hasNonWhitespace = /[^\s\t\n\r\u00A0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]/.test(promptValue);
      isValid = isValid && hasNonWhitespace;
    }

    if (typeof validator !== 'undefined' && isValid) {
      isValid = isValid && 
        validator.isLength(promptValue.trim(), { min: 1 });
    }

    submitBtn.disabled = !isValid;
  };

  var triggerExample = function (prompt, model, size) {
    var modelSelect = document.getElementById('modelSelect');
    var sizeSelect = document.getElementById('sizeSelect');
    var promptInput = document.getElementById('promptInput');
    var form = document.getElementById('generateForm');

    if (modelSelect) modelSelect.value = model;
    if (sizeSelect) sizeSelect.value = size;
    if (promptInput) {
      promptInput.value = sanitizeInput(prompt);
    }

    validateInputs();

    if (form) {
      setTimeout(function () {
        var fa = document.getElementById('formAction');
        if (fa) fa.value = 'generate';
        submitForm();
      }, 100);
    }
  };

  var submitForm = function() {
    var form = document.getElementById('generateForm');
    if (!form) return;
    
    var formData = new FormData(form);
    var promptValue = sanitizeInput(formData.get('prompt'));
    
    var hasNonWhitespace = /[^\s\t\n\r\u00A0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]/.test(promptValue);
    
    if (!promptValue || !hasNonWhitespace) {
      return;
    }
    
    var data = {
      action: formData.get('action') || 'generate',
      prompt: promptValue,
      model: formData.get('model'),
      size: formData.get('size'),
      sessionId: document.body.dataset.sessionId || ''
    };
    
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/', true);
    xhr.setRequestHeader(
      'Content-Type', 
      'application/json'
    );
    
    xhr.onload = function() {
      try {
        var response = JSON.parse(xhr.responseText);
        if (!response.success && response.error) {
          showErrorModal(response.error);
        }
      } catch (e) {}
    };
    
    xhr.send(JSON.stringify(data));
  };

  var cancelGeneration = function () {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/', true);
    xhr.setRequestHeader(
      'Content-Type', 
      'application/json'
    );
    
    xhr.send(JSON.stringify({
      action: 'cancel',
      sessionId: document.body.dataset.sessionId || ''
    }));
  };
  
  var showErrorModal = function(error) {
    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>';
    
    document.body.appendChild(modal);
  };

  var modelSelect = document.getElementById('modelSelect');
  var sizeSelect = document.getElementById('sizeSelect');
  var promptInput = document.getElementById('promptInput');
  var form = document.getElementById('generateForm');

  if (modelSelect) {
    modelSelect.addEventListener('change', validateInputs);
  }
  
  if (sizeSelect) {
    sizeSelect.addEventListener('change', validateInputs);
  }

  if (promptInput) {
    promptInput.addEventListener('input', function () {
      promptInput.value = sanitizeInput(promptInput.value);
      validateInputs();
    });
    
    promptInput.addEventListener('paste', function () {
      setTimeout(function () {
        promptInput.value = sanitizeInput(promptInput.value);
        validateInputs();
      }, 10);
    });
    
    promptInput.addEventListener('keydown', function (e) {
      if (e.key === 'Enter' && e.ctrlKey) {
        e.preventDefault();
        var submitBtn = document.getElementById('submitBtn');
        if (submitBtn && !submitBtn.disabled) {
          submitForm();
        }
      }
    });
    
    promptInput.addEventListener('keyup', function () {
      validateInputs();
    });
    
    promptInput.addEventListener('blur', function () {
      validateInputs();
    });
  }
  
  if (form) {
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      
      var promptValue = sanitizeInput(promptInput ? promptInput.value : '');
      var hasNonWhitespace = /[^\s\t\n\r\u00A0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]/.test(promptValue);
      
      if (!promptValue || !hasNonWhitespace) {
        return;
      }
      
      submitForm();
    });
  }

  window.closeWelcomeModal = closeWelcomeModal;
  window.closeErrorModal = closeErrorModal;
  window.triggerExample = triggerExample;
  window.cancelGeneration = cancelGeneration;
  window.validateInputs = validateInputs;

  validateInputs();

  var cards = document.querySelectorAll('.card');
  Array.prototype.forEach.call(cards, function (card) {
    card.addEventListener('mousemove', function (e) {
      var rect = card.getBoundingClientRect();
      var x = e.clientX - rect.left;
      var y = e.clientY - rect.top;
      card.style.setProperty('--mouse-x', x + 'px');
      card.style.setProperty('--mouse-y', y + 'px');
    });
  });

  document.addEventListener('DOMContentLoaded', function() {
    InitWelcomeModal();
    validateInputs();
  });

  if (document.readyState === 'complete' || 
      document.readyState === 'interactive') {
    InitWelcomeModal();
    validateInputs();
  }

  setInterval(function () {
    disableConsole();
  }, 1000);
})();