The console is flooded with a stream of responses from the backend.
I am not sure this was the intention, especially for the production release.

Good Day, Sir!

How can I stream the OpenAI Completion?

I tried it on my end, but I can't make it.

Reference:

https://www.beskar.co/blog/streaming-openai-completions-vercel-edge

As title, I forked your project (thanks for this interesting project), I added GA in the header.tsx file but it never work. Any ideas?
Here is my code:

import { useEffect } from "react";


export default function Header() {
  useEffect(() => {
    // GA跟踪代码
    window.gtag("config", "G-DEWJBLD2BG");
  }, []);

My project: https://github.com/Amber1990Zhang/oceanbase-sql-gpt/blob/main/components/Header.tsx

This is such an amazing tool I must say, but Twitter has a 160 character limit and sometimes the output is longer.

But I'm not sure if this should be included in the product (i.e if the product is only meant to be for inspiration)

This Image 1, and this Image 2, are identical. Neither of these images has been utilized anywhere within this application.

Can you add a license to the repo?

It would be great to have responses with a little bit of markdown like

Bio 1: : result of bio 1

Bio 2 : result of bio 2

how can I further customize the reply text layout?

I know the streaming works for gpt3, and I notice the commit today that supports gpt3.5 turbo.

but I tried it out and the streaming is not working properly

is this fully supported already or wip?

How to add more components to the app. Especially a multi-select checkbox to provide variables to the prompt?

If the chunk is an error data ({"error":{}}), the onParse() function will NOT be invoke. Need error handler here.

{"prompt":"Generate 2 funny twitter bios with no hashtags and clearly labeled "1." and "2.". Make sure there is a joke in there and it's a little ridiculous. Make sure each generated bio is at max 20 words and base it on this context: Sharing my thoughts on technology and life."}

 A tech enthusiast trying to make sense of this crazy world. #WishMeLuck

I forked this repo and created some small projects that use NextJS13 and Vercel edge runtime to communicate with openAI API.

In particular I'm using the OpenAIStream from this repo.
While everything works well in localhost, I'm constantly getting timeout errors in production.

I also deployed this project as is, though.

One possible issue might be that I've tweaked the max_tokens parameter to allow longer prompts and responses.

Overall, the problem is that I'm unable to debug what's going wrong in OpenAIStream at runtime.

I naively tried

          } catch (e) {
+           console.log(e);
            // maybe parse error
            controller.error(e);
          }

But I'm not getting any output in the vercel log

Any suggestion?

What's stopping people to just run
curl 'https://www.twitterbio.io/api/generate' --compressed -X POST -H 'Content-Type: application/json' --data-raw '{"prompt":" Tell me a joke"}'?

When you run this code nothing is loading onto the screen?

Hi @Nutlope ,

Initiallly, when I entered the text "Mechanical engineer with 7 years of experience..." and chose the "Professional" option, I found that the Twitter bio displayed was that of a digital marketer consistently.

Subsequently, when I input the text "Historian with 10 years of experience..." and selected the "Professional" option, the Twitter bio being shown was that of the Mechanical engineer with 7 years of experience, which was the bio I had provided earlier.

It seems that regardless of the bio I initially input, the generated Twitter bio is consistently related to digital marketing. From the second attempt onwards, it continues to display the previously generated bio.

I would greatly appreciate any assistance in resolving this issue. Thank you in advance!

I tried implementing CORS based on the documentation provided in edge-functions-cors
but unfortunately, it's not functioning as expected.

import { OpenAIStream } from "@/utils/OpenAIStream";
import cors from "@/utils/cors";
import { NextRequest } from "next/server";

export const config = {
  runtime: "edge",
};

const handler = async (req: NextRequest): Promise<Response> => {
  const { prompt } = (await req.json()) as {
    prompt?: string;
  };

  const payload = {
    model: "gpt-3.5-turbo",
    messages: [{ role: 'user', content: prompt }],
    temperature: 0.9,
    stream: true,
    // max_tokens: maxWordLimit,
  };

  const stream = await OpenAIStream(payload);
  
  return cors(req, new Response(stream, {
    headers: {
      'Content-Type': 'application/octet-stream',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers': 'Content-Type',
    }
  }))
};

export default handler;

Issue fixed by updating useState("300") to useState(300)

Aside from the prompt, I want to send over "max tokens" to the handler but it's only picking up the prompt and ignoring everything else.

generate.ts

const handler = async (req: Request): Promise<Response> => {
  const { prompt, smaxtoken } = (await req.json()) as {
    prompt?: string;
    smaxtoken?: number; <----- NOT BEING RECONIZED 
  };

  if (!prompt || !smaxtoken) {
    return new Response("No prompt in the request", { status: 400 });
  }

  const payload: OpenAIStreamPayload = {
    model: 'gpt-4',
    messages: [{ role: "user", content: prompt }],
    temperature: 0.7,
    top_p: 1,
    frequency_penalty: 0,
    presence_penalty: 0,
    max_tokens: smaxtoken, <----- NOT BEING RECONIZED 
    stream: true,
    n: 1,
  };

component.tsx

const [smaxtoken, setMmaxtoken] = useState("320");
 const generateBio = async (e: any) => {
    e.preventDefault();
    setGeneratedBios("");
    setLoading(true);
    const response = await fetch("/api/generate", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        prompt,
        smaxtoken, <--------- VALUE BEING SENT OVER
      }),
    });

Value is being sent over successfully

I can't use edge functions as some of the dependencies (Firebase) require node.js so is there a way to stream response from openai and pass it to fronted using serverless functions?

I copied OpenAIStream and generate.ts to implement it my codebase but getting below error

OpenAIStream.ts:73 Uncaught (in promise) TypeError: res.body is not async iterable
    at Object.start (webpack-internal:///(app-client)/./utils/OpenAIStream.ts:52:43)
    at OpenAIStream (webpack-internal:///(app-client)/./utils/OpenAIStream.ts:20:20)
    at async generate (webpack-internal:///(app-client)/./app/gen/generate.ts:37:20)
    at async sendMessage (webpack-internal:///(app-client)/./app/chat/page.tsx:30:26)

in line

Not sure, what should I change. May be some package version? but which

Do you know how to fix this error: "error - Provided runtime "edge" is not supported. Please leave it empty or choose one of: experimental-edge, nodejs"?

I see this on my server and I am on Next.js v12.3.0. My route is defined in pages/api/*

It works will on my local, but after I upload to my vercel, it not works anymore.

https://testgpt-gamma.vercel.app/

After a user generate his/her bio the button text should be changed to regenerate your bio.

I observe that when the bio field remains the same and only vibes change, the form doesn't get submitted.
This may be because handleInputChange is tied only to the bio text field.

Is there a way to track multiple field updates?

The response = await fetch () in generateBio never gets back. I've print out the OpenAIStream in console and can see the text stream and "Done". What might be the problem?

The bio generator tool is so good (5 star) but Twitter has a word limit of 160 words. How can you resolve this issue?