Llama-cpp inference, database stored models

frontend/src/views/Models.vue

@@ -0,0 +1,91 @@
+<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: '{}'});
+
+  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));
+  }
+
+  function deleteModel (model) {
+    alert("TODO: delete Model. ID: " + model.id);
+  }
+</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>