Upload 14 files

Dockerfile.hf

@@ -1,20 +1,26 @@
-# Hugging Face Spaces Dockerfile
+# Hugging Face Spaces Dockerfile - 修复版本
 FROM node:18-slim
 
-# Install dependencies for Puppeteer
+# Install dependencies for Puppeteer with updated Chrome repository
 RUN apt-get update \
-    && apt-get install -y wget gnupg \
-    && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
-    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
+    && apt-get install -y wget gnupg ca-certificates \
+    && wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | gpg --dearmor -o /usr/share/keyrings/googlechrome-linux-keyring.gpg \
+    && sh -c 'echo "deb [arch=amd64 signed-by=/usr/share/keyrings/googlechrome-linux-keyring.gpg] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
     && apt-get update \
-    && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf libxss1 \
-      --no-install-recommends \
+    && apt-get install -y google-chrome-stable fonts-liberation libappindicator3-1 libasound2 libatk-bridge2.0-0 \
+       libdrm2 libgtk-3-0 libnspr4 libnss3 libx11-xcb1 libxcomposite1 libxdamage1 libxrandr2 \
+       libgbm1 libxss1 libgconf-2-4 --no-install-recommends \
     && rm -rf /var/lib/apt/lists/*
 
+# Create a non-root user
+RUN groupadd -r pptruser && useradd -r -g pptruser -G audio,video pptruser \
+    && mkdir -p /home/pptruser/Downloads \
+    && chown -R pptruser:pptruser /home/pptruser
+
 # Set working directory
 WORKDIR /app
 
-# Copy package files
+# Copy package files first for better caching
 COPY package*.json ./
 
 # Install dependencies
@@ -23,7 +29,13 @@ RUN npm ci --only=production && npm cache clean --force
 # Copy application code
 COPY . .
 
-# Set Puppeteer to skip download (use system Chrome)
+# Change ownership to pptruser
+RUN chown -R pptruser:pptruser /app
+
+# Switch to non-root user
+USER pptruser
+
+# Set Puppeteer environment variables
 ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
 ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/google-chrome-stable
 
@@ -32,6 +44,7 @@ EXPOSE 7860
 
 # Set environment for HF Spaces
 ENV PORT=7860
+ENV NODE_ENV=production
 
 # Start the application
 CMD ["npm", "start"]

server.js

@@ -5,22 +5,24 @@ const helmet = require('helmet');
 const rateLimit = require('express-rate-limit');
 
 const app = express();
-const PORT = process.env.PORT || 7860; // 使用 HF Spaces 默认端口
+const PORT = process.env.PORT || 7860;
 
-// 中间件配置
-app.use(helmet());
+// 中间件配置 - HF Spaces 优化
+app.use(helmet({
+  contentSecurityPolicy: false // HF Spaces 需要
+}));
 app.use(cors());
-app.use(express.json());
+app.use(express.json({ limit: '10mb' }));
 
 // 速率限制 - HF Spaces 调整
 const limiter = rateLimit({
-  windowMs: 15 * 60 * 1000, // 15分钟
-  max: 50, // HF Spaces 降低到50个请求
+  windowMs: 15 * 60 * 1000,
+  max: 30, // 进一步降低限制
   message: {
     error: 'Too many requests, please try again later.'
   }
 });
-app.use(limiter);
+app.use('/screenshot', limiter);
 
 // 健康检查端点
 app.get('/', (req, res) => {
@@ -28,40 +30,52 @@ app.get('/', (req, res) => {
     message: 'Page Screenshot API - Hugging Face Spaces',
     version: '1.0.0',
     status: 'running',
-    platform: 'HuggingFace Spaces'
+    platform: 'HuggingFace Spaces',
+    endpoints: {
+      screenshot: 'POST /screenshot',
+      demo: 'GET /demo',
+      health: 'GET /'
+    }
   });
 });
 
-// 截图API端点
+// 截图API端点 - 增强错误处理
 app.post('/screenshot', async (req, res) => {
-  const { url, width = 1920, height = 1080, quality = 80 } = req.body;
+  const { url, width = 1280, height = 720, quality = 75 } = req.body;
 
   // 参数验证
   if (!url) {
     return res.status(400).json({
-      error: 'URL is required'
+      error: 'URL is required',
+      example: { url: 'https://example.com', width: 1280, height: 720 }
     });
   }
 
   // URL格式验证
   try {
-    new URL(url);
+    const urlObj = new URL(url);
+    // 检查协议
+    if (!['http:', 'https:'].includes(urlObj.protocol)) {
+      return res.status(400).json({
+        error: 'Only HTTP and HTTPS URLs are supported'
+      });
+    }
   } catch (error) {
     return res.status(400).json({
       error: 'Invalid URL format'
     });
   }
 
-  // 分辨率验证 - HF Spaces 限制更严格
-  if (width < 100 || width > 2000 || height < 100 || height > 2000) {
+  // 分辨率验证 - HF Spaces 更严格限制
+  if (width < 100 || width > 1600 || height < 100 || height > 1200) {
     return res.status(400).json({
-      error: 'Width and height must be between 100 and 2000 pixels for HF Spaces'
+      error: 'Width must be 100-1600px, height must be 100-1200px for HF Spaces'
     });
   }
 
   let browser;
   try {
-    // 启动浏览器 - HF Spaces 优化配置
+    // 启动浏览器 - HF Spaces 专用配置
     const browserOptions = {
       headless: 'new',
       args: [
@@ -75,7 +89,11 @@ app.post('/screenshot', async (req, res) => {
         '--disable-extensions',
         '--disable-background-timer-throttling',
         '--disable-backgrounding-occluded-windows',
-        '--disable-renderer-backgrounding'
+        '--disable-renderer-backgrounding',
+        '--disable-features=TranslateUI',
+        '--disable-default-apps',
+        '--no-default-browser-check',
+        '--disable-background-networking'
       ]
     };
 
@@ -84,6 +102,7 @@ app.post('/screenshot', async (req, res) => {
       browserOptions.executablePath = process.env.PUPPETEER_EXECUTABLE_PATH;
     }
 
+    console.log('Launching browser...');
     browser = await puppeteer.launch(browserOptions);
 
     const page = await browser.newPage();
@@ -91,100 +110,186 @@ app.post('/screenshot', async (req, res) => {
     // 设置视窗大小
     await page.setViewport({
       width: parseInt(width),
-      height: parseInt(height)
+      height: parseInt(height),
+      deviceScaleFactor: 1
     });
 
-    // 设置超时和用户代理
-    await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36');
+    // 设置用户代理和其他页面选项
+    await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36');
     
-    // 访问页面 - HF Spaces 缩短超时时间
+    // 拦截不必要的资源以提高性能
+    await page.setRequestInterception(true);
+    page.on('request', (req) => {
+      const resourceType = req.resourceType();
+      if (['font', 'media'].includes(resourceType)) {
+        req.abort();
+      } else {
+        req.continue();
+      }
+    });
+
+    console.log(`Navigating to: ${url}`);
+    
+    // 访问页面 - HF Spaces 更短超时
     await page.goto(url, {
-      waitUntil: 'networkidle2',
-      timeout: 20000 // 降低到20秒
+      waitUntil: 'domcontentloaded', // 更快的等待条件
+      timeout: 15000 // 15秒超时
     });
 
-    // 等待页面完全加载
-    await page.waitForTimeout(1500); // 降低等待时间
+    // 等待页面稳定
+    await page.waitForTimeout(1000);
 
+    console.log('Taking screenshot...');
+    
     // 截图
     const screenshot = await page.screenshot({
       type: 'jpeg',
-      quality: parseInt(quality),
+      quality: Math.max(10, Math.min(100, parseInt(quality))),
       fullPage: false
     });
 
+    console.log(`Screenshot taken: ${screenshot.length} bytes`);
+
     // 设置响应头
     res.set({
       'Content-Type': 'image/jpeg',
       'Content-Length': screenshot.length,
+      'Cache-Control': 'no-cache',
       'Content-Disposition': `inline; filename="screenshot-${Date.now()}.jpg"`
     });
 
     res.send(screenshot);
 
   } catch (error) {
-    console.error('Screenshot error:', error);
-    res.status(500).json({
+    console.error('Screenshot error:', error.message);
+    const errorResponse = {
       error: 'Failed to capture screenshot',
       message: error.message
-    });
+    };
+    
+    // 根据错误类型提供更好的错误信息
+    if (error.message.includes('timeout')) {
+      errorResponse.suggestion = 'Try a simpler webpage or reduce timeout';
+    } else if (error.message.includes('net::')) {
+      errorResponse.suggestion = 'Check if the URL is accessible';
+    }
+    
+    res.status(500).json(errorResponse);
   } finally {
     if (browser) {
-      await browser.close();
+      try {
+        await browser.close();
+        console.log('Browser closed');
+      } catch (closeError) {
+        console.error('Error closing browser:', closeError.message);
+      }
     }
   }
 });
 
-// HF Spaces 特殊端点：简单的演示界面
+// HF Spaces 演示界面 - 改进版
 app.get('/demo', (req, res) => {
   res.send(`
     <!DOCTYPE html>
     <html>
     <head>
-        <title>Page Screenshot API Demo</title>
+        <title>📸 Page Screenshot API Demo</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <style>
-            body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
-            .form-group { margin: 15px 0; }
-            input, button { padding: 10px; margin: 5px; }
-            input[type="text"], input[type="number"] { width: 300px; }
-            button { background: #007bff; color: white; border: none; cursor: pointer; }
-            button:hover { background: #0056b3; }
-            #result { margin-top: 20px; }
+            body { 
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; 
+                max-width: 800px; margin: 0 auto; padding: 20px; 
+                background: #f8f9fa;
+            }
+            .container { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
+            .form-group { margin: 20px 0; }
+            label { display: block; margin-bottom: 8px; font-weight: 600; color: #333; }
+            input[type="text"], input[type="number"] { 
+                width: 100%; padding: 12px; border: 2px solid #e1e5e9; 
+                border-radius: 6px; font-size: 16px; box-sizing: border-box;
+            }
+            input:focus { border-color: #007bff; outline: none; }
+            .input-row { display: flex; gap: 15px; }
+            .input-row > div { flex: 1; }
+            button { 
+                background: linear-gradient(135deg, #007bff, #0056b3); 
+                color: white; border: none; padding: 14px 28px; 
+                border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 600;
+                transition: transform 0.2s;
+            }
+            button:hover { transform: translateY(-1px); }
+            button:disabled { background: #6c757d; cursor: not-allowed; transform: none; }
+            #result { margin-top: 30px; }
+            .loading { color: #007bff; font-weight: 500; }
+            .error { color: #dc3545; background: #f8d7da; padding: 15px; border-radius: 6px; }
+            .success img { max-width: 100%; border-radius: 6px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
+            .examples { margin: 20px 0; }
+            .example-btn { 
+                background: #e9ecef; color: #495057; border: none; 
+                padding: 8px 12px; margin: 5px; border-radius: 4px; cursor: pointer; font-size: 14px;
+            }
+            .example-btn:hover { background: #dee2e6; }
         </style>
     </head>
     <body>
-        <h1>📸 Page Screenshot API</h1>
-        <p>Enter a URL to capture a screenshot:</p>
-        
-        <div class="form-group">
-            <label>URL:</label><br>
-            <input type="text" id="url" placeholder="https://example.com" value="https://google.com">
-        </div>
-        
-        <div class="form-group">
-            <label>Width:</label>
-            <input type="number" id="width" value="1280" min="100" max="2000">
-            <label>Height:</label>
-            <input type="number" id="height" value="720" min="100" max="2000">
-        </div>
-        
-        <div class="form-group">
-            <label>Quality:</label>
-            <input type="number" id="quality" value="80" min="1" max="100">
+        <div class="container">
+            <h1>📸 Page Screenshot API</h1>
+            <p>Enter a URL to capture a screenshot. Optimized for Hugging Face Spaces.</p>
+            
+            <div class="examples">
+                <strong>Try these examples:</strong><br>
+                <button class="example-btn" onclick="setExample('https://www.google.com')">Google</button>
+                <button class="example-btn" onclick="setExample('https://www.github.com')">GitHub</button>
+                <button class="example-btn" onclick="setExample('https://www.wikipedia.org')">Wikipedia</button>
+                <button class="example-btn" onclick="setExample('https://news.ycombinator.com')">Hacker News</button>
+            </div>
+            
+            <div class="form-group">
+                <label for="url">URL:</label>
+                <input type="text" id="url" placeholder="https://example.com" value="https://www.google.com">
+            </div>
+            
+            <div class="input-row">
+                <div>
+                    <label for="width">Width (px):</label>
+                    <input type="number" id="width" value="1280" min="100" max="1600">
+                </div>
+                <div>
+                    <label for="height">Height (px):</label>
+                    <input type="number" id="height" value="720" min="100" max="1200">
+                </div>
+                <div>
+                    <label for="quality">Quality:</label>
+                    <input type="number" id="quality" value="75" min="10" max="100">
+                </div>
+            </div>
+            
+            <button onclick="takeScreenshot()" id="captureBtn">Take Screenshot</button>
+            
+            <div id="result"></div>
         </div>
         
-        <button onclick="takeScreenshot()">Take Screenshot</button>
-        
-        <div id="result"></div>
-        
         <script>
+            function setExample(url) {
+                document.getElementById('url').value = url;
+            }
+            
             async function takeScreenshot() {
                 const url = document.getElementById('url').value;
                 const width = parseInt(document.getElementById('width').value);
                 const height = parseInt(document.getElementById('height').value);
                 const quality = parseInt(document.getElementById('quality').value);
+                const btn = document.getElementById('captureBtn');
                 
-                document.getElementById('result').innerHTML = 'Taking screenshot...';
+                if (!url) {
+                    document.getElementById('result').innerHTML = '<div class="error">Please enter a URL</div>';
+                    return;
+                }
+                
+                btn.disabled = true;
+                btn.textContent = 'Taking Screenshot...';
+                document.getElementById('result').innerHTML = '<div class="loading">📸 Capturing screenshot, please wait...</div>';
                 
                 try {
                     const response = await fetch('/screenshot', {
@@ -198,16 +303,33 @@ app.get('/demo', (req, res) => {
                     if (response.ok) {
                         const blob = await response.blob();
                         const imageUrl = URL.createObjectURL(blob);
+                        const size = (blob.size / 1024).toFixed(1);
                         document.getElementById('result').innerHTML = 
-                            '<h3>Screenshot Result:</h3><img src="' + imageUrl + '" style="max-width: 100%; border: 1px solid #ccc;">';
+                            '<div class="success"><h3>Screenshot Result:</h3>' +
+                            '<p>Size: ' + size + ' KB | Dimensions: ' + width + 'x' + height + '</p>' +
+                            '<img src="' + imageUrl + '" alt="Screenshot"><br><br>' +
+                            '<a href="' + imageUrl + '" download="screenshot.jpg" style="background: #28a745; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px;">Download Image</a></div>';
                     } else {
                         const error = await response.json();
-                        document.getElementById('result').innerHTML = 'Error: ' + error.error;
+                        document.getElementById('result').innerHTML = 
+                            '<div class="error"><strong>Error:</strong> ' + error.error + 
+                            (error.suggestion ? '<br><strong>Suggestion:</strong> ' + error.suggestion : '') + '</div>';
                     }
                 } catch (error) {
-                    document.getElementById('result').innerHTML = 'Error: ' + error.message;
+                    document.getElementById('result').innerHTML = 
+                        '<div class="error"><strong>Network Error:</strong> ' + error.message + '</div>';
+                } finally {
+                    btn.disabled = false;
+                    btn.textContent = 'Take Screenshot';
                 }
             }
+            
+            // Enter key support
+            document.getElementById('url').addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    takeScreenshot();
+                }
+            });
         </script>
     </body>
     </html>