Upload 3 files

frontend/src/utils/svg2Base64.ts

@@ -47,15 +47,35 @@ const encode = (input: string) => {
   return output
 }
 
+// 导入Huggingface环境检测
+const isHuggingfaceEnvironment = (): boolean => {
+  return (
+    typeof window !== 'undefined' &&
+    (window.location.hostname.includes('hf.space') ||
+     window.location.hostname.includes('huggingface.co') ||
+     process.env.NODE_ENV === 'production')
+  );
+};
+
 export const svg2Base64 = (element: Element) => {
+  // 检查是否在Huggingface环境
+  const isHF = isHuggingfaceEnvironment();
+  
   try {
     console.log('svg2Base64: Starting conversion for element:', {
       tagName: element.tagName,
       className: element.className,
       id: element.id,
-      hasChildren: element.children.length > 0
+      hasChildren: element.children.length > 0,
+      isHuggingfaceEnvironment: isHF
     });
     
+    // Huggingface环境使用简化的处理方式
+    if (isHF) {
+      console.log('svg2Base64: Using Huggingface optimized processing');
+      return huggingfaceOptimizedSvg2Base64(element);
+    }
+    
     // 克隆元素以避免修改原始DOM
     const clonedElement = element.cloneNode(true) as Element;
     console.log('svg2Base64: Element cloned successfully');
@@ -238,4 +258,109 @@ export const svg2Base64 = (element: Element) => {
     console.error('svg2Base64: All fallback strategies failed');
     throw new Error(`SVG to Base64 conversion failed: ${error}`);
   }
+}
+
+/**
+ * Huggingface环境优化的SVG转Base64函数
+ * 使用更简单、更兼容的方法
+ */
+const huggingfaceOptimizedSvg2Base64 = (element: Element): string => {
+  try {
+    console.log('huggingfaceOptimizedSvg2Base64: Starting optimized conversion');
+    
+    // 克隆元素
+    const clonedElement = element.cloneNode(true) as Element;
+    
+    // 确保是SVG元素
+    if (clonedElement.tagName.toLowerCase() === 'svg') {
+      const svgElement = clonedElement as SVGElement;
+      
+      // 设置基本属性
+      svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+      
+      // 获取尺寸
+      const rect = element.getBoundingClientRect();
+      const width = rect.width || 100;
+      const height = rect.height || 100;
+      
+      // 设置明确的尺寸
+      svgElement.setAttribute('width', width.toString());
+      svgElement.setAttribute('height', height.toString());
+      svgElement.setAttribute('viewBox', `0 0 ${width} ${height}`);
+      
+      // 移除可能导致问题的属性
+      const removeProblematicAttrs = (elem: Element) => {
+        const problematicAttrs = ['vector-effect', 'xmlns:xlink'];
+        problematicAttrs.forEach(attr => {
+          if (elem.hasAttribute(attr)) {
+            elem.removeAttribute(attr);
+          }
+        });
+        
+        // 递归处理子元素
+        Array.from(elem.children).forEach(child => {
+          removeProblematicAttrs(child);
+        });
+      };
+      
+      removeProblematicAttrs(svgElement);
+      
+      // 简化序列化
+      let svgString = svgElement.outerHTML;
+      
+      // 基本清理
+      svgString = svgString.replace(/vector-effect="[^"]*"/g, '');
+      svgString = svgString.replace(/xmlns:xlink="[^"]*"/g, '');
+      
+      // 确保命名空间正确
+      if (!svgString.includes('xmlns="http://www.w3.org/2000/svg"')) {
+        svgString = svgString.replace('<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
+      }
+      
+      console.log('huggingfaceOptimizedSvg2Base64: SVG string prepared:', {
+        length: svgString.length,
+        hasNamespace: svgString.includes('xmlns="http://www.w3.org/2000/svg"'),
+        preview: svgString.substring(0, 150) + '...'
+      });
+      
+      // 使用btoa进行编码（更兼容）
+      const base64 = btoa(unescape(encodeURIComponent(svgString)));
+      const result = PREFIX + base64;
+      
+      console.log('huggingfaceOptimizedSvg2Base64: Conversion successful, result length:', result.length);
+      return result;
+    }
+    
+    // 非SVG元素的处理
+    console.warn('huggingfaceOptimizedSvg2Base64: Element is not SVG, using fallback');
+    const rect = element.getBoundingClientRect();
+    const width = rect.width || 100;
+    const height = rect.height || 100;
+    
+    const fallbackSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+      <foreignObject width="100%" height="100%">
+        <div xmlns="http://www.w3.org/1999/xhtml">${element.innerHTML}</div>
+      </foreignObject>
+    </svg>`;
+    
+    const base64 = btoa(unescape(encodeURIComponent(fallbackSvg)));
+    return PREFIX + base64;
+    
+  } catch (error) {
+    console.error('huggingfaceOptimizedSvg2Base64: Conversion failed:', error);
+    
+    // 最终备选方案：创建简单的占位符SVG
+    const rect = element.getBoundingClientRect();
+    const width = rect.width || 100;
+    const height = rect.height || 100;
+    
+    const placeholderSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+      <rect width="100%" height="100%" fill="#f5f5f5" stroke="#ddd" stroke-width="1"/>
+      <text x="50%" y="50%" text-anchor="middle" dy="0.3em" font-family="Arial, sans-serif" font-size="14" fill="#999">SVG</text>
+    </svg>`;
+    
+    const base64 = btoa(unescape(encodeURIComponent(placeholderSvg)));
+    console.log('huggingfaceOptimizedSvg2Base64: Using placeholder SVG');
+    return PREFIX + base64;
+  }
 }