Upload public.js

backend/src/routes/public.js

@@ -357,7 +357,8 @@ router.post('/generate-share-link', async (req, res, next) => {
     }
 
     const baseUrl = process.env.PUBLIC_URL || req.get('host');
-    const protocol = process.env.NODE_ENV === 'production' ? 'https' : req.protocol;
+    // 修复协议判断：localhost 始终使用 http，生产环境使用 https
+    const protocol = baseUrl.includes('localhost') ? 'http' : 'https';
     
     const shareLinks = {
       // Single page share link
@@ -475,20 +476,13 @@ router.get('/screenshot/:userId/:pptId/:slideIndex?', async (req, res, next) =>
   }
 });
 
-// 🔥 关键修改：image端点现在直接返回SVG图片，不再返回截图工具页面
+// 🔥 关键修改：image端点现在支持多种格式，包括SVG和JPG
 router.get('/image/:userId/:pptId/:slideIndex?', async (req, res, next) => {
-  // 🚨 强制直接返回SVG图片 - 修复Hugging Face部署问题
   try {
     const { userId, pptId, slideIndex = 0 } = req.params;
+    const { format = 'svg', quality = 90, width: requestWidth, height: requestHeight } = req.query;
     
-    console.log(`🔥 FORCE SVG GENERATION: userId=${userId}, pptId=${pptId}, slideIndex=${slideIndex}`);
-    
-    // 立即设置SVG响应头，确保浏览器知道这是图片
-    res.setHeader('Content-Type', 'image/svg+xml; charset=utf-8');
-    res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
-    res.setHeader('Access-Control-Allow-Origin', '*');
-    res.setHeader('X-Force-Update', 'true');
-    res.setHeader('X-Timestamp', new Date().toISOString());
+    console.log(`🔥 Image request: userId=${userId}, pptId=${pptId}, slideIndex=${slideIndex}, format=${format}`);
     
     // Get PPT data
     const fileName = `${pptId}.json`;
@@ -509,61 +503,131 @@ router.get('/image/:userId/:pptId/:slideIndex?', async (req, res, next) => {
 
     if (!pptData) {
       console.log(`❌ PPT not found: ${pptId}`);
-      const notFoundSvg = `<svg width="800" height="450" xmlns="http://www.w3.org/2000/svg">
-        <rect width="100%" height="100%" fill="#f8f9fa"/>
-        <text x="400" y="200" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" fill="#6c757d">PPT Not Found</text>
-        <text x="400" y="250" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6c757d">PPT ${pptId} does not exist</text>
-        <text x="400" y="300" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#999">${new Date().toISOString()}</text>
-      </svg>`;
       
-      return res.send(notFoundSvg);
+      if (format === 'svg') {
+        const notFoundSvg = `<svg width="800" height="450" xmlns="http://www.w3.org/2000/svg">
+          <rect width="100%" height="100%" fill="#f8f9fa"/>
+          <text x="400" y="200" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" fill="#6c757d">PPT Not Found</text>
+          <text x="400" y="250" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6c757d">PPT ${pptId} does not exist</text>
+          <text x="400" y="300" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#999">${new Date().toISOString()}</text>
+        </svg>`;
+        
+        res.setHeader('Content-Type', 'image/svg+xml; charset=utf-8');
+        return res.send(notFoundSvg);
+      } else {
+        // 对于JPG/PNG格式，返回截图工具页面
+        const errorPage = generateErrorPage('PPT Not Found', `PPT ${pptId} not found. Please check the PPT ID.`);
+        res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        return res.status(404).send(errorPage);
+      }
     }
 
     const slideIdx = parseInt(slideIndex);
     if (slideIdx >= pptData.slides.length || slideIdx < 0) {
       console.log(`❌ Invalid slide index: ${slideIndex}`);
-      const invalidSlideSvg = `<svg width="800" height="450" xmlns="http://www.w3.org/2000/svg">
-        <rect width="100%" height="100%" fill="#f8f9fa"/>
-        <text x="400" y="200" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" fill="#6c757d">Invalid Slide</text>
-        <text x="400" y="250" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6c757d">Slide ${slideIndex} not found</text>
-        <text x="400" y="300" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#999">${new Date().toISOString()}</text>
-      </svg>`;
       
-      return res.send(invalidSlideSvg);
+      if (format === 'svg') {
+        const invalidSlideSvg = `<svg width="800" height="450" xmlns="http://www.w3.org/2000/svg">
+          <rect width="100%" height="100%" fill="#f8f9fa"/>
+          <text x="400" y="200" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" fill="#6c757d">Invalid Slide</text>
+          <text x="400" y="250" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6c757d">Slide ${slideIndex} not found</text>
+          <text x="400" y="300" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#999">${new Date().toISOString()}</text>
+        </svg>`;
+        
+        res.setHeader('Content-Type', 'image/svg+xml; charset=utf-8');
+        return res.send(invalidSlideSvg);
+      } else {
+        const errorPage = generateErrorPage('Invalid Slide', `Slide ${slideIndex} not found in this PPT.`);
+        res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        return res.status(404).send(errorPage);
+      }
     }
 
-    console.log(`✅ Generating SVG for slide ${slideIdx}`);
-    
-    // 生成PPT幻灯片的SVG图片
-    const slide = pptData.slides[slideIdx];
-    const defaultWidth = pptData.viewportSize || 1000;
-    const defaultHeight = Math.ceil(defaultWidth * (pptData.viewportRatio || 0.5625));
-    
-    const svgContent = generateSlideSVG(slide, pptData, { 
-      width: defaultWidth, 
-      height: defaultHeight 
-    });
-    
-    console.log(`🎉 SVG generated successfully, returning image data`);
-    
-    // 直接返回SVG图片内容
-    res.send(svgContent);
+    // 根据格式处理
+    if (format === 'svg') {
+      // SVG格式 - 直接生成并返回
+      console.log(`✅ Generating SVG for slide ${slideIdx}`);
+      
+      const defaultWidth = pptData.viewportSize || 1000;
+      const defaultHeight = Math.ceil(defaultWidth * (pptData.viewportRatio || 0.5625));
+      const finalWidth = requestWidth ? parseInt(requestWidth) : defaultWidth;
+      const finalHeight = requestHeight ? parseInt(requestHeight) : defaultHeight;
+      
+      const slide = pptData.slides[slideIdx];
+      const svgContent = generateSlideSVG(slide, pptData, { 
+        width: finalWidth, 
+        height: finalHeight 
+      });
+      
+      console.log(`🎉 SVG generated successfully, returning image data`);
+      
+      res.setHeader('Content-Type', 'image/svg+xml; charset=utf-8');
+      res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+      res.setHeader('Access-Control-Allow-Origin', '*');
+      res.setHeader('X-Force-Update', 'true');
+      res.setHeader('X-Generation-Time', '< 10ms');
+      res.send(svgContent);
+      
+    } else {
+      // JPG/PNG格式 - 直接生成并返回图片
+      console.log(`✅ Generating ${format} image directly`);
+      
+      try {
+        // 使用共享模块生成HTML用于后端截图
+        const htmlContent = generateSlideHTML(pptData, slideIdx, { format: 'screenshot' });
+        
+        const screenshot = await screenshotService.generateScreenshot(htmlContent, {
+          format: format === 'jpg' ? 'jpeg' : format,
+          quality: parseInt(quality),
+          width: pptData.viewportSize || 1000,
+          height: Math.ceil((pptData.viewportSize || 1000) * (pptData.viewportRatio || 0.5625))
+        });
+        
+        res.setHeader('Content-Type', `image/${format === 'jpg' ? 'jpeg' : format}`);
+        res.setHeader('X-Screenshot-Type', 'backend-generated');
+        res.setHeader('X-Generation-Time', '2-5s');
+        res.setHeader('Cache-Control', 'public, max-age=3600'); // 缓存1小时
+        res.send(screenshot);
+        
+      } catch (error) {
+        console.error(`Backend ${format} generation failed:`, error);
+        
+        // 生成后备图片
+        const fallbackImage = screenshotService.generateFallbackImage(
+          pptData.viewportSize || 1000, 
+          Math.ceil((pptData.viewportSize || 1000) * (pptData.viewportRatio || 0.5625)),
+          `PPT ${format.toUpperCase()} Image`,
+          'Image generation failed'
+        );
+        
+        res.setHeader('Content-Type', 'image/svg+xml; charset=utf-8');
+        res.setHeader('X-Screenshot-Type', 'fallback-generated');
+        res.setHeader('X-Generation-Time', '< 50ms');
+        res.send(fallbackImage);
+      }
+    }
     
   } catch (error) {
     console.error('❌ Image generation failed:', error);
     
-    // 确保仍然返回SVG格式的错误信息
-    res.setHeader('Content-Type', 'image/svg+xml; charset=utf-8');
-    res.setHeader('Access-Control-Allow-Origin', '*');
-    
-    const errorSvg = `<svg width="800" height="450" xmlns="http://www.w3.org/2000/svg">
-      <rect width="100%" height="100%" fill="#ffe6e6"/>
-      <text x="400" y="200" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" fill="#cc0000">Generation Error</text>
-      <text x="400" y="250" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#cc0000">Failed to generate image</text>
-      <text x="400" y="300" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#999">${new Date().toISOString()}</text>
-    </svg>`;
-    
-    res.send(errorSvg);
+    // 根据格式返回错误
+    if (req.query.format === 'svg') {
+      res.setHeader('Content-Type', 'image/svg+xml; charset=utf-8');
+      res.setHeader('Access-Control-Allow-Origin', '*');
+      
+      const errorSvg = `<svg width="800" height="450" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100%" height="100%" fill="#ffe6e6"/>
+        <text x="400" y="200" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" fill="#cc0000">Generation Error</text>
+        <text x="400" y="250" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#cc0000">Failed to generate image</text>
+        <text x="400" y="300" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#999">${new Date().toISOString()}</text>
+      </svg>`;
+      
+      res.send(errorSvg);
+    } else {
+      const errorPage = generateErrorPage('Generation Error', 'Failed to generate the requested image format.');
+      res.setHeader('Content-Type', 'text/html; charset=utf-8');
+      res.status(500).send(errorPage);
+    }
   }
 });