93 lines
2.3 KiB
Vue
93 lines
2.3 KiB
Vue
<script setup>
|
|
import {
|
|
ref, computed, reactive,
|
|
onMounted, onUnmounted,
|
|
} from "vue";
|
|
|
|
import TitleBar from '../components/TitleBar.vue';
|
|
|
|
import * as backend from '../backend';
|
|
import * as ui from '../ui';
|
|
|
|
const models = ref([]);
|
|
const createExpanded = ref(false);
|
|
|
|
const editModel = ref({kind: 'text', name: null, inputValue: '{"engine":"llama-cpp","model":"modelfile.gguf"}'});
|
|
|
|
onMounted(async () => {
|
|
let res = await backend.sendAction("get-models");
|
|
models.value = res.models;
|
|
});
|
|
|
|
async function createModel () {
|
|
let current = Object.assign({}, editModel.value);
|
|
|
|
if (!current.name) {
|
|
ui.alert("Missing name");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
current.value = JSON.parse(current.inputValue);
|
|
delete current.inputValue;
|
|
} catch (exception) {
|
|
ui.alert("Bad value: " + exception.toString());
|
|
return;
|
|
}
|
|
|
|
let res = await backend.sendAction("save-model", current);
|
|
if (res.modelId) {
|
|
current.id = res.modelId;
|
|
models.value.push(current)
|
|
} else {
|
|
ui.alert("bad response: " + JSON.stringify(res));
|
|
}
|
|
}
|
|
|
|
function viewModel (model) {
|
|
alert(JSON.stringify(model));
|
|
}
|
|
|
|
async function deleteModel (model) {
|
|
let res = await backend.sendAction("save-model", {modelId: model.id, value: null});
|
|
ui.alert(res.message);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<main>
|
|
<TitleBar>
|
|
<h1>Models</h1>
|
|
</TitleBar>
|
|
|
|
<div class="entry" v-for="model in models">
|
|
{{ model.name }}
|
|
<button @click="viewModel(model)">View</button>
|
|
<button @click="deleteModel(model)">Delete</button>
|
|
</div>
|
|
|
|
<div class="form-container">
|
|
<template v-if="createExpanded">
|
|
<p>Kinds is only text for now. Value must be like:</p>
|
|
<pre>{}</pre>
|
|
<input type="text" v-model="editModel.kind" placeholder="kind">
|
|
<input type="text" v-model="editModel.name" placeholder="name">
|
|
<textarea v-model="editModel.inputValue" placeholder="{}"></textarea>
|
|
<div>
|
|
<button @click="createModel()">Create</button>
|
|
<button @click="createExpanded=false">Cancel</button>
|
|
</div>
|
|
</template>
|
|
<button @click="createExpanded=true" v-else>Create Model</button>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.form-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.entry {}
|
|
</style>
|