Upload public.js

backend/src/routes/public.js

@@ -477,11 +477,18 @@ router.get('/screenshot/:userId/:pptId/:slideIndex?', async (req, res, next) =>
 
 // 🔥 关键修改：image端点现在直接返回SVG图片，不再返回截图工具页面
 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(`🖼️ Direct Image request: userId=${userId}, pptId=${pptId}, slideIndex=${slideIndex}, format=${format}`);
+    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());
     
     // Get PPT data
     const fileName = `${pptId}.json`;
@@ -502,59 +509,42 @@ router.get('/image/:userId/:pptId/:slideIndex?', async (req, res, next) => {
 
     if (!pptData) {
       console.log(`❌ PPT not found: ${pptId}`);
-      // 返回404图片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');
-      res.setHeader('Cache-Control', 'no-cache');
-      res.setHeader('Access-Control-Allow-Origin', '*');
       return res.send(notFoundSvg);
     }
 
     const slideIdx = parseInt(slideIndex);
     if (slideIdx >= pptData.slides.length || slideIdx < 0) {
       console.log(`❌ Invalid slide index: ${slideIndex}`);
-      // 返回404幻灯片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');
-      res.setHeader('Cache-Control', 'no-cache');
-      res.setHeader('Access-Control-Allow-Origin', '*');
       return res.send(invalidSlideSvg);
     }
 
     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 finalWidth = requestWidth ? parseInt(requestWidth) : defaultWidth;
-    const finalHeight = requestHeight ? parseInt(requestHeight) : defaultHeight;
     
-    // 生成PPT幻灯片的SVG图片
-    const slide = pptData.slides[slideIdx];
     const svgContent = generateSlideSVG(slide, pptData, { 
-      width: finalWidth, 
-      height: finalHeight 
+      width: defaultWidth, 
+      height: defaultHeight 
     });
     
-    console.log(`✅ SVG generated successfully, size: ${svgContent.length} characters`);
-    
-    // 设置正确的响应头，使其可以被其他网站作为图片引用
-    res.setHeader('Content-Type', 'image/svg+xml; charset=utf-8');
-    res.setHeader('Cache-Control', 'public, max-age=3600'); // 缓存1小时
-    res.setHeader('Access-Control-Allow-Origin', '*'); // 允许跨域引用
-    res.setHeader('X-Generation-Time', '< 10ms');
-    res.setHeader('X-Content-Source', 'direct-svg-generation');
-    res.setHeader('Content-Disposition', 'inline'); // 确保浏览器内联显示图片
+    console.log(`🎉 SVG generated successfully, returning image data`);
     
     // 直接返回SVG图片内容
     res.send(svgContent);
@@ -562,16 +552,17 @@ router.get('/image/:userId/:pptId/:slideIndex?', async (req, res, next) => {
   } catch (error) {
     console.error('❌ Image generation failed:', error);
     
-    // 返回错误图片SVG
+    // 确保仍然返回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: ${error.message}</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.setHeader('Content-Type', 'image/svg+xml; charset=utf-8');
-    res.setHeader('Cache-Control', 'no-cache');
-    res.setHeader('Access-Control-Allow-Origin', '*');
     res.send(errorSvg);
   }
 });
@@ -594,8 +585,7 @@ router.get('/screenshot-data/:userId/:pptId/:slideIndex?', async (req, res, next
         if (result) {
           pptData = result.content;
           break;
-        }
-      } catch (error) {
+        } catch (error) {
         continue;
       }
     }