From c0b099da4fe06dff9a7686e3cbc329048da6f263 Mon Sep 17 00:00:00 2001 From: "Timothy J. Baek" Date: Thu, 4 Jan 2024 18:54:00 -0800 Subject: [PATCH] feat: openai frontend refac --- backend/apps/openai/main.py | 1 + src/lib/apis/openai/index.ts | 23 +++++++ src/routes/(app)/+page.svelte | 96 ++++++++++++--------------- src/routes/(app)/c/[id]/+page.svelte | 97 ++++++++++++---------------- 4 files changed, 109 insertions(+), 108 deletions(-) diff --git a/backend/apps/openai/main.py b/backend/apps/openai/main.py index c6d06a9e9..03d4621b8 100644 --- a/backend/apps/openai/main.py +++ b/backend/apps/openai/main.py @@ -82,6 +82,7 @@ async def proxy(path: str, request: Request, user=Depends(get_current_user)): headers = {} headers["Authorization"] = f"Bearer {app.state.OPENAI_API_KEY}" + headers["Content-Type"] = "application/json" try: r = requests.request( diff --git a/src/lib/apis/openai/index.ts b/src/lib/apis/openai/index.ts index c1135fee3..dcd927104 100644 --- a/src/lib/apis/openai/index.ts +++ b/src/lib/apis/openai/index.ts @@ -206,3 +206,26 @@ export const getOpenAIModelsDirect = async ( return a.name.localeCompare(b.name); }); }; + +export const generateOpenAIChatCompletion = async (token: string = '', body: object) => { + let error = null; + + const res = await fetch(`${OPENAI_API_BASE_URL}/chat/completions`, { + method: 'POST', + headers: { + Authorization: `Bearer ${token}`, + 'Content-Type': 'application/json' + }, + body: JSON.stringify(body) + }).catch((err) => { + console.log(err); + error = err; + return null; + }); + + if (error) { + throw error; + } + + return res; +}; diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte index 8fab09a2e..f1c2a8042 100644 --- a/src/routes/(app)/+page.svelte +++ b/src/routes/(app)/+page.svelte @@ -16,6 +16,7 @@ import ModelSelector from '$lib/components/chat/ModelSelector.svelte'; import Navbar from '$lib/components/layout/Navbar.svelte'; import { createNewChat, getChatList, updateChatById } from '$lib/apis/chats'; + import { generateOpenAIChatCompletion } from '$lib/apis/openai'; let stopResponseFlag = false; let autoScroll = true; @@ -345,60 +346,47 @@ window.scrollTo({ top: document.body.scrollHeight }); - const res = await fetch( - `${$settings.OPENAI_API_BASE_URL ?? 'https://api.openai.com/v1'}/chat/completions`, - { - method: 'POST', - headers: { - Authorization: `Bearer ${$settings.OPENAI_API_KEY}`, - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - model: model, - stream: true, - messages: [ - $settings.system - ? { - role: 'system', - content: $settings.system - } - : undefined, - ...messages - ] - .filter((message) => message) - .map((message) => ({ - role: message.role, - ...(message.files - ? { - content: [ - { - type: 'text', - text: message.content - }, - ...message.files - .filter((file) => file.type === 'image') - .map((file) => ({ - type: 'image_url', - image_url: { - url: file.url - } - })) - ] - } - : { content: message.content }) - })), - seed: $settings?.options?.seed ?? undefined, - stop: $settings?.options?.stop ?? undefined, - temperature: $settings?.options?.temperature ?? undefined, - top_p: $settings?.options?.top_p ?? undefined, - num_ctx: $settings?.options?.num_ctx ?? undefined, - frequency_penalty: $settings?.options?.repeat_penalty ?? undefined, - max_tokens: $settings?.options?.num_predict ?? undefined - }) - } - ).catch((err) => { - console.log(err); - return null; + const res = await generateOpenAIChatCompletion(localStorage.token, { + model: model, + stream: true, + messages: [ + $settings.system + ? { + role: 'system', + content: $settings.system + } + : undefined, + ...messages + ] + .filter((message) => message) + .map((message) => ({ + role: message.role, + ...(message.files + ? { + content: [ + { + type: 'text', + text: message.content + }, + ...message.files + .filter((file) => file.type === 'image') + .map((file) => ({ + type: 'image_url', + image_url: { + url: file.url + } + })) + ] + } + : { content: message.content }) + })), + seed: $settings?.options?.seed ?? undefined, + stop: $settings?.options?.stop ?? undefined, + temperature: $settings?.options?.temperature ?? undefined, + top_p: $settings?.options?.top_p ?? undefined, + num_ctx: $settings?.options?.num_ctx ?? undefined, + frequency_penalty: $settings?.options?.repeat_penalty ?? undefined, + max_tokens: $settings?.options?.num_predict ?? undefined }); if (res && res.ok) { diff --git a/src/routes/(app)/c/[id]/+page.svelte b/src/routes/(app)/c/[id]/+page.svelte index 61b1c7685..f76b91cde 100644 --- a/src/routes/(app)/c/[id]/+page.svelte +++ b/src/routes/(app)/c/[id]/+page.svelte @@ -9,6 +9,8 @@ import { models, modelfiles, user, settings, chats, chatId } from '$lib/stores'; import { generateChatCompletion, generateTitle } from '$lib/apis/ollama'; + import { generateOpenAIChatCompletion } from '$lib/apis/openai'; + import { copyToClipboard, splitStream } from '$lib/utils'; import MessageInput from '$lib/components/chat/MessageInput.svelte'; @@ -362,60 +364,47 @@ window.scrollTo({ top: document.body.scrollHeight }); - const res = await fetch( - `${$settings.OPENAI_API_BASE_URL ?? 'https://api.openai.com/v1'}/chat/completions`, - { - method: 'POST', - headers: { - Authorization: `Bearer ${$settings.OPENAI_API_KEY}`, - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - model: model, - stream: true, - messages: [ - $settings.system - ? { - role: 'system', - content: $settings.system - } - : undefined, - ...messages - ] - .filter((message) => message) - .map((message) => ({ - role: message.role, - ...(message.files - ? { - content: [ - { - type: 'text', - text: message.content - }, - ...message.files - .filter((file) => file.type === 'image') - .map((file) => ({ - type: 'image_url', - image_url: { - url: file.url - } - })) - ] - } - : { content: message.content }) - })), - seed: $settings?.options?.seed ?? undefined, - stop: $settings?.options?.stop ?? undefined, - temperature: $settings?.options?.temperature ?? undefined, - top_p: $settings?.options?.top_p ?? undefined, - num_ctx: $settings?.options?.num_ctx ?? undefined, - frequency_penalty: $settings?.options?.repeat_penalty ?? undefined, - max_tokens: $settings?.options?.num_predict ?? undefined - }) - } - ).catch((err) => { - console.log(err); - return null; + const res = await generateOpenAIChatCompletion(localStorage.token, { + model: model, + stream: true, + messages: [ + $settings.system + ? { + role: 'system', + content: $settings.system + } + : undefined, + ...messages + ] + .filter((message) => message) + .map((message) => ({ + role: message.role, + ...(message.files + ? { + content: [ + { + type: 'text', + text: message.content + }, + ...message.files + .filter((file) => file.type === 'image') + .map((file) => ({ + type: 'image_url', + image_url: { + url: file.url + } + })) + ] + } + : { content: message.content }) + })), + seed: $settings?.options?.seed ?? undefined, + stop: $settings?.options?.stop ?? undefined, + temperature: $settings?.options?.temperature ?? undefined, + top_p: $settings?.options?.top_p ?? undefined, + num_ctx: $settings?.options?.num_ctx ?? undefined, + frequency_penalty: $settings?.options?.repeat_penalty ?? undefined, + max_tokens: $settings?.options?.num_predict ?? undefined }); if (res && res.ok) {