Upload 4 files

Dockerfile

@@ -1,37 +1,30 @@
-# 轻量级 HF Spaces Dockerfile
-FROM ghcr.io/puppeteer/puppeteer:21.5.2
-
-# 切换到 root 用户进行安装
-USER root
-
-# 安装额外的字体和依赖
-RUN apt-get update && apt-get install -y \
-    fonts-liberation \
-    fonts-dejavu-core \
-    && rm -rf /var/lib/apt/lists/*
-
-# 设置工作目录
-WORKDIR /usr/src/app
-
-# 复制 package 文件
-COPY package*.json ./
-
-# 安装依赖
-RUN npm ci --only=production && npm cache clean --force
-
-# 复制应用代码
-COPY . .
-
-# 切换回非 root 用户
-USER pptruser
-
-# 设置环境变量
-ENV NODE_ENV=production
-ENV PORT=7860
-ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/google-chrome-stable
-
-# 暴露端口
-EXPOSE 7860
-
-# 启动命令
+# 最简 HF Spaces Dockerfile - 修复版
+FROM ghcr.io/puppeteer/puppeteer:21.5.2
+
+# 直接设置工作目录
+WORKDIR /usr/src/app
+
+# 复制 package 文件
+COPY package*.json ./
+
+# 切换到 root 用户安装依赖
+USER root
+
+# 安装 Node.js 依赖
+RUN npm ci --only=production && npm cache clean --force
+
+# 复制应用代码
+COPY . .
+
+# 切换回非 root 用户
+USER pptruser
+
+# 设置环境变量
+ENV NODE_ENV=production
+ENV PORT=7860
+
+# 暴露端口
+EXPOSE 7860
+
+# 启动命令
 CMD ["npm", "start"]

README.md

@@ -10,138 +10,47 @@ license: mit
 
 # Page Screenshot API
 
-A web service that captures screenshots of web pages using Puppeteer.
+A web service that captures screenshots of web pages using Puppeteer, optimized for Hugging Face Spaces.
 
 ## Features
 - Web page screenshot capture
-- Customizable dimensions (width/height)
+- Customizable dimensions (width/height) 
 - Adjustable image quality
 - Rate limiting for API protection
 - CORS enabled for cross-origin requests
+- Interactive demo interface
+
+## Live Demo
+Visit `/demo` to try the interactive screenshot tool!
 
 ## API Usage
 
 ### POST /screenshot
-
-Capture a screenshot of a web page.
-
-**Request Body:**
 ```json
 {
   "url": "https://example.com",
-  "width": 1920,
-  "height": 1080,
-  "quality": 80
+  "width": 1280,
+  "height": 720,
+  "quality": 75
 }
 ```
 
-**Parameters:**
-- `url` (required): The URL of the webpage to capture
-- `width` (optional): Screenshot width in pixels (default: 1920, range: 100-4000)
-- `height` (optional): Screenshot height in pixels (default: 1080, range: 100-4000)
-- `quality` (optional): JPEG quality (default: 80, range: 1-100)
-
-**Response:**
-Returns the screenshot as a JPEG image.
+**HF Spaces Limits:**
+- Width: 100-1600px
+- Height: 100-1200px  
+- Timeout: 15 seconds
+- Rate limit: 30 requests/15min
 
 ### GET /
+Health check endpoint
 
-Health check endpoint that returns API status.
+### GET /demo
+Interactive demo interface
 
 ## Example Usage
-
 ```bash
-curl -X POST https://your-app.railway.app/screenshot \
+curl -X POST /screenshot \
   -H "Content-Type: application/json" \
-  -d '{"url": "https://example.com", "width": 1280, "height": 720}' \
+  -d '{"url": "https://google.com", "width": 1280, "height": 720}' \
   --output screenshot.jpg
-```
-
-## Rate Limiting
-
-- 100 requests per 15 minutes per IP address
-
-## Deployment
-
-This application can be deployed on various platforms:
-- Hugging Face Spaces (Docker)
-- Railway
-- Render.com
-- Vercel
-
-For detailed deployment instructions, see `DEPLOYMENT_GUIDE.md`.
-
-## Railway部署指南
-
-### 1. 准备部署
-确保你的项目包含以下文件：
-- `Dockerfile` - 容器化配置
-- `railway.toml` - Railway部署配置
-- `package.json` - 依赖和启动脚本
-
-### 2. 部署到Railway
-有两种方式部署到Railway：
-
-#### 方式一：通过GitHub连接（推荐）
-1. 将代码推送到GitHub仓库
-2. 访问 [Railway.app](https://railway.app)
-3. 登录并点击 "New Project"
-4. 选择 "Deploy from GitHub repo"
-5. 选择你的仓库
-6. Railway会自动检测Dockerfile并开始部署
-
-#### 方式二：使用Railway CLI
-```bash
-# 安装Railway CLI
-npm install -g @railway/cli
-
-# 登录Railway
-railway login
-
-# 初始化项目
-railway init
-
-# 部署
-railway up
-```
-
-### 3. 环境变量配置
-在Railway控制台的Variables标签中添加：
-- `NODE_ENV=production`
-- `PORT` (Railway自动设置，无需手动配置)
-
-### 4. 资源配置
-推荐配置：
-- CPU: 1 vCPU
-- Memory: 1GB RAM
-
-这些配置已在 `railway.toml` 中预设。
-
-### 5. 自定义域名（可选）
-在Railway控制台的Settings > Domains中可以：
-- 使用Railway提供的免费子域名
-- 绑定你自己的域名
-
-### 6. 监控和日志
-- 在Railway控制台的Deployments标签查看部署状态
-- 在Metrics标签监控资源使用情况
-- 在Variables标签管理环境变量
-
-### 故障排除
-如果部署失败，检查：
-1. Dockerfile语法是否正确
-2. package.json中的start脚本是否正确
-3. 依赖包是否都已安装
-4. 内存使用是否超出限制
-
-### 部署后测试
-```bash
-# 健康检查
-curl https://your-app.railway.app/
-
-# 截图测试
-curl -X POST https://your-app.railway.app/screenshot \
-  -H "Content-Type: application/json" \
-  -d '{"url": "https://google.com"}' \
-  --output test-screenshot.jpg
 ```

server.js

@@ -9,15 +9,15 @@ const PORT = process.env.PORT || 7860;
 
 // 中间件配置 - HF Spaces 优化
 app.use(helmet({
-  contentSecurityPolicy: false // HF Spaces 需要
+  contentSecurityPolicy: false
 }));
 app.use(cors());
 app.use(express.json({ limit: '10mb' }));
 
-// 速率限制 - HF Spaces 调整
+// 速率限制
 const limiter = rateLimit({
   windowMs: 15 * 60 * 1000,
-  max: 30, // 进一步降低限制
+  max: 30,
   message: {
     error: 'Too many requests, please try again later.'
   }
@@ -39,11 +39,10 @@ app.get('/', (req, res) => {
   });
 });
 
-// 截图API端点 - 增强错误处理
+// 截图API端点
 app.post('/screenshot', async (req, res) => {
   const { url, width = 1280, height = 720, quality = 75 } = req.body;
 
-  // 参数验证
   if (!url) {
     return res.status(400).json({
       error: 'URL is required',
@@ -51,10 +50,8 @@ app.post('/screenshot', async (req, res) => {
     });
   }
 
-  // URL格式验证
   try {
     const urlObj = new URL(url);
-    // 检查协议
     if (!['http:', 'https:'].includes(urlObj.protocol)) {
       return res.status(400).json({
         error: 'Only HTTP and HTTPS URLs are supported'
@@ -66,7 +63,6 @@ app.post('/screenshot', async (req, res) => {
     });
   }
 
-  // 分辨率验证 - HF Spaces 更严格限制
   if (width < 100 || width > 1600 || height < 100 || height > 1200) {
     return res.status(400).json({
       error: 'Width must be 100-1600px, height must be 100-1200px for HF Spaces'
@@ -75,8 +71,10 @@ app.post('/screenshot', async (req, res) => {
 
   let browser;
   try {
-    // 启动浏览器 - HF Spaces 专用配置
-    const browserOptions = {
+    console.log('Launching browser...');
+    
+    // HF Spaces 优化配置 - 使用 Puppeteer 镜像的默认 Chrome
+    browser = await puppeteer.launch({
       headless: 'new',
       args: [
         '--no-sandbox',
@@ -89,35 +87,21 @@ app.post('/screenshot', async (req, res) => {
         '--disable-extensions',
         '--disable-background-timer-throttling',
         '--disable-backgrounding-occluded-windows',
-        '--disable-renderer-backgrounding',
-        '--disable-features=TranslateUI',
-        '--disable-default-apps',
-        '--no-default-browser-check',
-        '--disable-background-networking'
+        '--disable-renderer-backgrounding'
       ]
-    };
-
-    // 在 HF Spaces 中使用系统 Chrome
-    if (process.env.PUPPETEER_EXECUTABLE_PATH) {
-      browserOptions.executablePath = process.env.PUPPETEER_EXECUTABLE_PATH;
-    }
-
-    console.log('Launching browser...');
-    browser = await puppeteer.launch(browserOptions);
+    });
 
     const page = await browser.newPage();
     
-    // 设置视窗大小
     await page.setViewport({
       width: parseInt(width),
       height: parseInt(height),
       deviceScaleFactor: 1
     });
 
-    // 设置用户代理和其他页面选项
     await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36');
     
-    // 拦截不必要的资源以提高性能
+    // 拦截资源以提高性能
     await page.setRequestInterception(true);
     page.on('request', (req) => {
       const resourceType = req.resourceType();
@@ -130,18 +114,15 @@ app.post('/screenshot', async (req, res) => {
 
     console.log(`Navigating to: ${url}`);
     
-    // 访问页面 - HF Spaces 更短超时
     await page.goto(url, {
-      waitUntil: 'domcontentloaded', // 更快的等待条件
-      timeout: 15000 // 15秒超时
+      waitUntil: 'domcontentloaded',
+      timeout: 15000
     });
 
-    // 等待页面稳定
     await page.waitForTimeout(1000);
 
     console.log('Taking screenshot...');
     
-    // 截图
     const screenshot = await page.screenshot({
       type: 'jpeg',
       quality: Math.max(10, Math.min(100, parseInt(quality))),
@@ -150,7 +131,6 @@ app.post('/screenshot', async (req, res) => {
 
     console.log(`Screenshot taken: ${screenshot.length} bytes`);
 
-    // 设置响应头
     res.set({
       'Content-Type': 'image/jpeg',
       'Content-Length': screenshot.length,
@@ -167,7 +147,6 @@ app.post('/screenshot', async (req, res) => {
       message: error.message
     };
     
-    // 根据错误类型提供更好的错误信息
     if (error.message.includes('timeout')) {
       errorResponse.suggestion = 'Try a simpler webpage or reduce timeout';
     } else if (error.message.includes('net::')) {
@@ -187,7 +166,7 @@ app.post('/screenshot', async (req, res) => {
   }
 });
 
-// HF Spaces 演示界面 - 改进版
+// HF Spaces 演示界面
 app.get('/demo', (req, res) => {
   res.send(`
     <!DOCTYPE html>