Rework user scripts, update DB schema to support embeddings

sist2-vue/src/components/EmbeddingsSearchBar.vue

@@ -1,29 +1,38 @@
 <template>
     <div>
-        <b-progress v-if="modelLoading" :value="modelLoadingProgress" max="1" class="mb-1" variant="warning"
+        <b-progress v-if="modelLoading && [0, 1].includes(modelLoadingProgress)" max="1" class="mb-1" variant="primary"
+                    striped animated :value="1">
+        </b-progress>
+        <b-progress v-else-if="modelLoading" :value="modelLoadingProgress" max="1" class="mb-1" variant="warning"
                     show-progress>
         </b-progress>
-        <b-input-group>
-            <b-form-input :value="embeddingText"
-                          :placeholder="$t('embeddingsSearchPlaceholder')"
-                          @input="onInput($event)"
-                          :disabled="modelLoading"
-            ></b-form-input>
+        <div style="display: flex">
+            <b-select :options="modelOptions()" class="mr-2 input-prepend" :value="modelName"
+                      @change="onModelChange($event)"></b-select>
+
+            <b-input-group>
+                <b-form-input :value="embeddingText"
+                              :placeholder="$store.state.embeddingDoc ? ' ' : $t('embeddingsSearchPlaceholder')"
+                              @input="onInput($event)"
+                              :disabled="modelLoading"
+                              :style="{'pointer-events': $store.state.embeddingDoc ? 'none' : undefined}"
+                ></b-form-input>
+                <b-badge v-if="$store.state.embeddingDoc" pill variant="primary" class="overlay-badge" href="#"
+                         @click="onBadgeClick()">{{ docName }}
+                </b-badge>
+
+                <template #prepend>
+                </template>
+
+                <template #append>
+                    <b-input-group-text>
+                        <MLIcon class="ml-append" big></MLIcon>
+                    </b-input-group-text>
+                </template>
+
+            </b-input-group>
+        </div>
 
-            <!-- TODO: dropdown of available models-->
-            <!--            <template #prepend>-->
-            <!--                <b-input-group-text>-->
-            <!--                    <b-form-checkbox :checked="fuzzy" title="Toggle fuzzy searching" @change="setFuzzy($event)">-->
-            <!--                        {{ $t("searchBar.fuzzy") }}-->
-            <!--                    </b-form-checkbox>-->
-            <!--                </b-input-group-text>-->
-            <!--            </template>-->
-            <template #append>
-                <b-input-group-text>
-                    <MLIcon></MLIcon>
-                </b-input-group-text>
-            </template>
-        </b-input-group>
     </div>
 </template>
 
@@ -32,6 +41,7 @@ import {mapGetters, mapMutations} from "vuex";
 import {CLIPTransformerModel} from "@/ml/CLIPTransformerModel"
 import _debounce from "lodash/debounce";
 import MLIcon from "@/components/icons/MlIcon.vue";
+import Sist2AdminApi from "@/Sist2Api";
 
 export default {
     components: {MLIcon},
@@ -40,7 +50,8 @@ export default {
             modelLoading: false,
             modelLoadingProgress: 0,
             modelLoaded: false,
-            model: null
+            model: null,
+            modelName: null
         }
     },
     computed: {
@@ -49,9 +60,18 @@ export default {
             embeddingText: "embeddingText",
             fuzzy: "fuzzy",
         }),
+        docName() {
+            const ext = this.$store.state.embeddingDoc._source.extension;
+            return this.$store.state.embeddingDoc._source.name +
+                (ext ? "." + ext : "")
+        }
     },
     mounted() {
-        this.onInput = _debounce(this._onInput, 300, {leading: false});
+        // Set default model
+        this.modelName = Sist2AdminApi.models()[0].name;
+        this.onModelChange(this.modelName);
+
+        this.onInput = _debounce(this._onInput, 450, {leading: false});
     },
     methods: {
         ...mapMutations({
@@ -61,11 +81,6 @@ export default {
         }),
         async loadModel() {
             this.modelLoading = true;
-            this.model = new CLIPTransformerModel(
-                // TODO: add a config for this (?)
-                "https://github.com/simon987/sist2-models/raw/main/clip/models/clip-vit-base-patch32-q8.onnx",
-                "https://github.com/simon987/sist2-models/raw/main/clip/models/tokenizer.json",
-            );
 
             await this.model.init(async progress => {
                 this.modelLoadingProgress = progress;
@@ -74,26 +89,67 @@ export default {
             this.modelLoaded = true;
         },
         async _onInput(text) {
-            if (!this.modelLoaded) {
-                await this.loadModel();
-                this.setEmbeddingModel(1); // TODO
+            try {
+
+                if (!this.modelLoaded) {
+                    await this.loadModel();
+                }
+
+                if (text.length === 0) {
+                    this.setEmbeddingText("");
+                    this.setEmbedding(null);
+                    return;
+                }
+
+                const embeddings = await this.model.predict(text);
+
+                this.setEmbeddingText(text);
+                this.setEmbedding(embeddings);
+            } catch (e) {
+                alert(e)
             }
-
-            if (text.length === 0) {
-                this.setEmbeddingText("");
-                this.setEmbedding(null);
-                return;
-            }
-
-            const embeddings = await this.model.predict(text);
-
-            this.setEmbeddingText(text);
-            this.setEmbedding(embeddings);
         },
-        mounted() {
+        modelOptions() {
+            return Sist2AdminApi.models().map(model => model.name);
+        },
+        onModelChange(name) {
+            this.modelLoaded = false;
+            this.modelLoadingProgress = 0;
+
+            const modelInfo = Sist2AdminApi.models().find(m => m.name === name);
+
+            if (modelInfo.name === "CLIP") {
+                const tokenizerUrl = new URL("./tokenizer.json", modelInfo.url).href;
+                this.model = new CLIPTransformerModel(modelInfo.url, tokenizerUrl)
+                this.setEmbeddingModel(modelInfo.id);
+            } else {
+                throw new Error("Unknown model: " + name);
+            }
+        },
+        onBadgeClick() {
+            this.$store.commit("setEmbedding", null);
+            this.$store.commit("setEmbeddingDoc", null);
         }
     }
 }
 </script>
 <style>
+.overlay-badge {
+    position: absolute;
+    z-index: 1;
+    left: 0.375rem;
+    top: 8px;
+    line-height: 1.1rem;
+    overflow: hidden;
+    max-width: 200px;
+    text-overflow: ellipsis;
+}
+
+.input-prepend {
+    max-width: 100px;
+}
+
+.theme-black .ml-append {
+    filter: brightness(0.95) !important;
+}
 </style>