Spaces:

JackKing001
/

Hermes

Running

File size: 9,506 Bytes

bf076b8

/**
 * Image Proxy + BFF Reverse Proxy
 *
 * 在 BFF (hermes-web-ui) 前端增加一层轻量代理:
 *   - /images/          → 列出所有已生成图片 (HTML 页面)
 *   - /images/<file>    → 直接下载/预览图片
 *   - 其他所有请求       → 透传给 BFF (含 WebSocket)
 *
 * 端口: 7860 (HF Spaces 对外端口)
 * BFF:  7861 (内部端口, 仅本代理访问)
 * 图片目录: /data/.hermes/image_cache (主目录)
 *           /data/cover-image (baoyu-cover-image 输出目录)
 */

const http = require('http');
const fs = require('fs');
const path = require('path');
const net = require('net');

const BFF_HOST = '127.0.0.1';
const BFF_PORT = parseInt(process.env.BFF_PORT || '7861', 10);
const LISTEN_PORT = parseInt(process.env.LISTEN_PORT || '7860', 10);
const IMAGE_DIR = process.env.IMAGE_DIR || '/data/.hermes/image_cache';

// 额外的图片搜索路径（baoyu-cover-image 等技能的输出目录）
const EXTRA_IMAGE_DIRS = [
  '/data/cover-image',
  '/data/.hermes/image_cache',
];

const MIME_TYPES = {
  '.png': 'image/png',
  '.jpg': 'image/jpeg',
  '.jpeg': 'image/jpeg',
  '.gif': 'image/gif',
  '.webp': 'image/webp',
  '.svg': 'image/svg+xml',
  '.txt': 'text/plain',
  '.json': 'application/json',
  '.md': 'text/markdown',
};

// ==================== 图片文件服务 ====================

function serveImageList(res) {
  const allImageFiles = [];
  let dirsScanned = 0;
  const totalDirs = EXTRA_IMAGE_DIRS.length;

  function checkComplete() {
    dirsScanned++;
    if (dirsScanned < totalDirs) return;

    const uniqueFiles = Array.from(new Map(allImageFiles.map(f => [f.path, f])).values());
    uniqueFiles.sort((a, b) => b.mtime - a.mtime);

    const html = buildImageListHtml(uniqueFiles);
    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
    res.end(html);
  }

  EXTRA_IMAGE_DIRS.forEach(dir => {
    function scanDir(currentDir, relativePath, callback) {
      fs.readdir(currentDir, { withFileTypes: true }, (err, entries) => {
        if (err) {
          callback();
          return;
        }

        let pending = entries.length;
        if (pending === 0) {
          callback();
          return;
        }

        entries.forEach(entry => {
          const fullPath = path.join(currentDir, entry.name);
          const relPath = path.join(relativePath, entry.name);

          if (entry.isDirectory()) {
            scanDir(fullPath, relPath, () => {
              pending--;
              if (pending === 0) callback();
            });
          } else if (/\.(png|jpe?g|gif|webp|svg|bmp)$/i.test(entry.name)) {
            try {
              const stat = fs.statSync(fullPath);
              allImageFiles.push({
                name: entry.name,
                path: fullPath,
                relPath: relPath,
                dir: dir,
                size: stat.size,
                mtime: stat.mtime
              });
            } catch (e) {}
            pending--;
            if (pending === 0) callback();
          } else {
            pending--;
            if (pending === 0) callback();
          }
        });
      });
    }

    scanDir(dir, '', () => {
      checkComplete();
    });
  });
}

function buildImageListHtml(imageFiles) {
  const html = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>🖼️ Image Cache - Hermes Agent</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
         background: #0f0f23; color: #e0e0e0; padding: 2em; }
  h1 { color: #7eb8da; margin-bottom: 1em; font-size: 1.5em; }
  .card { background: #1a1a3e; border-radius: 12px; padding: 1.5em;
          margin-bottom: 1.5em; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
  .card h3 { color: #9dd6e8; margin-bottom: 0.8em; font-size: 1.1em; }
  .card img { max-width: 100%; border-radius: 8px; cursor: pointer;
             transition: transform .2s; }
  .card img:hover { transform: scale(1.02); }
  .actions { margin-top: 0.8em; display: flex; gap: 1em; flex-wrap: wrap; }
  .actions a { color: #7eb8da; text-decoration: none; padding: 0.4em 1em;
               border: 1px solid #7eb8da; border-radius: 6px; font-size: 0.9em;
               transition: background .2s; }
  .actions a:hover { background: #7eb8da22; }
  .meta { color: #888; font-size: 0.85em; margin-top: 0.5em; }
  .path { color: #666; font-size: 0.8em; margin-top: 0.3em; }
  .empty { text-align: center; padding: 3em; color: #888; }
  .empty p { margin-top: 1em; font-size: 0.95em; }
</style>
</head>
<body>
<h1>🖼️ Image Cache</h1>
${
  imageFiles.length === 0
    ? `<div class="empty"><p style="font-size:2em">📭</p><p>暂无图片。让 agent 生成图片后将自动出现在此。</p>
       <p>提示: 让 agent 使用 baoyu-imagine 技能，并将图片保存到 /data/.hermes/image_cache/</p></div>`
    : imageFiles
        .map((f) => {
          const sizeMB = (f.size / 1024 / 1024).toFixed(2);
          const mtime = f.mtime.toISOString().replace('T', ' ').slice(0, 19);
          return `<div class="card">
  <h3>${f.name}</h3>
  <div class="path">${f.relPath}</div>
  <img src="/images/${encodeURIComponent(f.relPath)}" alt="${f.name}" loading="lazy" />
  <div class="meta">${sizeMB} MB · ${mtime}</div>
  <div class="actions">
    <a href="/images/${encodeURIComponent(f.relPath)}" download="${f.name}">⬇️ 下载</a>
    <a href="/images/${encodeURIComponent(f.relPath)}" target="_blank">🔍 原始大小</a>
  </div>
</div>`;
        })
        .join('\n')
}
</body></html>`;
  return html;
}

function serveImage(urlPath, res) {
  const relativePath = decodeURIComponent(urlPath.slice('/images/'.length));

  // Try each image directory in order
  function tryDir(index) {
    if (index >= EXTRA_IMAGE_DIRS.length) {
      res.writeHead(404, { 'Content-Type': 'text/plain' });
      res.end('Not found');
      return;
    }

    const dir = EXTRA_IMAGE_DIRS[index];
    const filePath = path.join(dir, relativePath);
    const resolved = path.resolve(filePath);

    // Security: prevent directory traversal
    const imageRoot = path.resolve(dir);
    if (!resolved.startsWith(imageRoot + path.sep) && resolved !== imageRoot) {
      tryDir(index + 1);
      return;
    }

    fs.stat(resolved, (err, stat) => {
      if (err || !stat.isFile()) {
        tryDir(index + 1);
        return;
      }

      const ext = path.extname(resolved).toLowerCase();
      const contentType = MIME_TYPES[ext] || 'application/octet-stream';

      res.writeHead(200, {
        'Content-Type': contentType,
        'Content-Length': stat.size,
        'Cache-Control': 'public, max-age=3600',
        'Content-Disposition': `inline; filename="${path.basename(resolved)}"`,
      });
      fs.createReadStream(resolved).pipe(res);
    });
  }

  tryDir(0);
}

// ==================== HTTP 反向代理 ====================

function proxyHttpRequest(clientReq, clientRes) {
  const options = {
    hostname: BFF_HOST,
    port: BFF_PORT,
    path: clientReq.url,
    method: clientReq.method,
    headers: { ...clientReq.headers, host: `${BFF_HOST}:${BFF_PORT}` },
  };

  const bffReq = http.request(options, (bffRes) => {
    clientRes.writeHead(bffRes.statusCode, bffRes.headers);
    bffRes.pipe(clientRes, { end: true });
  });

  bffReq.on('error', () => {
    if (!clientRes.headersSent) {
      clientRes.writeHead(502, { 'Content-Type': 'text/plain' });
      clientRes.end('Bad Gateway: BFF server unavailable');
    }
  });

  clientReq.pipe(bffReq, { end: true });
}

// ==================== WebSocket 反向代理 ====================

function proxyWebSocket(clientReq, clientSocket, clientHead) {
  const bffSocket = net.connect(BFF_PORT, BFF_HOST, () => {
    // 重新构造原始 HTTP Upgrade 请求发给 BFF
    let rawRequest = `${clientReq.method} ${clientReq.url} HTTP/${clientReq.httpVersion}\r\n`;
    for (let i = 0; i < clientReq.rawHeaders.length; i += 2) {
      rawRequest += `${clientReq.rawHeaders[i]}: ${clientReq.rawHeaders[i + 1]}\r\n`;
    }
    rawRequest += '\r\n';

    bffSocket.write(rawRequest);
    if (clientHead && clientHead.length) {
      bffSocket.write(clientHead);
    }

    // 双向管道: BFF ↔ Client
    bffSocket.pipe(clientSocket);
    clientSocket.pipe(bffSocket);
  });

  const cleanup = () => {
    try { bffSocket.destroy(); } catch (_) {}
    try { clientSocket.destroy(); } catch (_) {}
  };

  bffSocket.on('error', cleanup);
  clientSocket.on('error', cleanup);
  clientSocket.on('close', () => { try { bffSocket.end(); } catch (_) {} });
  bffSocket.on('close', () => { try { clientSocket.end(); } catch (_) {} });
}

// ==================== 主服务器 ====================

const server = http.createServer((clientReq, clientRes) => {
  // 图片文件服务
  if (clientReq.url === '/images' || clientReq.url === '/images/') {
    return serveImageList(clientRes);
  }
  if (clientReq.url.startsWith('/images/')) {
    return serveImage(clientReq.url, clientRes);
  }

  // 其他请求透传给 BFF
  proxyHttpRequest(clientReq, clientRes);
});

// WebSocket 透传
server.on('upgrade', proxyWebSocket);

server.listen(LISTEN_PORT, () => {
  console.log(`🖼️  Image proxy listening on :${LISTEN_PORT}`);
  console.log(`📷 Images:  http://localhost:${LISTEN_PORT}/images/`);
  console.log(`tunnel:  http://${BFF_HOST}:${BFF_PORT}`);
});