facebetter 1.0.3 → 1.0.6

package/dist/facebetter.js

@@ -0,0 +1,1104 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Facebetter = {}));
+})(this, (function (exports) { 'use strict';
+
+  /**
+   * Facebetter Error Classes
+   * Platform-agnostic error handling
+   */
+
+  /**
+   * Facebetter error class
+   */
+  class FacebetterError extends Error {
+    constructor(message, code = -1) {
+      super(message);
+      this.name = 'FacebetterError';
+      this.code = code;
+    }
+  }
+
+  /**
+   * Checks if a result code indicates success
+   * @param {number} result - Result code from WASM function
+   * @throws {FacebetterError} If result indicates failure
+   */
+  function checkResult(result, errorMessage = 'Operation failed') {
+    if (result !== 0) {
+      throw new FacebetterError(`${errorMessage} (error code: ${result})`, result);
+    }
+  }
+
+  /**
+   * Engine Configuration
+   * Platform-agnostic configuration class
+   */
+
+
+  /**
+   * Engine configuration class
+   * Similar to EngineConfig struct in C++/Java/OC
+   */
+  class EngineConfig {
+    /**
+     * Creates a new EngineConfig instance
+     * @param {Object} config - Configuration object
+     * @param {string} [config.appId] - Application ID (required if licenseJson is not provided)
+     * @param {string} [config.appKey] - Application key (required if licenseJson is not provided)
+     * @param {string} [config.licenseJson] - License JSON string (optional, if provided, appId and appKey are not required)
+     */
+    constructor(config = {}) {
+      this.appId = config.appId || null;
+      this.appKey = config.appKey || null;
+      this.licenseJson = config.licenseJson || null;
+      this.resourcePath = '/facebetter/resource.bundle';
+    }
+
+    /**
+     * Validates the configuration
+     * @returns {boolean} True if valid
+     */
+    isValid() {
+      // 如果提供了 licenseJson，则使用授权数据验证
+      if (this.licenseJson) {
+        return typeof this.licenseJson === 'string' && this.licenseJson.trim() !== '';
+      }
+      // 否则需要 appId 和 appKey
+      return this.appId && typeof this.appId === 'string' && this.appId.trim() !== '' &&
+             this.appKey && typeof this.appKey === 'string' && this.appKey.trim() !== '';
+    }
+
+    /**
+     * Returns a string representation of the config
+     * @returns {string} String representation
+     */
+    toString() {
+      return `EngineConfig{appId='${this.appId ? this.appId.substring(0, Math.min(this.appId.length, 8)) + '...' : 'null'}', appKey='${this.appKey ? '***' : 'null'}', licenseJson=${this.licenseJson ? 'provided' : 'null'}}`;
+    }
+  }
+
+  /**
+   * Facebetter Constants and Enums
+   * Platform-agnostic constants
+   */
+
+  /**
+   * Beauty type enumeration
+   */
+  const BeautyType$1 = {
+    Basic: 0,        // 基础美颜
+    Reshape: 1,     // 面部重塑
+    Makeup: 2,      // 美妆效果
+    Segmentation: 3 // 人像分割
+  };
+
+  /**
+   * Basic beauty parameter enumeration
+   */
+  const BasicParam$1 = {
+    Smoothing: 0,   // 磨皮
+    Sharpening: 1,   // 锐化
+    Whitening: 2,   // 美白
+    Rosiness: 3     // 红润
+  };
+
+  /**
+   * Face reshape parameter enumeration
+   */
+  const ReshapeParam$1 = {
+    FaceThin: 0,    // 瘦脸
+    FaceVShape: 1,  // V脸
+    FaceNarrow: 2,  // 窄脸
+    FaceShort: 3,   // 短脸
+    Cheekbone: 4,   // 颧骨
+    Jawbone: 5,     // 下颌骨
+    Chin: 6,        // 下巴
+    NoseSlim: 7,    // 瘦鼻梁
+    EyeSize: 8,     // 大眼
+    EyeDistance: 9  // 眼距
+  };
+
+  /**
+   * Makeup parameter enumeration
+   */
+  const MakeupParam$1 = {
+    Lipstick: 0,    // 口红
+    Blush: 1        // 腮红
+  };
+
+  /**
+   * Background mode enumeration
+   */
+  const BackgroundMode$1 = {
+    None: 0,        // 无背景处理
+    Blur: 1,        // 模糊背景
+    Image: 2        // 背景图片替换
+  };
+
+  /**
+   * Process mode enumeration
+   */
+  const ProcessMode$1 = {
+    Image: 0,       // 图片模式
+    Video: 1        // 视频模式
+  };
+
+  var constants = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    BackgroundMode: BackgroundMode$1,
+    BasicParam: BasicParam$1,
+    BeautyType: BeautyType$1,
+    MakeupParam: MakeupParam$1,
+    ProcessMode: ProcessMode$1,
+    ReshapeParam: ReshapeParam$1
+  });
+
+  /**
+   * Beauty Effect Engine Core
+   * Platform-agnostic engine implementation with dependency injection
+   */
+
+
+  /**
+   * Beauty effect engine class
+   * Provides high-level API for face beauty effects processing
+   * Uses dependency injection for platform-specific functionality
+   */
+  class BeautyEffectEngine {
+    /**
+     * Creates a new BeautyEffectEngine instance
+     * @param {EngineConfig|Object} config - EngineConfig object or configuration object
+     * @param {Object} platformAPI - Platform-specific API (injected)
+     * @param {Function} platformAPI.loadWasmModule - WASM module loader
+     * @param {Function} platformAPI.getWasmModule - Get WASM module instance
+     * @param {Function} platformAPI.getWasmBuffer - Get WASM memory buffer
+     * @param {Function} platformAPI.toImageData - Convert to ImageData
+     * @param {Function} platformAPI.verifyAppKeyOnline - Verify app key online
+     * @param {Function} [platformAPI.ensureGPUPixelCanvas] - Ensure GPU canvas exists (browser only)
+     * @param {Function} [platformAPI.cleanupGPUPixelCanvas] - Cleanup GPU canvas (browser only)
+     */
+    constructor(config, platformAPI) {
+      if (!config) {
+        throw new FacebetterError('Config is required. Expected EngineConfig or configuration object');
+      }
+
+      if (!platformAPI) {
+        throw new FacebetterError('Platform API is required');
+      }
+
+      // 如果传入的是 EngineConfig 实例，直接使用；否则创建新的 EngineConfig
+      let engineConfig;
+      if (config instanceof EngineConfig) {
+        engineConfig = config;
+      } else if (config && typeof config === 'object') {
+        engineConfig = new EngineConfig(config);
+      } else {
+        throw new FacebetterError('Invalid configuration. Expected EngineConfig or configuration object');
+      }
+
+      if (!engineConfig.isValid()) {
+        throw new FacebetterError('Invalid config: ' + engineConfig.toString());
+      }
+
+      this.config = engineConfig;
+      this.appId = engineConfig.appId;
+      this.appKey = engineConfig.appKey;
+      this.licenseJson = engineConfig.licenseJson;
+      this.resourcePath = '/facebetter/resource.bundle';
+      this.enginePtr = null;
+      this.initialized = false;
+      this.srcBufferPtr = null;
+      this.dstBufferPtr = null;
+      this.bufferSize = 0;
+      
+      // Store platform API
+      this._platformAPI = platformAPI;
+      this._loadWasmModule = platformAPI.loadWasmModule;
+      this._getWasmModule = platformAPI.getWasmModule;
+      this._getWasmBuffer = platformAPI.getWasmBuffer;
+      this._toImageData = platformAPI.toImageData;
+      this._verifyAppKeyOnline = platformAPI.verifyAppKeyOnline;
+      this._ensureGPUPixelCanvas = platformAPI.ensureGPUPixelCanvas;
+      this._cleanupGPUPixelCanvas = platformAPI.cleanupGPUPixelCanvas;
+      
+      // Browser-specific state
+      this._gpupixelCanvas = null;
+      this._createdGPUPixelCanvas = false;
+      this._offscreenCanvas = null;
+      this._offscreenCtx = null;
+      
+      // Automatically create gpupixel_canvas if it doesn't exist (browser only)
+      if (this._ensureGPUPixelCanvas) {
+        this._ensureGPUPixelCanvas();
+      }
+      
+      // Start loading WASM module immediately in constructor
+      this._wasmLoadPromise = this._loadWasmModule();
+    }
+
+    /**
+     * Initializes the engine
+     * @returns {Promise<void>} Promise that resolves when initialization is complete
+     */
+    async init() {
+      if (this.initialized) {
+        return;
+      }
+
+      // Wait for WASM module to be loaded (started in constructor)
+      await this._wasmLoadPromise;
+      const Module = this._getWasmModule();
+
+      let licenseJsonToUse = this.licenseJson;
+
+      // 如果用户提供了 appId 和 appKey（但没有提供 licenseJson），则在 JS 层发送 HTTP 请求
+      if (this.appId && this.appKey && !this.licenseJson && this._verifyAppKeyOnline) {
+        try {
+          // 在 JS 层调用 online_auth API 获取服务器响应
+          const authResponse = await this._verifyAppKeyOnline(this.appId, this.appKey);
+          
+          if (!authResponse) {
+            throw new FacebetterError('Failed to get server response from online_auth API');
+          }
+
+          // 将服务器响应转换为 JSON 字符串，作为 licenseJson 传递给 WASM 层
+          licenseJsonToUse = JSON.stringify(authResponse);
+          console.log('Online auth response received, using as licenseJson');
+        } catch (error) {
+          throw new FacebetterError(`Failed to verify app key online: ${error.message}`);
+        }
+      }
+
+      // 如果用户直接提供了 licenseJson，则直接使用
+      // 如果通过 appId/appKey 获取到了响应，则使用响应作为 licenseJson
+      // WASM 层只需要验证 licenseJson，不需要发送 HTTP 请求
+      const enginePtr = Module.ccall(
+        'CreateBeautyEffectEngine',
+        'number',
+        ['string', 'string'],
+        [
+          this.resourcePath,
+          licenseJsonToUse || ''  // 使用 licenseJson 验证
+        ]
+      );
+
+      if (!enginePtr) {
+        throw new FacebetterError('Failed to create BeautyEffect engine');
+      }
+
+      this.enginePtr = enginePtr;
+      this.initialized = true;
+    }
+
+    /**
+     * Destroys the engine and releases resources
+     */
+    destroy() {
+      if (!this.initialized || !this.enginePtr) {
+        return;
+      }
+
+      const Module = this._getWasmModule();
+
+      if (this.srcBufferPtr) {
+        Module._free(this.srcBufferPtr);
+        this.srcBufferPtr = null;
+      }
+
+      if (this.dstBufferPtr) {
+        Module._free(this.dstBufferPtr);
+        this.dstBufferPtr = null;
+      }
+
+      Module.ccall('DestroyBeautyEffectEngine', null, ['number'], [this.enginePtr]);
+      this.enginePtr = null;
+      this.initialized = false;
+      this.bufferSize = 0;
+      
+      // Clean up offscreen canvas
+      if (this._offscreenCanvas) {
+        this._offscreenCanvas = null;
+        this._offscreenCtx = null;
+      }
+      
+      // Clean up gpupixel_canvas if we created it
+      if (this._cleanupGPUPixelCanvas) {
+        this._cleanupGPUPixelCanvas();
+      }
+    }
+
+    /**
+     * Sets log configuration
+     * Can be called before init() since SetLogConfig is a global function
+     * @param {Object} config - Log configuration
+     * @param {boolean} config.consoleEnabled - Enable console logging
+     * @param {boolean} config.fileEnabled - Enable file logging
+     * @param {number} config.level - Log level
+     * @param {string} config.fileName - Log file name
+     * @returns {Promise<void>} Promise that resolves when log config is set
+     */
+    async setLogConfig(config) {
+      // Wait for WASM module to be loaded (started in constructor)
+      await this._wasmLoadPromise;
+      const Module = this._getWasmModule();
+
+      const result = Module.ccall(
+        'SetLogConfig',
+        'number',
+        ['bool', 'bool', 'number', 'string'],
+        [
+          config.consoleEnabled || false,
+          config.fileEnabled || false,
+          config.level || 0,
+          config.fileName || ''
+        ]
+      );
+
+      checkResult(result, 'Failed to set log config');
+    }
+
+    /**
+     * Enables or disables a beauty type
+     * @param {number} beautyType - Beauty type (use BeautyType enum)
+     * @param {boolean} enabled - Enable or disable
+     */
+    setBeautyTypeEnabled(beautyType, enabled) {
+      this._ensureInitialized();
+      const Module = this._getWasmModule();
+
+      const result = Module.ccall(
+        'SetBeautyTypeEnabled',
+        'number',
+        ['number', 'number', 'number'],
+        [this.enginePtr, beautyType, enabled ? 1 : 0]
+      );
+
+      checkResult(result, `Failed to ${enabled ? 'enable' : 'disable'} beauty type`);
+    }
+
+    /**
+     * Checks if a beauty type is enabled
+     * @param {number} beautyType - Beauty type (use BeautyType enum)
+     * @returns {boolean} True if enabled
+     */
+    isBeautyTypeEnabled(beautyType) {
+      this._ensureInitialized();
+      const Module = this._getWasmModule();
+
+      const result = Module.ccall(
+        'IsBeautyTypeEnabled',
+        'number',
+        ['number', 'number'],
+        [this.enginePtr, beautyType]
+      );
+
+      if (result === -1) {
+        throw new FacebetterError('Failed to check beauty type status');
+      }
+
+      return result === 1;
+    }
+
+    /**
+     * Disables all beauty types
+     */
+    disableAllBeautyTypes() {
+      this._ensureInitialized();
+      const Module = this._getWasmModule();
+
+      const result = Module.ccall(
+        'DisableAllBeautyTypes',
+        'number',
+        ['number'],
+        [this.enginePtr]
+      );
+
+      checkResult(result, 'Failed to disable all beauty types');
+    }
+
+    /**
+     * Sets a basic beauty parameter
+     * @param {number} param - Parameter (use BasicParam enum)
+     * @param {number} value - Parameter value (0.0 - 1.0)
+     */
+    setBasicParam(param, value) {
+      this._ensureInitialized();
+      this._setBeautyParam('SetBeautyParamBasic', param, value);
+    }
+
+    /**
+     * Sets a reshape parameter
+     * @param {number} param - Parameter (use ReshapeParam enum)
+     * @param {number} value - Parameter value (0.0 - 1.0)
+     */
+    setReshapeParam(param, value) {
+      this._ensureInitialized();
+      this._setBeautyParam('SetBeautyParamReshape', param, value);
+    }
+
+    /**
+     * Sets a makeup parameter
+     * @param {number} param - Parameter (use MakeupParam enum)
+     * @param {number} value - Parameter value (0.0 - 1.0)
+     */
+    setMakeupParam(param, value) {
+      this._ensureInitialized();
+      this._setBeautyParam('SetBeautyParamMakeup', param, value);
+    }
+
+    /**
+     * Internal method to set beauty parameters
+     * @private
+     */
+    _setBeautyParam(functionName, param, value) {
+      if (value < 0 || value > 1) {
+        throw new FacebetterError('Parameter value must be between 0.0 and 1.0');
+      }
+
+      const Module = this._getWasmModule();
+      const result = Module.ccall(
+        functionName,
+        'number',
+        ['number', 'number', 'number'],
+        [this.enginePtr, param, value]
+      );
+
+      checkResult(result, `Failed to set beauty parameter`);
+    }
+
+    /**
+     * Sets virtual background mode
+     * @param {number} mode - Background mode (use BackgroundMode enum)
+     */
+    setVirtualBackgroundMode(mode) {
+      this._ensureInitialized();
+      const Module = this._getWasmModule();
+
+      const result = Module.ccall(
+        'SetVirtualBackgroundMode',
+        'number',
+        ['number', 'number'],
+        [this.enginePtr, mode]
+      );
+
+      checkResult(result, 'Failed to set virtual background mode');
+    }
+
+    /**
+     * Sets virtual background image
+     * @param {ImageData|HTMLImageElement|HTMLCanvasElement} image - Background image
+     */
+    setVirtualBackgroundImage(image) {
+      this._ensureInitialized();
+      const imageData = this._toImageData(image);
+      const Module = this._getWasmModule();
+
+      const bufferSize = imageData.width * imageData.height * 4;
+      const imageBufferPtr = Module._malloc(bufferSize);
+
+      try {
+        const buffer = this._getWasmBuffer();
+        const view = new Uint8Array(buffer, imageBufferPtr, bufferSize);
+        view.set(imageData.data);
+
+        const result = Module.ccall(
+          'SetVirtualBackgroundImage',
+          'number',
+          ['number', 'number', 'number', 'number', 'number'],
+          [
+            this.enginePtr,
+            imageBufferPtr,
+            imageData.width,
+            imageData.height,
+            imageData.width * 4
+          ]
+        );
+
+        checkResult(result, 'Failed to set virtual background image');
+      } finally {
+        Module._free(imageBufferPtr);
+      }
+    }
+
+    /**
+     * Ensures buffers are allocated for the given dimensions
+     * @private
+     */
+    _ensureBuffers(width, height) {
+      const requiredSize = width * height * 4;
+
+      if (this.bufferSize < requiredSize) {
+        const Module = this._getWasmModule();
+
+        if (this.srcBufferPtr) {
+          Module._free(this.srcBufferPtr);
+        }
+        if (this.dstBufferPtr) {
+          Module._free(this.dstBufferPtr);
+        }
+
+        this.srcBufferPtr = Module._malloc(requiredSize);
+        this.dstBufferPtr = Module._malloc(requiredSize);
+        this.bufferSize = requiredSize;
+
+        if (!this.srcBufferPtr || !this.dstBufferPtr) {
+          throw new FacebetterError('Failed to allocate memory buffers');
+        }
+      }
+    }
+
+    /**
+     * Processes an image
+     * @param {ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|Uint8ClampedArray} input - Input image
+     * @param {number} width - Image width (required if input is Uint8ClampedArray)
+     * @param {number} height - Image height (required if input is Uint8ClampedArray)
+     * @param {number} processMode - Process mode (use ProcessMode enum, default: ProcessMode.Image)
+     * @returns {ImageData} Processed image data
+     */
+    processImage(input, width, height, processMode = ProcessMode$1.Image) {
+      this._ensureInitialized();
+      const imageData = this._platformAPI.toImageData(input, width, height);
+      const Module = this._getWasmModule();
+
+      this._ensureBuffers(imageData.width, imageData.height);
+
+      const bufferSize = imageData.width * imageData.height * 4;
+
+      try {
+        const buffer = this._getWasmBuffer();
+        
+        const srcView = new Uint8Array(buffer, this.srcBufferPtr, bufferSize);
+        srcView.set(imageData.data);
+
+        const result = Module.ccall(
+          'ProcessImageRGBA',
+          'number',
+          ['number', 'number', 'number', 'number', 'number', 'number', 'number'],
+          [
+            this.enginePtr,
+            this.srcBufferPtr,
+            imageData.width,
+            imageData.height,
+            imageData.width * 4,
+            this.dstBufferPtr,
+            processMode
+          ]
+        );
+
+        checkResult(result, 'Failed to process image');
+
+        const currentBuffer = this._getWasmBuffer();
+        const dstView = new Uint8Array(currentBuffer, this.dstBufferPtr, bufferSize);
+        const processedData = new Uint8ClampedArray(dstView);
+
+        return new ImageData(processedData, imageData.width, imageData.height);
+      } catch (error) {
+        if (error instanceof FacebetterError) {
+          throw error;
+        }
+        throw new FacebetterError(`Image processing error: ${error.message}`);
+      }
+    }
+
+    /**
+     * Ensures the engine is initialized
+     * @private
+     * @throws {FacebetterError} If engine is not initialized
+     */
+    _ensureInitialized() {
+      if (!this.initialized || !this.enginePtr) {
+        throw new FacebetterError('Engine not initialized. Call init() first.');
+      }
+    }
+
+    /**
+     * Ensures gpupixel_canvas exists in the DOM (browser only)
+     * This canvas is required by GPUPixel for WebGL context creation
+     * @private
+     */
+    _ensureGPUPixelCanvas() {
+      if (typeof document === 'undefined') {
+        return;
+      }
+      
+      let canvas = document.getElementById('gpupixel_canvas');
+      if (!canvas) {
+        canvas = document.createElement('canvas');
+        canvas.id = 'gpupixel_canvas';
+        canvas.style.display = 'none';
+        canvas.width = 1;
+        canvas.height = 1;
+        document.body.appendChild(canvas);
+        this._createdGPUPixelCanvas = true;
+      }
+      this._gpupixelCanvas = canvas;
+    }
+
+    /**
+     * Cleans up gpupixel_canvas if it was created by this engine instance (browser only)
+     * @private
+     */
+    _cleanupGPUPixelCanvas() {
+      if (this._createdGPUPixelCanvas && this._gpupixelCanvas) {
+        this._gpupixelCanvas.remove();
+        this._gpupixelCanvas = null;
+        this._createdGPUPixelCanvas = false;
+      }
+    }
+
+    /**
+     * Ensures offscreen canvas exists and matches the required dimensions (browser only)
+     * This canvas is reused for video processing to avoid creating temporary canvases
+     * @private
+     * @param {number} width - Required canvas width
+     * @param {number} height - Required canvas height
+     */
+    _ensureOffscreenCanvas(width, height) {
+      if (typeof document === 'undefined') {
+        return null;
+      }
+      
+      if (!this._offscreenCanvas || 
+          this._offscreenCanvas.width !== width || 
+          this._offscreenCanvas.height !== height) {
+        this._offscreenCanvas = document.createElement('canvas');
+        this._offscreenCanvas.width = width;
+        this._offscreenCanvas.height = height;
+        this._offscreenCtx = this._offscreenCanvas.getContext('2d', { willReadFrequently: true });
+      }
+      return this._offscreenCanvas;
+    }
+
+  }
+
+  /**
+   * Browser-specific WASM Module Loader
+   * Uses document.currentScript for automatic path detection
+   */
+
+  /**
+   * Gets the base path of the current script
+   * Similar to Node.js __dirname
+   * Handles various deployment scenarios: same directory, CDN, subdirectories
+   * @returns {string} Base path of the current script (with trailing slash)
+   */
+  function getScriptBasePath() {
+    let scriptUrl = null;
+    
+    // Method 1: document.currentScript (most reliable, works in sync execution)
+    if (typeof document !== 'undefined' && document.currentScript?.src) {
+      scriptUrl = document.currentScript.src;
+    }
+    
+    // Method 2: Traverse script tags (fallback for async scripts)
+    if (!scriptUrl && typeof document !== 'undefined') {
+      const scripts = document.getElementsByTagName('script');
+      // Check from end to start (most recent first)
+      for (let i = scripts.length - 1; i >= 0; i--) {
+        const src = scripts[i].src;
+        if (src && (src.includes('facebetter.js') || src.includes('facebetter'))) {
+          scriptUrl = src;
+          break;
+        }
+      }
+    }
+    
+    // Method 3: Try to find script by checking all scripts
+    if (!scriptUrl && typeof document !== 'undefined') {
+      const scripts = document.getElementsByTagName('script');
+      for (let i = scripts.length - 1; i >= 0; i--) {
+        const src = scripts[i].src;
+        if (src) {
+          // Use the last script tag as fallback
+          scriptUrl = src;
+          break;
+        }
+      }
+    }
+    
+    // Extract base path from script URL
+    if (scriptUrl) {
+      try {
+        const url = new URL(scriptUrl);
+        return url.href.substring(0, url.href.lastIndexOf('/') + 1);
+      } catch (e) {
+        // If URL parsing fails, use string manipulation
+        return scriptUrl.substring(0, scriptUrl.lastIndexOf('/') + 1);
+      }
+    }
+    
+    // Method 4: Fallback to current location (least reliable)
+    if (typeof location !== 'undefined') {
+      try {
+        const url = new URL('.', location.href);
+        return url.href;
+      } catch (e) {
+        return location.pathname.substring(0, location.pathname.lastIndexOf('/') + 1);
+      }
+    }
+    
+    // Last resort
+    return './';
+  }
+
+  /**
+   * Resolves a relative path to absolute URL
+   * Handles various path formats and edge cases
+   * @param {string} relativePath - Relative path (e.g., 'facebetter_wasm.js')
+   * @param {string} basePath - Base path (with trailing slash)
+   * @returns {string} Absolute URL
+   */
+  function resolvePath(relativePath, basePath) {
+    // If relativePath is already absolute, return as-is
+    if (relativePath.startsWith('http://') || relativePath.startsWith('https://') || relativePath.startsWith('//')) {
+      return relativePath;
+    }
+    
+    try {
+      // Use URL API for proper resolution
+      const base = basePath.endsWith('/') ? basePath : basePath + '/';
+      return new URL(relativePath, base).href;
+    } catch (e) {
+      // Fallback: simple concatenation
+      const base = basePath.endsWith('/') ? basePath : basePath + '/';
+      // Remove leading ./ from relativePath if present
+      const cleanPath = relativePath.replace(/^\.\//, '');
+      return base + cleanPath;
+    }
+  }
+
+  let wasmModulePromise = null;
+  let wasmModuleInstance = null;
+
+  /**
+   * Loads the WebAssembly module (browser version)
+   * @param {string} [wasmPath] - Path to facebetter_wasm.js (auto-detected if not provided)
+   * @param {Object} [options] - Options
+   * @param {Function} [options.locateFile] - Custom locateFile function
+   * @returns {Promise<Object>} Promise that resolves with the WASM module
+   */
+  function loadWasmModule(wasmPath, options = {}) {
+    if (wasmModuleInstance) {
+      return Promise.resolve(wasmModuleInstance);
+    }
+
+    if (wasmModulePromise) {
+      return wasmModulePromise;
+    }
+
+    wasmModulePromise = new Promise((resolve, reject) => {
+      // Check if Module is already available
+      if (typeof Module !== 'undefined' && Module.ready) {
+        wasmModuleInstance = Module;
+        resolve(Module);
+        return;
+      }
+
+      // Initialize Module if not exists
+      if (typeof Module === 'undefined') {
+        if (typeof window !== 'undefined') {
+          window.Module = {};
+        } else if (typeof global !== 'undefined') {
+          global.Module = {};
+        } else {
+          reject(new Error('Cannot find global object (window/global)'));
+          return;
+        }
+      }
+
+      // Auto-detect wasm path if not provided
+      if (!wasmPath) {
+        const basePath = getScriptBasePath();
+        wasmPath = resolvePath('facebetter_wasm.js', basePath);
+      }
+
+      // Configure Module.locateFile for automatic resource resolution
+      const basePath = getScriptBasePath();
+      const originalLocateFile = Module.locateFile || function(path, prefix) {
+        return prefix + path;
+      };
+
+      Module.locateFile = function(path, prefix) {
+        // Use custom locateFile if provided
+        if (options.locateFile) {
+          return options.locateFile(path, prefix);
+        }
+        
+        // Auto-resolve .wasm and .data files
+        if (path.endsWith('.wasm') || path.endsWith('.data')) {
+          return resolvePath(path, basePath);
+        }
+        
+        return originalLocateFile(path, prefix);
+      };
+
+      // Load WASM script
+      const script = document.createElement('script');
+      script.src = wasmPath;
+      script.onload = () => {
+        if (typeof Module.onRuntimeInitialized === 'undefined') {
+          Module.onRuntimeInitialized = () => {
+            Module.ready = true;
+            wasmModuleInstance = Module;
+            resolve(Module);
+          };
+        } else {
+          const originalInit = Module.onRuntimeInitialized;
+          Module.onRuntimeInitialized = () => {
+            if (originalInit) originalInit();
+            Module.ready = true;
+            wasmModuleInstance = Module;
+            resolve(Module);
+          };
+        }
+      };
+      script.onerror = () => {
+        wasmModulePromise = null;
+        reject(new Error(`Failed to load WASM module from ${wasmPath}`));
+      };
+      document.head.appendChild(script);
+    });
+
+    return wasmModulePromise;
+  }
+
+  /**
+   * Gets the current WASM module instance
+   * @returns {Object} WASM module instance
+   * @throws {Error} If module is not loaded
+   */
+  function getWasmModule() {
+    if (!wasmModuleInstance) {
+      throw new Error('WASM module not loaded. Call loadWasmModule() first or use BeautyEffectEngine.init()');
+    }
+    return wasmModuleInstance;
+  }
+
+  /**
+   * Gets the current WASM memory buffer, handling potential reallocation
+   * @returns {ArrayBuffer} Current WASM memory buffer
+   */
+  function getWasmBuffer() {
+    const Module = getWasmModule();
+    
+    if (Module.buffer) {
+      return Module.buffer;
+    } else if (Module.HEAPU8 && Module.HEAPU8.buffer) {
+      return Module.HEAPU8.buffer;
+    } else if (Module.asm && Module.asm.memory) {
+      return Module.asm.memory.buffer;
+    }
+    
+    throw new Error('Unable to access WASM memory buffer');
+  }
+
+  /**
+   * Browser-specific Image Utilities
+   * Uses DOM APIs (canvas, ImageData, etc.)
+   */
+
+
+  /**
+   * Converts various image sources to ImageData (browser version)
+   * @param {ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|Uint8ClampedArray} source - Image source
+   * @param {number} width - Image width (required if source is Uint8ClampedArray)
+   * @param {number} height - Image height (required if source is Uint8ClampedArray)
+   * @returns {ImageData} ImageData object
+   */
+  function toImageData(source, width, height) {
+    if (source instanceof ImageData) {
+      return source;
+    }
+
+    if (source instanceof HTMLCanvasElement || source instanceof HTMLVideoElement) {
+      const canvas = source instanceof HTMLCanvasElement ? source : document.createElement('canvas');
+      if (source instanceof HTMLVideoElement) {
+        canvas.width = source.videoWidth;
+        canvas.height = source.videoHeight;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(source, 0, 0);
+      }
+      const ctx = canvas.getContext('2d');
+      return ctx.getImageData(0, 0, canvas.width, canvas.height);
+    }
+
+    if (source instanceof HTMLImageElement) {
+      const canvas = document.createElement('canvas');
+      canvas.width = source.naturalWidth || source.width;
+      canvas.height = source.naturalHeight || source.height;
+      const ctx = canvas.getContext('2d');
+      ctx.drawImage(source, 0, 0);
+      return ctx.getImageData(0, 0, canvas.width, canvas.height);
+    }
+
+    if (source instanceof Uint8ClampedArray) {
+      if (width === undefined || height === undefined) {
+        throw new FacebetterError('Width and height are required when source is Uint8ClampedArray');
+      }
+      return new ImageData(source, width, height);
+    }
+
+    throw new FacebetterError('Unsupported image source type');
+  }
+
+  /**
+   * Gets User-Agent string for web platform
+   * @returns {string} User-Agent string
+   */
+  function getUserAgentString() {
+    return 'FB/1.0 (web; wasm32)';
+  }
+
+  /**
+   * Generates HMAC-SHA256 signature (browser version)
+   * @param {string} key - HMAC key (app_key)
+   * @param {string} data - Data to sign (timestamp string)
+   * @returns {Promise<string>} Promise that resolves with hex-encoded signature
+   */
+  async function generateHMACSignature(key, data) {
+    const encoder = new TextEncoder();
+    const keyData = encoder.encode(key);
+    const messageData = encoder.encode(data);
+
+    const cryptoKey = await crypto.subtle.importKey(
+      'raw',
+      keyData,
+      { name: 'HMAC', hash: 'SHA-256' },
+      false,
+      ['sign']
+    );
+
+    const signature = await crypto.subtle.sign('HMAC', cryptoKey, messageData);
+
+    // Convert to hex string
+    const hashArray = Array.from(new Uint8Array(signature));
+    const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+    return hashHex;
+  }
+
+  /**
+   * Calls online_auth API to verify app_key (browser version)
+   * @param {string} appId - Application ID
+   * @param {string} appKey - Application key
+   * @returns {Promise<Object>} Promise that resolves with response data
+   */
+  async function verifyAppKeyOnline(appId, appKey) {
+    try {
+      const timestamp = Math.floor(Date.now() / 1000);
+      const timestampStr = timestamp.toString();
+      const hmacSignature = await generateHMACSignature(appKey, timestampStr);
+
+      const requestBody = {
+        p_app_id: appId,
+        p_hmac_signature: hmacSignature,
+        p_timestamp: timestamp,
+        p_user_agent: getUserAgentString()
+      };
+
+      const response = await fetch('https://facebetter.pixpark.net/rest/v1/rpc/online_auth', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'User-Agent': getUserAgentString()
+        },
+        body: JSON.stringify(requestBody)
+      });
+
+      const responseData = await response.json();
+      return responseData;
+    } catch (error) {
+      console.error('Online auth request failed:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Browser Entry Point
+   * For <script> tag usage (UMD format)
+   */
+
+
+  // Browser-specific GPU canvas management
+  function ensureGPUPixelCanvas() {
+    if (typeof document === 'undefined') {
+      return;
+    }
+    
+    let canvas = document.getElementById('gpupixel_canvas');
+    if (!canvas) {
+      canvas = document.createElement('canvas');
+      canvas.id = 'gpupixel_canvas';
+      canvas.style.display = 'none';
+      canvas.width = 1;
+      canvas.height = 1;
+      if (document.body) {
+        document.body.appendChild(canvas);
+      }
+    }
+  }
+
+  function cleanupGPUPixelCanvas() {
+    // Cleanup is handled by engine instance
+  }
+
+  // Create platform API
+  const platformAPI = {
+    loadWasmModule: () => loadWasmModule(),
+    getWasmModule: getWasmModule,
+    getWasmBuffer: getWasmBuffer,
+    toImageData: toImageData,
+    verifyAppKeyOnline: verifyAppKeyOnline,
+    ensureGPUPixelCanvas,
+    cleanupGPUPixelCanvas
+  };
+
+  // Export factory function for UMD
+  function createBeautyEffectEngine(config) {
+    return new BeautyEffectEngine(config, platformAPI);
+  }
+
+  // Create a wrapped BeautyEffectEngine class that automatically injects platformAPI
+  // This allows users to use: new BeautyEffectEngine(config) without passing platformAPI
+  class BrowserBeautyEffectEngine extends BeautyEffectEngine {
+    constructor(config) {
+      // Automatically inject platformAPI for browser environment
+      super(config, platformAPI);
+    }
+  }
+
+  // Export constants with proper names
+  const BeautyType = BeautyType$1;
+  const BasicParam = BasicParam$1;
+  const ReshapeParam = ReshapeParam$1;
+  const MakeupParam = MakeupParam$1;
+  const BackgroundMode = BackgroundMode$1;
+  const ProcessMode = ProcessMode$1;
+
+  // Default export
+  var index = {
+    BeautyEffectEngine: BrowserBeautyEffectEngine,
+    EngineConfig,
+    FacebetterError,
+    ...constants,
+    loadWasmModule: loadWasmModule
+  };
+
+  exports.BackgroundMode = BackgroundMode;
+  exports.BasicParam = BasicParam;
+  exports.BeautyEffectEngine = BrowserBeautyEffectEngine;
+  exports.BeautyType = BeautyType;
+  exports.EngineConfig = EngineConfig;
+  exports.FacebetterError = FacebetterError;
+  exports.MakeupParam = MakeupParam;
+  exports.ProcessMode = ProcessMode;
+  exports.ReshapeParam = ReshapeParam;
+  exports.createBeautyEffectEngine = createBeautyEffectEngine;
+  exports.default = index;
+  exports.loadWasmModule = loadWasmModule;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=facebetter.js.map