make model names configurable

src/components/Settings.vue

@@ -62,6 +62,50 @@
 				</v-switch>
 			</v-list-item>
 		</v-list-group>
+
+		<v-list-group value="Model" fluid>
+			<template v-slot:activator="{ props }">
+				<v-list-item v-bind="props" prepend-icon="mdi-head-cog-outline">
+					{{ $t('settings.model.title') }}
+				</v-list-item>
+			</template>
+
+			<v-list-item class="ml-2">
+				<v-text-field
+					v-model="model.vision"
+					:label="$t('settings.model.vision')"
+					density="compact"
+					hide-details
+				></v-text-field>
+			</v-list-item>
+			<v-list-item class="ml-2">
+				<v-text-field
+					v-model="model.text"
+					:label="$t('settings.model.text')"
+					density="compact"
+					hide-details
+				></v-text-field>
+			</v-list-item>
+			<v-list-item class="ml-2">
+				<v-text-field
+					v-model="model.processor"
+					:label="$t('settings.model.processor')"
+					density="compact"
+					hide-details
+				></v-text-field>
+			</v-list-item>
+			<v-list-item class="ml-2">
+				<v-text-field
+					v-model="model.tokenizer"
+					:label="$t('settings.model.tokenizer')"
+					density="compact"
+					hide-details
+				></v-text-field>
+			</v-list-item>
+			<v-list-item class="ml-2">
+				<v-btn color="primary" block @click="applyModelValues">{{ $t('settings.model.apply') }}</v-btn>
+			</v-list-item>
+		</v-list-group>
 	</v-list>
 </template>
 
@@ -77,6 +121,12 @@ export default defineComponent({
 		return {
 			languages: i18n.locales.sort(),
 			open: ['General'],
+			model: {
+				vision: '',
+				text: '',
+				tokenizer: '',
+				processor: '',
+			},
 		}
 	},
 	methods: {
@@ -86,10 +136,30 @@ export default defineComponent({
 			'setItemsPerPage',
 			'setSimilarityThreshold',
 			'setShowSimilarity',
+			'setModelVision',
+			'setModelText',
+			'setModelProcessor',
+			'setModelTokenizer',
 		]),
+		setModelValues(value) {
+			this.model.vision = value.vision
+			this.model.text = value.text
+			this.model.processor = value.processor
+			this.model.tokenizer = value.tokenizer
+		},
+		applyModelValues(){
+			this.setModelVision(this.model.vision)
+			this.setModelText(this.model.text)
+			this.setModelProcessor(this.model.processor)
+			this.setModelTokenizer(this.model.tokenizer)
+
+			//reload website
+			window.location.reload()
+		}
 	},
 	computed: {
 		...mapState(useSettingsStore, ['search', 'locale']),
+		...mapState(useSettingsStore, { persistedModel: 'model' }),
 		currentLocale: {
 			get() {
 				return this.locale
@@ -123,6 +193,17 @@ export default defineComponent({
 			},
 		},
 	},
+	watch: {
+		persistedModel: {
+			deep: true,
+			handler(value) {
+				this.setModelValues(value)
+			},
+		},
+	},
+	mounted() {
+		this.setModelValues(this.persistedModel)
+	},
 })
 </script>
 

src/components/vision/VisionEmbedding.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
-		<ProcessorLoader modelName="Xenova/clip-vit-base-patch32" />
-		<ClipVisionModelLoader modelName="jinaai/jina-clip-v1" />
+		<ProcessorLoader :modelName="model.processor" />
+		<ClipVisionModelLoader :modelName="model.vision" />
 
 		<template v-if="directory">
 			<v-btn v-if="!progress.doing" @click="onDirectory" :disabled="!isLoaded" color="primary" block>
@@ -38,6 +38,7 @@ import ProgressDialog from '../progress/Dialog.vue'
 import { delayProgress } from '../progress/delayed.ts'
 import { PersistedVectorEntry, VectorEntryKey } from '../../database/vector.ts'
 import { localFileURI, parseURI } from '../../database/uri.ts'
+import { useSettingsStore } from '../../store/settings.ts'
 
 const validImageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.tiff']
 
@@ -77,6 +78,7 @@ export default defineComponent({
 	},
 	computed: {
 		...mapState(useAiStore, ['processor', 'visionModel']),
+		...mapState(useSettingsStore, ['model']),
 		isLoaded() {
 			return this.processor && this.visionModel
 		},

src/i18n/de.json

@@ -149,6 +149,14 @@
       "theme": "Thema",
       "title": "Allgemein"
     },
+    "model": {
+      "title": "Modell",
+      "vision": "Vision",
+      "text": "Text",
+      "tokenizer": "Tokenizer",
+      "processor": "Prozessor",
+      "apply": "Anwenden"
+    },
     "search": {
       "ipp": "Elemente pro Seite",
       "similarity": {

src/i18n/en.json

@@ -148,6 +148,14 @@
       "theme": "Theme",
       "title": "General"
     },
+    "model": {
+      "title": "Model",
+      "vision": "Vision",
+      "text": "Text",
+      "tokenizer": "Tokenizer",
+      "processor": "Processor",
+      "apply": "Apply"
+    },
     "search": {
       "ipp": "Items per page",
       "similarity": {

src/store/settings.ts

@@ -3,12 +3,17 @@ import { name as projectName } from '../../package.json'
 
 const storePrefix = `${projectName}:settings:`
 const searchPrefix = `${storePrefix}search:`
+const modelPrefix = `${storePrefix}model:`
 
 const keyTheme = storePrefix + 'theme'
 const keyLocale = storePrefix + 'locale'
 const keyItemsPerPage = searchPrefix + 'itemsPerPage'
 const keySimilarityThreshold = searchPrefix + 'similarityThreshold'
 const keyShowSimilarity = searchPrefix + 'showSimilarity'
+const keyModelVision = modelPrefix + 'vision'
+const keyModelText = modelPrefix + 'text'
+const keyModelProcessor = modelPrefix + 'processor'
+const keyModelTokenizer = modelPrefix + 'tokenizer'
 
 export const useSettingsStore = defineStore('settings', {
 	state: () => {
@@ -19,6 +24,12 @@ export const useSettingsStore = defineStore('settings', {
 				itemsPerPage: Number.parseInt(localStorage.getItem(keyItemsPerPage) || '25'),
 				similarityThreshold: Number.parseFloat(localStorage.getItem(keySimilarityThreshold) || '0.1'),
 				showSimilarity: localStorage.getItem(keyShowSimilarity) === 'true',
+			},
+			model: {
+				vision: localStorage.getItem(keyModelVision) || 'jinaai/jina-clip-v1',
+				text: localStorage.getItem(keyModelText) || 'jinaai/jina-clip-v1',
+				processor: localStorage.getItem(keyModelProcessor) || 'Xenova/clip-vit-base-patch32',
+				tokenizer: localStorage.getItem(keyModelTokenizer) || 'jinaai/jina-clip-v1'
 			}
 		}
 	},
@@ -46,6 +57,22 @@ export const useSettingsStore = defineStore('settings', {
 		setShowSimilarity(value: boolean) {
 			this.search.showSimilarity = value
 			localStorage.setItem(keyShowSimilarity, `${this.search.showSimilarity}`)
-		}
+		},
+		setModelVision(value: string) {
+			this.model.vision = value
+			localStorage.setItem(keyModelVision, this.model.vision)
+		},
+		setModelText(value: string) {
+			this.model.text = value
+			localStorage.setItem(keyModelText, this.model.text)
+		},
+		setModelProcessor(value: string) {
+			this.model.processor = value
+			localStorage.setItem(keyModelProcessor, this.model.processor)
+		},
+		setModelTokenizer(value: string) {
+			this.model.tokenizer = value
+			localStorage.setItem(keyModelTokenizer, this.model.tokenizer)
+		},
 	},
 })

src/views/collection/Search.vue

@@ -3,8 +3,8 @@
 		<TextEmbedding :collection="collectionName" @search-result="onSearchResult" />
 	</v-app-bar>
 
-	<AutoTokenizerLoader modelName="jinaai/jina-clip-v1" />
-	<ClipTextModelLoader modelName="jinaai/jina-clip-v1" />
+	<AutoTokenizerLoader :modelName="model.tokenizer" />
+	<ClipTextModelLoader :modelName="model.text" />
 
 	<template v-if="collectionName && images && images.length > 0">
 		<ImagePaging :images="images" />
@@ -26,6 +26,8 @@ import ImagePaging from '../../components/image/ImagePaging.vue'
 import TextEmbedding, { ImageResult } from '../../components/text/TextEmbedding.vue'
 import AutoTokenizerLoader from '../../components/text/AutoTokenizerLoader.vue'
 import ClipTextModelLoader from '../../components/text/ClipTextModelLoader.vue'
+import { mapState } from 'pinia'
+import { useSettingsStore } from '../../store/settings.ts'
 
 export default defineComponent({
 	components: { ClipTextModelLoader, AutoTokenizerLoader, TextEmbedding, ImagePaging },
@@ -36,6 +38,7 @@ export default defineComponent({
 		}
 	},
 	computed: {
+		...mapState(useSettingsStore, ['model']),
 		collectionName(): string {
 			if(Array.isArray(this.$route.params.collection)) {
 				return this.$route.params.collection[0]

src/views/directory/Search.vue

@@ -3,8 +3,8 @@
 		<TextEmbedding :directory="mainDirectoryName" @search-result="onSearchResult" />
 	</v-app-bar>
 
-	<AutoTokenizerLoader modelName="jinaai/jina-clip-v1" />
-	<ClipTextModelLoader modelName="jinaai/jina-clip-v1" />
+	<AutoTokenizerLoader :modelName="model.tokenizer" />
+	<ClipTextModelLoader :modelName="model.text" />
 
 	<template v-if="mainDirectory && images && images.length > 0">
 		<ImagePaging :base-dir="mainDirectory" :images="images" />
@@ -28,6 +28,7 @@ import ImagePaging from '../../components/image/ImagePaging.vue'
 import TextEmbedding, { ImageResult } from '../../components/text/TextEmbedding.vue'
 import AutoTokenizerLoader from '../../components/text/AutoTokenizerLoader.vue'
 import ClipTextModelLoader from '../../components/text/ClipTextModelLoader.vue'
+import { useSettingsStore } from '../../store/settings.ts'
 
 export default defineComponent({
 	components: { ClipTextModelLoader, AutoTokenizerLoader, TextEmbedding, ImagePaging },
@@ -39,6 +40,7 @@ export default defineComponent({
 	},
 	computed: {
 		...mapState(useFileStore, ['mainDirectory']),
+		...mapState(useSettingsStore, ['model']),
 		mainDirectoryName() {
 			return this.mainDirectory ? this.mainDirectory.name : undefined
 		},