hello everyone, I am working on streaming text data from an OpenAI endpoint to my client while maint

B

bkyervOP•9/19/23, 10:34 AM

Uncaught (in promise) TypeError: This ReadableStream did not return bytes.

Uncaught (in promise) TypeError: This ReadableStream did not return bytes.

Uncaught (in promise) TypeError: This ReadableStream did not return bytes.

Uncaught (in promise) TypeError: This ReadableStream did not return bytes.

Bbkyerv hello everyone, I am working on streaming text data from an OpenAI endpoint to m...

H

Hello, I’m Allie!•9/19/23, 10:34 AM

Can't you convert to-from bytes with

Text(En/De)coder

Text(En/De)coder

Text(En/De)coder

Text(En/De)coder?

B

bkyervOP•9/19/23, 10:35 AM

I thought if openai returns chunks in string I can do the same. Are you suggesting to convert the string chunks I received from openai to bytes before transmitting to client?

Bbkyerv I thought if openai returns chunks in string I can do the same. Are you suggesti...

H

Hello, I’m Allie!•9/19/23, 10:36 AM

Maybe? Try it, and see if it works

B

bkyervOP•9/19/23, 10:43 AM

it works but when on the client I am logging the chunks from the reader I see the whole text logged in one go instead of piece by piece. does transformstream implementation in cloudflare performs any buffering before sending the data over network?

B

bkyervOP•9/19/23, 10:43 AM

thank you for pointing the text encoder

B

bkyervOP•9/19/23, 11:39 AM

I just noticed someone else got stuck into it as well 2 days ago workers-and-pages-helpHow to make a Worker stream (an OpenAI) response back to the front-end?

Bbkyerv I just noticed someone else got stuck into it as well 2 days ago https://discord...

M

matt•9/19/23, 11:46 AM

Are you sure you can call

writer.close()

writer.close()

writer.close()

writer.close() before the response has been received?

B

bkyervOP•9/19/23, 12:05 PM

yes, but I call it outside of the loop that iterates over chunks like so

const { readable, writable } = new TransformStream();

                    const writer = writable.getWriter();
                    const encoder = new TextEncoder();

                    try {
                        for await (const chunk of completions) {
                            const content = chunk['choices'][0].delta.content!;
                            const encodedMessage = encoder.encode(content);
                            writer.write(encodedMessage);
                        }
                        writer.close();
                        return new Response(readable, {
                            headers: {
                                ...corsHeaders,
                            },
                        });
                    } catch (e) {
                        console.error(e);
                        // writer.abort(e);
                        return new Response('bad bad error', { headers: corsHeaders });
                    }

const { readable, writable } = new TransformStream();

                    const writer = writable.getWriter();
                    const encoder = new TextEncoder();

                    try {
                        for await (const chunk of completions) {
                            const content = chunk['choices'][0].delta.content!;
                            const encodedMessage = encoder.encode(content);
                            writer.write(encodedMessage);
                        }
                        writer.close();
                        return new Response(readable, {
                            headers: {
                                ...corsHeaders,
                            },
                        });
                    } catch (e) {
                        console.error(e);
                        // writer.abort(e);
                        return new Response('bad bad error', { headers: corsHeaders });
                    }

const { readable, writable } = new TransformStream();

                    const writer = writable.getWriter();
                    const encoder = new TextEncoder();

                    try {
                        for await (const chunk of completions) {
                            const content = chunk['choices'][0].delta.content!;
                            const encodedMessage = encoder.encode(content);
                            writer.write(encodedMessage);
                        }
                        writer.close();
                        return new Response(readable, {
                            headers: {
                                ...corsHeaders,
                            },
                        });
                    } catch (e) {
                        console.error(e);
                        // writer.abort(e);
                        return new Response('bad bad error', { headers: corsHeaders });
                    }

const { readable, writable } = new TransformStream();

                    const writer = writable.getWriter();
                    const encoder = new TextEncoder();

                    try {
                        for await (const chunk of completions) {
                            const content = chunk['choices'][0].delta.content!;
                            const encodedMessage = encoder.encode(content);
                            writer.write(encodedMessage);
                        }
                        writer.close();
                        return new Response(readable, {
                            headers: {
                                ...corsHeaders,
                            },
                        });
                    } catch (e) {
                        console.error(e);
                        // writer.abort(e);
                        return new Response('bad bad error', { headers: corsHeaders });
                    }

Bbkyerv yes, but I call it outside of the loop that iterates over chunks like so ```Type...

H

Hello, I’m Allie!•9/19/23, 12:06 PM

Oh yeah, you have to return the response before you write to the

WritableStream

WritableStream

WritableStream

WritableStream

H

Hello, I’m Allie!•9/19/23, 12:07 PM

Otherwise it will wait for it to finish before returning

B

bkyervOP•9/19/23, 12:09 PM

if I move the return statements above the loop the whole loop will not be executed. Can you please point more precisely where exactly I need tto move the returning the response?

M

matt•9/19/23, 12:17 PM

@bkyerv is this not working? https://developers.cloudflare.com/workers/examples/openai-sdk-streaming/

Bbkyerv if I move the return statements above the loop the whole loop will not be execut...

H

Hello, I’m Allie!•9/19/23, 12:42 PM

Wrap the loop in an async function then put it in a waitUntil

B

bkyervOP•9/19/23, 12:43 PM

@m.a.t.t.t it does, but the way it's set up essentially negates the benefits of streaming. The issue is that it waits for all chunks from the OpenAI completion to be written into the stream before sending the entire response to the client. This behavior is contrary to the expectations of users, including myself and another individual who opened a ticket in the help section. We anticipate that the response should be streamed to the client in smaller, incremental pieces. To achieve this, the following changes need to be made:

Typescript 
const { readable, writable } = new TransformStream();

                    const writer = writable.getWriter();
                    const encoder = new TextEncoder();
                    const response = new Response(readable, {
                        headers: {
                            ...corsHeaders,
                        },
                    });
                    (async () => {
                        try {
                            for await (const chunk of completions) {
                                const content = chunk['choices'][0].delta.content!;
                                const encodedMessage = encoder.encode(content);
                                writer.write(encodedMessage);
                            }
                            writer.close();
                        } catch (e) {
                            console.error(e);
                            // writer.abort(e);
                            return new Response('bad bad error', { headers: corsHeaders });
                        }
                    })();
                    return response;

Typescript 
const { readable, writable } = new TransformStream();

                    const writer = writable.getWriter();
                    const encoder = new TextEncoder();
                    const response = new Response(readable, {
                        headers: {
                            ...corsHeaders,
                        },
                    });
                    (async () => {
                        try {
                            for await (const chunk of completions) {
                                const content = chunk['choices'][0].delta.content!;
                                const encodedMessage = encoder.encode(content);
                                writer.write(encodedMessage);
                            }
                            writer.close();
                        } catch (e) {
                            console.error(e);
                            // writer.abort(e);
                            return new Response('bad bad error', { headers: corsHeaders });
                        }
                    })();
                    return response;

Typescript 
const { readable, writable } = new TransformStream();

                    const writer = writable.getWriter();
                    const encoder = new TextEncoder();
                    const response = new Response(readable, {
                        headers: {
                            ...corsHeaders,
                        },
                    });
                    (async () => {
                        try {
                            for await (const chunk of completions) {
                                const content = chunk['choices'][0].delta.content!;
                                const encodedMessage = encoder.encode(content);
                                writer.write(encodedMessage);
                            }
                            writer.close();
                        } catch (e) {
                            console.error(e);
                            // writer.abort(e);
                            return new Response('bad bad error', { headers: corsHeaders });
                        }
                    })();
                    return response;

Typescript 
const { readable, writable } = new TransformStream();

                    const writer = writable.getWriter();
                    const encoder = new TextEncoder();
                    const response = new Response(readable, {
                        headers: {
                            ...corsHeaders,
                        },
                    });
                    (async () => {
                        try {
                            for await (const chunk of completions) {
                                const content = chunk['choices'][0].delta.content!;
                                const encodedMessage = encoder.encode(content);
                                writer.write(encodedMessage);
                            }
                            writer.close();
                        } catch (e) {
                            console.error(e);
                            // writer.abort(e);
                            return new Response('bad bad error', { headers: corsHeaders });
                        }
                    })();
                    return response;

HHello, I’m Allie!Wrap the loop in an async function then put it in a waitUntil

B

bkyervOP•9/19/23, 12:45 PM

Thank you, that's what I ended up doing by talking to chatgpt)) In general, can you please suggest some resources to learn more about streams. Not in million years I would guess that response needs to be constructed before starting to write into stream. Also what is the need for waitUntil?

Bbkyerv Thank you, that's what I ended up doing by talking to chatgpt)) In general, can ...

H

Hello, I’m Allie!•9/19/23, 12:45 PM

If you don’t use waitUntil then it will cut off the loop once you return a Response

S

sathoro•9/19/23, 1:02 PM

yeah that doc (https://developers.cloudflare.com/workers/examples/openai-sdk-streaming/) needs to be updated lol

HHello, I’m Allie!Wrap the loop in an async function then put it in a waitUntil

S

sathoro•9/19/23, 1:03 PM

this is what we do in prod, works great

E

Elliot Hesp•9/19/23, 2:01 PM

When using the cache within a worker, does it autoamtically apply a cache-control header if cached? I don't set one when I store it in cache, but there seems to be one there with a value of

14400

✦

✦ xcaeser•9/19/23, 2:50 PM

tried workers for the first time. usually on aws lambda and vercel functions...

✦

✦ xcaeser•9/19/23, 2:51 PM

this is vercel

✦

✦ xcaeser•9/19/23, 2:51 PM

this is aws