correctly using openai api class in the webworker

api_webchat/controller.js

@@ -1,6 +1,6 @@
-// The controller wires up all the components and workers together, 
+// The controller wires up all the components and workers together,
-// managing the dependencies. A kind of "DI" class. 
+// managing the dependencies. A kind of "DI" class.
-const worker = new Worker('model-worker.js');
+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');
+let api_key_chatgpt = await browser.storage.sync.get({api_key_chatgpt: ''});
-worker.postMessage({ type: 'init', openaiApiKey: openaiApiKey });
+// const openaiApiKey = params.get('openapi-key');
-if( openaiApiKey !== null ) {
+worker.postMessage({ type: 'init', api_key_chatgpt: api_key_chatgpt });
-    messagesArea.appendUserMessage("Will attempt to connect to OpenAI using API key provided.", source="");
+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.", "");
 }
 
 

api_webchat/index.html

@@ -13,8 +13,9 @@
     </div>
 
     <!-- Include the JavaScript files at bottom to avoid blocking UI -->
-    <script src="messageInput.js" defer></script>
+    <!-- <script src="../js/api/openai.js" type="module" defer></script> -->
+    <script src="messageInput.js" type="module" defer></script>
     <script src="markdown-it.min.js"></script>
-    <script src="messagesArea.js" defer></script>
+    <script src="messagesArea.js" type="module" defer></script>
-    <script src="controller.js" defer></script>
+    <script src="controller.js" type="module" defer></script>
 </body>

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, {
+            // const response = await fetch(API_URL, {
-                method: "POST",
+            //     method: "POST",
-                headers: {
+            //     headers: {
-                    "Content-Type": "application/json",
+            //         "Content-Type": "application/json",
-                    "Authorization": `Bearer ${openaiApiKey}`,
+            //         "Authorization": `Bearer ${openaiApiKey}`,
-                },
+            //     },
-                body: JSON.stringify({
+            //     body: JSON.stringify({
-                    model: "gpt-4-1106-preview",
+            //         model: "gpt-4-1106-preview",
-                    messages: conversationHistory,
+            //         messages: conversationHistory,
-                    stream: true,
+            //         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");

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, 
+            model: model, 
-            messages: messages, 
+            messages: messages,
+            stream: this.stream,
             ...(maxTokens > 0 ? { 'max_tokens': parseInt(maxTokens) } : {})
         }),
     });