added temperature and token count to ai config

2024-05-29 18:36:17 +02:00
parent 3a78660883
commit bc0712ba11
14 changed files with 197 additions and 15 deletions
--- a/frontend/src/components/dashboard/Settings.vue
+++ b/frontend/src/components/dashboard/Settings.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="card" style="min-width: 15em">
+    <div class="card-header">
+      <h5 class="card-title mb-0">Settings</h5>
+    </div>
+    <div class="card-body">
+      <div class="form-group">
+        <label class="form-label" :for="uid + '_temperature'">Temperature ({{ temperature }})</label>
+        <input class="form-range" type="range" :id="uid + '_temperature'" v-model="temperature" min="0" max="1"
+               step="0.001">
+      </div>
+      <div class="form-group">
+        <label class="form-label" :for="uid + '_tokenCount'">Token count ({{ tokenCount }})</label>
+        <input class="form-range" type="range" :id="uid + '_tokenCount'" v-model="tokenCount" min="0" max="500">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {Options, Vue} from 'vue-class-component';
+import {Prop} from 'vue-property-decorator';
+import {getCurrentInstance} from 'vue';
+import {toast} from 'vue3-toastify';
+import {AiInstanceVmV1} from 'ai-oas';
+import {ApiStore} from '@/stores/ApiStore';
+
+@Options({
+  name: 'Settings',
+  methods: {getCurrentInstance},
+  components: {},
+})
+export default class Settings extends Vue {
+  @Prop({required: true})
+  readonly aiInstance!: AiInstanceVmV1;
+  readonly apiStore = new ApiStore();
+
+  private temperatureSaveTimeout: number | undefined = undefined;
+  private tokenCountSaveTimeout: number | undefined = undefined;
+
+  private oldTemperature: number = 0;
+  private oldTokenCount: number = 0;
+
+  get temperature(): number {
+    return this.aiInstance.configuration.temperature;
+  }
+
+  set temperature(val: number) {
+    if (this.temperatureSaveTimeout) {
+      clearTimeout(this.temperatureSaveTimeout);
+      this.temperatureSaveTimeout = undefined;
+    } else {
+      this.oldTemperature = this.temperature;
+    }
+    this.aiInstance.configuration.temperature = val;
+
+    this.temperatureSaveTimeout = setTimeout(() => {
+      this.aiInstance.configuration.temperature = val;
+      this.apiStore.aiConfigurationApi
+          .update(this.aiInstance.configuration)
+          .then(_ => this.aiInstance.configuration.temperature = val)
+          .catch(e => {
+            toast.error('Error while setting temperature: ' + JSON.stringify(e));
+            this.aiInstance.configuration.temperature = this.oldTemperature;
+          });
+    }, 500);
+  }
+
+  get tokenCount(): number {
+    return this.aiInstance.configuration.tokenCount;
+  }
+
+  set tokenCount(val: number) {
+    if (this.tokenCountSaveTimeout) {
+      clearTimeout(this.tokenCountSaveTimeout);
+      this.tokenCountSaveTimeout = undefined;
+    } else {
+      this.oldTokenCount = this.tokenCount;
+    }
+    this.aiInstance.configuration.tokenCount = val;
+
+    this.tokenCountSaveTimeout = setTimeout(() => {
+      this.aiInstance.configuration.tokenCount = val;
+      this.apiStore.aiConfigurationApi
+          .update(this.aiInstance.configuration)
+          .then(_ => this.aiInstance.configuration.tokenCount = val)
+          .catch(e => {
+            toast.error('Error while setting tokenCount: ' + JSON.stringify(e));
+            this.aiInstance.configuration.tokenCount = this.oldTokenCount;
+          });
+    }, 500);
+  }
+
+  get uid(): string {
+    return '' + getCurrentInstance()?.uid!;
+  }
+}
+</script>