mayooear / gpt4-pdf-chatbot-langchain

GPT4 & LangChain Chatbot for large PDF docs
https://www.youtube.com/watch?v=ih9PBGVVOO4
14.86k stars 3.01k forks source link

Text words overlay display #446

Closed EternalBlissed closed 6 months ago

EternalBlissed commented 9 months ago

Hi guys, Is there support for the text to be displayed in a response like how chat.openai.com does it? e.g the words being shown in progress of the entire response.

dosubot[bot] commented 9 months ago

🤖

Hello @thatmarcboi! I'm Dosu, a friendly bot designed to assist you with your queries, bugs, and more while we wait for a human maintainer to join us. I'm here to help make your experience with our repository as smooth as possible. Looking forward to assisting you!

Based on the information I found, the current version of the gpt4-pdf-chatbot-langchain codebase does not support text streaming functionality similar to chat.openai.com. The code handles HTTP POST requests and responds with a single response for each request. It does not maintain a persistent connection for streaming responses. You can refer to the relevant code in the pages/api/chat.ts file.

However, there is a similar solved issue in the repository, Unable to stream response, where the user was directed to a fork of the project by groovybits, which still has the streaming functionality. You might find this fork useful.

Additionally, the gpt4-pdf-chatbot-langchain project includes a library that can be used to implement text streaming functionality. The library is "@microsoft/fetch-event-source". This library is a polyfill for the EventSource API (also known as Server-Sent Events), which can be used to stream text data from a server to a client. You can refer to the package.json file for more details.

Here is a basic example of how you might use it:

import { FetchEventSource } from '@microsoft/fetch-event-source';

const eventSource = new FetchEventSource('https://example.com/stream');

eventSource.onmessage = (event) => {
  console.log(event.data);
};

eventSource.onerror = (error) => {
  console.error('An error occurred:', error);
};

In this example, 'https://example.com/stream' would be the URL of your server-side endpoint that sends the text stream. The onmessage event handler is called whenever a new piece of data is received from the stream, and the onerror event handler is called if an error occurs.

I hope this information is helpful. If you have any other questions or need further clarification, feel free to ask.

Sources


This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.