WordPress-mShots-Proxy/server.js

const express = require('express');
const axios = require('axios');
const fs = require('fs');
const fsPromises = require('fs').promises;
const path = require('path');
const crypto = require('crypto');
const net = require('net');

// 全局错误捕获，防止进程退出
process.on('uncaughtException', (err) => {
  console.error('[FATAL] Uncaught Exception:', err);
});

process.on('unhandledRejection', (reason, promise) => {
  console.error('[FATAL] Unhandled Rejection:', reason);
});

require('dotenv').config();
const app = express();
const PORT = Number(process.env.PORT) || 11489;
const UPSTREAM_HOST = 'https://s0.wp.com';
const FALLBACK_HOST_BASE = 'https://image.thum.io/get/width/1024/crop/768/noanimate';
const CACHE_DIR = path.join(process.cwd(), 'cache');

fs.mkdirSync(CACHE_DIR, { recursive: true });

// 请求合并 Map (Deduplication)
const pendingRequests = new Map();

/**
 * 计算 SHA1 哈希
 * @param {string} input 
 * @returns {string}
 */
function sha1(input) {
  return crypto.createHash('sha1').update(input).digest('hex');
}

/**
 * 获取缓存文件路径
 * @param {string} key 
 * @returns {{data: string, meta: string}}
 */
function getCachePaths(key) {
  return {
    data: path.join(CACHE_DIR, `${key}.data`),
    meta: path.join(CACHE_DIR, `${key}.json`),
  };
}

/**
 * 验证响应是否为有效的图片
 * @param {number} status 
 * @param {object} headers 
 * @param {any} data 
 * @returns {boolean}
 */
function isValidImageResponse(status, headers, data) {
  const ct = (headers['content-type'] || '').toLowerCase();
  const lenHeader = headers['content-length'];
  const len = Array.isArray(data) ? data.length : (data?.byteLength || 0);
  const hasPositiveLength = (lenHeader ? parseInt(lenHeader, 10) > 0 : len > 0);

  // 过滤掉 GIF 图片 (通常是 mShots 的 "Generating" 占位图，约 9KB)
  // 我们不缓存这些图片，以便下次请求时能再次尝试获取真实截图
  if (ct.includes('image/gif') && len < 15000) {
    return false;
  }

  return status === 200 && ct.startsWith('image/') && hasPositiveLength;
}

/**
 * 检查主机是否开放 443 端口 (简单的 SSL 判断)
 * @param {string} host 
 * @returns {Promise<boolean>}
 */
function checkPort443(host) {
  return new Promise(resolve => {
    // 默认超时 1.5 秒，避免阻塞太久
    const socket = net.connect(443, host);
    socket.setTimeout(1500);
    socket.on('connect', () => {
      socket.end();
      resolve(true);
    });
    socket.on('error', () => {
      resolve(false);
    });
    socket.on('timeout', () => {
      socket.destroy();
      resolve(false);
    });
  });
}

/**
 * 解析目标 URL，支持自动补全协议
 * @param {string} rawPath 
 * @returns {Promise<string>}
 */
async function resolveTargetUrl(rawPath) {
  // 去除开头的 /
  let target = rawPath.startsWith('/') ? rawPath.slice(1) : rawPath;

  // 如果已经包含协议，直接返回
  if (target.startsWith('http://') || target.startsWith('https://')) {
    return target;
  }

  // 提取主机名
  let host = target.split('/')[0].split('?')[0];
  // 去除端口号（如果存在）
  const colonIndex = host.indexOf(':');
  if (colonIndex !== -1) {
    host = host.substring(0, colonIndex);
  }

  // 尝试检测 SSL
  const isHttps = await checkPort443(host);
  if (!isHttps) {
    console.log(`[protocol-detect] ${host} : 443 port closed or timeout, falling back to HTTP.`);
  }
  return isHttps ? `https://${target}` : `http://${target}`;
}

/**
 * 请求上游并处理重试
 * @param {string} upstreamUrl 
 * @param {number} tries 
 * @returns {Promise<any>}
 */
async function fetchUpstreamWithRetry(upstreamUrl, tries = 2) {
  let lastErr = null;
  for (let i = 0; i < tries; i++) {
    try {
      return await axios.get(upstreamUrl, {
        responseType: 'arraybuffer',
        headers: {
          'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120 Safari/537.36',
          'Accept': 'image/avif,image/webp,image/apng,image/*;q=0.8,*/*;q=0.5',
          'Host': 's0.wp.com',
        },
        maxRedirects: 5,
        timeout: 20000,
        // 禁用代理环境变量的干扰
        proxy: false,
        // 明确允许非 2xx 也返回给上层判断
        validateStatus: () => true,
      });
    } catch (err) {
      lastErr = err;
      console.error(`[upstream-error] try=${i + 1} url=${upstreamUrl} msg=${err.message}`);
      // 简单退避
      await new Promise(r => setTimeout(r, 300));
    }
  }
  if (lastErr) throw lastErr;
}

/**
 * 请求备用接口 (thum.io)
 * @param {string} targetUrl 
 * @returns {Promise<any>}
 */
async function fetchFallbackWithRetry(targetUrl) {
  // thum.io 格式: https://image.thum.io/get/<options>/<url>
  const fallbackUrl = `${FALLBACK_HOST_BASE}/${targetUrl}`;
  console.log(`[fallback-request] trying fallback: ${fallbackUrl}`);
  
  try {
    return await axios.get(fallbackUrl, {
      responseType: 'arraybuffer',
      headers: {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)',
      },
      timeout: 30000,
      validateStatus: () => true,
    });
  } catch (err) {
    console.error(`[fallback-error] msg=${err.message}`);
    return null;
  }
}

/**
 * 执行回源、备用请求并写入缓存
 * @param {string} upstreamUrl 
 * @param {string} targetUrl 
 * @param {string} key 
 * @returns {Promise<{data: Buffer, contentType: string, status: number}>}
 */
async function fetchAndCache(upstreamUrl, targetUrl, key) {
  const { data: dataPath, meta: metaPath } = getCachePaths(key);

  // 1. 回源请求
  let finalResp;
  let isFallback = false;

  try {
    const resp = await fetchUpstreamWithRetry(upstreamUrl);
    finalResp = resp;

    // 2. 检查响应是否有效
    if (!isValidImageResponse(resp.status, resp.headers, resp.data)) {
       console.log(`[upstream-invalid] url=${upstreamUrl} status=${resp.status} len=${resp.data.byteLength}, trying fallback...`);
       const fallbackResp = await fetchFallbackWithRetry(targetUrl);
       
       if (fallbackResp && isValidImageResponse(fallbackResp.status, fallbackResp.headers, fallbackResp.data)) {
         console.log(`[fallback-success] url=${targetUrl}`);
         finalResp = fallbackResp;
         isFallback = true;
       } else {
         console.log(`[fallback-failed] url=${targetUrl}, returning original response`);
       }
    }
  } catch (err) {
     console.error(`[upstream-failed] url=${upstreamUrl} err=${err.message}`);
     // 如果回源彻底失败，抛出错误，以便上层处理（如兜底读取旧缓存）
     throw err;
  }

  // 3. 仅缓存有效图片
  if (isValidImageResponse(finalResp.status, finalResp.headers, finalResp.data)) {
    const contentType = finalResp.headers['content-type'] || 'image/jpeg';
    const meta = {
      url: isFallback ? `fallback:${targetUrl}` : upstreamUrl,
      contentType,
      size: finalResp.data.byteLength,
      createdAt: new Date().toISOString(),
      source: isFallback ? 'thum.io' : 'mshots'
    };

    // 原子化写入：先写临时文件，再重命名
    const tempSuffix = `.${Date.now()}-${Math.random().toString(36).slice(2)}.tmp`;
    const tempDataPath = dataPath + tempSuffix;
    const tempMetaPath = metaPath + tempSuffix;

    try {
      await fsPromises.writeFile(tempDataPath, finalResp.data);
      await fsPromises.writeFile(tempMetaPath, JSON.stringify(meta));
      
      // 重命名 (原子操作)
      await fsPromises.rename(tempDataPath, dataPath);
      await fsPromises.rename(tempMetaPath, metaPath);
    } catch (e) {
      console.error(`[cache-write-error] ${e.message}`);
      // 尝试清理临时文件
      try { await fsPromises.unlink(tempDataPath); } catch (_) {}
      try { await fsPromises.unlink(tempMetaPath); } catch (_) {}
    }
    
    return {
        status: 200,
        headers: finalResp.headers,
        data: finalResp.data,
        contentType,
        isFallback
    };
  }

  // 无效响应，直接返回
  return {
      status: finalResp.status,
      headers: finalResp.headers,
      data: finalResp.data,
      contentType: finalResp.headers['content-type'],
      isFallback
  };
}

/**
 * 核心处理逻辑：检查缓存 -> (合并请求) -> 回源 -> (失败则) 备用接口 -> 写入缓存 -> 返回响应
 * @param {object} res 
 * @param {string} upstreamUrl 
 * @param {string} targetUrl
 */
async function handleProxyRequest(res, upstreamUrl, targetUrl) {
  const key = sha1(upstreamUrl);
  const { data: dataPath, meta: metaPath } = getCachePaths(key);

  // 1. 尝试读取缓存 (使用 async 版本)
  try {
    // 检查文件是否存在
    await fsPromises.access(dataPath);
    await fsPromises.access(metaPath);
    
    const metaRaw = await fsPromises.readFile(metaPath, 'utf8');
    let meta;
    try {
      meta = JSON.parse(metaRaw);
    } catch (e) {
      console.warn(`[cache-warn] meta corrupted for ${upstreamUrl}`);
    }

    if (meta) {
      // 检查缓存有效期 (例如 30 天)
      const cachedTime = new Date(meta.createdAt).getTime();
      const now = Date.now();
      const maxAge = 30 * 24 * 3600 * 1000;

      if (now - cachedTime < maxAge) {
        console.log(`[cache-hit] ${upstreamUrl}`);
        res.type(meta.contentType);
        res.set('Cache-Control', 'public, max-age=315360000, immutable');
        if (meta.source === 'thum.io') {
           res.set('X-Source', 'fallback-thum.io-cache');
        } else {
           res.set('X-Source', 'mshots-cache');
        }
        
        const stream = fs.createReadStream(dataPath);
        stream.on('error', (streamErr) => {
           console.error(`[stream-error] ${streamErr.message}`);
           if (!res.headersSent) res.end();
        });
        stream.pipe(res);
        return;
      } else {
        console.log(`[cache-expired] ${upstreamUrl}`);
      }
    }
  } catch (err) {
    // 缓存未命中
  }

  // 2. 回源请求 (带请求合并/去重)
  try {
    let resultPromise;

    if (pendingRequests.has(key)) {
        console.log(`[coalesce-hit] joining pending request for ${upstreamUrl}`);
        resultPromise = pendingRequests.get(key);
    } else {
        // 创建 Promise 链，确保 finally 包含在内，防止 Unhandled Rejection
        resultPromise = fetchAndCache(upstreamUrl, targetUrl, key)
            .finally(() => {
                pendingRequests.delete(key);
            });
        pendingRequests.set(key, resultPromise);
    }

    const result = await resultPromise;

    // 返回结果
    res.status(result.status);
    if (result.contentType) res.type(result.contentType);
    res.set('Cache-Control', 'public, max-age=315360000, immutable');
    if (result.isFallback) {
        res.set('X-Source', 'fallback-thum.io');
    }
    return res.send(result.data);

  } catch (err) {
    // 3. 回源彻底失败
    // 若本地有缓存可兜底 (即使过期)
    try {
      await fsPromises.access(dataPath);
      await fsPromises.access(metaPath);
      
      const metaRaw = await fsPromises.readFile(metaPath, 'utf8');
      const meta = JSON.parse(metaRaw);
      if (meta.contentType && meta.contentType.toLowerCase().startsWith('image/')) {
        console.log(`[fallback-cache] using stale cache for ${upstreamUrl}`);
        res.set('Cache-Control', 'public, max-age=315360000, immutable');
        res.type(meta.contentType);
        const stream = fs.createReadStream(dataPath);
        stream.on('error', (streamErr) => {
           console.error(`[stream-error] ${streamErr.message}`);
           if (!res.headersSent) res.end();
        });
        stream.pipe(res);
        return;
      }
    } catch (_) {}

    console.error(`[upstream-failed-final] url=${upstreamUrl} err=${err.message}`);
    if (!res.headersSent) {
        return res.status(502).type('text/plain').send('Upstream error');
    }
  }
}

// 反代 mShots，路径 /mshots/v1/...
app.use('/mshots/v1', async (req, res) => {
  if (req.method !== 'GET') {
    return res.status(405).type('text/plain').send('Method Not Allowed');
  }
  
  // 这里的 req.originalUrl 包含 /mshots/v1 前缀
  // 我们假设用户可能访问 /mshots/v1/www.baidu.com
  // 需要提取出后面的部分进行解析
  const prefix = '/mshots/v1';
  let pathPart = req.originalUrl;
  if (pathPart.startsWith(prefix)) {
    pathPart = pathPart.slice(prefix.length);
  }
  
  // 解析目标 URL（补全协议）
  const targetUrl = await resolveTargetUrl(pathPart);
  
  // 拼接完整上游 URL
  const upstreamUrl = UPSTREAM_HOST + '/mshots/v1/' + targetUrl;
  
  // 浏览器访问优化：如果 Accept 包含 text/html 且没有 ?raw=true 参数
  // 返回一个带有加载动画的 HTML 页面，前端再请求真实图片
  if (req.headers.accept && req.headers.accept.includes('text/html') && !req.query.raw) {
    const rawUrl = req.originalUrl.includes('?') 
      ? `${req.originalUrl}&raw=true` 
      : `${req.originalUrl}?raw=true`;
      
    const html = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snapshot Loading...</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f2f5;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }
        .container {
            text-align: center;
            background: white;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            max-width: 90%;
        }
        .loader {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 1rem;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            display: none; /* 初始隐藏 */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .status {
            color: #666;
            margin-bottom: 1rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="loading-state">
            <div class="loader"></div>
            <div class="status">Generating snapshot for<br><strong>${targetUrl}</strong>...</div>
            <div style="font-size: 12px; color: #999;">This may take up to 30 seconds if not cached.</div>
        </div>
        <img id="result-img" src="${rawUrl}" alt="Snapshot" onload="showImage()" onerror="showError()">
        <div id="error-state" style="display:none; color: #e74c3c;">
            Failed to load snapshot.
        </div>
    </div>
    <script>
        function showImage() {
            document.getElementById('loading-state').style.display = 'none';
            document.getElementById('result-img').style.display = 'block';
        }
        function showError() {
            document.getElementById('loading-state').style.display = 'none';
            document.getElementById('error-state').style.display = 'block';
        }
    </script>
</body>
</html>
    `;
    return res.type('text/html').send(html);
  }

  return handleProxyRequest(res, upstreamUrl, targetUrl);
});

// 根路径处理：/https://example.com 或 /www.baidu.com
app.use(async (req, res) => {
  if (req.method !== 'GET') {
    return res.status(405).type('text/plain').send('Method Not Allowed');
  }
  if (req.path === '/') {
    // 支持 /?url=... 的 API 调用方式
    if (req.query.url) {
      const target = req.query.url;
      // 解析目标 URL（补全协议）
      const targetUrl = await resolveTargetUrl(target);
      // 拼接完整上游 URL
      const upstreamUrl = UPSTREAM_HOST + '/mshots/v1/' + targetUrl;

      // 浏览器访问优化：如果 Accept 包含 text/html 且没有 raw 参数
      if (req.headers.accept && req.headers.accept.includes('text/html') && !req.query.raw) {
         // 我们直接利用下面已有的 HTML 模板逻辑，只需要构造一个假的 req.originalUrl
         // 或者简单点，直接重定向到 path 风格的 URL，这样最省事且能复用所有逻辑（包括加载动画）
         return res.redirect(`/${targetUrl}`);
      }
      
      return handleProxyRequest(res, upstreamUrl, targetUrl);
    }

    const landingHtml = `
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mShots Proxy - 智能截图服务</title>
    <style>
        :root {
            --primary: #2563eb;
            --primary-dark: #1e40af;
            --bg-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            --card-bg: rgba(255, 255, 255, 0.9);
            --text-main: #1e293b;
            --text-muted: #64748b;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: var(--bg-gradient);
            color: var(--text-main);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
        }

        header {
            text-align: center;
            padding: 4rem 1rem 2rem;
            animation: fadeInDown 0.8s ease-out;
        }

        h1 {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 1rem;
            background: linear-gradient(to right, #2563eb, #7c3aed);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: -1px;
        }

        .subtitle {
            font-size: 1.25rem;
            color: var(--text-muted);
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 1.5rem;
            flex: 1;
        }

        .demo-box {
            background: var(--card-bg);
            border-radius: 16px;
            padding: 2rem;
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
            margin: 3rem 0;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            animation: fadeInUp 0.8s ease-out 0.2s backwards;
        }

        .usage-row {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .method-tag {
            background: #dbeafe;
            color: #1e40af;
            padding: 0.25rem 0.75rem;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.875rem;
        }

        .url-preview {
            font-family: 'Fira Code', monospace;
            background: #f1f5f9;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            color: #334155;
            flex: 1;
            word-break: break-all;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .copy-btn {
            background: white;
            border: 1px solid #cbd5e1;
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.75rem;
            transition: all 0.2s;
        }

        .copy-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        .features {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-bottom: 4rem;
        }

        @media (max-width: 768px) {
            .features {
                grid-template-columns: 1fr;
            }
        }

        .feature-card {
            background: white;
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s;
            animation: fadeInUp 0.8s ease-out 0.4s backwards;
        }

        .feature-card:hover {
            transform: translateY(-5px);
        }

        .feature-icon {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            display: inline-block;
            padding: 0.75rem;
            background: #eff6ff;
            border-radius: 12px;
            color: var(--primary);
        }

        .testimonials-section {
            overflow: hidden;
            padding: 2rem 0;
            background: rgba(255,255,255,0.5);
            margin: 0 -50vw;
            padding-left: 50vw;
            padding-right: 50vw;
            position: relative;
        }

        .marquee {
            display: flex;
            gap: 2rem;
            animation: scroll 40s linear infinite;
            width: max-content;
        }

        .testimonial-card {
            background: white;
            padding: 1.5rem;
            border-radius: 12px;
            width: 300px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            flex-shrink: 0;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .avatar {
            width: 40px;
            height: 40px;
            background: #e2e8f0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #64748b;
        }

        @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        footer {
            text-align: center;
            padding: 2rem;
            color: var(--text-muted);
            font-size: 0.875rem;
        }
    </style>
</head>
<body>
    <header>
        <h1>mShots Proxy</h1>
        <p class="subtitle">高性能、自动降级、支持 HTTPS 检测的智能网页截图代理服务。</p>
    </header>

    <div class="container">
        <div class="demo-box">
            <h2 style="margin-bottom: 1.5rem; font-size: 1.5rem;">🚀 快速开始</h2>
            
            <div class="usage-row">
                <span class="method-tag">GET</span>
                <div class="url-preview">
                    <span>${req.protocol}://${req.get('host')}/www.baidu.com</span>
                    <button class="copy-btn" onclick="copyUrl(this)">复制</button>
                </div>
            </div>
            
            <div class="usage-row">
                <span class="method-tag">GET</span>
                <div class="url-preview">
                    <span>${req.protocol}://${req.get('host')}/https://github.com</span>
                    <button class="copy-btn" onclick="copyUrl(this)">复制</button>
                </div>
            </div>

            <div class="usage-row">
                <span class="method-tag">GET</span>
                <div class="url-preview">
                    <span>${req.protocol}://${req.get('host')}/?url=www.baidu.com</span>
                    <button class="copy-btn" onclick="copyUrl(this)">复制</button>
                </div>
            </div>

            <p style="color: var(--text-muted); font-size: 0.9rem; margin-top: 1rem;">
                * 支持直接输入域名，系统将自动检测 HTTPS 支持情况。
            </p>
        </div>

        <div class="features">
            <div class="feature-card">
                <div class="feature-icon">⚡</div>
                <h3>极速缓存</h3>
                <p style="color: #64748b; font-size: 0.9rem; margin-top: 0.5rem;">
                    智能文件系统缓存，支持原子化写入与高并发请求合并，拒绝重复回源。
                </p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">🛡️</div>
                <h3>自动兜底</h3>
                <p style="color: #64748b; font-size: 0.9rem; margin-top: 0.5rem;">
                    主接口失效时自动切换至备用服务 (thum.io)，确保服务 99.9% 可用。
                </p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">🔍</div>
                <h3>智能检测</h3>
                <p style="color: #64748b; font-size: 0.9rem; margin-top: 0.5rem;">
                    自动识别目标站点协议，智能过滤无效 GIF 占位图，提供最佳截图质量。
                </p>
            </div>
        </div>
    </div>

    <div class="testimonials-section">
        <div class="marquee">
            <!-- 复制两份以实现无缝滚动 -->
            <div class="testimonial-card">
                <div class="user-info">
                    <div class="avatar">A</div>
                    <div><strong>Alex Dev</strong><br><small style="color:#94a3b8">Full Stack Engineer</small></div>
                </div>
                <p style="font-size: 0.9rem; color: #475569;">"解决了 WordPress mShots 国内访问不稳定的痛点，自动降级功能非常棒！"</p>
            </div>
            <div class="testimonial-card">
                <div class="user-info">
                    <div class="avatar">L</div>
                    <div><strong>Li Ming</strong><br><small style="color:#94a3b8">Tech Lead</small></div>
                </div>
                <p style="font-size: 0.9rem; color: #475569;">"高并发下的表现令人惊讶，请求合并机制帮我们节省了大量带宽。"</p>
            </div>
            <div class="testimonial-card">
                <div class="user-info">
                    <div class="avatar">S</div>
                    <div><strong>Sarah J.</strong><br><small style="color:#94a3b8">Product Manager</small></div>
                </div>
                <p style="font-size: 0.9rem; color: #475569;">"接口非常简单易用，不需要关心复杂的协议问题，直接传域名就行。"</p>
            </div>
            <div class="testimonial-card">
                <div class="user-info">
                    <div class="avatar">K</div>
                    <div><strong>Kevin Wu</strong><br><small style="color:#94a3b8">DevOps</small></div>
                </div>
                <p style="font-size: 0.9rem; color: #475569;">"部署简单，运行稳定。原子化写入彻底解决了之前的缓存文件损坏问题。"</p>
            </div>
            <!-- Duplicate for loop -->
            <div class="testimonial-card">
                <div class="user-info">
                    <div class="avatar">A</div>
                    <div><strong>Alex Dev</strong><br><small style="color:#94a3b8">Full Stack Engineer</small></div>
                </div>
                <p style="font-size: 0.9rem; color: #475569;">"解决了 WordPress mShots 国内访问不稳定的痛点，自动降级功能非常棒！"</p>
            </div>
            <div class="testimonial-card">
                <div class="user-info">
                    <div class="avatar">L</div>
                    <div><strong>Li Ming</strong><br><small style="color:#94a3b8">Tech Lead</small></div>
                </div>
                <p style="font-size: 0.9rem; color: #475569;">"高并发下的表现令人惊讶，请求合并机制帮我们节省了大量带宽。"</p>
            </div>
            <div class="testimonial-card">
                <div class="user-info">
                    <div class="avatar">S</div>
                    <div><strong>Sarah J.</strong><br><small style="color:#94a3b8">Product Manager</small></div>
                </div>
                <p style="font-size: 0.9rem; color: #475569;">"接口非常简单易用，不需要关心复杂的协议问题，直接传域名就行。"</p>
            </div>
            <div class="testimonial-card">
                <div class="user-info">
                    <div class="avatar">K</div>
                    <div><strong>Kevin Wu</strong><br><small style="color:#94a3b8">DevOps</small></div>
                </div>
                <p style="font-size: 0.9rem; color: #475569;">"部署简单，运行稳定。原子化写入彻底解决了之前的缓存文件损坏问题。"</p>
            </div>
        </div>
    </div>

    <footer>
        <p>&copy; ${new Date().getFullYear()} mShots Proxy Service. All rights reserved.</p>
    </footer>

    <script>
        function copyUrl(btn) {
            const url = btn.previousElementSibling.innerText;
            navigator.clipboard.writeText(url).then(() => {
                const originalText = btn.innerText;
                btn.innerText = '已复制!';
                btn.style.background = '#22c55e';
                btn.style.color = 'white';
                btn.style.borderColor = '#22c55e';
                setTimeout(() => {
                    btn.innerText = originalText;
                    btn.style.background = 'white';
                    btn.style.color = 'inherit';
                    btn.style.borderColor = '#cbd5e1';
                }, 2000);
            });
        }
    </script>
</body>
</html>
    `;
    return res.type('text/html').send(landingHtml);
  }

  // 解析目标 URL（补全协议）
  const targetUrl = await resolveTargetUrl(req.originalUrl);
  
  // 拼接完整上游 URL
  const upstreamUrl = UPSTREAM_HOST + '/mshots/v1/' + targetUrl;

  // 浏览器访问优化：如果 Accept 包含 text/html 且没有 ?raw=true 参数
  // 返回一个带有加载动画的 HTML 页面，前端再请求真实图片
  if (req.headers.accept && req.headers.accept.includes('text/html') && !req.query.raw) {
    const rawUrl = req.originalUrl.includes('?') 
      ? `${req.originalUrl}&raw=true` 
      : `${req.originalUrl}?raw=true`;
      
    const html = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snapshot Loading...</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f2f5;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }
        .container {
            text-align: center;
            background: white;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            max-width: 90%;
        }
        .loader {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 1rem;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            display: none; /* 初始隐藏 */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .status {
            color: #666;
            margin-bottom: 1rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="loading-state">
            <div class="loader"></div>
            <div class="status">Generating snapshot for<br><strong>${targetUrl}</strong>...</div>
            <div style="font-size: 12px; color: #999;">This may take up to 30 seconds if not cached.</div>
        </div>
        <img id="result-img" src="${rawUrl}" alt="Snapshot" onload="showImage()" onerror="showError()">
        <div id="error-state" style="display:none; color: #e74c3c;">
            Failed to load snapshot.
        </div>
    </div>
    <script>
        function showImage() {
            document.getElementById('loading-state').style.display = 'none';
            document.getElementById('result-img').style.display = 'block';
        }
        function showError() {
            document.getElementById('loading-state').style.display = 'none';
            document.getElementById('error-state').style.display = 'block';
        }
    </script>
</body>
</html>
    `;
    return res.type('text/html').send(html);
  }

  return handleProxyRequest(res, upstreamUrl, targetUrl);
});

// 简单根路由健康检查
// 根路径健康由上面的 app.use 处理

app.listen(PORT, () => {
  console.log(`Proxy running at http://localhost:${PORT}`);
});