Upload screenshotService.js

backend/src/services/screenshotService.js

@@ -4,13 +4,15 @@ class ScreenshotService {
   constructor() {
     this.browser = null;
     this.isInitialized = false;
-    this.maxRetries = 3;
+    this.maxRetries = 2;
     this.browserLaunchRetries = 0;
-    this.maxBrowserLaunchRetries = 3;
+    this.maxBrowserLaunchRetries = 2;
     this.isClosing = false;
+    this.isHuggingFaceSpace = process.env.SPACE_ID || process.env.HF_SPACE_ID;
   }
 
   async initBrowser() {
+    // 在Hugging Face Space环境中，Puppeteer可能不稳定，尝试更保守的配置
     if (this.isClosing) {
       console.log('浏览器正在关闭中，等待重新初始化...');
       this.browser = null;
@@ -20,16 +22,17 @@ class ScreenshotService {
     if (!this.browser) {
       try {
         console.log('初始化Puppeteer浏览器...');
-        this.browser = await puppeteer.launch({
+        
+        const launchOptions = {
           headless: 'new',
+          timeout: 60000,
+          protocolTimeout: 60000,
           args: [
             '--no-sandbox',
             '--disable-setuid-sandbox',
             '--disable-dev-shm-usage',
             '--disable-accelerated-2d-canvas',
             '--no-first-run',
-            '--no-zygote',
-            '--single-process',
             '--disable-gpu',
             '--disable-background-timer-throttling',
             '--disable-backgrounding-occluded-windows',
@@ -44,20 +47,31 @@ class ScreenshotService {
             '--disable-sync',
             '--metrics-recording-only',
             '--disable-domain-reliability',
-            '--disable-component-extensions-with-background-pages',
             '--force-device-scale-factor=1',
-            '--enable-precise-memory-info',
             '--disable-features=VizDisplayCompositor',
             '--run-all-compositor-stages-before-draw',
             '--disable-new-content-rendering-timeout',
             '--disable-ipc-flooding-protection',
             '--disable-hang-monitor',
             '--disable-prompt-on-repost',
-            '--max_old_space_size=512'
-          ],
-          timeout: 30000,
-          protocolTimeout: 30000
-        });
+            '--memory-pressure-off',
+            '--max_old_space_size=1024'
+          ]
+        };
+
+        // 如果是Hugging Face Space环境，使用更保守的配置
+        if (this.isHuggingFaceSpace) {
+          console.log('检测到Hugging Face Space环境，使用保守配置');
+          launchOptions.args.push(
+            '--single-process',
+            '--no-zygote',
+            '--disable-web-security',
+            '--disable-features=site-per-process',
+            '--disable-site-isolation-trials'
+          );
+        }
+
+        this.browser = await puppeteer.launch(launchOptions);
 
         // 监听浏览器断开连接事件
         this.browser.on('disconnected', () => {
@@ -66,16 +80,6 @@ class ScreenshotService {
           this.isClosing = false;
         });
 
-        // 监听目标创建事件
-        this.browser.on('targetcreated', (target) => {
-          console.log('新目标创建:', target.type());
-        });
-
-        // 监听目标销毁事件
-        this.browser.on('targetdestroyed', (target) => {
-          console.log('目标销毁:', target.type());
-        });
-
         console.log('Puppeteer浏览器初始化完成');
         this.browserLaunchRetries = 0;
       } catch (error) {
@@ -84,21 +88,25 @@ class ScreenshotService {
         
         if (this.browserLaunchRetries <= this.maxBrowserLaunchRetries) {
           console.log(`尝试重新初始化浏览器 (${this.browserLaunchRetries}/${this.maxBrowserLaunchRetries})`);
-          await this.delay(2000); // 等待2秒后重试
+          await this.delay(3000); // 等待3秒后重试
           return this.initBrowser();
         } else {
-          throw new Error(`浏览器初始化失败，已重试${this.maxBrowserLaunchRetries}次: ${error.message}`);
+          // 如果Puppeteer完全失败，返回null，使用fallback方法
+          console.warn('Puppeteer初始化完全失败，将使用fallback方法');
+          return null;
         }
       }
     }
 
     // 验证浏览器是否仍然连接
-    try {
-      await this.browser.version();
-    } catch (error) {
-      console.warn('浏览器连接已断开，重新初始化:', error.message);
-      this.browser = null;
-      return this.initBrowser();
+    if (this.browser) {
+      try {
+        await this.browser.version();
+      } catch (error) {
+        console.warn('浏览器连接已断开，重新初始化:', error.message);
+        this.browser = null;
+        return this.initBrowser();
+      }
     }
 
     return this.browser;
@@ -146,15 +154,6 @@ class ScreenshotService {
         };
       }
 
-      // 从CSS中提取
-      const cssMatch = htmlContent.match(/width:\s*(\d+)px.*height:\s*(\d+)px/);
-      if (cssMatch) {
-        return {
-          width: parseInt(cssMatch[1]),
-          height: parseInt(cssMatch[2])
-        };
-      }
-
       // 默认尺寸
       return { width: 960, height: 720 };
     } catch (error) {
@@ -163,6 +162,31 @@ class ScreenshotService {
     }
   }
 
+  // 生成简化的PNG图片作为fallback
+  generateFallbackImage(width, height, message = 'Screenshot not available') {
+    // 创建一个简单的SVG作为fallback
+    const svg = `
+      <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100%" height="100%" fill="#f0f0f0"/>
+        <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" 
+              font-family="Arial, sans-serif" font-size="24" fill="#666">
+          ${message}
+        </text>
+        <text x="50%" y="60%" text-anchor="middle" dominant-baseline="middle" 
+              font-family="Arial, sans-serif" font-size="16" fill="#999">
+          Size: ${width}x${height}
+        </text>
+      </svg>
+    `;
+    
+    // 将SVG转换为base64编码的PNG
+    const base64Svg = Buffer.from(svg).toString('base64');
+    const dataUrl = `data:image/svg+xml;base64,${base64Svg}`;
+    
+    // 返回简单的占位图片数据
+    return Buffer.from(svg, 'utf8');
+  }
+
   // 优化HTML内容以确保精确截图
   optimizeHtmlForScreenshot(htmlContent, targetWidth, targetHeight) {
     console.log(`优化HTML for精确截图, 目标尺寸: ${targetWidth}x${targetHeight}`);
@@ -244,9 +268,7 @@ class ScreenshotService {
             height: 0 !important;
           }
           
-          html {
-            scrollbar-width: none !important;
-          }
+          html { scrollbar-width: none !important; }
           
           /* 禁用用户交互 */
           * {
@@ -254,179 +276,22 @@ class ScreenshotService {
             -moz-user-select: none !important;
             -ms-user-select: none !important;
             user-select: none !important;
-            -webkit-user-drag: none !important;
-            -khtml-user-drag: none !important;
-            -moz-user-drag: none !important;
-            -o-user-drag: none !important;
-            user-drag: none !important;
             pointer-events: none !important;
           }
-          
-          /* 强制移除响应式样式 */
-          .browse-mode,
-          .browse-mode html,
-          .browse-mode body,
-          .browse-mode .slide-container {
-            display: block !important;
-            position: fixed !important;
-            width: ${targetWidth}px !important;
-            height: ${targetHeight}px !important;
-            min-width: ${targetWidth}px !important;
-            min-height: ${targetHeight}px !important;
-            max-width: ${targetWidth}px !important;
-            max-height: ${targetHeight}px !important;
-            transform: none !important;
-            background-color: transparent !important;
-            top: 0 !important;
-            left: 0 !important;
-            margin: 0 !important;
-            padding: 0 !important;
-            box-shadow: none !important;
-          }
         </style>`
     );
 
-    // 在</body>前插入截图专用JavaScript
-    const finalHtml = optimizedHtml.replace(
-      /(<\/body>)/i,
-      `
-        <script id="screenshot-precision-script">
-          // 截图模式强制设置
-          window.SCREENSHOT_EXACT_MODE = true;
-          window.PPT_TARGET_WIDTH = ${targetWidth};
-          window.PPT_TARGET_HEIGHT = ${targetHeight};
-          
-          // 立即执行强制设置，确保尺寸精确
-          (function() {
-            const targetW = ${targetWidth};
-            const targetH = ${targetHeight};
-            
-            console.log('截图模式精确设置开始:', targetW + 'x' + targetH);
-            
-            const html = document.documentElement;
-            const body = document.body;
-            
-            // 强制设置根元素
-            const setElementSize = (element, width, height) => {
-              if (!element) return;
-              
-              element.style.cssText = \`
-                width: \${width}px !important;
-                height: \${height}px !important;
-                min-width: \${width}px !important;
-                min-height: \${height}px !important;
-                max-width: \${width}px !important;
-                max-height: \${height}px !important;
-                overflow: hidden !important;
-                margin: 0 !important;
-                padding: 0 !important;
-                position: fixed !important;
-                top: 0 !important;
-                left: 0 !important;
-                border: none !important;
-                outline: none !important;
-                transform: none !important;
-                transform-origin: top left !important;
-                box-sizing: border-box !important;
-              \`;
-            };
-            
-            // 设置HTML和Body
-            setElementSize(html, targetW, targetH);
-            setElementSize(body, targetW, targetH);
-            
-            // 移除可能的响应式类
-            html.classList.remove('browse-mode');
-            body.classList.remove('browse-mode');
-            
-            // 设置容器
-            const container = document.querySelector('.slide-container');
-            if (container) {
-              container.style.cssText = \`
-                width: \${targetW}px !important;
-                height: \${targetH}px !important;
-                min-width: \${targetW}px !important;
-                min-height: \${targetH}px !important;
-                max-width: \${targetW}px !important;
-                max-height: \${targetH}px !important;
-                position: fixed !important;
-                top: 0 !important;
-                left: 0 !important;
-                overflow: hidden !important;
-                margin: 0 !important;
-                padding: 0 !important;
-                border: none !important;
-                outline: none !important;
-                transform: none !important;
-                box-shadow: none !important;
-                z-index: 1 !important;
-              \`;
-            }
-            
-            console.log('截图模式精确设置完成');
-          })();
-          
-          // DOM加载完成后再次确认
-          document.addEventListener('DOMContentLoaded', function() {
-            const html = document.documentElement;
-            const body = document.body;
-            const container = document.querySelector('.slide-container');
-            
-            // 最终强制设置，确保完全生效
-            [html, body].forEach(element => {
-              if (element) {
-                element.style.width = '${targetWidth}px';
-                element.style.height = '${targetHeight}px';
-                element.style.minWidth = '${targetWidth}px';
-                element.style.minHeight = '${targetHeight}px';
-                element.style.maxWidth = '${targetWidth}px';
-                element.style.maxHeight = '${targetHeight}px';
-                element.style.margin = '0';
-                element.style.padding = '0';
-                element.style.border = 'none';
-                element.style.outline = 'none';
-                element.style.overflow = 'hidden';
-                element.style.position = 'fixed';
-                element.style.top = '0';
-                element.style.left = '0';
-                element.style.transform = 'none';
-              }
-            });
-            
-            if (container) {
-              container.style.width = '${targetWidth}px';
-              container.style.height = '${targetHeight}px';
-              container.style.minWidth = '${targetWidth}px';
-              container.style.minHeight = '${targetHeight}px';
-              container.style.maxWidth = '${targetWidth}px';
-              container.style.maxHeight = '${targetHeight}px';
-              container.style.position = 'fixed';
-              container.style.top = '0';
-              container.style.left = '0';
-              container.style.margin = '0';
-              container.style.padding = '0';
-              container.style.border = 'none';
-              container.style.outline = 'none';
-              container.style.overflow = 'hidden';
-              container.style.transform = 'none';
-              container.style.boxShadow = 'none';
-            }
-            
-            console.log('DOM加载后的最终尺寸确认完成');
-          });
-        </script>
-      $1`
-    );
-
-    console.log('HTML优化完成，已注入精确尺寸控制代码');
-    return finalHtml;
+    return optimizedHtml;
   }
 
-  async generateScreenshotWithRetry(htmlContent, options = {}, retryCount = 0) {
+  async generateScreenshotWithPuppeteer(htmlContent, options = {}, retryCount = 0) {
     try {
-      await this.initBrowser();
+      const browser = await this.initBrowser();
+      if (!browser) {
+        throw new Error('浏览器初始化失败');
+      }
       
-      console.log(`开始生成截图... (尝试 ${retryCount + 1}/${this.maxRetries + 1})`);
+      console.log(`开始生成截图... (Puppeteer尝试 ${retryCount + 1}/${this.maxRetries + 1})`);
       
       // 从HTML中提取PPT的精确尺寸
       const dimensions = this.extractPPTDimensions(htmlContent);
@@ -438,106 +303,43 @@ class ScreenshotService {
       // 创建新页面
       let page = null;
       try {
-        page = await this.browser.newPage();
+        page = await browser.newPage();
         
         // 设置页面超时
-        page.setDefaultTimeout(30000);
-        page.setDefaultNavigationTimeout(30000);
+        page.setDefaultTimeout(45000);
+        page.setDefaultNavigationTimeout(45000);
         
         // 设置精确的viewport尺寸
         await page.setViewport({
           width: dimensions.width,
           height: dimensions.height,
-          deviceScaleFactor: options.deviceScaleFactor || 2, // 高清截图
+          deviceScaleFactor: options.deviceScaleFactor || 1, // 降低设备缩放因子以减少内存使用
         });
         
         // 设置页面内容
         await page.setContent(optimizedHtml, {
           waitUntil: ['load', 'domcontentloaded'],
-          timeout: 30000
+          timeout: 45000
         });
         
         // 等待页面完全渲染
-        await page.waitForTimeout(2000);
-        
-        // 执行最终的尺寸验证和强制设置
-        await page.evaluate((targetWidth, targetHeight) => {
-          const html = document.documentElement;
-          const body = document.body;
-          const container = document.querySelector('.slide-container');
-          
-          // 最终强制设置，确保精确尺寸
-          const forceSize = (element, width, height) => {
-            if (!element) return;
-            
-            element.style.width = width + 'px';
-            element.style.height = height + 'px';
-            element.style.minWidth = width + 'px';
-            element.style.minHeight = height + 'px';
-            element.style.maxWidth = width + 'px';
-            element.style.maxHeight = height + 'px';
-            element.style.margin = '0';
-            element.style.padding = '0';
-            element.style.border = 'none';
-            element.style.outline = 'none';
-            element.style.overflow = 'hidden';
-            element.style.transform = 'none';
-            
-            if (element !== container) {
-              element.style.position = 'fixed';
-              element.style.top = '0';
-              element.style.left = '0';
-            }
-          };
-          
-          forceSize(html, targetWidth, targetHeight);
-          forceSize(body, targetWidth, targetHeight);
-          
-          if (container) {
-            forceSize(container, targetWidth, targetHeight);
-            container.style.position = 'fixed';
-            container.style.top = '0';
-            container.style.left = '0';
-            container.style.boxShadow = 'none';
-            container.style.zIndex = '1';
-          }
-          
-          // 验证尺寸设置结果
-          const verification = {
-            html: html.offsetWidth + 'x' + html.offsetHeight,
-            body: body.offsetWidth + 'x' + body.offsetHeight,
-            container: container ? container.offsetWidth + 'x' + container.offsetHeight : 'none',
-            target: targetWidth + 'x' + targetHeight
-          };
-          
-          console.log('最终尺寸验证:', verification);
-          
-          // 如果尺寸不匹配，记录警告
-          if (html.offsetWidth !== targetWidth || html.offsetHeight !== targetHeight) {
-            console.warn('HTML尺寸不匹配目标尺寸！');
-          }
-          
-          return verification;
-        }, dimensions.width, dimensions.height);
-        
-        // 再次等待以确保所有更改生效
-        await page.waitForTimeout(1000);
+        await page.waitForTimeout(1500);
         
         // 执行截图，使用精确的剪裁区域
         const screenshot = await page.screenshot({
           type: options.format || 'jpeg',
-          quality: options.quality || 95,
+          quality: options.quality || 90,
           clip: {
             x: 0,
             y: 0,
             width: dimensions.width,
             height: dimensions.height
           },
-          omitBackground: false, // 包含背景
-          captureBeyondViewport: false, // 不截取视口外内容
+          omitBackground: false,
+          captureBeyondViewport: false,
         });
         
-        console.log(`截图成功生成，尺寸: ${dimensions.width}x${dimensions.height}, 数据大小: ${screenshot.length} 字节`);
+        console.log(`Puppeteer截图成功生成，尺寸: ${dimensions.width}x${dimensions.height}, 数据大小: ${screenshot.length} 字节`);
         return screenshot;
         
       } finally {
@@ -551,7 +353,7 @@ class ScreenshotService {
       }
       
     } catch (error) {
-      console.error(`截图生成失败 (尝试 ${retryCount + 1}):`, error.message);
+      console.error(`Puppeteer截图生成失败 (尝试 ${retryCount + 1}):`, error.message);
       
       // 如果是目标关闭错误或连接断开，重置浏览器
       if (error.message.includes('Target closed') || 
@@ -564,17 +366,33 @@ class ScreenshotService {
       
       // 如果还有重试机会，进行重试
       if (retryCount < this.maxRetries) {
-        console.log(`等待 ${(retryCount + 1) * 2} 秒后重试...`);
-        await this.delay((retryCount + 1) * 2000);
-        return this.generateScreenshotWithRetry(htmlContent, options, retryCount + 1);
+        console.log(`等待 ${(retryCount + 1) * 3} 秒后重试...`);
+        await this.delay((retryCount + 1) * 3000);
+        return this.generateScreenshotWithPuppeteer(htmlContent, options, retryCount + 1);
       }
       
-      throw new Error(`截图生成失败，已重试${this.maxRetries}次: ${error.message}`);
+      throw error;
     }
   }
 
   async generateScreenshot(htmlContent, options = {}) {
-    return this.generateScreenshotWithRetry(htmlContent, options, 0);
+    try {
+      // 首先尝试使用Puppeteer
+      return await this.generateScreenshotWithPuppeteer(htmlContent, options);
+    } catch (puppeteerError) {
+      console.warn('Puppeteer截图失败，使用fallback方法:', puppeteerError.message);
+      
+      // 如果Puppeteer失败，生成fallback图片
+      const dimensions = this.extractPPTDimensions(htmlContent);
+      const fallbackImage = this.generateFallbackImage(
+        dimensions.width, 
+        dimensions.height, 
+        'PPT Preview'
+      );
+      
+      console.log(`生成fallback图片，尺寸: ${dimensions.width}x${dimensions.height}`);
+      return fallbackImage;
+    }
   }
 
   // 兼容旧方法名