Merge pull request #704 from nature-heart-software/feat/add-ibm-watson-options

Add IBM Watson options

Author: Wurielle

apps/app/electron-builder.config.js

@@ -37,7 +37,6 @@ module.exports = {
   // eslint-disable-next-line no-template-curly-in-string
   artifactName: '${name}-setup-${version}-${os}.${ext}',
   publish: ['github'],
-  publishAutoUpdate: false,
   electronVersion: getElectronVersion(),
   extraFiles: ['./resources/**'],
 }

apps/app/src/plugins/speech-engines/ibm-watson/NvSettings.vue

@@ -1,14 +1,69 @@
 <template>
   <NvAccessBlocker
     :allowed="
-      (speechStore.hasUniversalApiCredentials && !getProperty('useLocalCredentials')) ||
+      (speechStore.hasUniversalApiCredentials &&
+        !getProperty('useLocalCredentials')) ||
       [getProperty('apiKey', true), getProperty('url')].every(Boolean)
     "
     reason="Credentials required"
   >
-    <NvFormItem label="Voice">
-      <NvVoiceSelect />
-    </NvFormItem>
+    <NvStack spacing="5">
+      <NvFormItem label="Voice">
+        <NvVoiceSelect />
+      </NvFormItem>
+      <NvDivider direction="horizontal" />
+      <NvFormItem label="Speaking Rate">
+        <NvGroup>
+          <NvRangeInput
+            :max="300"
+            :min="-300"
+            :step="1"
+            class="!grow"
+            v-bind="{
+              modelValue: getProperty('ratePercentage'),
+              'onUpdate:modelValue': (value) =>
+                setProperty('ratePercentage', value),
+            }"
+          />
+          <NvNumberInput
+            :max="300"
+            :min="-300"
+            :step="1"
+            v-bind="{
+              modelValue: getProperty('ratePercentage'),
+              'onUpdate:modelValue': (value) =>
+                setProperty('ratePercentage', value),
+            }"
+          />
+        </NvGroup>
+      </NvFormItem>
+      <NvDivider direction="horizontal" />
+      <NvFormItem label="Pitch">
+        <NvGroup>
+          <NvRangeInput
+            :max="300"
+            :min="-300"
+            :step="1"
+            class="!grow"
+            v-bind="{
+              modelValue: getProperty('pitchPercentage'),
+              'onUpdate:modelValue': (value) =>
+                setProperty('pitchPercentage', value),
+            }"
+          />
+          <NvNumberInput
+            :max="300"
+            :min="-300"
+            :step="1"
+            v-bind="{
+              modelValue: getProperty('pitchPercentage'),
+              'onUpdate:modelValue': (value) =>
+                setProperty('pitchPercentage', value),
+            }"
+          />
+        </NvGroup>
+      </NvFormItem>
+    </NvStack>
   </NvAccessBlocker>
   <template v-if="speechStore.hasUniversalApiCredentials">
     <NvDivider direction="horizontal" />
@@ -18,11 +73,18 @@
       </NvStack>
       <NvSwitch
         :modelValue="getProperty('useLocalCredentials')"
-        @update:modelValue="(value) => setProperty('useLocalCredentials', value)"
+        @update:modelValue="
+          (value) => setProperty('useLocalCredentials', value)
+        "
       />
     </NvGroup>
   </template>
-  <template v-if="getProperty('useLocalCredentials') || !speechStore.hasUniversalApiCredentials">
+  <template
+    v-if="
+      getProperty('useLocalCredentials') ||
+      !speechStore.hasUniversalApiCredentials
+    "
+  >
     <NvDivider direction="horizontal" />
     <NvStack spacing="5">
       <NvFormItem label="API Key">
@@ -52,6 +114,8 @@ import {
   NvFormItem,
   NvGroup,
   NvInput,
+  NvNumberInput,
+  NvRangeInput,
   NvStack,
   NvSwitch,
   NvText,

apps/app/src/plugins/speech-engines/ibm-watson/register.ts

@@ -21,19 +21,26 @@ registerEngine({
   getCredentials,
   hasCredentials() {
     const speechStore = useSpeechStore()
-    return speechStore.hasUniversalApiCredentials || Object.values(getCredentials()).every(Boolean)
+    return (
+      speechStore.hasUniversalApiCredentials ||
+      Object.values(getCredentials()).every(Boolean)
+    )
   },
   getPayload({ text, translatedText, voice }) {
     return {
       text: translatedText || text,
       voice: (voice || getSelectedVoice()).name,
+      ratePercentage: Number(getProperty('ratePercentage')),
+      pitchPercentage: Number(getProperty('pitchPercentage')),
     }
   },
   getLanguageCode(voice) {
     return (voice || getSelectedVoice()).language
   },
   synthesizeSpeech({ credentials, payload }) {
-    return api(getProperty('useLocalCredentials') ? 'local' : 'remote').post<Blob>(
+    return api(
+      getProperty('useLocalCredentials') ? 'local' : 'remote',
+    ).post<Blob>(
       '/tts/ibm-watson/synthesize-speech',
       {
         credentials,

apps/app/src/plugins/speech-engines/ibm-watson/store.ts

@@ -17,4 +17,6 @@ export const { setProperty, getProperty } = definePluginStore(ENGINE_ID, {
   },
   useLocalCredentials: false,
   favoriteVoiceIds: [],
+  ratePercentage: 0,
+  pitchPercentage: 0,
 })

apps/app/src/teams/messenger/views/NvSettings.vue

@@ -54,18 +54,20 @@
             </NvStack>
           </div>
           <div class="settings__content flex-1 pl-4">
-            <div :id="id" class="h-full relative">
-              <!-- View -->
-              <router-view v-slot="{ Component }">
-                <Transition class="transition">
-                  <div
-                    :key="Component"
-                    class="absolute inset-0 overflow-y-auto"
-                  >
-                    <component :is="Component" />
-                  </div>
-                </Transition>
-              </router-view>
+            <div :id="id" class="h-full relative overflow-hidden">
+              <div class="h-full relative">
+                <!-- View -->
+                <router-view v-slot="{ Component }">
+                  <Transition class="transition">
+                    <div
+                      :key="Component"
+                      class="absolute inset-0 overflow-y-auto"
+                    >
+                      <component :is="Component" />
+                    </div>
+                  </Transition>
+                </router-view>
+              </div>
             </div>
           </div>
         </div>