Unable to render the streamming response from open AI chat_completion API via Quart to React

I am experiencing an issue while streaming responses from the OpenAI Chat_completion API through my Quartz backend to my React frontend. Specifically, the chunks of data processed from the backend are repeating or missing when displayed in the chatbox UI.

Error:
Some chunks are repeating in the frontend chatbox even after receiving all the chunks from backend
Many chunks are missing when displayed in the chatbox UI even after receiving all the chunks from backend

Steps to Reproduce:
Call the OpenAI Chat_completion API from the Quartz backend.
Stream the response chunks to the React frontend.
Process and display the chunks in a chatbox component in the React UI.

Observed Behavior:
Some of the chunks are repeating after printing a few chunks in the frontend.
Many chunks are missing in the final response displayed in the UI.

The Problem: Some of the chunks are missing while printing in the UI
The problem shown in UI
The repeation of chunks in the UI

Thanks for the help!!! Really appreciate any help.

Here is Backend code snippet:


@gpt_run.route('/aiapp', methods=['POST'])
async def interactive_function():
    data = await request.get_json()
    question = data['query']
    
    async def generate():
        response_text = ""
        async for chunk in model.ask(question):
            if chunk:
                response_text += chunk
                yield f"{json.dumps({'chunk': chunk})}n"
        chat.append({'question': question, 'answer': response_text})
        chat_key = "chat_" + str(int(time.time()))
        chat_ref.set({chat_key: chat})
        print(response_text)

    return Response(generate(), content_type='application/json')


Query sent from the front End: “Hey”

This is the payload response to the Front End:

{"chunk": "Hello"}
{"chunk": "!"}
{"chunk": " How"}
{"chunk": " can"}
{"chunk": " I"}
{"chunk": " assist"}
{"chunk": " you"}
{"chunk": " today"}
{"chunk": "?"}
{"chunk": "Hello"}
{"chunk": ","}
{"chunk": " how"}
{"chunk": " can"}
{"chunk": " I"}
{"chunk": " assist"}
{"chunk": " you"}
{"chunk": " today"}
{"chunk": "?"}
{"chunk": " If"}
{"chunk": " you"}
{"chunk": " have"}
{"chunk": " any"}
{"chunk": " questions"}
{"chunk": " or"}
{"chunk": " need"}
{"chunk": " help"}
{"chunk": " with"}
{"chunk": " anything"}
{"chunk": ","}
{"chunk": " feel"}
{"chunk": " free"}
{"chunk": " to"}
{"chunk": " ask"}
{"chunk": "."}

Main.js(React FrontEnd):

async function handleSubmit(e) {
    e.preventDefault();

    if (!waitingForResponse && input.trim()) {
      setWaitingForResponse(true);
      setIsLoading(true);
      const newMessage = { user: "user", message: input };
      setMessageList(prev => [...prev, newMessage]);
      setInput("");

      // Fetch data and process chunks
      const response = await fetch("http://localhost:8000/gptRun/aiapp", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ query: input }),
      });

      const reader = response.body.getReader();
      let receivedChunks = '';
      let partialChunk = '';
      let processedChunks = new Set(); // Use a Set to store processed chunks

      // Create an initial bot message
      const botMessage = { user: "bot", message: '' };
      setMessageList(prev => [...prev, botMessage]);

      try {
        let done = false;
        do {
          const { value, done: readerDone } = await reader.read();
          done = readerDone;
          if (done) break;

          receivedChunks += new TextDecoder().decode(value, { stream: true });

          let splitPos;
          while ((splitPos = receivedChunks.indexOf('n')) >= 0) {
            let chunk = receivedChunks.substring(0, splitPos);
            receivedChunks = receivedChunks.substring(splitPos + 1);

            // Combine complete chunk with partial chunk (if any)
            if (partialChunk) {
              chunk = partialChunk + chunk;
              partialChunk = ''; // Clear partialChunk for next iteration
            }

            try {
              const parsedChunk = JSON.parse(chunk);

              if (parsedChunk.chunk && !processedChunks.has(parsedChunk.chunk)) {
                // Add the new chunk to the processedChunks set
                processedChunks.add(parsedChunk.chunk);
                console.log("Processing chunk: ", parsedChunk.chunk);

                // Append the chunk to the bot's message in real-time
                setMessageList(prev => {
                  const updatedMessages = [...prev];
                  const lastMessage = updatedMessages[updatedMessages.length - 1];

                  // Check if the chunk is already appended to the last bot message
                  if (lastMessage.user === "bot" && !lastMessage.message.includes(parsedChunk.chunk)) {
                    console.log("Appending chunk to bot's message: ", parsedChunk.chunk);
                    lastMessage.message += parsedChunk.chunk;
                  }

                  return updatedMessages;
                });

                // Debug: Log the updated messages list
                console.log("Updated messages list: ", JSON.stringify(messageList, null, 2));
              }
            } catch (error) {
              console.error("Error parsing chunk: ", error);
              partialChunk = chunk; // If there's an error, assume the chunk is incomplete and save it as partialChunk
            }
          }

          // Save any remaining incomplete chunk
          if (receivedChunks.length > 0) {
            partialChunk += receivedChunks;
            receivedChunks = '';
          }

          // Wait for a brief moment before processing the next chunk
          await new Promise(resolve => setTimeout(resolve, 100)); // Adjust the delay as needed
        } while (!done);

        // Clear the processed chunks after they have been fully handled
        processedChunks.clear();
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setWaitingForResponse(false);
        setIsLoading(false);
      }
    }
  }

New contributor

Anik De is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa Dịch vụ tổ chức sự kiện 5 sao Thông tin về chúng tôi Dịch vụ sinh nhật bé trai Dịch vụ sinh nhật bé gái Sự kiện trọn gói Các tiết mục giải trí Dịch vụ bổ trợ Tiệc cưới sang trọng Dịch vụ khai trương Tư vấn tổ chức sự kiện Hình ảnh sự kiện Cập nhật tin tức Liên hệ ngay Thuê chú hề chuyên nghiệp Tiệc tất niên cho công ty Trang trí tiệc cuối năm Tiệc tất niên độc đáo Sinh nhật bé Hải Đăng Sinh nhật đáng yêu bé Khánh Vân Sinh nhật sang trọng Bích Ngân Tiệc sinh nhật bé Thanh Trang Dịch vụ ông già Noel Xiếc thú vui nhộn Biểu diễn xiếc quay đĩa Dịch vụ tổ chức tiệc uy tín Khám phá dịch vụ của chúng tôi Tiệc sinh nhật cho bé trai Trang trí tiệc cho bé gái Gói sự kiện chuyên nghiệp Chương trình giải trí hấp dẫn Dịch vụ hỗ trợ sự kiện Trang trí tiệc cưới đẹp Khởi đầu thành công với khai trương Chuyên gia tư vấn sự kiện Xem ảnh các sự kiện đẹp Tin mới về sự kiện Kết nối với đội ngũ chuyên gia Chú hề vui nhộn cho tiệc sinh nhật Ý tưởng tiệc cuối năm Tất niên độc đáo Trang trí tiệc hiện đại Tổ chức sinh nhật cho Hải Đăng Sinh nhật độc quyền Khánh Vân Phong cách tiệc Bích Ngân Trang trí tiệc bé Thanh Trang Thuê dịch vụ ông già Noel chuyên nghiệp Xem xiếc khỉ đặc sắc Xiếc quay đĩa thú vị
Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa
Thiết kế website Thiết kế website Thiết kế website Cách kháng tài khoản quảng cáo Mua bán Fanpage Facebook Dịch vụ SEO Tổ chức sinh nhật