introduce i18n (english, german atm)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "image-fainder",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,6 +13,7 @@
     "@huggingface/transformers": "^3.0.0",
     "pinia": "^2.2.4",
     "vue": "^3.5.10",
+    "vue-i18n": "^10.0.4",
     "vue-router": "^4.4.5",
     "vuetify": "^3.7.3"
   },

src/App.vue

@@ -18,20 +18,20 @@
 				<template v-if="mainDirectory">
 					<v-list-item
 						:to="{ name: RouteDirectoryAnalyse }"
-						title="Analyse"
+						:title="$t('vision.analyse.title')"
 						prepend-icon="mdi-folder-search-outline"
 					></v-list-item>
 					<v-list-item
 						:to="{ name: RouteDirectorySearch }"
-						title="Search"
+						:title="$t('search.title')"
 						prepend-icon="mdi-image-search-outline"
 					></v-list-item>
 				</template>
 				<template v-else>
-					<v-list-item :to="{ name: RouteHome }" title="Start" prepend-icon="mdi-home"></v-list-item>
+					<v-list-item :to="{ name: RouteHome }" :title="$t('landingpage.title')" prepend-icon="mdi-home"></v-list-item>
 				</template>
-				<v-list-item :to="{ name: RouteImport }" title="Import" prepend-icon="mdi-import"></v-list-item>
-				<v-list-item :to="{ name: RouteExport }" title="Export" prepend-icon="mdi-export"></v-list-item>
+				<v-list-item :to="{ name: RouteImport }" :title="$t('exchange.import.title')" prepend-icon="mdi-import"></v-list-item>
+				<v-list-item :to="{ name: RouteExport }" :title="$t('exchange.export.title')" prepend-icon="mdi-export"></v-list-item>
 			</v-list>
 		</v-navigation-drawer>
 		<v-navigation-drawer v-model="drawer.right" location="right">
@@ -51,10 +51,10 @@ import { defineComponent } from 'vue'
 import { mapState } from 'pinia'
 import { useFileStore } from './store/file.ts'
 import { useSettingsStore } from './store/settings.ts'
-import { RouteDirectoryAnalyse, RouteDirectorySearch, RouteExport, RouteHome, RouteImport } from "./router"
+import { RouteDirectoryAnalyse, RouteDirectorySearch, RouteExport, RouteHome, RouteImport } from './router'
 import DirectoryPicker from './components/DirectoryPicker.vue'
-import Settings from "./components/Settings.vue"
-import DeviceIndicator from "./components/DeviceIndicator.vue"
+import Settings from './components/Settings.vue'
+import DeviceIndicator from './components/DeviceIndicator.vue'
 
 export default defineComponent({
 	components: { DeviceIndicator, Settings, DirectoryPicker },
@@ -72,9 +72,22 @@ export default defineComponent({
 		}
 	},
 	computed: {
-		...mapState(useSettingsStore, ['theme']),
+		...mapState(useSettingsStore, ['theme', 'locale']),
 		...mapState(useFileStore, ['mainDirectory']),
 	},
+	methods: {
+		applyLocale() {
+			this.$i18n.locale = this.locale
+		},
+	},
+	watch: {
+		locale() {
+			this.applyLocale()
+		},
+	},
+	mounted() {
+		this.applyLocale()
+	},
 })
 </script>
 

src/components/DeviceIndicator.vue

@@ -7,13 +7,13 @@
 		</template>
 
 		<template v-slot:default>
-			<v-card title="GPU info">
+			<v-card :title="$t('device.gpu.title')">
 				<v-list>
 					<v-list-item v-for="([icon, key, value]) in gpuInfo" :key="key" :prepend-icon="icon" density="compact">
 						<template v-if="Array.isArray(value)">
 							<v-list-group :value="key" fluid>
 								<template v-slot:activator="{ props }">
-									<v-list-item v-bind="props" :title="key" ></v-list-item>
+									<v-list-item v-bind="props" :title="$t('device.gpu.' + key)" ></v-list-item>
 								</template>
 
 								<v-list-item v-for="(item, index) of value" :key="index" prepend-icon="mdi-circle-small" density="compact">
@@ -22,7 +22,7 @@
 							</v-list-group>
 						</template>
 						<template v-else>
-							<v-list-item-title>{{ key }}</v-list-item-title>
+							<v-list-item-title>{{ $t('device.gpu.' + key) }}</v-list-item-title>
 							<v-list-item-subtitle>{{ value }}</v-list-item-subtitle>
 						</template>
 					</v-list-item>
@@ -71,11 +71,11 @@ export default defineComponent({
 			features.sort((a, b) => a.localeCompare(b))
 
 			return [
-				['mdi-wrench', 'Architecture', this.device.gpu.adapter.info.architecture || 'unknown'],
-				['mdi-label', 'Description', this.device.gpu.adapter.info.description || '-'],
-				['mdi-expansion-card-variant', 'Device', this.device.gpu.adapter.info.device || 'unknown'],
-				['mdi-domain', 'Vendor', this.device.gpu.adapter.info.vendor || 'unknown'],
-				['mdi-star-circle-outline', 'Features', features],
+				['mdi-wrench', 'architecture', this.device.gpu.adapter.info.architecture || 'unknown'],
+				['mdi-label', 'description', this.device.gpu.adapter.info.description || '-'],
+				['mdi-expansion-card-variant', 'device', this.device.gpu.adapter.info.device || 'unknown'],
+				['mdi-domain', 'vendor', this.device.gpu.adapter.info.vendor || 'unknown'],
+				['mdi-star-circle-outline', 'features', features],
 			]
 		},
 	},

src/components/DirectoryPicker.vue

@@ -29,7 +29,7 @@ export default defineComponent({
 			if (this.mainDirectory?.name) {
 				return this.mainDirectory.name
 			} else {
-				return 'Choose Directory'
+				return this.$t('file.directory.choose')
 			}
 		},
 	},

src/components/Settings.vue

@@ -2,29 +2,51 @@
 	<v-list v-model:opened="open">
 		<v-list-group value="General" fluid>
 			<template v-slot:activator="{ props }">
-				<v-list-item v-bind="props" prepend-icon="mdi-application-cog-outline"> General </v-list-item>
+				<v-list-item v-bind="props" prepend-icon="mdi-application-cog-outline"> {{ $t('settings.general.title') }} </v-list-item>
 			</template>
-			<v-list-item title="Theme" class="ml-2" prepend-icon="mdi-theme-light-dark" @click="toggleTheme"></v-list-item>
+			<v-list-item
+				:title="$t('settings.general.theme')"
+				class="ml-2"
+				prepend-icon="mdi-theme-light-dark"
+				@click="toggleTheme"
+			></v-list-item>
+			<v-list-item class="ml-2">
+				<v-select
+					:label="$t('settings.general.language')"
+					v-model="currentLocale"
+					:items="languages"
+					density="compact"
+					prepend-inner-icon="mdi-translate"
+				></v-select>
+			</v-list-item>
 		</v-list-group>
 		<v-list-group value="Search" fluid>
 			<template v-slot:activator="{ props }">
-				<v-list-item v-bind="props" prepend-icon="mdi-image-search-outline"> Search </v-list-item>
+				<v-list-item v-bind="props" prepend-icon="mdi-image-search-outline"> {{ $t('settings.search.title') }} </v-list-item>
 			</template>
 			<v-list-item class="ml-2">
 				<v-select
-					label="Items per page"
+					:label="$t('settings.search.ipp')"
 					v-model="itemsPerPage"
 					:items="[25, 50, 100, 150, 200, 500]"
 					density="compact"
 					prepend-inner-icon="mdi-theme-light-dark"
 				></v-select>
 			</v-list-item>
 			<v-list-item class="ml-2" prepend-inn="mdi-theme-light-dark">
-				<div class="text-caption">Similarity threshold: {{ search.similarityThreshold }}</div>
-				<v-slider :min="-1" :max="1" :step="0.01" v-model="similarityThreshold" color="primary" density="compact"></v-slider>
+				<div class="text-caption">{{ $t('settings.search.similarity.threshold') }}: {{ search.similarityThreshold }}</div>
+				<v-slider
+					:min="-1"
+					:max="1"
+					:step="0.01"
+					v-model="similarityThreshold"
+					color="primary"
+					density="compact"
+				></v-slider>
 			</v-list-item>
 			<v-list-item class="ml-2" prepend-inn="mdi-theme-light-dark">
-				<v-switch label="Show similarity" v-model="showSimilarity" dense inset color="primary" density="compact"> </v-switch>
+				<v-switch :label="$t('settings.search.similarity.show')" v-model="showSimilarity" dense inset color="primary" density="compact">
+				</v-switch>
 			</v-list-item>
 		</v-list-group>
 	</v-list>
@@ -34,19 +56,35 @@
 import { defineComponent } from 'vue'
 import { mapActions, mapState } from 'pinia'
 import { useSettingsStore } from '../store/settings.ts'
+import i18n from '../i18n/index.ts'
 
 export default defineComponent({
 	name: 'Settings',
 	data() {
 		return {
+			languages: i18n.locales.sort(),
 			open: ['General'],
 		}
 	},
 	methods: {
-		...mapActions(useSettingsStore, ['toggleTheme', 'setItemsPerPage', 'setSimilarityThreshold', 'setShowSimilarity']),
+		...mapActions(useSettingsStore, [
+			'toggleTheme',
+			'setLocale',
+			'setItemsPerPage',
+			'setSimilarityThreshold',
+			'setShowSimilarity',
+		]),
 	},
 	computed: {
-		...mapState(useSettingsStore, ['search']),
+		...mapState(useSettingsStore, ['search', 'locale']),
+		currentLocale: {
+			get() {
+				return this.locale
+			},
+			set(value: string) {
+				this.setLocale(value)
+			},
+		},
 		itemsPerPage: {
 			get() {
 				return this.search.itemsPerPage

src/components/exchange/FileExporter.vue

@@ -2,7 +2,7 @@
 	<div>
 		<v-btn @click="onClick" v-if="!progress.status" block color="primary">
 			<v-icon icon="mdi-file-export"></v-icon>
-			Export
+			{{ $t('exchange.export.title') }}
 		</v-btn>
 
 		<ProgressBar v-else :current="progress.current" :total="progress.total" />
@@ -13,7 +13,7 @@
 import { defineComponent } from 'vue'
 import { exportFile } from './exchange'
 import ProgressBar from '../progress/Bar.vue'
-import { delayProgress } from "../progress/delayed.ts"
+import { delayProgress } from '../progress/delayed.ts'
 
 export default defineComponent({
 	name: 'FileExporter',

src/components/exchange/FileImporter.vue

@@ -2,7 +2,7 @@
 	<div>
 		<v-btn @click="onClick" v-if="!progress.status" block color="primary">
 			<v-icon icon="mdi-file-import"></v-icon>
-			Import
+			{{ $t('exchange.import.title') }}
 		</v-btn>
 		<ProgressBar v-else :current="progress.current" :total="progress.total" hide-steps>
 			<span>{{ progress.currentItem }}</span>