jason/ThunderAI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

correctly using openai api class in the webworker

Browse source
This commit is contained in:
mic 2024-07-21 15:25:07 +02:00
parent 0febb327fa
commit ee2540a8c8
4 changed files with 41 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
api_webchat/controller.js
View file

@ -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.", "");
}

7
api_webchat/index.html
View file

@ -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="controller.js" defer></script>
<script src="messagesArea.js" type="module" defer></script>
<script src="controller.js" type="module" defer></script>
</body>

37
api_webchat/model-worker.js
View file

@ -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");

11
js/api/openai.js
View file

@ -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) } : {})
}),
});