client-example.html

<!--
  Example: calling the Space from your static web app with streaming.
  Replace SPACE_URL with your actual Space URL, e.g.:
  https://<your-username>-<space-name>.hf.space
-->
<script>
const SPACE_URL = "https://YOUR-USERNAME-YOUR-SPACE.hf.space";

async function streamChat(prompt, onToken, onDone) {
  const response = await fetch(`${SPACE_URL}/chat/stream`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ prompt, max_tokens: 256, temperature: 0.7 }),
  });

  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  let buffer = "";

  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
    buffer += decoder.decode(value, { stream: true });

    // SSE frames are separated by blank lines
    const frames = buffer.split("\n\n");
    buffer = frames.pop(); // keep incomplete frame for next loop

    for (const frame of frames) {
      const lines = frame.split("\n");
      const eventLine = lines.find((l) => l.startsWith("event:"));
      const dataLine = lines.find((l) => l.startsWith("data:"));
      if (!dataLine) continue;

      const data = JSON.parse(dataLine.replace("data:", "").trim());
      const eventType = eventLine ? eventLine.replace("event:", "").trim() : "message";

      if (eventType === "token") {
        onToken(data.text);
      } else if (eventType === "done") {
        onDone();
      }
    }
  }
}

// Usage:
// streamChat("Hello, who are you?",
//   (token) => { document.getElementById("output").textContent += token; },
//   () => { console.log("stream complete"); }
// );
</script>