Zum Inhalt

touchstone/gui/static/pack_editor.js

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
// touchstone/gui/static/pack_editor.js
// Alpine component for the guided pack editor. A YAML textarea + server-side validation (the one
// pydantic contract, no JS duplicate), a live preview reusing the viewer body, a verbatim download,
// and a guarded save into packs/. Build-free; registered on alpine:init, loaded non-deferred.
"use strict";

document.addEventListener("alpine:init", () => {
  Alpine.data("packEditor", (initialYaml, path) => ({
    yamlText: initialYaml || "",
    path: path || null,
    ok: null, // null = not yet validated / stale after an edit; true/false after a validate
    errors: [],
    summary: null,
    previewHtml: "",
    validating: false,
    filename: "",
    saving: false,
    saveError: "",
    saved: "",
    showOverwrite: false,
    init() {
      // prefill the save filename from the loaded path's stem (e.g. packs/ndassist.yaml → ndassist)
      if (this.path) {
        const base = this.path.split("/").pop() || "";
        this.filename = base.replace(/\.yaml$/, "");
      }
      this.validate(); // validate-on-load so the preview shows immediately
    },
    async validate() {
      this.validating = true;
      this.saved = "";
      this.showOverwrite = false;
      try {
        const res = await fetch("/packs/validate", {
          method: "POST",
          headers: { "Content-Type": "application/x-www-form-urlencoded" },
          body: new URLSearchParams({ yaml_text: this.yamlText }),
        });
        const data = await res.json();
        this.ok = data.ok;
        this.errors = data.errors || [];
        this.summary = data.summary;
        this.previewHtml = data.preview_html || "";
      } catch (e) {
        this.ok = false;
        this.errors = [{ loc: "(netz)", msg: "Validierung fehlgeschlagen" }];
        this.previewHtml = "";
      } finally {
        this.validating = false;
      }
    },
    summaryText() {
      const s = this.summary;
      if (!s) return "";
      return (
        "· " +
        s.prompts +
        " Prompts · " +
        s.dimensions +
        " Dim · " +
        s.variants +
        " Varianten · max " +
        s.max_weighted +
        " Punkte"
      );
    },
    download() {
      // verbatim: the textarea text, comments/anchors/order preserved (not the normalized dump)
      const blob = new Blob([this.yamlText], { type: "application/x-yaml" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = (this.filename.trim() || "pack") + ".yaml";
      document.body.appendChild(a);
      a.click();
      a.remove();
      URL.revokeObjectURL(url);
    },
    async save(overwrite) {
      this.saveError = "";
      this.saved = "";
      this.showOverwrite = false;
      // the server re-validates too (authoritative), but gate here for a clear UX
      if (this.ok !== true) {
        this.saveError = "Erst validieren — nur ein gültiges Pack wird gespeichert.";
        return;
      }
      if (!this.filename.trim()) {
        this.saveError = "Dateiname fehlt.";
        return;
      }
      this.saving = true;
      try {
        const body = new URLSearchParams({
          filename: this.filename.trim(),
          yaml_text: this.yamlText,
        });
        if (overwrite) body.set("overwrite", "true");
        const res = await fetch("/packs/save", {
          method: "POST",
          headers: { "Content-Type": "application/x-www-form-urlencoded" },
          body,
        });
        if (res.status === 409) {
          this.showOverwrite = true; // existing file — ask for explicit overwrite
          return;
        }
        if (!res.ok) {
          const d = await res.json().catch(() => ({}));
          this.saveError = d.detail || "Speichern fehlgeschlagen (" + res.status + ")";
          return;
        }
        const data = await res.json();
        this.saved = data.saved;
      } catch (e) {
        this.saveError = "Speichern fehlgeschlagen";
      } finally {
        this.saving = false;
      }
    },
  }));
});