I have seen numerous amazing examples and clones of ChatGPT on Github, which usually have lots of features, which I’ve been using to adapt into my own projects.
However, I’m currently hitting a roadblock trying to add the ‘stream’ functionality. Unfortunately ChatGPT itself doesn’t have knowledge of the ‘stream’ functions because it’s outside of its Sept 2021 cut-off date so it’s not able to guide me through this.
Therefore, I humbly request your help. Could someone share a streamlined, single-page PHP example that incorporates a chatbot with the ‘stream’ functionality? Having a simple base to study and adapt would be immensely helpful.
If anyone has seen something like this, or is willing to write few lines of example code it would be a massive help!
I was looking for the same, and thanks to this I understood what it takes to achieve the streaming of response in PHP.
Streaming OpenAI Responses in Laravel with Server-Sent Events (SSE)
I use javascript (within my php) to handle the “stream” portion of the output.
$(document).ready(function() {
var i = 0;
var speed = 25; /* The speed/duration of the effect in milliseconds */
var outputParts = newOutput.split('<br>');
function typeWriter() {
if (i < outputParts.length) {
if (outputParts[i].startsWith('<') && outputParts[i].endsWith('>')) {
// If the part is an HTML tag, append it whole
$('#newOutput').append(outputParts[i]);
} else {
// If the part is text, type it out
var text = outputParts[i];
var j = 0;
function typeText() {
if (j < text.length) {
$('#newOutput').append(text.charAt(j));
j++;
setTimeout(typeText, speed);
} else if (i < outputParts.length) {
// Once the text has been typed, add a line break
$('#newOutput').append('<br>');
i++;
typeWriter();
}
// Scroll to the bottom of the page after each character is added to the output
window.scrollTo(0, document.body.scrollHeight);
}
typeText();
return;
}
i++;
// Add a line break after each part, including HTML tags
$('#newOutput').append('<br>');
setTimeout(typeWriter, speed);
}
}
typeWriter();
});
The part of the JavaScript that handles the “streaming” of the AI response is in the $(document).ready(function() {...}); block. It’s the function named typeWriter and the nested function typeText within it.
Here’s a breakdown of what’s happening:
var outputParts = newOutput.split('<br>');: The AI response (stored in newOutput) is split into parts at each <br> (line break). The parts are stored in the outputParts array.
function typeWriter() {...}: This function goes through each part in outputParts. For each part:
If the part is an HTML tag (i.e., it starts with < and ends with >), it’s added to the #newOutput div all at once.
If the part isn’t an HTML tag, the typeText function is called.
function typeText() {...}: This function “types” out a part of the text (not an HTML tag) one character at a time. After each character is added, it waits for speed milliseconds (25 in your case) before adding the next character, creating a typing animation.
typeWriter();: The typeWriter function is called to start the whole process.
This setup gives the effect of the AI response being “streamed” or typed out in real time.