fpbrowser2api/index.html at github · yang0/fpbrowser2api · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>AI 生成接口文档中心</title>
  <style>
    :root{--bg:#0b1020;--text:#162033;--muted:#64748b;--line:#e6edf5;--brand:#635bff;--brand2:#00b7ff;--shadow:0 20px 60px rgba(15,23,42,.14)}
    *{box-sizing:border-box}body{margin:0;font:14px/1.65 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Arial,sans-serif;background:#f6f8fc;color:var(--text)}
    .app{display:grid;grid-template-columns:300px 1fr;min-height:100vh}.side{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,var(--bg),#111a32);color:#e5eefc;padding:22px 18px;overflow:auto}
    .brand{display:flex;gap:12px;align-items:center;margin-bottom:20px}.logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--brand2));display:grid;place-items:center;box-shadow:0 12px 30px rgba(99,91,255,.35);font-weight:800}.brand h1{font-size:17px;margin:0}.brand p{margin:2px 0 0;color:#9fb0ce;font-size:12px}
    .search{position:relative;margin:14px 0 18px}.search input{width:100%;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.07);color:#fff;outline:none}
    .group{margin:18px 10px 8px;color:#93a4c2;font-size:12px;font-weight:800;letter-spacing:.08em}.nav{display:flex;gap:10px;color:#d8e3f8;text-decoration:none;border-radius:14px;padding:12px;margin:4px 0}.nav:hover{background:rgba(255,255,255,.08)}.nav i{font-style:normal;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.1);font-size:11px}.nav b{display:block}.nav small{display:block;color:#9fb0ce;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px}
    .note{margin-top:22px;padding:14px;border-radius:16px;background:rgba(255,255,255,.07);color:#b8c6df;font-size:12px}.note code{color:#fff}
    .hero{background:radial-gradient(circle at 20% 0%,rgba(99,91,255,.18),transparent 28%),radial-gradient(circle at 80% 10%,rgba(0,183,255,.16),transparent 30%);padding:38px 42px 22px}.hero>div,.wrap{max-width:1120px;margin:0 auto}.crumb{color:var(--muted);font-size:13px}.hero h2{font-size:32px;line-height:1.2;margin:12px 0 10px}.hero p{margin:0;color:#526072}.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.pill{display:inline-flex;gap:7px;padding:7px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:0 4px 16px rgba(15,23,42,.04);font-size:12px;color:#475569}.pill strong{color:#0f172a}
    .wrap{padding:24px 42px 56px}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}.api-card{display:flex;flex-direction:column;gap:12px;min-height:190px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;text-decoration:none;color:var(--text);box-shadow:0 12px 34px rgba(15,23,42,.08)}.api-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#c7d2fe}.api-card h3{font-size:18px;margin:0}.api-card p{margin:0;color:#64748b}.api-card .go{margin-top:auto;color:var(--brand);font-weight:800}.tag{align-self:flex-start;padding:4px 8px;border-radius:999px;background:#eef2ff;color:#3730a3;font-size:12px;font-weight:700}.empty{display:none;color:#9fb0ce;text-align:center;padding:20px 8px}
    .home-link{display:inline-flex;align-items:center;justify-content:center;width:100%;margin:0 0 18px;padding:10px 12px;border-radius:12px;background:#fff;color:#0f172a;text-decoration:none;border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 28px rgba(15,23,42,.18);font-weight:800}.home-link:hover{color:var(--brand)}
    @media(max-width:900px){.app{grid-template-columns:1fr}.side{position:relative;height:auto}.hero,.wrap{padding-left:18px;padding-right:18px}}
  </style>
</head>
<body>
  <div class="app">
    <aside class="side">
      <div class="brand"><div class="logo">AI</div><div><h1>生成接口中心</h1><p>Image & Video API Docs</p></div></div>
      <div class="search"><input id="q" placeholder="搜索模型、接口、文档..."></div>
      <nav id="nav"></nav>
      <div id="empty" class="empty">没有匹配的接口</div>
      <div class="note"><b>维护方式</b><br>每个接口现在都是 <code>api-docs/*.html</code> 独立页面。新增或修改某个接口时，只需要改对应文件。</div>
    </aside>
    <main>
      <section class="hero"><div><div class="crumb">开发者文档 / 接口目录</div><h2>生成接口独立文档</h2><p>每个接口都有独立 HTML 页面，避免修改一个接口时影响其他接口。</p><div class="pills" id="meta"></div></div></section>
      <div class="wrap"><div class="cards" id="cards"></div></div>
    </main>
  </div>
  <script>
    const DOCS = [
      {type:'video', title:'video-xxx-720/1080模型', file:'api-docs/video-pro-720p.html', endpoint:'POST /v1/videos · GET /v1/videos/{task_id}', models:['video-fast-480p','video-pro-480p','video-fast-720p','video-pro-720p','video-pro-1080p']},
      {type:'video', title:'video-standard-720p', file:'api-docs/video-standard-720p.html', endpoint:'POST /v1/videos · GET /v1/videos/{task_id}', models:['video-standard-720p']},
      {type:'video', title:'Sora 2', file:'api-docs/sora-2.html', endpoint:'POST /v1/videos · GET /v1/videos/{task_id}', models:['sora-2']},
      {type:'video', title:'Sora Pro 2', file:'api-docs/sora-pro-2.html', endpoint:'POST /v1/videos · GET /v1/videos/{task_id}', models:['sora-vip3-pro-720p','sora-vip3-pro-1080p']},
      {type:'video', title:'VEO Omni Flash', file:'api-docs/veo-omni-flash.html', endpoint:'POST /v1/videos · GET /v1/videos/{task_id}', models:['veo-omni-flash']},
      {type:'video', title:'VEO Omni Flash Video Edit', file:'api-docs/veo-omni-flash-video-edit.html', endpoint:'POST /v1/videos · GET /v1/videos/{task_id}', models:['veo-omni-flash-video-edit']},
      {type:'video', title:'VEO 3.1', file:'api-docs/veo-3-1.html', endpoint:'POST /v1/videos · GET /v1/videos/{task_id}', models:['veo-3-1']},
      {type:'image', title:'GPT Image 2', file:'api-docs/gpt-image-2.html', endpoint:'POST /v1/videos · GET /v1/videos/{task_id}', models:['gpt-image-2-2K']},
      {type:'image', title:'Nana Banana', file:'api-docs/nana-banana.html', endpoint:'POST /v1/videos · GET /v1/videos/{task_id}', models:['nana-banana-2','nana-banana-pro']}
    ];
    const L={video:'视频生成',image:'图片生成'}, I={video:'VID',image:'IMG'};
    const esc=s=>String(s).replace(/[&<>"']/g,m=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]));
    function filtered(){const q=document.getElementById('q').value.trim().toLowerCase();return DOCS.filter(d=>!q||JSON.stringify(d).toLowerCase().includes(q))}
    function render(){
      const docs=filtered(), cards=document.getElementById('cards'), nav=document.getElementById('nav');
      document.getElementById('meta').innerHTML=`<span class="pill"><strong>接口数</strong>${DOCS.length}</span><span class="pill"><strong>结构</strong>独立 HTML 文档</span>`;
      cards.innerHTML=docs.map(d=>`<a class="api-card" href="${esc(d.file)}"><span class="tag">${I[d.type]} ${L[d.type]}</span><h3>${esc(d.title)}</h3><p>${esc(d.endpoint)}</p><p>${d.models.map(esc).join(' / ')}</p><span class="go">打开独立接口页</span></a>`).join('');
      nav.innerHTML=['video','image'].map(t=>{const arr=docs.filter(d=>d.type===t);return arr.length?`<div class="group">${L[t]}</div>`+arr.map(d=>`<a class="nav" href="${esc(d.file)}"><i>${I[t]}</i><span><b>${esc(d.title)}</b><small>${esc(d.file)}</small></span></a>`).join(''):''}).join('');
      document.getElementById('empty').style.display=docs.length?'none':'block';
    }
    q.addEventListener('input',render);render();
  </script>
</body>
</html>