OpenAI Streaming doesn't work
hi, I want to stream the openai response to my frontend. In my frontend, the text is suddenly displayed and is not streamed. In my backend code I see through the consolge log that it outputs the words individually. But in the browser dev tools it looks like the client gets the data all at once. I'm not sure why it doesn't work. Does anyone have a guess?
Thanks!
//backend
const res = await openai.chat.completions.create({
model: 'gpt-3.5-turbo',
stream: true,
messages: [{ role: 'system', content: 'TELL ME A STORY' }],
})
return streamText(c, async (stream) => {
for await (const message of res) {
await stream.write(message.choices[0]?.delta.content ?? '')
console.log(message.choices[0]?.delta.content ?? '')
}
})//backend
const res = await openai.chat.completions.create({
model: 'gpt-3.5-turbo',
stream: true,
messages: [{ role: 'system', content: 'TELL ME A STORY' }],
})
return streamText(c, async (stream) => {
for await (const message of res) {
await stream.write(message.choices[0]?.delta.content ?? '')
console.log(message.choices[0]?.delta.content ?? '')
}
})// frontend
export function ChatScreen() {
const [messages, setMessages] = useState([])
useEffect(() => {
const fetchData = async () => {
const response = await fetch(`${import.meta.env.VITE_PUBLIC_API_URL}/assistant-sse`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ startStream: true }),
})
const reader = response.body.getReader()
const decoder = new TextDecoder('utf-8')
const readStream = async () => {
console.log('first')
const { value, done } = await reader.read()
if (done) {
console.log('Stream completed')
return
}
const newText = decoder.decode(value, { stream: true })
setMessages((prevMessages) => prevMessages + newText)
readStream()
}
readStream()
}
fetchData()
return () => {
}
}, [])
return (
<p>{messages}</p>
)
}// frontend
export function ChatScreen() {
const [messages, setMessages] = useState([])
useEffect(() => {
const fetchData = async () => {
const response = await fetch(`${import.meta.env.VITE_PUBLIC_API_URL}/assistant-sse`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ startStream: true }),
})
const reader = response.body.getReader()
const decoder = new TextDecoder('utf-8')
const readStream = async () => {
console.log('first')
const { value, done } = await reader.read()
if (done) {
console.log('Stream completed')
return
}
const newText = decoder.decode(value, { stream: true })
setMessages((prevMessages) => prevMessages + newText)
readStream()
}
readStream()
}
fetchData()
return () => {
}
}, [])
return (
<p>{messages}</p>
)
}Thanks!
