From c7384cc3537a0b062a578570a72fb1909cb8bd19 Mon Sep 17 00:00:00 2001 From: isafulf <51974293+isafulf@users.noreply.github.com> Date: Sun, 2 Apr 2023 17:28:29 -0700 Subject: [PATCH] use ChatGPT API in nextjs example --- .../nextjs/src/components/FileQandAArea.tsx | 9 ++ .../src/pages/api/get-answer-from-files.ts | 3 - .../nextjs/src/services/openai.ts | 91 +++++++++++++------ 3 files changed, 74 insertions(+), 29 deletions(-) diff --git a/apps/file-q-and-a/nextjs/src/components/FileQandAArea.tsx b/apps/file-q-and-a/nextjs/src/components/FileQandAArea.tsx index 2aaa7878..9b92bcf6 100644 --- a/apps/file-q-and-a/nextjs/src/components/FileQandAArea.tsx +++ b/apps/file-q-and-a/nextjs/src/components/FileQandAArea.tsx @@ -55,6 +55,8 @@ function FileQandAArea(props: FileQandAAreaProps) { if (searchResultsResponse.status === 200) { results = searchResultsResponse.data.searchResults; + } else if (searchResultsResponse.status === 500) { + setAnswerError("Internal server error. Please try again later."); } else { setAnswerError("Sorry, something went wrong!"); } @@ -74,6 +76,13 @@ function FileQandAArea(props: FileQandAAreaProps) { fileChunks: results, }), }); + + if (res.status === 500) { + setAnswerError("Internal server error. Please try again later."); + setAnswerLoading(false); + return; + } + const reader = res.body!.getReader(); while (true) { diff --git a/apps/file-q-and-a/nextjs/src/pages/api/get-answer-from-files.ts b/apps/file-q-and-a/nextjs/src/pages/api/get-answer-from-files.ts index 050fa3e8..ee9a8f68 100644 --- a/apps/file-q-and-a/nextjs/src/pages/api/get-answer-from-files.ts +++ b/apps/file-q-and-a/nextjs/src/pages/api/get-answer-from-files.ts @@ -40,8 +40,6 @@ export default async function handler( .join("\n") .slice(0, MAX_FILES_LENGTH); - console.log(filesString); - const prompt = `Given a question, try to answer it using the content of the file extracts below, and if you cannot answer, or find a relevant file, just output \"I couldn't find the answer to that question in your files.\".\n\n` + `If the answer is not contained in the files or if there are no file extracts, respond with \"I couldn't find the answer to that question in your files.\" If the question is not actually a question, respond with \"That's not a valid question.\"\n\n` + @@ -53,7 +51,6 @@ export default async function handler( const stream = completionStream({ prompt, - model: "text-davinci-003", }); // Set the response headers for streaming diff --git a/apps/file-q-and-a/nextjs/src/services/openai.ts b/apps/file-q-and-a/nextjs/src/services/openai.ts index ebb46fbd..3d6c6c80 100644 --- a/apps/file-q-and-a/nextjs/src/services/openai.ts +++ b/apps/file-q-and-a/nextjs/src/services/openai.ts @@ -1,8 +1,9 @@ import { IncomingMessage } from "http"; import { + ChatCompletionRequestMessageRoleEnum, Configuration, + CreateChatCompletionResponse, CreateCompletionRequest, - CreateCompletionResponse, OpenAIApi, } from "openai"; @@ -30,24 +31,30 @@ type EmbeddingOptions = { export async function completion({ prompt, fallback, - max_tokens = 800, + max_tokens, temperature = 0, - model = "text-davinci-003", - ...otherOptions + model = "gpt-3.5-turbo", // use gpt-4 for better results }: CompletionOptions) { try { - const result = await openai.createCompletion({ - prompt, - max_tokens, - temperature, + // Note: this is not the proper way to use the ChatGPT conversational format, but it works for now + const messages = [ + { + role: ChatCompletionRequestMessageRoleEnum.System, + content: prompt ?? "", + }, + ]; + + const result = await openai.createChatCompletion({ model, - ...otherOptions, + messages, + temperature, + max_tokens: max_tokens ?? 800, }); - if (!result.data.choices[0].text) { - throw new Error("No text returned from the completions endpoint."); + if (!result.data.choices[0].message) { + throw new Error("No text returned from completions endpoint"); } - return result.data.choices[0].text; + return result.data.choices[0].message.content; } catch (error) { if (fallback) return fallback; else throw error; @@ -59,33 +66,65 @@ export async function* completionStream({ fallback, max_tokens = 800, temperature = 0, - model = "text-davinci-003", + model = "gpt-3.5-turbo", // use gpt-4 for better results }: CompletionOptions) { try { - const result = await openai.createCompletion( + // Note: this is not the proper way to use the ChatGPT conversational format, but it works for now + const messages = [ + { + role: ChatCompletionRequestMessageRoleEnum.System, + content: prompt ?? "", + }, + ]; + + const result = await openai.createChatCompletion( { - prompt, - max_tokens, - temperature, model, + messages, + temperature, + max_tokens: max_tokens ?? 800, stream: true, }, - { responseType: "stream" } + { + responseType: "stream", + } ); - const stream = result.data as any as IncomingMessage; - for await (const chunk of stream) { - const line = chunk.toString().trim(); - const message = line.split("data: ")[1]; + let buffer = ""; + const textDecoder = new TextDecoder(); - if (message === "[DONE]") { - break; + for await (const chunk of stream) { + buffer += textDecoder.decode(chunk, { stream: true }); + const lines = buffer.split("\n"); + + // Check if the last line is complete + if (buffer.endsWith("\n")) { + buffer = ""; + } else { + buffer = lines.pop() || ""; } - const data = JSON.parse(message) as CreateCompletionResponse; + for (const line of lines) { + const message = line.trim().split("data: ")[1]; + if (message === "[DONE]") { + break; + } - yield data.choices[0].text; + // Check if the message is not undefined and a valid JSON string + if (message) { + try { + const data = JSON.parse(message) as CreateChatCompletionResponse; + // @ts-ignore + if (data.choices[0].delta?.content) { + // @ts-ignore + yield data.choices[0].delta?.content; + } + } catch (error) { + console.error("Error parsing JSON message:", error); + } + } + } } } catch (error) { if (fallback) yield fallback;