assistant/src/App.vue
2024-03-13 00:40:00 -07:00

124 lines
3.7 KiB
Vue

<script setup>
import { ref, onBeforeMount } from 'vue';
const url = ref('http://localhost:3000')
const token = ref('your_jwt')
const models = ref([])
const selectedModel = ref('')
const saveHandler = async () => {
console.log(url.value, token.value)
if (url.value.endsWith('/')) {
url.value = url.value.substring(0, url.value.length - 1);
}
window.electron.saveConfig({
url: url.value,
token: token.value
})
const res = await window.electron.checkConnection()
new Notification("Open WebUI", { body: res ? 'Server Connection Verified' : 'Server Connection Failed' })
if (res) {
models.value = await window.electron.getModels()
console.log(models.value)
}
}
const selectModelHandler = async () => {
console.log(selectedModel.value)
if (selectedModel.value) {
selectedModel.value = await window.electron.selectModel(selectedModel.value)
}
}
onBeforeMount(async () => {
const res = await window.electron.loadConfig()
if (res) {
url.value = res.url
token.value = res.token
}
})
</script>
<template>
<div class=" h-screen w-screen p-3 flex justify-center">
<div class=" my-auto w-full flex flex-col gap-2">
<div class="flex justify-between items-center">
<div class=" text-sm font-semibold">Open WebUI Assistant</div>
<button class="bg-neutral-700 hover:bg-neutral-800 transition text-white text-xs px-3 py-1 rounded-lg"
@click="saveHandler">Save</button>
</div>
<div class="flex flex-col gap-1.5">
<input v-model="url"
class=" w-full bg-gray-100 hover:bg-gray-200 transition rounded-lg py-1 px-2 text-xs outline-none"
placeholder="Open WebUI URL" />
<input v-model="token"
class=" w-full bg-gray-100 hover:bg-gray-200 transition rounded-lg py-1 px-2 text-xs outline-none"
placeholder="Open WebUI Token" />
<hr />
<div class="flex gap-1">
<select v-model="selectedModel"
class=" w-full bg-gray-100 hover:bg-gray-200 text-xs text-gray-700 transition rounded-lg py-1 px-2 outline-none">
<option value="" disabled class="text-xs text-gray-200">Select a model</option>
<option v-for="model in models" v-bind:value="model.name">{{ model.name }}</option>
</select>
<button class="p-1 bg-gray-100 hover:bg-gray-200 transition rounded-lg" @click="selectModelHandler">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
<path fill-rule="evenodd"
d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
</template>
<style>
@import './index.css';
select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
/* for Chrome */
-webkit-appearance: none;
}
</style>