ai-ping/docs/examples/streaming-broken.html at main · howardxie-dev/ai-ping · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>AI Ping Example - Streaming broken</title>
    <style>
      body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #17202a; background: #f7f9fc; }
      main { max-width: 920px; margin: 0 auto; padding: 40px 20px; }
      h1 { margin: 0 0 8px; font-size: 34px; }
      .lead { margin: 0 0 24px; color: #536170; font-size: 17px; }
      .banner, .card, table { border: 1px solid #d8e0ea; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06); }
      .banner { padding: 18px 20px; border-color: #f4b7b0; background: #fff4f2; }
      .banner strong { color: #b42318; }
      .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
      .card { padding: 16px; }
      .card span { display: block; color: #667381; font-size: 13px; }
      .card strong { display: block; margin-top: 6px; font-size: 28px; }
      table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; }
      th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #e6ebf1; vertical-align: top; }
      th { background: #f3f6fa; color: #4a5663; font-size: 13px; }
      tr:last-child td { border-bottom: 0; }
      code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
      .pass { color: #16833f; font-weight: 700; }
      .warn { color: #9a6100; font-weight: 700; }
      .fail { color: #b42318; font-weight: 700; }
      .skip { color: #687385; font-weight: 700; }
      .meta { color: #536170; margin: 22px 0; }
      @media (max-width: 720px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    </style>
  </head>
  <body>
    <main>
      <h1>Streaming broken example</h1>
      <p class="lead">A sanitized example where non-streaming chat works, but OpenAI-style streaming is not compatible.</p>
      <section class="banner"><strong>Result: FAILED.</strong> This endpoint can return text, but clients depending on streaming chat completions may break.</section>
      <section class="grid" aria-label="Summary">
        <div class="card"><span>Passed</span><strong>2</strong></div>
        <div class="card"><span>Warned</span><strong>1</strong></div>
        <div class="card"><span>Failed</span><strong>1</strong></div>
        <div class="card"><span>Duration</span><strong>1.0s</strong></div>
      </section>
      <p class="meta">Profile: <code>openai-chat</code> / Endpoint: <code>https://example.invalid/v1/</code> / Model: <code>example-chat-model</code></p>
      <table>
        <thead><tr><th>Status</th><th>Check</th><th>Result</th></tr></thead>
        <tbody>
          <tr><td class="pass">PASS</td><td><code>openai-chat.chat.basic</code></td><td>Basic chat completion response is usable.</td></tr>
          <tr><td class="fail">FAIL</td><td><code>openai-chat.chat.stream</code></td><td>Expected OpenAI-style SSE chunks, but the stream was not parseable.</td></tr>
          <tr><td class="warn">WARN</td><td><code>openai-chat.tool_calls.basic</code></td><td>Tool call response is usable, but recommended fields are missing.</td></tr>
          <tr><td class="pass">PASS</td><td><code>openai-chat.errors.format</code></td><td>Error response includes OpenAI-style error metadata.</td></tr>
          <tr><td class="skip">SKIP</td><td><code>openai-chat.models.list</code></td><td>Skipped in this example report.</td></tr>
        </tbody>
      </table>
    </main>
  </body>
</html>