Llama-cpp inference, database stored models

frontend/src/views/Agent.vue

@@ -21,6 +21,7 @@
   const configFields = ref([]);
   // Only used for scripted agents.
   const actionDefinitions = ref([]);
+  const modelList = ref([]);
 
 
   // === State Management === //
@@ -54,6 +55,7 @@
         name: field.name,
         type: field.type,
         value: field.value,
+        kind: field.type,
         default: null,
         enabled: field.value != null,
       }));
@@ -72,6 +74,11 @@
     });
   }
 
+  async function loadModels () {
+    let res = await backend.sendAction("get-models");
+    modelList.value = res.models;
+  }
+
   // This won't fire when immediately, the mounted callback will take care
   watch(() => props.id, newId => {
     loadAgentData(newId);
@@ -79,6 +86,7 @@
 
   onMounted(async () => {
     loadAgentData(props.id);
+    loadModels();
   });
 
   // === Prompt === //
@@ -336,7 +344,11 @@
         <span class="label">{{ configField.name }}</span>
         <input type="checkbox" v-model="configField.enabled" />
         <br>
-        <textarea v-model="configField.value" class="config-input" :disabled="!configField.enabled"/>
+        <select v-if="configField.kind == 'model_id'" v-model="configField.value">
+          <option v-if="!modelList.length" disabled>empty</option>
+          <option :value="model.id" v-for="model in modelList">{{ model.name }}</option>
+        </select>
+        <textarea v-else v-model="configField.value" class="config-input" :disabled="!configField.enabled"/>
       </div>
       
       <button type="submit" @click="saveChanges()">Save</button>

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>