From 771d166c6f2793698f874ce30a238c5b26eea444 Mon Sep 17 00:00:00 2001
From: kypaku <kypaku@mail.ru>
Date: Mon, 3 Jul 2023 19:18:04 +0300
Subject: [PATCH] feat: fix stream + edit json settings

---
 package-lock.json                            | 14 +--
 package.json                                 |  2 +-
 src/App.vue                                  |  8 ++
 src/api/openai.ts                            | 92 +++++++++++---------
 src/components/openai/OpenAITextSettings.vue | 33 ++++++-
 5 files changed, 96 insertions(+), 53 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f20bcec..7a8d2c9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "eventsource-parser": "^1.0.0",
         "gpt-simple-api-ts": "^1.0.35",
         "local-storage": "^2.0.0",
-        "openai": "^3.2.1",
+        "openai": "^3.3.0",
         "postcss": "^8",
         "request": "^2.88.2",
         "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
@@ -12444,9 +12444,9 @@
       }
     },
     "node_modules/openai": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/openai/-/openai-3.2.1.tgz",
-      "integrity": "sha512-762C9BNlJPbjjlWZi4WYK9iM2tAVAv0uUp1UmI34vb0CN5T2mjB/qM6RYBmNKMh/dN9fC+bxqPwWJZUTWW052A==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/openai/-/openai-3.3.0.tgz",
+      "integrity": "sha512-uqxI/Au+aPRnsaQRe8CojU0eCR7I0mBiKjD3sNMzY6DaC1ZVrc85u98mtJW6voDug8fgGN+DIZmTDxTthxb7dQ==",
       "dependencies": {
         "axios": "^0.26.0",
         "form-data": "^4.0.0"
@@ -29135,9 +29135,9 @@
       }
     },
     "openai": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/openai/-/openai-3.2.1.tgz",
-      "integrity": "sha512-762C9BNlJPbjjlWZi4WYK9iM2tAVAv0uUp1UmI34vb0CN5T2mjB/qM6RYBmNKMh/dN9fC+bxqPwWJZUTWW052A==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/openai/-/openai-3.3.0.tgz",
+      "integrity": "sha512-uqxI/Au+aPRnsaQRe8CojU0eCR7I0mBiKjD3sNMzY6DaC1ZVrc85u98mtJW6voDug8fgGN+DIZmTDxTthxb7dQ==",
       "requires": {
         "axios": "^0.26.0",
         "form-data": "^4.0.0"
diff --git a/package.json b/package.json
index caed4a5..320f6c6 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "eventsource-parser": "^1.0.0",
     "gpt-simple-api-ts": "^1.0.35",
     "local-storage": "^2.0.0",
-    "openai": "^3.2.1",
+    "openai": "^3.3.0",
     "postcss": "^8",
     "request": "^2.88.2",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
diff --git a/src/App.vue b/src/App.vue
index b664da5..04f3c09 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -58,6 +58,10 @@
                 class="w-full rounded-lg mt-8"
                 :rows="10"
             />
+            <div class="tokens-left text-xs">
+                <span>Tokens count (approximate): </span>
+                <span>{{ tokensCount }}</span>
+            </div>
             <button
                 v-if="tab === 'audio'"
                 :disabled="isTranscribing || !audioFile"
@@ -162,6 +166,10 @@
             };
         },
         computed: {
+            tokensCount(): number {
+                return this.prompt.length / 4
+            },
+
             langCodes(): InputTextSuggestion[] {
                 return languageCodes.map((code) => ({
                     name: code,
diff --git a/src/api/openai.ts b/src/api/openai.ts
index 1577abe..a8cfe9a 100644
--- a/src/api/openai.ts
+++ b/src/api/openai.ts
@@ -23,6 +23,7 @@ export default class SimpleGPT {
     protected _configuration: Configuration | null
     protected _openai: OpenAIApi | null
     protected req: any
+    protected reader: any
 
     public get chatModels(): string[] {
         return ["gpt-3.5-turbo", "gpt-4"];
@@ -67,7 +68,7 @@ export default class SimpleGPT {
         return response.text;
     }
 
-    async getStream(prompt: string, fData: (raw: any, json: {[key: string]: any}, delta: string) => any, fEnd: any, opts?: Partial<CreateCompletionRequest & CreateChatCompletionRequest>): Promise<void> {
+    async getStream(prompt: string, fData: (delta: string, json: {[key: string]: any}, raw: any) => any, fEnd: any, opts?: Partial<CreateCompletionRequest & CreateChatCompletionRequest>): Promise<void> {
         return new Promise((resolve, reject) => {
             const model = opts?.model || this.defaultOptsGPT.model || "";
 
@@ -88,66 +89,75 @@ export default class SimpleGPT {
                 frequency_penalty: opts?.frequency_penalty || this.defaultOptsGPT.frequency_penalty,
                 presence_penalty: opts?.presence_penalty || this.defaultOptsGPT.presence_penalty,
                 stream: opts?.stream || true,
+                logit_bias: opts?.logit_bias || {},
+                function_call: opts?.function_call || undefined,
+                functions: opts?.functions || undefined,
             };
             const body = JSON.stringify(bodyRaw);
 
-            this.req = request({
-                url: "https://api.openai.com" + endpoint,
-                // hostname: "api.openai.com",
-                // port: 443,
-                // path: endpoint,
-                // signal: signal as any,
+            fetch("https://api.openai.com" + endpoint, {
                 method: "POST",
                 headers: {
                     "Content-Type": "application/json",
                     Authorization: "Bearer " + this._key
                 },
                 body: body,
-            });
+            }).then(async (response) => {
+                this.reader = response.body?.pipeThrough(new TextDecoderStream()).getReader();
 
-            this.req.on("error", (e: any) => {
-                console.error("problem with request:" + e.message);
-            });
+                const choices = [];
 
-            // req.write(body);
-            this.req.on("data", (chunk: any) => {
-                try {
-                    let delta = "";
-                    if (chunk?.toString().match(/^\{\n\s+\"error\"\:/)) {
-                        console.error("getStream error:", chunk.toString());
-                        reject(JSON.parse(chunk.toString().trim()));
-                        return;
+                const cancelled = false;
+                while (true) {
+                    if (!this.reader) break;
+                    const { value, done } = await this.reader.read();
+
+                    if (done) {
+                        break;
                     }
-                    const lines = chunk?.toString()?.split("\n") || [];
-                    const filtredLines = lines.filter((line: string) => line.trim());
-                    const line = filtredLines[filtredLines.length - 1];
-                    const data = line.toString().replace("data:", "").replace("[DONE]", "").replace("data: [DONE]", "").trim();
-                    if (data) {
-                        const json = JSON.parse(data);
-                        json.choices.forEach((choice: any) => {
-                            delta += choice.text || choice.message?.content || choice.delta?.content || "";
-                        });
-                        fData(delta, json, chunk.toString());
+
+                    if (value.startsWith("{")) {
+                        await this.reader.cancel();
+
+                        // As far as I can tell, if the response is an object, then it is an unrecoverable error.
+                        throw new Error(value);
                     }
-                } catch (e) {
-                    console.error("getStream handle chunk error:", e, chunk.toString());
-                }
-            });
+                    const chunks = value.split("\n").map((chunk: any) => chunk.trim()).filter(Boolean);
 
-            this.req.on("end", () => {
-                fEnd?.();
-                resolve();
-            });
+                    for (const chunk of chunks) {
+                        if (done) {
+                            break;
+                        }
 
-            this.req.on("abort", () => {
-                fEnd?.();
-                resolve();
+                        if (chunk === "") {
+                            continue;
+                        }
+
+                        if (chunk === "data: [DONE]") {
+                            await this.reader.cancel();
+
+                            break;
+                        }
+
+                        if (!chunk.startsWith("data: ")) {
+                            throw new Error(`Unexpected message: ${chunk}`);
+                        }
+
+                        try {
+                            const responseChunk = JSON.parse(chunk.toString().slice("data: ".length));
+
+                            fData(responseChunk.choices?.[0]?.delta?.content, responseChunk, chunk);
+                        } catch (e) {
+                            throw new Error(`Unexpected message: ${chunk}`);
+                        }
+                    }
+                }
             });
         });
     }
 
     abortStream() {
-        const res = this.req.abort();
+        this.reader.cancel();
     }
 
     async get(prompt: string, opts?: Partial<CreateCompletionRequest & CreateChatCompletionRequest>): Promise<null | string[]> {
diff --git a/src/components/openai/OpenAITextSettings.vue b/src/components/openai/OpenAITextSettings.vue
index 4446f61..886c037 100644
--- a/src/components/openai/OpenAITextSettings.vue
+++ b/src/components/openai/OpenAITextSettings.vue
@@ -1,7 +1,10 @@
 <template>
     <div class="query-settings">
-        <b>GPT settings</b>
-        <div class="settingsWrapper flex-col">
+        <div class="flex-center-between">
+            <b>GPT settings</b>
+            <button class="underline text-sm"  @click="editJson = !editJson"> {{ editJson ? 'Hide' : 'Edit' }} json </button>
+        </div>
+        <div class="settingsWrapper flex-col" v-if="!editJson">
             <InputText
                 class="mt-1"
                 name="model"
@@ -69,6 +72,9 @@
                 "
             /> -->
         </div>
+        <div v-else>
+            <textarea v-model="json" @input="ev => $emit('update:value', JSON.parse(ev?.target?.value))" rows="15" class="w-full"></textarea>
+        </div>
     </div>
 </template>
 
@@ -94,7 +100,10 @@
             ToggleSwitch
         },
         data() {
-            return {};
+            return {
+                json: "",
+                editJson: false,
+            };
         },
         computed: {
             modelsSuggestions(): InputTextSuggestion[] {
@@ -106,7 +115,17 @@
                 console.log(this.value?.max_tokens);
             },
         },
-    // mounted() {},
+        // mounted() {},
+
+        watch: {
+            value: {
+                handler(newVal) {
+                    this.json = JSON.stringify(newVal, null, 2);
+                },
+                deep: true,
+                immediate: true,
+            },
+        },
     });
 </script>
 
@@ -118,4 +137,10 @@
         display: flex;
     }
 }
+
+.flex-center-between {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
 </style>