error handling

Author: arneyjfs

index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/ossia-logo.svg">
     <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
+    <script defer src="https://analytics.eu.umami.is/script.js" data-website-id="92e52834-d667-40bc-97ce-bb7c314703a9"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Ossia</title>
 </head>

src/App.vue

@@ -4,7 +4,6 @@
 <template>
   <main>
     <RouterView/>
-<!--    <InterpreterView/>-->
   </main>
 </template>
 

src/components/InterpreterView/SettingsOverlay.vue

@@ -12,6 +12,9 @@ const showOpenAIKey = ref(false)
 <template>
   <div id="overlay-container">
     <div id="overlay">
+      <div id="accept-terms-prompt" v-if="settingsStore.showSettingsWarning">
+        You must enter an OpenAI API Key (and accept the terms and conditions) before Ossia Voice can do anything smart!
+      </div>
       <div id="scrollable">
         <h2 class="title">Welcome to Ossia</h2>
         <div class="group-content">
@@ -45,7 +48,8 @@ const showOpenAIKey = ref(false)
           <h3 class="subheading"><span style="color: red">*</span> User Backstory</h3>
           Describe the user in as much detail as possible. e.g. name, hobbies, political leaning, temperament, family
           and close friends etc.
-          <span id="example-link" @click="settingsStore.backstory = settingsStore.exampleBackstory">Or use an example</span>
+          <span id="example-link"
+                @click="settingsStore.backstory = settingsStore.exampleBackstory">Or use an example</span>
           <div id="backstory-input-wrapper">
             <v-textarea id="backstory-input" label="user backstory" v-model="settingsStore.backstory" hide-details/>
           </div>
@@ -66,27 +70,45 @@ const showOpenAIKey = ref(false)
           most. Thoughts, ideas and contributions are very much welcomed. Please reach out if you would like to be
           involved!
           <div id="contact-links">
-            <a href="https://twitter.com/arneyjfs" rel="noopener noreferrer"
-               target="_blank"><v-icon>mdi-twitter</v-icon></a>
-            <a href="https://github.com/OssiaAI/OssiaVoice" rel="noopener noreferrer"
-               target="_blank"><v-icon>mdi-github</v-icon></a>
-            <a href="https://www.linkedin.com/in/james-arney-50246711a/" rel="noopener noreferrer"
-               target="_blank"><v-icon>mdi-linkedin</v-icon></a>
+            <a href="https://twitter.com/arneyjfs" rel="noopener noreferrer" target="_blank">
+              <v-icon>mdi-twitter</v-icon>
+            </a>
+            <a href="https://github.com/OssiaAI/OssiaVoice" rel="noopener noreferrer" target="_blank">
+              <v-icon>mdi-github</v-icon>
+            </a>
+            <a href="https://www.linkedin.com/in/james-arney-50246711a/" rel="noopener noreferrer" target="_blank">
+              <v-icon>mdi-linkedin</v-icon>
+            </a>
           </div>
 
+          <!--          <a id="buy-me-a-coffee" class="raised" href="https://www.buymeacoffee.com/arneyjfs" target="_blank"-->
+          <!--             rel="noopener noreferrer">-->
+          <!--            <img-->
+          <!--                src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"-->
+          <!--                alt="Buy Me A Coffee"-->
+          <!--            >-->
+          <!--          </a>-->
+
           © James Arney, 2024
         </div>
       </div>
-      <v-btn
-          id="save-btn"
-          :disabled="!(settingsStore.liabilityAgreement &&
+      <div id="bottom-buttons">
+        <v-btn
+            id="complete-later-btn"
+            @click="emit('close')">
+          Complete later
+        </v-btn>
+        <v-btn
+            id="save-btn"
+            :disabled="!(settingsStore.liabilityAgreement &&
                      settingsStore.cookieAgreement &&
                      settingsStore.openAIAPIKey &&
                      settingsStore.backstory
                      )"
-          @click="emit('close'); settingsStore.save()">
-        Let's Go
-      </v-btn>
+            @click="emit('close'); settingsStore.save()">
+          Let's Go
+        </v-btn>
+      </div>
     </div>
   </div>
 </template>
@@ -123,6 +145,14 @@ const showOpenAIKey = ref(false)
   margin: 10px 0 0 10px;
 }
 
+#accept-terms-prompt{
+  background: orange;
+  border-radius: 5px;
+  padding: 10px;
+  margin: 5px;
+  text-align: center;
+}
+
 #scrollable {
   display: flex;
   flex-direction: column;
@@ -184,16 +214,55 @@ a {
   padding: 10px 0px;
 }
 
+#bottom-buttons {
+  display: flex;
+  justify-content: end;
+}
+
+#complete-later-btn {
+  background: #e1e1e1;
+  width: 150px;
+  height: 40px;
+  margin: 10px 10px 0 20px;
+  text-transform: none;
+
+  //&:deep(span) {
+  //  color: theme.$text-color;
+  //}
+}
+
 #save-btn {
   background: theme.$primary;
-  bottom: 0;
   width: 130px;
   height: 40px;
-  margin: 10px 20px 10px auto;
+  margin: 10px 20px 0 10px;
+  text-transform: none;
+
 
   &:deep(span) {
     color: theme.$text-color;
   }
 }
 
+#buy-me-a-coffee {
+  margin: 10px 0 20px 0;
+  width: 145px;
+  height: 40px;
+  border-radius: 7px;
+  position: relative;
+
+  &:deep(img) {
+    width: 145px;
+    height: 40px;
+
+    &:hover {
+      filter: brightness(98%)
+    }
+
+    &:active {
+      filter: brightness(95%)
+    }
+  }
+}
+
 </style>

src/components/reusable/MicButton.vue

@@ -3,6 +3,9 @@ import {ref} from "vue";
 import micImg from '@/assets/mic-button/mic.svg'
 import micHoverImg from '@/assets/mic-button/mic-hover.svg'
 import micActiveImg from '@/assets/mic-button/mic-active.svg'
+import {AlertStore} from "@/stores/AlertStore.js";
+
+const alertStore = AlertStore();
 
 const micActive = ref(false)
 const micBtnImage = ref(micImg)
@@ -61,18 +64,16 @@ function startRecognition() {
         const transcript = event.results[i][0].transcript;
         if (event.results[i].isFinal) {
           model.value = transcript
-          console.log(`Final recognition: ${transcript}`)
         }
         else {
-          console.log(`interim recognition: ${transcript}`)
           interimTranscript += transcript
           model.value = interimTranscript
         }
       }
     }
 
     recognition.onerror = event => {
-      console.log("Error occurred in recognition: " + event.error)
+      alertStore.showAlert('error', "Error occurred in recognition", event.error)
     }
 }
 

src/repositories/ChatCompletionRepository.js

@@ -1,13 +1,22 @@
 import OpenAI from "openai";
 import {useLoadingStore} from "@/stores/LoadingStore.js";
 import {useSettingsStore} from "@/stores/SettingsStore.js";
+import {AlertStore} from "@/stores/AlertStore.js";
 
 const model = "gpt-4-turbo-preview" // "gpt-4-turbo-preview" // "gpt-3.5-turbo-0125" //
 
 export async function getResponse(messageHistory, command, wordLoading = false,
                                   sentenceLoading = false) {
   const loadingStore = useLoadingStore()
   const settingStore = useSettingsStore()
+  const alertStore = AlertStore()
+
+  console.log('API', settingStore.openAIAPIKey)
+  if (!(settingStore.openAIAPIKey && settingStore.backstory && settingStore.liabilityAgreement)) {
+    settingStore.showSettingsOverlay = true
+    settingStore.showSettingsWarning = true
+    return
+  }
 
   let client = new OpenAI({
     apiKey: settingStore.openAIAPIKey, dangerouslyAllowBrowser: true
@@ -39,15 +48,19 @@ export async function getResponse(messageHistory, command, wordLoading = false,
 
     finalCommand += command
     messages = messages.concat([{role: "system", content: finalCommand}])
-    const completion = await client.chat.completions.create({
-      messages,
-      model: model,
-      temperature: 0.5,
-      top_p: 0.5,
-      response_format: {"type": "json_object"}
-    });
-
-    return JSON.parse(completion.choices[0].message.content)['suggestions']
+    try {
+      const completion = await client.chat.completions.create({
+        messages,
+        model: model,
+        temperature: 0.5,
+        top_p: 0.5,
+        response_format: {"type": "json_object"}
+      });
+      return JSON.parse(completion.choices[0].message.content)['suggestions']
+    } catch (err) {
+      alertStore.showAlert('error', `Error (${err.type})`, err.message)
+    }
+
   } finally {
     if (wordLoading) {
       loadingStore.newWordsLoading--

src/repositories/TextToSpeechRepository.js

@@ -31,7 +31,6 @@ export default async function speak(text) {
   //   return voice.name === 'Aaron';
   // })[0];
   msg.voice = window.voice;
-  console.log(msg.voice);
   // Queue this utterance.
   window.speechSynthesis.cancel();  // stop saying anything else
   window.speechSynthesis.speak(msg);

src/stores/SettingsStore.js

@@ -140,22 +140,35 @@ assistant:
   const cookieAgreement = ref(localStorage.getItem('cookieAgreement') === "true" || false)
 
   function save() {
+    if (!(cookieAgreement.value && liabilityAgreement.value)) {
+      showSettingsOverlay.value = true
+      showSettingsWarning.value = true
+      return
+    }
     localStorage.setItem('openAIAPIKey', openAIAPIKey.value)
     localStorage.setItem('context', context.value)
     localStorage.setItem('backstory', backstory.value)
     localStorage.setItem('liabilityAgreement', liabilityAgreement.value.toString())
     localStorage.setItem('cookieAgreement', cookieAgreement.value.toString())
+    showSettingsWarning.value = false
     console.log('settings saved')
   }
 
   watch(context, async (newContext) => {
+    if (!(cookieAgreement.value && liabilityAgreement.value)) {
+      showSettingsOverlay.value = true
+      showSettingsWarning.value = true
+      return
+    }
     localStorage.setItem('context', newContext)
   })
 
   const showSettingsOverlay = ref(!(liabilityAgreement.value && cookieAgreement.value))
+  const showSettingsWarning = ref(false)
 
   return {
     showSettingsOverlay,
+    showSettingsWarning,
     openAIAPIKey,
     context,
     backstory,

src/views/InterpreterView.vue

@@ -6,6 +6,7 @@ import MessageOptions from "@/components/InterpreterView/MessageOptions.vue";
 import SettingsOverlay from "@/components/InterpreterView/SettingsOverlay.vue";
 import {useLoadingStore} from "@/stores/LoadingStore.js";
 import {useSettingsStore} from "@/stores/SettingsStore.js";
+import ErrorHandling from "@/components/reusable/AlertHandling.vue";
 
 const loadingStore = useLoadingStore()
 const settingStore = useSettingsStore()
@@ -42,6 +43,7 @@ const settingStore = useSettingsStore()
         </div>
       </div>
     </div>
+    <error-handling/>
   </div>
 </template>