From ee2540a8c8ed3741e7ec14d92d7aa8b42f278f7f Mon Sep 17 00:00:00 2001 From: mic Date: Sun, 21 Jul 2024 15:25:07 +0200 Subject: [PATCH] correctly using openai api class in the webworker --- api_webchat/controller.js | 17 +++++++++-------- api_webchat/index.html | 7 ++++--- api_webchat/model-worker.js | 37 +++++++++++++++++++++---------------- js/api/openai.js | 11 +++++++---- 4 files changed, 41 insertions(+), 31 deletions(-) diff --git a/api_webchat/controller.js b/api_webchat/controller.js index d52ffcce..966ba824 100644 --- a/api_webchat/controller.js +++ b/api_webchat/controller.js @@ -1,6 +1,6 @@ -// The controller wires up all the components and workers together, -// managing the dependencies. A kind of "DI" class. -const worker = new Worker('model-worker.js'); +// The controller wires up all the components and workers together, +// managing the dependencies. A kind of "DI" class. +const worker = new Worker('model-worker.js', { type: 'module' }); const messagesArea = document.querySelector('messages-area'); messagesArea.init(worker); @@ -11,12 +11,13 @@ messageInput.init(worker); messageInput.setMessagesArea(messagesArea); const params = new URLSearchParams(window.location.search); -const openaiApiKey = params.get('openapi-key'); -worker.postMessage({ type: 'init', openaiApiKey: openaiApiKey }); -if( openaiApiKey !== null ) { - messagesArea.appendUserMessage("Will attempt to connect to OpenAI using API key provided.", source=""); +let api_key_chatgpt = await browser.storage.sync.get({api_key_chatgpt: ''}); +// const openaiApiKey = params.get('openapi-key'); +worker.postMessage({ type: 'init', api_key_chatgpt: api_key_chatgpt }); +if( api_key_chatgpt !== null ) { + messagesArea.appendUserMessage("Will attempt to connect to OpenAI using API key provided.", ""); } else { - messagesArea.appendUserMessage("No OpenAI API key provided. Using mock data.", source=""); + messagesArea.appendUserMessage("No OpenAI API key provided. Using mock data.", ""); } diff --git a/api_webchat/index.html b/api_webchat/index.html index b2cdb7db..87c15640 100644 --- a/api_webchat/index.html +++ b/api_webchat/index.html @@ -13,8 +13,9 @@ - + + - - + + diff --git a/api_webchat/model-worker.js b/api_webchat/model-worker.js index 4638f742..479a5a4e 100644 --- a/api_webchat/model-worker.js +++ b/api_webchat/model-worker.js @@ -1,6 +1,9 @@ +import { OpenAI } from '../js/api/openai.js'; const MOCK_TOKENS = ['Good', ' morning', ' Mr', ' Plop', 'py', ',', 'and', ' I', ' said', '\n', '"', 'Good', ' morn', 'ing', ' Mrs',' Plop', 'py', ,'"', '\n', 'Oh', ' how', ' the', ' win', 'ter', ' even', 'ings', ' must', ' just', ' fly']; -const API_URL = "https://api.openai.com/v1/chat/completions"; -let openaiApiKey; + +let api_key_chatgpt = null; +let openai = null; + let conversationHistory = []; let assistantResponseAccumulator = ''; @@ -18,10 +21,11 @@ async function processMockTokens() { self.onmessage = async function(event) { if (event.data.type === 'init') { - openaiApiKey = event.data.openaiApiKey; + api_key_chatgpt = event.data.api_key_chatgpt; + openai = new OpenAI(api_key_chatgpt, true); } else if (event.data.type === 'chatMessage') { // MOCK - if( openaiApiKey === null ) { + if( api_key_chatgpt === null ) { // Simulate sending the message to an HTTP endpoint await mockDelay(1000); // Wait for 1 second @@ -38,18 +42,19 @@ self.onmessage = async function(event) { // https://platform.openai.com/docs/models/gpt-4-and-gpt-4-turbo // 4096 output tokens // 128,000 input tokens - const response = await fetch(API_URL, { - method: "POST", - headers: { - "Content-Type": "application/json", - "Authorization": `Bearer ${openaiApiKey}`, - }, - body: JSON.stringify({ - model: "gpt-4-1106-preview", - messages: conversationHistory, - stream: true, - }), - }); + // const response = await fetch(API_URL, { + // method: "POST", + // headers: { + // "Content-Type": "application/json", + // "Authorization": `Bearer ${openaiApiKey}`, + // }, + // body: JSON.stringify({ + // model: "gpt-4-1106-preview", + // messages: conversationHistory, + // stream: true, + // }), + // }); + const response = await openai.fetchResponse("gpt-4-1106-preview", conversationHistory); //4096); postMessage({ type: 'messageSent' }); const reader = response.body.getReader(); const decoder = new TextDecoder("utf-8"); diff --git a/js/api/openai.js b/js/api/openai.js index ed40630f..c3683e04 100644 --- a/js/api/openai.js +++ b/js/api/openai.js @@ -22,9 +22,11 @@ export class OpenAI { apiKey = ''; + stream = false; - constructor(apiKey) { + constructor(apiKey, stream) { this.apiKey = apiKey; + this.stream = stream; } @@ -46,7 +48,7 @@ export class OpenAI { return await response.json(); } - fetchResponse = async (model, messages, maxTokens) => { + fetchResponse = async (model, messages, maxTokens = 0) => { const response = await fetch("https://api.openai.com/v1/chat/completions", { method: "POST", headers: { @@ -54,8 +56,9 @@ export class OpenAI { Authorization: "Bearer "+ this.apiKey }, body: JSON.stringify({ - model, - messages: messages, + model: model, + messages: messages, + stream: this.stream, ...(maxTokens > 0 ? { 'max_tokens': parseInt(maxTokens) } : {}) }), });