Files
llm/frontend/src/components/dashboard/Settings.vue
2024-05-29 18:36:17 +02:00

99 lines
3.2 KiB
Vue

<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>