From 2136f455444380c089f8556b7c71d948cd9fdd6f Mon Sep 17 00:00:00 2001
From: kypaku <kypaku@mail.ru>
Date: Mon, 8 May 2023 19:09:22 +0300
Subject: [PATCH] update

---
 .eslintrc.js                          |   1 +
 src/App.vue                           | 155 +++++++++++++++++---------
 src/api/openai.ts                     | 128 +++++++++------------
 src/components/misc/Accordeon.vue     |  51 +++++++++
 src/components/misc/Error.vue         |  38 +++++++
 src/components/misc/InputText.vue     |  50 +++++----
 src/components/misc/Tabs.vue          |   9 +-
 src/components/openai/InputAPIKey.vue |   5 +-
 8 files changed, 285 insertions(+), 152 deletions(-)
 create mode 100644 src/components/misc/Accordeon.vue
 create mode 100644 src/components/misc/Error.vue

diff --git a/.eslintrc.js b/.eslintrc.js
index 552826e..0f2f925 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -29,6 +29,7 @@ module.exports = {
         "no-throw-literal": "warn",
         "prefer-regex-literals": "warn",
         "no-multiple-empty-lines": "warn",
+        'no-unused-expressions': 'warn',
         "no-useless-escape": "warn",
         "vue/multi-word-component-names": "warn",
         "no-return-assign": "warn",
diff --git a/src/App.vue b/src/App.vue
index e8383a6..bfc064d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,26 +1,22 @@
 <template>
-    <div class="app">
-        <div class="text-5xl w-full text-center mt-10">
+    <div class="app pt-10">
+        <div class="text-5xl w-full text-center">
             <b>Vue.js OpenAI API Example</b>
         </div>
-        <div class="description container mx-auto mt-8 pr-2">
-            An example project based on Vue CLI to demonstrate basic OpenAI GPT possibilities. Create your own Chat GPT!
-            <div>
-                <a target="_blank" :href="currentGuide">OpenAI API Guide</a>
-            </div>
-        </div>
 
         <div class="main container mx-auto mt-6 pl-1 pb-3">
-            <div class="settingsWrapper">
-                <button @click="showApiKeyInput" class="bg-white">
-                    <span v-if="!apiKeyVisible">Set API KEY</span>
-                    <span v-else style="color: red"
-                    >Hide api-key input &#215;</span
-                    >
-                </button>
-                <div v-if="apiKeyVisible" class="mt-4">
-                    To get an API KEY you need to register new OPEN API account
-                    and then visit
+            <div class="description container mx-auto mt-8 pr-2 text-xl">
+                An example project based on Vue CLI to demonstrate basic OpenAI GPT possibilities.<br/> Create your own Chat GPT!
+                <div>
+                    <a target="_blank" :href="currentGuide">OpenAI API Guide</a>
+                </div>
+            </div>
+            <Accordeon title="Set API KEY" v-model:value="apiKeyVisible" class="mt-8 api-key" >
+                <div>
+                    <span class="text-sm" >
+                        To get an API KEY you need to register new OPEN API account
+                        and then visit
+                    </span>
                     <a
                         href="https://platform.openai.com/account/api-keys"
                         target="_blank"
@@ -28,11 +24,10 @@
                         https://platform.openai.com/account/api-keys
                     </a>
                 </div>
-                <InputText
-                    v-if="apiKeyVisible"
+                <InputAPIKey
                     v-model:value="apiKey"
-                    :label="'API Key:'"
                     class="w-3/4 mt-4"
+                    :useLocalStorage="true"
                     @update:value="
                         (val) => {
                             api.setApiKey(val), (apiKeyNeeded = false);
@@ -40,12 +35,8 @@
                     "
                     placeholder="Paste a key here"
                 />
-
-                <button @click="showSettings" class="bg-white">
-                    <span v-if="!settings" class="underline">Settings</span>
-                    <span v-else style="color: red">Close settings &#215;</span>
-                </button>
-
+            </Accordeon>
+            <Accordeon title="Settings" v-model:value="settings" class="mt-3 api-key" >
                 <OpenAITextSettings
                     v-if="settings && tab === ''"
                     v-model:value="textOpts"
@@ -54,16 +45,17 @@
                 <button v-if="settings" @click="saveSettings">
                     Save settings
                 </button>
-            </div>
+            </Accordeon>
 
             <Tabs
                 v-model:value="tab"
                 :tabs="tabs"
                 @click="clearResult()"
-                class="mt-8 w-full"
+                class="mt-10 w-full"
             />
 
             <InputFile
+                class="mt-4"
                 v-if="tab === 'audio'"
                 @update:value="(val) => runTranscribe(val)"
             ></InputFile>
@@ -77,28 +69,33 @@
                 v-model:value="prompt"
                 @setPromt="(val) => $emit('update:value', val)"
                 :label="'Prompt:'"
-                class="w-4/5 rounded-lg mt-8 p-1"
+                class="w-full rounded-lg mt-8"
                 :rows="10"
             />
             <button
                 v-if="tab !== 'audio'"
+                :disabled="isLoading || !prompt"
                 @click="run"
-                class="mt-2 bg-gray-300 px-2 py-1"
+                class="mt-2 bg-gray-300 run-btn px-8 py-2 text-white rounded"
             >
-                {{ isLoading ? "Loading..." : "Run" }}
+                <b>{{ isLoading ? "Loading..." : "Run" }}</b>
+
             </button>
-            <div class="image-wrapper" v-if="tab === 'image'">
+            <div class="image-wrapper" v-if="tab === 'image' && result" ref="result">
                 <span>Result:</span>
-                <img :src="result" alt="result" v-if="result" />
+                <img :src="result" alt="result" />
             </div>
             <InputTextarea
-                v-else
+                v-else-if="result"
                 v-model:value="result"
                 :label="'Result:'"
                 disabled
-                class="mt-8 w-1/2"
+                class="mt-8"
                 :rows="10"
+                ref="result"
             />
+            <Error :value="error" v-if="error" class="mt-2"  />
+
         </div>
     </div>
 </template>
@@ -106,21 +103,28 @@
 <script lang="ts">
     import SimpleGPT from "./api/openai";
     import { defineComponent } from "@vue/runtime-core";
-    import InputText from "./components/misc/InputText.vue";
+    import Error from "./components/misc/Error.vue";
     import InputTextarea from "./components/misc/InputTextarea.vue";
     import Tabs, { ITab } from "./components/misc/Tabs.vue";
     import OpenAITextSettings from "./components/openai/OpenAITextSettings.vue";
     import InputFile from "./components/misc/InputFile.vue";
+    import Accordeon from "./components/misc/Accordeon.vue";
+    import InputAPIKey from "./components/openai/InputAPIKey.vue";
+    import ls from "local-storage";
+
     export default defineComponent({
         components: {
             Tabs,
             InputTextarea,
-            InputText,
             OpenAITextSettings,
             InputFile,
+            Accordeon,
+            InputAPIKey,
+            Error,
         },
         data() {
             return {
+                error: "",
                 guides: {
                     code: "https://platform.openai.com/docs/guides/code",
                     text: "https://platform.openai.com/docs/guides/completion",
@@ -149,7 +153,7 @@
                 waitResponse: true,
                 prompt: "",
                 text: "",
-                apiKey: process.env.OPENAI_API_KEY || "",
+                apiKey: process.env.OPENAI_API_KEY || ls("openAIKey") || "",
                 api: new SimpleGPT({ key: process.env.OPENAI_API_KEY || "" }),
                 apiKeyNeeded: false,
                 apiKeyVisible: false,
@@ -187,11 +191,12 @@
                 this.prompt = "";
             },
             async runTranscribe(val: any) {
-                if (this.apiKeyNeeded) {
-                    alert("Enter your API KEY");
+                if (!this.apiKey) {
+                    alert("You need to set your API KEY before running");
                     return null;
                 }
                 if (!this.isTranscribing) {
+                    this.error = ''
                     this.isTranscribing = true;
                     try {
                         const blob = new Blob([val.target.files[0]], {
@@ -200,29 +205,35 @@
                         const formData = new FormData();
                         formData.append("file", blob, "test.webm");
                         formData.append("model", "whisper-1");
-                        const token = localStorage.getItem("key");
                         const requestOptions = {
                             method: "POST",
                             headers: {
-                                Authorization: `Bearer ${token}`,
+                                Authorization: `Bearer ${this.apiKey}`,
                             },
                             body: formData,
                         };
                         const text = await this.api.transcribe(requestOptions);
                         this.result = text || "";
-                    } catch (e) {
-                        console.error("App error: " + e);
+                        setTimeout(() => {
+                            (this.$refs?.result as any)?.scrollIntoView?.();
+                        }, 0);
+                    } catch (e: any) {
+                        console.error("App error: " + e, e.response);
+                        if (e?.response?.data?.error?.message) {
+                            this.error = e?.response.data.error.message;
+                        }
                     } finally {
                         this.isTranscribing = false;
                     }
                 }
             },
             async run() {
-                if (this.apiKeyNeeded) {
-                    alert("Enter your API KEY");
+                if (!this.apiKey) {
+                    alert("You need to set your API KEY before running");
                     return null;
                 }
                 if (!this.isLoading) {
+                    this.error = ''
                     this.isLoading = true;
                     const handlers = {
                         code: "getCodeFirst",
@@ -240,14 +251,28 @@
                             ](this.prompt, this.textOpts);
                         }
                         this.result = res || "";
-                    } catch (e) {
+                        setTimeout(() => {
+                            (this.$refs?.result as any)?.scrollIntoView?.();
+                            (this.$refs?.result as any)?.$el?.scrollIntoView?.();
+                        }, 0);
+                    } catch (e: any) {
                         console.error("App error: " + e);
+                        if (e?.response?.data?.error?.message) {
+                            this.error = e?.response.data.error.message;
+                        }
                     } finally {
                         this.isLoading = false;
                     }
                 }
             },
         },
+        created() {
+            if (!this.apiKey) {
+                this.apiKeyVisible = true;
+            } else {
+                this.api.setApiKey(this.apiKey);
+            }
+        },
         mounted() {
             const savedSettings = localStorage.getItem("settings");
             if (savedSettings === null) return;
@@ -259,19 +284,39 @@
     });
 </script>
 
-<style lang="scss" scoped>a {
+<style lang="scss" scoped>
+    .run-btn{
+        background: #7759de;
+        &:disabled {
+            opacity: 0.6;
+            pointer-events: none;
+        }
+    }
+
+    ::v-deep .api-key{
+        width: 500px;
+        max-width: 100%;
+        .tab__link {
+            background: #e0f7ea;
+            display: flex;
+            align-items: center;
+            border-radius: 4px;
+        }
+    }
+
+    .main{
+        width: 900px;
+    }
+a {
     @apply underline text-blue-600 hover:text-blue-800;
 }
 .app {
-    background: linear-gradient(
-        to right,
-        rgb(202, 245, 194),
-        rgb(223, 207, 239)
-    );
+    background: linear-gradient(to bottom, rgb(255 255 255), rgb(206 255 228));
+    min-height: 100vh;
 }
 
 .description {
-    text-align: right;
+    text-align: left;
 }
 .settingsWrapper {
     display: flex;
diff --git a/src/api/openai.ts b/src/api/openai.ts
index e8dfa2a..442742b 100644
--- a/src/api/openai.ts
+++ b/src/api/openai.ts
@@ -1,11 +1,5 @@
-import {
-    Configuration,
-    OpenAIApi,
-    CreateCompletionRequest,
-    CreateCompletionResponse,
-    CreateImageRequestSizeEnum,
-} from "openai";
 
+import { Configuration, OpenAIApi, CreateCompletionRequest, CreateChatCompletionRequest, CreateImageRequestSizeEnum } from "openai";
 class CustomFormData extends FormData {
     getHeaders() {
         return {};
@@ -13,11 +7,26 @@ class CustomFormData extends FormData {
 }
 
 export default class SimpleGPT {
-    protected _key: string;
-    protected _configuration: Configuration | null;
-    protected _openai: OpenAIApi | null;
+    protected _key: string
+    protected _configuration: Configuration | null
+    protected _openai: OpenAIApi | null
 
-    constructor({ key }: { key: string }) {
+    public get chatModels(): string[] {
+        return ["gpt-3.5-turbo", "gpt-3.5-turbo-0301", "gpt-4", "gpt-4-0314"];
+    }
+
+    public get defaultOptsGPT(): Partial<CreateCompletionRequest> {
+        return {
+            model: "gpt-3.5-turbo-0301",
+            temperature: 0,
+            max_tokens: 60,
+            top_p: 1,
+            frequency_penalty: 0.5,
+            presence_penalty: 0
+        };
+    }
+
+    constructor ({ key }: {key: string}) {
         this._key = "";
         this._configuration = null;
         this._openai = null;
@@ -25,49 +34,44 @@ export default class SimpleGPT {
     }
 
     async transcribe(options: any) {
-        try {
-            const response = await fetch(
-                "https://api.openai.com/v1/audio/transcriptions",
-                options
-            );
-            const json = await response.json();
-            return json.text;
-        } catch (err) {
-            console.log(err);
-        }
+        const response = await fetch(
+            "https://api.openai.com/v1/audio/transcriptions",
+            options
+        ).then((response) => {
+            if (response.ok) {
+                return response.json();
+            } else {
+                Promise.reject(response)
+            }
+        });
+        const json = await response.json();
+        return json.text;
     }
 
-    async get(
-        prompt: string,
-        opts?: Partial<CreateCompletionRequest>
-    ): Promise<null | string[]> {
+    async get(prompt: string, opts?: Partial<CreateCompletionRequest & CreateChatCompletionRequest>): Promise<null | string[]> {
         if (!this._openai) return null;
-        const response = await this._openai.createCompletion({
-            model: opts?.model || "text-davinci-003",
-            prompt: prompt || opts?.prompt,
-            temperature: opts?.temperature || 0,
-            max_tokens: opts?.max_tokens || 60,
+        const model = opts?.model || this.defaultOptsGPT.model || "";
+        const isChatModel = this.chatModels.indexOf(model) >= 0;
+        const _prompt = (prompt || opts?.prompt);
+        const messages = opts?.messages || [{ role: "user", content: _prompt as string }];
+        const response = await this._openai[isChatModel ? "createChatCompletion" : "createCompletion"]({
+            model,
+            prompt: isChatModel ? undefined : _prompt,
+            messages: messages,
+            temperature: opts?.temperature || this.defaultOptsGPT.temperature,
+            max_tokens: opts?.max_tokens || this.defaultOptsGPT.max_tokens || 0,
             top_p: opts?.top_p || 1,
-            n: opts?.n || 1,
-            frequency_penalty: opts?.frequency_penalty || 0.5,
-            presence_penalty: opts?.presence_penalty || 0,
+            frequency_penalty: opts?.frequency_penalty || this.defaultOptsGPT.frequency_penalty,
+            presence_penalty: opts?.presence_penalty || this.defaultOptsGPT.presence_penalty,
         });
-        return response.data.choices
-            .map((choice) => choice.text)
-            .filter(Boolean) as string[];
+        return (response?.data?.choices as any)?.map((choice: any) => choice.text || choice.message?.content).filter(Boolean) as string[];
     }
 
-    async getFirst(
-        promt: string,
-        opts?: Partial<CreateCompletionRequest>
-    ): Promise<string | undefined> {
-        return (await this.get(promt, opts))?.[0];
+    async getFirst(prompt: string, opts?: Partial<CreateCompletionRequest & CreateChatCompletionRequest>): Promise<string | undefined> {
+        return (await this.get(prompt, opts))?.[0];
     }
 
-    async getCode(
-        prompt: string,
-        opts?: Partial<CreateCompletionRequest>
-    ): Promise<null | string[]> {
+    async getCode(prompt: string, opts?: Partial<CreateCompletionRequest>): Promise<null | string[]> {
         if (!this._openai) return null;
         const response = await this._openai.createCompletion({
             model: opts?.model || "code-davinci-002",
@@ -78,52 +82,30 @@ export default class SimpleGPT {
             frequency_penalty: opts?.frequency_penalty || 0,
             presence_penalty: opts?.presence_penalty || 0,
         });
-        return response.data.choices
-            .map((choice) => choice.text)
-            .filter(Boolean) as string[];
+        return response.data.choices.map((choice) => choice.text).filter(Boolean) as string[];
     }
 
-    async getCodeFirst(
-        prompt: string,
-        opts?: Partial<CreateCompletionRequest>
-    ): Promise<string | undefined> {
+    async getCodeFirst(prompt: string, opts?: Partial<CreateCompletionRequest>): Promise<string | undefined> {
         return (await this.getCode(prompt, opts))?.[0];
     }
 
-    async getImages(
-        prompt: string,
-        n = 1,
-        size: 256 | 512 | 1024 = 512
-    ): Promise<string[]> {
+    async getImages(prompt: string, n = 1, size: (256 | 512 | 1024) = 512): Promise<string[]> {
         const response = await this._openai?.createImage({
             prompt,
             n,
             size: `${size}x${size}` as CreateImageRequestSizeEnum,
         });
-        return (
-            response?.data?.data.map((responseOne) => responseOne.url || "") ||
-            []
-        );
+        return response?.data?.data.map((responseOne) => responseOne.url || "") || [];
     }
 
-    async getImage(
-        prompt: string,
-        size: 256 | 512 | 1024 = 512
-    ): Promise<string | undefined> {
+    async getImage(prompt: string, size: (256 | 512 | 1024) = 512): Promise<string | undefined> {
         return (await this.getImages(prompt, 1, size))?.[0];
     }
 
     setApiKey(key: string) {
-        const savedKey = localStorage.getItem("key");
-        if (savedKey) {
-            this._key = savedKey;
-        } else if (key) {
-            localStorage.setItem("key", key);
-            this._key = key;
-        }
+        this._key = key;
         this._configuration = new Configuration({
             apiKey: this._key,
-            formDataCtor: CustomFormData,
         });
         this._openai = new OpenAIApi(this._configuration);
     }
diff --git a/src/components/misc/Accordeon.vue b/src/components/misc/Accordeon.vue
new file mode 100644
index 0000000..4f661f6
--- /dev/null
+++ b/src/components/misc/Accordeon.vue
@@ -0,0 +1,51 @@
+<template>
+    <div class="" :class="{'bg-gray-100': ownValue  && !disabled}">
+        <div class="tab__header w-full" :class="{'bg-gray-100': ownValue && !disabled}">
+            <div
+                class="cursor-pointer tab__link py-1 px-2 block bg-blue-dark hover:bg-blue-darker no-underline flex flex-center justify-between"
+                @click.prevent="ownValue = !ownValue"
+            >
+                <strong v-if="!$slots.title" class="text-lg">{{title}}</strong>
+                <slot name="title" v-else/>
+                <span class="text-sm down-Arrow" v-show="!ownValue && !disabled && !hideToggler">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
+                    </svg>
+                </span>
+                <span class="text-sm up-Arrow" v-show="ownValue && !disabled && !hideToggler">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
+                    </svg>
+
+                </span>
+            </div>
+        </div>
+        <div class="tab__content p-2" v-show="ownValue && !disabled"><slot /></div>
+    </div>
+</template>
+
+<script>
+    import { defineComponent, PropType } from 'vue'
+
+    export default defineComponent({
+        props: [
+            "title",
+            "value",
+            "disabled",
+            "hideToggler"
+        ],
+        data() {
+            return {
+                ownValue: this.value,
+            }
+        },
+        watch: {
+            ownValue(nV) {
+                this.$emit("update:value", nV)
+            },
+            value(nV) {
+                this.ownValue = nV
+            }
+        }
+    })
+</script>
diff --git a/src/components/misc/Error.vue b/src/components/misc/Error.vue
new file mode 100644
index 0000000..516950d
--- /dev/null
+++ b/src/components/misc/Error.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="key-description bg-red-100 border border-red-300 text-red-700 px-4 py-3 rounded relative">
+        <span class="block sm:inline">{{ value }}</span>
+    </div>
+</template>
+
+<script lang='ts'>
+    import { defineComponent } from "vue"
+
+    export default defineComponent({
+        props: {
+            value: {
+                type: String,
+                default: () => 'Warning!'
+            },
+
+        },
+        components: {
+
+        },
+        data() {
+            return {
+
+            }
+        },
+        computed: {
+
+        },
+        methods: {
+
+        },
+    })
+
+    </script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/misc/InputText.vue b/src/components/misc/InputText.vue
index 5eb95cd..156961c 100644
--- a/src/components/misc/InputText.vue
+++ b/src/components/misc/InputText.vue
@@ -4,6 +4,7 @@
         <input
             type="text"
             class="border-2 px-2 py-1 rounded"
+            :class="{error}"
             ref="input"
             :id="id"
             :value="value"
@@ -16,33 +17,40 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+    import { defineComponent } from "vue";
 
-export default defineComponent({
-    props: {
-        rows: {
-            type: Number,
+    export default defineComponent({
+        props: {
+            error: {
+                type: Boolean,
+                default: () => false
+            },
+            rows: {
+                type: Number,
+            },
+            placeholder: String,
+            label: String,
+            value: String,
         },
-        placeholder: String,
-        label: String,
-        value: String,
-    },
-    components: {},
-    data() {
-        return {
-            id: "input-text" + +new Date(),
-        };
-    },
-    computed: {},
-    methods: {},
-    mounted() {
-        this.$emit("mounted", this.$refs.input);
-    },
-});
+        components: {},
+        data() {
+            return {
+                id: "input-text" + +new Date(),
+            };
+        },
+        computed: {},
+        methods: {},
+        mounted() {
+            this.$emit("mounted", this.$refs.input);
+        },
+    });
 </script>
 
 <style lang="scss" scoped>
 .first {
     font-weight: 700;
 }
+.error{
+        @apply border-red-400;
+    }
 </style>
diff --git a/src/components/misc/Tabs.vue b/src/components/misc/Tabs.vue
index b5b9fe0..bc7f70a 100644
--- a/src/components/misc/Tabs.vue
+++ b/src/components/misc/Tabs.vue
@@ -1,7 +1,7 @@
 <template>
     <ul class="tabs flex items-center">
         <li
-            class="tab px-4 py-2 cursor-pointer flex-grow mr-1 text-center bg-gray-50 hover:bg-gray-200"
+            class="tab px-4 py-2 cursor-pointer flex-grow text-center"
             :class="{
                 'active bg-gray-200': value ? value === tab.value : i === 0,
             }"
@@ -39,6 +39,13 @@
 </script>
 
 <style lang="scss" scoped>
+    .tab{
+        background: rgb(214, 249, 231);
+        &:hover, &.active{
+            background: rgb(216, 242, 227);
+        }
+    }
+
 .active {
     border-bottom: 2px solid rgb(102, 102, 102);
 }
diff --git a/src/components/openai/InputAPIKey.vue b/src/components/openai/InputAPIKey.vue
index f6fccb8..ecacada 100644
--- a/src/components/openai/InputAPIKey.vue
+++ b/src/components/openai/InputAPIKey.vue
@@ -12,10 +12,11 @@
         <InputText
             :value="value"
             type="password"
+            :error="!value"
             :label="'API Key:'"
-            class="w-1/2 mt-2"
+            class="mt-2"
             @update:value="(val) => ($emit('update:value', val), useLocalStorage && ls(localStorageKey, val))"
-            placeholder="Paste a key here"
+            placeholder="Paste an API key here"
         />
     </div>
 </template>