KPC
Kevin Powell - Community•3mo ago
chikanlegbees

Struggling to stream openAI output and preserve spacing and strong html tags

hey guys so im basically using the openAI SDK for a project and im struggling to operate the stream functionality to live update the UI each time if anyones experienced with streaming the openAI output id gladly love some help heres my code 
// backend
res.setHeader("Content-Type", "text/event-stream");
    res.setHeader("Cache-Control", "no-cache");
    res.setHeader("Connection", "keep-alive");
    for await (const chunk of completion) {
      const text = chunk.choices?.[0]?.delta?.content;
      if (text) {
        res.write(`data: ${text}\n\n`);
      }
    }
    res.write("data: [DONE]\n\n");
    res.end();
  } catch (error) {
    console.log("OpenAI error:", error);
    res.status(500).json({ error: "Something went wrong." });
  }

// frontend
const reader = res.body.getReader();
      const decoder = new TextDecoder("utf-8");

      setShowAI(true);
      setLoading(true);

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        const chunk = decoder.decode(value, { stream: true });
        console.log("chunk", chunk);

        // Server-Sent Events: split by double newlines
        const lines = chunk
          .split("\n\n")
          .filter((line) => line.startsWith("data: "));

        for (const line of lines) {
          const text = line.replace(/^data: /, "");
          const textWithBreaks = text.replace(/\n/g, "<br>");

          if (text === "[DONE]") {
            setLoading(false);
            return;
          }
          setAiresult((prev) => {
            return prev + textWithBreaks;
          }); // Live UI update
        }
      }
// backend
res.setHeader("Content-Type", "text/event-stream");
    res.setHeader("Cache-Control", "no-cache");
    res.setHeader("Connection", "keep-alive");
    for await (const chunk of completion) {
      const text = chunk.choices?.[0]?.delta?.content;
      if (text) {
        res.write(`data: ${text}\n\n`);
      }
    }
    res.write("data: [DONE]\n\n");
    res.end();
  } catch (error) {
    console.log("OpenAI error:", error);
    res.status(500).json({ error: "Something went wrong." });
  }

// frontend
const reader = res.body.getReader();
      const decoder = new TextDecoder("utf-8");

      setShowAI(true);
      setLoading(true);

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        const chunk = decoder.decode(value, { stream: true });
        console.log("chunk", chunk);

        // Server-Sent Events: split by double newlines
        const lines = chunk
          .split("\n\n")
          .filter((line) => line.startsWith("data: "));

        for (const line of lines) {
          const text = line.replace(/^data: /, "");
          const textWithBreaks = text.replace(/\n/g, "<br>");

          if (text === "[DONE]") {
            setLoading(false);
            return;
          }
          setAiresult((prev) => {
            return prev + textWithBreaks;
          }); // Live UI update
        }
      }
so openAI returns the stream in chunks starting with data: but in my prompt ive told them to follow a strict format which i believe they do that preserves the line spacing between paragraphs and also includes the strong html tags in the output as ive prompted the AI to do but it doesnt seem to work the linespacing are ignored 😦
No description
No description
3 Replies
chikanlegbees
chikanlegbeesOP•3mo ago
here in the first pic u can see that the strong tag for IDEA 1 isnt rendered as its split across chunks so its not rendered in the html my prompt is the second ss telling openAI to render the strong tags and u can see the format has spaces between paragraphs
chikanlegbees
chikanlegbeesOP•3mo ago
heres the portion for idea 1 i really need some help as to what im doing wrong, been stuck on this for over a week
No description
Jochem
Jochem•3mo ago
(just going to pre-emptively mod-voice in here that this post is asking for help with an issue, not a tirade on why AI is inherently unusable for this use case. If you have nothing to say about how to solve the issue at hand, please don't respond to the post)

Did you find this page helpful?