hub/frontend/src/views/Models.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 expandedModelId = ref(new Set());
  const createExpanded = ref(false);
  const newKeyValue = ref(false);

  function defaultModel () { return {kind: 'text', name: null, value: {engine:"llama-cpp", model:"modelfile.gguf"}}; }
  const editModel = ref(defaultModel());

  onMounted(async () => {
    let res = await backend.sendAction("get-models");
    models.value = res.models.map(entry => ({editing: {}, ...entry}));
  });

  const toggleModel = (id) => {
    if (expandedModelId.value.has(id)) {
      expandedModelId.value.delete(id);
    } else {
      expandedModelId.value.add(id);
    }
  };

  async function createModel () {
    let current = Object.assign({editing: {}}, 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);
      createExpanded.value = false;
      editModel.value = defaultModel();
    } else {
      ui.alert("bad response: " + JSON.stringify(res));
    }
  }

  async function deleteModel (model) {
    let res = await backend.sendAction("save-model", {modelId: model.id, value: null});
    ui.alert(res.message);
    // Remove the model from the list
    models.value = models.value.filter(m => m.id !== model.id);
  }

  function editKey (model, key) {
    model.editing[key] = JSON.stringify(model.value[key]);
  }

  async function acceptKey (model, key) {
    try {
      let value = JSON.parse(model.editing[key]);
      model.value[key] = value;
      cancelKey(model, key);
      let res = await backend.sendAction("save-model", {
        modelId: model.id,
        kind: model.kind,
        name: model.name,
        value: model.value,
      });
    } catch (exception) {
      ui.alert("Bad value: " + exception.toString());
      return;
    }
  }

  const cancelKey = (model, key) => {
    delete model.editing[key];
  };
  
  const deleteKey = (model, key) => {
    if (confirm(`delete key ${key} with value ${JSON.stringify(model.value[key])}`)) {
      delete model.value[key];
    }
  };

  const createKey = (model, key) => {
    model.value[key] = null;
    editKey(model, key);
  };
</script>

<template>
  <main>
    <TitleBar>
      <h1>Models</h1>
    </TitleBar>

    <div v-if="models.length === 0" class="empty">
      No models found.
    </div>

    <div v-else v-for="model in models" :key="model.id" class="model-entry">
      <div class="model-header" @click="toggleModel(model.id)">
        <span class="model-name">{{ model.name }}</span>
        <span class="model-kind">{{ model.kind }}</span>
        <div class="model-actions">
          <button @click.stop="deleteModel(model)">Delete</button>
        </div>
      </div>
      <div v-if="expandedModelId.has(model.id)" class="model-details">
        <div class="detail-row">
          <div class="detail-key">ID</div>
          <div class="detail-value">{{ model.id }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-key">Kind</div>
          <div class="detail-value">{{ model.kind }}</div>
        </div>
        <div v-for="(value, key) in model.value" :key="key" class="detail-row">
          <div class="detail-key">{{ key }}</div>
          <template v-if="model.editing[key]">
            <textarea v-model="model.editing[key]"></textarea>
            <div class="detail-actions">
              <button @click="acceptKey(model, key)">Accept</button>
              <button @click="cancelKey(model, key)">Cancel</button>
            </div>
          </template>
          <template v-else>
            <pre class="detail-pre">{{ JSON.stringify(value, null, 2) }}</pre>
            <div class="detail-actions">
              <button @click="editKey(model, key)">Edit</button>
              <button @click="deleteKey(model, key)">Delete</button>
            </div>
          </template>
        </div>
        <div class="detail-row add-value-row">
          <input type="text" v-model="newKeyValue" placeholder="key">
          <button @click="createKey(model, newKeyValue)">Add</button>
        </div>
      </div>
    </div>

    <div class="model-entry">
      <div class="model-header" @click="createExpanded = !createExpanded">
        <span class="model-name">Create Model</span>
      </div>

      <div v-if="createExpanded" class="model-details">
        <div class="detail-row">
          <div class="detail-key">Kind</div>
          <div class="detail-value"><input type="text" v-model="editModel.kind"></div>
        </div>
        <div class="detail-row">
          <div class="detail-key">Name</div>
          <div class="detail-value"><input type="text" v-model="editModel.name"></div>
        </div>
        <div class="detail-row">
          <div class="detail-key">Engine</div>
          <div class="detail-value"><input type="text" v-model="editModel.value.engine"></div>
        </div>
        <div class="detail-row">
          <div class="detail-key">Model</div>
          <div class="detail-value"><input type="text" v-model="editModel.value.model"></div>
        </div>
        <div class="detail-row">
          <button @click="createModel()">Create</button>
          <button @click="createExpanded=false">Cancel</button>
        </div>
      </div>
    </div>

  </main>
</template>

<style scoped>
  .empty {
    padding: 1em;
    color: var(--color-text-mute);
  }

  .model-entry {
    border-bottom: 1px solid var(--color-border);
  }

  .model-header {
    padding: 0.5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }

  .model-header:hover {
    background-color: var(--color-background-hover);
  }

  .model-name {
    font-weight: bold;
    color: var(--color-text-heading);
    flex: 1;
  }

  .model-kind {
    color: var(--color-text-mute);
    font-size: 0.85em;
    margin-right: 1em;
  }

  .model-actions {
    display: flex;
    gap: 0.5em;
  }

  .model-details {
    padding: 0.5em 1em;
    background-color: var(--color-background-mute);
  }

  .detail-row {
    margin-bottom: 0.5em;
    display: flex;
  }

  .detail-key {
    font-weight: bold;
    color: var(--color-text-heading);
    width: 120px;
  }

  .detail-value {
    color: var(--color-text);
    flex: 1;
  }

  .detail-pre {
    margin: 0;
    padding: 0.5em;
    background-color: var(--color-background-muted);
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 0.85em;
    flex: 1;
  }

  .form-container {
    margin-top: 1em;
    padding: 1em;
    border-top: 1px solid var(--color-border);
  }

  .form-container input, .form-container textarea {
    display: block;
    width: 100%;
    padding: 0.5em;
    margin: 0.5em 0;
    border: 1px solid var(--color-border);
    border-radius: 4px;
  }

  .form-container textarea {
    min-height: 100px;
    resize: vertical;
  }

  .form-actions {
    display: flex;
    gap: 0.5em;
    margin-top: 0.5em;
  }
</style>