Merge branch 'new-settings-and-styles'

src/App.vue

@@ -3,22 +3,22 @@
         <div class="text-5xl w-full text-center mt-10">
             <b>Vue.js OpenAI API Example</b>
         </div>
-        <div class="description container mx-auto mt-8">
+        <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">
+        <div class="main container mx-auto mt-6 pl-1 pb-3">
             <div class="settingsWrapper">
-                <button @click="showApiKeyInput">
-                    <span v-if="!apiKeyNeeded">Set API KEY</span>
+                <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="apiKeyNeeded" class="mt-4">
+                <div v-if="apiKeyVisible" class="mt-4">
                     To get an API KEY you need to register new OPEN API account
                     and then visit
                     <a
@@ -29,15 +29,19 @@
                     </a>
                 </div>
                 <InputText
-                    v-if="apiKeyNeeded"
+                    v-if="apiKeyVisible"
                     v-model:value="apiKey"
                     :label="'API Key:'"
-                    class="w-1/2 mt-4"
-                    @update:value="(val) => api.setApiKey(val)"
+                    class="w-3/4 mt-4"
+                    @update:value="
+                        (val) => {
+                            api.setApiKey(val), (apiKeyNeeded = false);
+                        }
+                    "
                     placeholder="Paste a key here"
                 />
 
-                <button @click="showSettings">
+                <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>
@@ -68,11 +72,12 @@
             <InputTextarea
                 v-if="tab !== 'audio'"
                 :showSpeechRecording="showSpeechRecording"
+                :apiKeyNeeded="apiKeyNeeded"
                 isLoading
                 v-model:value="prompt"
                 @setPromt="(val) => $emit('update:value', val)"
                 :label="'Prompt:'"
-                class="mt-8"
+                class="w-4/5 rounded-lg mt-8 p-1"
                 :rows="10"
             />
             <button
@@ -91,7 +96,7 @@
                 v-model:value="result"
                 :label="'Result:'"
                 disabled
-                class="mt-8"
+                class="mt-8 w-1/2"
                 :rows="10"
             />
         </div>
@@ -147,6 +152,7 @@
                 apiKey: process.env.OPENAI_API_KEY || "",
                 api: new SimpleGPT({ key: process.env.OPENAI_API_KEY || "" }),
                 apiKeyNeeded: false,
+                apiKeyVisible: false,
             };
         },
         computed: {
@@ -158,6 +164,12 @@
             },
         },
         methods: {
+            stopRunning() {
+                if (this.apiKeyNeeded) {
+                    alert("Enter your API KEY");
+                    return null;
+                }
+            },
             setPrompt(data: string): void {
                 this.prompt = data;
             },
@@ -168,13 +180,17 @@
                 localStorage.setItem("settings", JSON.stringify(this.textOpts));
             },
             showApiKeyInput() {
-                this.apiKeyNeeded = !this.apiKeyNeeded;
+                this.apiKeyVisible = !this.apiKeyVisible;
             },
             clearResult() {
                 this.result = "";
                 this.prompt = "";
             },
             async runTranscribe(val: any) {
+                if (this.apiKeyNeeded) {
+                    alert("Enter your API KEY");
+                    return null;
+                }
                 if (!this.isTranscribing) {
                     this.isTranscribing = true;
                     try {
@@ -202,6 +218,10 @@
                 }
             },
             async run() {
+                if (this.apiKeyNeeded) {
+                    alert("Enter your API KEY");
+                    return null;
+                }
                 if (!this.isLoading) {
                     this.isLoading = true;
                     const handlers = {
@@ -232,21 +252,26 @@
             const savedSettings = localStorage.getItem("settings");
             if (savedSettings === null) return;
             this.textOpts = JSON.parse(savedSettings);
+
+            const savedKey = localStorage.getItem("key");
+            if (!savedKey) this.apiKeyNeeded = true;
         },
     });
 </script>
 
-<style lang="scss" scoped>
-    .container{
-        max-width: 900px;
-    }
-
-a {
+<style lang="scss" scoped>a {
     @apply underline text-blue-600 hover:text-blue-800;
 }
+.app {
+    background: linear-gradient(
+        to right,
+        rgb(202, 245, 194),
+        rgb(223, 207, 239)
+    );
+}
 
 .description {
-    // text-align: right;
+    text-align: right;
 }
 .settingsWrapper {
     display: flex;

src/components/audio/SpeechRecording.vue

@@ -1,7 +1,11 @@
 <template>
-    <div v-if="mediaRecorder" class="speech-recording">
-        <button class="record" @click="record()">Record</button>
-        <button class="stop" @click="stop()">Stop</button>
+    <div class="speech-recording">
+        <button :disabled="recordDisabled || !mediaRecorder" @click="record()">
+            &#127908;
+        </button>
+        <button :disabled="stopDisabled" @click="stop()">
+            <span class="stop"></span>
+        </button>
         <div v-if="isLoading">Transcribing...</div>
     </div>
 </template>
@@ -21,9 +25,10 @@ export default defineComponent({
             mediaRecorder: null as any,
             chunks: [] as any,
             recordedResult: "",
-            apiKey: process.env.OPENAI_API_KEY || "",
             api: new SimpleGPT({ key: process.env.OPENAI_API_KEY || "" }),
             isLoading: false,
+            recordDisabled: false,
+            stopDisabled: true,
         };
     },
     computed: {},
@@ -33,11 +38,14 @@ export default defineComponent({
                 alert("You have a problem with your device");
             }
             this.mediaRecorder.start();
+            this.recordDisabled = true;
+            this.stopDisabled = false;
             this.mediaRecorder.onstop = this.onStop;
             this.mediaRecorder.ondataavailable = this.ondataAvailable;
         },
         stop() {
             this.mediaRecorder.stop();
+            this.stopDisabled = true;
             this.isLoading = true;
         },
         async onStop() {
@@ -64,6 +72,7 @@ export default defineComponent({
             const text = await this.api.transcribe(requestOptions);
             this.$emit("update:value", text);
             this.isLoading = false;
+            this.recordDisabled = false;
             console.log(text);
         },
         ondataAvailable(e: any) {
@@ -89,12 +98,27 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .speech-recording {
+    display: flex;
+    align-items: center;
     margin: 10px 0;
     button {
-        padding: 5px;
+        width: 36px;
+        height: 36px;
         margin-right: 10px;
         border-radius: 5px;
         border: 1px solid #b2aeae;
+        &:disabled {
+            cursor: not-allowed;
+            background-color: #f6f6f6;
+        }
+    }
+    .stop {
+        display: block;
+        margin: auto;
+        width: 16px;
+        height: 16px;
+        border-radius: 2px;
+        background: #ee8181;
     }
 }
 </style>

src/components/misc/InputTextarea.vue

@@ -4,12 +4,12 @@
             <label :for="id" class="mr-2">{{ label }}</label>
         </div>
         <SpeechRecording
-            v-if="showSpeechRecording"
+            v-if="showSpeechRecording && !apiKeyNeeded"
             @update:value="(val) => $emit('update:value', val)"
         ></SpeechRecording>
         <textarea
             type="text"
-            class="border-2"
+            class="border-2 rounded-lg p-1"
             ref="input"
             :id="id"
             :value="value"
@@ -34,6 +34,7 @@ export default defineComponent({
         disabled: Boolean,
         isLoading: Boolean,
         showSpeechRecording: Boolean,
+        apiKeyNeeded: Boolean,
     },
     components: {
         SpeechRecording,

src/components/misc/Tabs.vue

@@ -1,56 +1,45 @@
 <template>
     <ul class="tabs flex items-center">
         <li
-            class="tab px-4 py-2 cursor-pointer flex-grow text-center bg-gray-50 hover:bg-gray-200"
-            :class="{'active bg-gray-200': value ? (value === tab.value) : i === 0}"
-            v-for="(tab, i) in tabs" :key="i"
+            class="tab px-4 py-2 cursor-pointer flex-grow mr-1 text-center bg-gray-50 hover:bg-gray-200"
+            :class="{
+                'active bg-gray-200': value ? value === tab.value : i === 0,
+            }"
+            v-for="(tab, i) in tabs"
+            :key="i"
             @click="$emit('update:value', tab.value)"
         >
             <span class="text-lg" >{{ tab.label }}</span>
         </li>
     </ul>
 </template>
 
-<script lang='ts'>
-    import { defineComponent, PropType } from "vue"
-    ;
+<script lang="ts">
+    import { defineComponent, PropType } from "vue";
 
     export interface ITab {
-        label: string
-        value: string
+        label: string;
+        value: string;
     }
 
     export default defineComponent({
         props: {
             tabs: Object as PropType<ITab[]>,
             value: String,
-
-        },
-        components: {
-
         },
+        components: {},
         data() {
-            return {
-
-            };
+            return {};
         },
-        computed: {
+        computed: {},
+        methods: {},
 
-        },
-        methods: {
-
-        },
-
-        watch: {
-
-        },
+        watch: {},
     });
-
-    </script>
+</script>
 
 <style lang="scss" scoped>
-    .active{
-        border-bottom: 2px solid rgb(102, 102, 102);
-    }
-
+.active {
+    border-bottom: 2px solid rgb(102, 102, 102);
+}
 </style>

src/components/openai/OpenAITextSettings.vue

@@ -6,7 +6,7 @@
                 class="mt-1"
                 name="max_tokens"
                 min="50"
-                max="4055"
+                max="4054"
                 :value="value?.max_tokens"
                 label="max_tokens"
                 @update:value="