- Updated prompt for conversation title generation to be more concise…

… and to not use markdown. - Added streamed response setting to QuickSettings. - Changed user input to multi-row text box with auto-grow, allowing user to add new lines when pressing Enter. Ctrl+Enter sends the message. - Refactored Settings component. Created TextGenerationSettings and ImageGenerationSettings components. - Fixed conversation mode on/off settings visible in image generation mode. - Fixed issue where text generation models were shown in QuickSettings when image generation was active and user clicked the Dall-e chip. - Fixed issue where calling logger() with multiple arguments did not print to console.
PeterBlenessy · Jun 1, 2024 · d56616e · d56616e
1 parent bf35ead
commit d56616e
Show file tree

Hide file tree

Showing 19 changed files with 427 additions and 312 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,9 +26,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   https://github.com/quasarframework/quasar/issues/2233#issuecomment-1719873402
 - Base_64 encoded images stored with messages cannot be shared after introducing blobs and objectURLs.
 - When removing a persona; should check if it is used in messages and alert user.
+- When settings are restored from last message, personas with same name or id are duplicated if prompt or avatar has changed in persona settings compared to persona in message.
 
 ## [UNRELEASED]
 
+## v1.12.0 - 2024-06-01
+- Updated prompt for conversation title generation to be more concise and to not use markdown.
+- Added streamed response setting to QuickSettings.
+- Changed user input to multi-row text box with auto-grow, allowing user to add new lines when pressing Enter. Ctrl+Enter sends the message.
+- Refactored Settings component. Created TextGenerationSettings and ImageGenerationSettings components. 
+- Fixed conversation mode on/off settings visible in image generation mode.
+- Fixed issue where text generation models were shown in QuickSettings when image generation was active and user clicked the Dall-e chip.
+- Fixed issue where calling logger() with multiple arguments did not print to console.
+
 ## v1.11.1 - 2024-05-28
 - Added API provider name to QuickSettings select options.
 - Added additional error logs for API responses.

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "team-ai",
   "private": true,
-  "version": "1.11.1",
+  "version": "1.12.0",
   "type": "module",
   "license": "MIT",
   "scripts": {

diff --git a/src/App.vue b/src/App.vue
@@ -219,7 +219,7 @@ export default {
             // Listen to updater events
             const unlisten = await onUpdaterEvent(({ error, status }) => {
                 // This will log all updater events, including status updates and errors.
-                logger.log('Updater event', error, status)
+                logger.log(`[App] - Updater event': ${error}, ${status}`);
 
                 let updater = {
                     'PENDING': { icon: 'mdi-information', type: 'info', message: t('updater.pending.message'), caption: t('updater.pending.caption') },
@@ -246,7 +246,7 @@ export default {
                 const { shouldUpdate, manifest } = await checkUpdate();
 
                 if (shouldUpdate) {
-                    logger.log(`Update available ${manifest?.version}, ${manifest?.date}, ${manifest?.body}`);
+                    logger.log(`[App] - Update available ${manifest?.version}, ${manifest?.date}, ${manifest?.body}`);
                     // Uncomment to enable frontend install/relaunch flow.
                     // Also, disable the built-in Tauri dialog in Tauri config.
 
@@ -272,7 +272,7 @@ export default {
                     // });
                 }
             } catch (error) {
-                logger.error(error);
+                logger.error(`[App] - ${error}`);
             }
 
             // you need to call unlisten if your handler goes out of scope, for example if the component is unmounted.

diff --git a/src/components/ImageGenerationSettings.vue b/src/components/ImageGenerationSettings.vue
@@ -0,0 +1,127 @@
+<template>
+    <q-list>
+        <q-item v-if="false">
+            <q-item-section avatar>
+                <q-icon name="mdi-image-multiple-outline" :color="iconColor" />
+            </q-item-section>
+            <q-item-section>
+                <q-item-label caption>{{ t('settings.image.choices.label') }} ({{ choices
+                    }})</q-item-label>
+                <q-slider :model-value="choices" @change="val => { choices = val }" snap :min="1" :max="10" :step="1"
+                    :markers="1" label />
+                <q-tooltip :delay="750" max-width="300px" transition-show="scale" transition-hide="scale">
+                    {{ t('settings.image.choices.tooltip') }}
+                </q-tooltip>
+            </q-item-section>
+        </q-item>
+
+        <q-item>
+            <q-item-section avatar>
+                <q-icon name="mdi-image-size-select-large" :color="iconColor" />
+            </q-item-section>
+            <q-item-section>
+                <q-item-label caption>{{ t('settings.image.size.label') }} ({{ imageSize
+                    }})</q-item-label>
+                <q-slider :model-value="imageSizeValue" @update:model-value="val => { imageSizeValue = val }" snap
+                    :min="0" :max="2" :step="1" :markers="1" label :label-value="imageSize" />
+                <q-tooltip :delay="750" max-width="300px" transition-show="scale" transition-hide="scale">
+                    {{ t('settings.image.size.tooltip') }}
+                </q-tooltip>
+            </q-item-section>
+        </q-item>
+
+        <q-item>
+            <q-item-section avatar>
+                <q-icon :name="imageQuality == 'hd' ? 'mdi-high-definition' : 'mdi-standard-definition'"
+                    :color="iconColor" />
+            </q-item-section>
+            <q-item-section>
+                <q-item-label caption>{{ t('settings.image.quality.label') }} ({{ imageQuality
+                    }})</q-item-label>
+                <q-slider :model-value="imageQualityValue" @update:model-value="val => { imageQualityValue = val }" snap
+                    :min="0" :max="1" :step="1" :markers="1" label :label-value="imageQuality" />
+                <q-tooltip :delay="750" max-width="300px" transition-show="scale" transition-hide="scale">
+                    {{ t('settings.image.quality.tooltip') }}
+                </q-tooltip>
+            </q-item-section>
+        </q-item>
+
+        <q-item>
+            <q-item-section avatar>
+                <q-icon name="mdi-palette" :color="iconColor" />
+            </q-item-section>
+            <q-item-section>
+                <q-item-label caption>{{ t('settings.image.style.label') }} ({{ imageStyle
+                    }})</q-item-label>
+                <q-slider :model-value="imageStyleValue" @update:model-value="val => { imageStyleValue = val }" snap
+                    :min="0" :max="1" :step="1" :markers="1" label :label-value="imageStyle" />
+                <q-tooltip :delay="750" max-width="300px" transition-show="scale" transition-hide="scale">
+                    {{ t('settings.image.style.tooltip') }}
+                </q-tooltip>
+            </q-item-section>
+        </q-item>
+
+    </q-list>
+</template>
+
+<script>
+import { computed, ref, watch } from 'vue';
+import { storeToRefs } from "pinia";
+import { useSettingsStore } from '../stores/settings-store.js';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import openaiConfig from '../services/openai.config.json';
+
+export default {
+    setup() {
+        const $q = useQuasar();
+        const { t } = useI18n();
+        const settingsStore = useSettingsStore();
+        const {
+            appMode,
+            imageSize, 
+            imageQuality,
+            imageStyle
+        } = storeToRefs(settingsStore);
+
+        // Load OpenAI API format parameters
+        const imageSizeOptions = openaiConfig.imageSizeOptions;
+        const imageQualityOptions = openaiConfig.imageQualityOptions;
+        const imageStyleOptions = openaiConfig.imageStyleOptions;
+
+        const imageSizeValue = ref(imageSizeOptions.indexOf(imageSize.value));
+        const imageQualityValue = ref(imageQualityOptions.indexOf(imageQuality.value));
+        const imageStyleValue = ref(imageStyleOptions.indexOf(imageStyle.value));
+
+        watch(imageSizeValue, () => {
+            imageSize.value = imageSizeOptions[imageSizeValue.value];
+        });
+
+        watch(imageQualityValue, () => {
+            imageQuality.value = imageQualityOptions[imageQualityValue.value];
+        });
+
+        watch(imageStyleValue, () => {
+            imageStyle.value = imageStyleOptions[imageStyleValue.value];
+        });
+
+        return {
+            t,
+            appMode,
+
+            imageSize,
+            imageSizeValue,
+            imageQuality,
+            imageQualityValue,
+            imageStyle,
+            imageStyleValue,
+
+            iconColor: computed(() => $q.dark.isActive ? 'grey-4' : 'grey-8')
+        }
+    }
+}
+</script>
+
+<style scoped>
+/* Your existing styles here */
+</style>
diff --git a/src/components/Messages.vue b/src/components/Messages.vue
@@ -215,6 +215,9 @@ export default {
 
                 settingsStore.$patch(settings);
             }
+            //logger.info(`[Messages] - Restored settings from last message:\n${JSON.stringify(settings)}`);
+            // TODO: store ony avatar id in settings, not image. Too large printout.
+            logger.info(`[Messages] - Restored settings from last message`);
         };
 
         // Load messages from conversationId
@@ -277,8 +280,8 @@ export default {
             const data = [new ClipboardItem({ [type]: blob })];
 
             navigator.clipboard.write(data)
-                .then(() => logger.log('Copied to clipboard'))
-                .catch((error) => logger.log(error));
+                .then(() => logger.log('[Messages] - Copied to clipboard'))
+                .catch((error) => logger.error(`[Messages] - ${error}`));
         };
 
         // Share message content via 'navigator.share', the native sharing mechanism
@@ -290,7 +293,7 @@ export default {
                         : { text: await getContent(message) }
                 );
             } catch (error) {
-                logger.error(error);
+                logger.error(`[Messages] - Share message error: ${error}`);
             }
         };
 
@@ -347,7 +350,7 @@ export default {
                 readingMessage.value = '';
             };
             utterance.onerror = (event) => {
-                logger.log("Error: " + event.error + " - " + event.message);
+                logger.error(`[Messages] - Speech error: ${event.error}, ${event.message}`);
                 readingMessage.value = '';
             };
 

diff --git a/src/components/OpenAI.vue b/src/components/OpenAI.vue
@@ -64,7 +64,7 @@ export default {
                 // Remove (occasional) optionally escaped leading and trailing apostrophes
                 return json.choices[0].message.content.trim().replace(/^\\?"|\\?"$/g, '');
             } catch (error) {
-                logger.error(error);
+                logger.error(`[OpenAI] - ${error}`);
                 throw new Error(error);
             }
         }
@@ -103,12 +103,12 @@ export default {
         watch(abortRequest, () => {
             try {
                 if (abortRequest.value) {
-                    logger.log('Aborting generation');
+                    logger.log('[OpenAI] - Aborting generation');
                     loading.value = false;
                     abortController.abort();
                 }
             } catch (error) {
-                logger.error(error);
+                logger.error(`[OpenAI] - ${error}`);
                 abortRequest.value = false;
                 loading.value = false;
             }
@@ -256,7 +256,7 @@ export default {
                     if (!conversationTitle) {
                         generateConversationTitle(conversationId.value)
                             .then((title) => conversationTitle = title)
-                            .catch(error => logger.error(error))
+                            .catch(error => logger.error(`[OpenAI] - ${error}`))
                             .finally(() => {
                                 const timestamp = Date.now().toString();
                                 if (conversationIndex != -1) {
@@ -278,7 +278,7 @@ export default {
                     }
 
                 } catch (error) {
-                    logger.error(error);
+                    logger.error(`[OpenAI] - ${error}`);
                     let message = ''
                     let caption = ''
 
@@ -289,7 +289,7 @@ export default {
 
                         // Check if user aborted the request
                         if (error.message == 'AbortError: Fetch is aborted') {
-                            logger.log("Generation aborted");
+                            logger.log('[OpenAI] - Generation aborted');
                             abortController = '';
                             return;
                         }
@@ -304,7 +304,8 @@ export default {
                             caption = error.message;
                         }
                     }
-                    logger.error(message + ' ' + caption);
+                    logger.error(`[OpenAI] - ${message} ${caption}`);
+
 
                     // Show error message in app
                     $q.notify({

diff --git a/src/components/Personas.vue b/src/components/Personas.vue
@@ -267,8 +267,8 @@ export default {
                             });
                         awesomePrompts.value.shift();
                     })
-                    .catch(error => logger.error(error))
-                    .finally(() => logger.log("fetchPersonas() done"));
+                    .catch(error => logger.error(`[Personas] - ${error}`))
+                    .finally(() => logger.log("[Personas] - fetch awesome prompts done"));
             } else if (source == "ExamplePersonas") {
                 fetch(awesomeSources[source])
                     .then(response => response.json())
@@ -279,8 +279,8 @@ export default {
                             return { id, ...item, readonly };
                         });
                     })
-                    .catch(error => logger.error(error))
-                    .finally(() => logger.log("fetchPersonas() done"));
+                    .catch(error => logger.error(`[Personas] - ${error}`))
+                    .finally(() => logger.log("[Personas] - fetch example personas done"));
             }
         }
 

diff --git a/src/components/ProviderSettings.vue b/src/components/ProviderSettings.vue
@@ -111,13 +111,12 @@
 
 <script>
 
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { storeToRefs } from "pinia";
 import { useSettingsStore } from '../stores/settings-store.js';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import defaultProviders from '../services/providers.config.json';
-import { ref } from "vue";
 
 export default {
     setup() {