From 7e6f6d77804c2efdb3c1bdd32d5c4ce66542c608 Mon Sep 17 00:00:00 2001
From: rainu <rainu@raysha.de>
Date: Wed, 30 Oct 2024 16:29:03 +0100
Subject: [PATCH] introduce i18n (english, german atm)

---
 package-lock.json                             |  65 +++++++++-
 package.json                                  |   3 +-
 src/App.vue                                   |  31 +++--
 src/components/DeviceIndicator.vue            |  16 +--
 src/components/DirectoryPicker.vue            |   2 +-
 src/components/Settings.vue                   |  56 +++++++--
 src/components/exchange/FileExporter.vue      |   4 +-
 src/components/exchange/FileImporter.vue      |   2 +-
 src/components/image/ImageDeletion.vue        |  23 ++--
 src/components/progress/Bar.vue               |   2 +-
 src/components/text/AutoTokenizerLoader.vue   |   2 +-
 src/components/text/ClipTextModelLoader.vue   |   2 +-
 src/components/text/TextEmbedding.vue         |   4 +-
 .../vision/ClipVisionModelLoader.vue          |   2 +-
 src/components/vision/ProcessorLoader.vue     |   2 +-
 src/components/vision/VisionEmbedding.vue     |  26 ++--
 src/i18n/de.json                              | 101 +++++++++++++++
 src/i18n/en.json                              | 115 ++++++++++++++++++
 src/i18n/index.ts                             |  13 ++
 src/main.ts                                   |  13 ++
 src/router/middleware/support.ts              |  13 +-
 src/store/settings.ts                         |   6 +
 src/views/Unsupported.vue                     |   5 +-
 src/views/directory/Search.vue                |   9 +-
 24 files changed, 445 insertions(+), 72 deletions(-)
 create mode 100644 src/i18n/de.json
 create mode 100644 src/i18n/en.json
 create mode 100644 src/i18n/index.ts

diff --git a/package-lock.json b/package-lock.json
index 961b2eb..dfb2d63 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,17 @@
 {
   "name": "image-fainder",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "image-fainder",
-      "version": "0.0.0",
+      "version": "0.1.0",
       "dependencies": {
         "@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"
       },
@@ -852,6 +853,47 @@
         "url": "https://opencollective.com/libvips"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-10.0.4.tgz",
+      "integrity": "sha512-GG428DkrrWCMhxRMRQZjuS7zmSUzarYcaHJqG9VB8dXAxw4iQDoKVQ7ChJRB6ZtsCsX3Jse1PEUlHrJiyQrOTg==",
+      "dependencies": {
+        "@intlify/message-compiler": "10.0.4",
+        "@intlify/shared": "10.0.4"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-10.0.4.tgz",
+      "integrity": "sha512-AFbhEo10DP095/45EauinQJ5hJ3rJUmuuqltGguvc3WsvezZN+g8qNHLGWKu60FHQVizMrQY7VJ+zVlBXlQQkQ==",
+      "dependencies": {
+        "@intlify/shared": "10.0.4",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-10.0.4.tgz",
+      "integrity": "sha512-ukFn0I01HsSgr3VYhYcvkTCLS7rGa0gw4A4AMpcy/A9xx/zRJy7PS2BElMXLwUazVFMAr5zuiTk3MQeoeGXaJg==",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -2424,6 +2466,25 @@
         }
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-10.0.4.tgz",
+      "integrity": "sha512-1xkzVxqBLk2ZFOmeI+B5r1J7aD/WtNJ4j9k2mcFcQo5BnOmHBmD7z4/oZohh96AAaRZ4Q7mNQvxc9h+aT+Md3w==",
+      "dependencies": {
+        "@intlify/core-base": "10.0.4",
+        "@intlify/shared": "10.0.4",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.5.tgz",
diff --git a/package.json b/package.json
index 0d266a6..e694094 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/App.vue b/src/App.vue
index e6c1e7c..d1fd2a3 100644
--- a/src/App.vue
+++ b/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>
 
diff --git a/src/components/DeviceIndicator.vue b/src/components/DeviceIndicator.vue
index 43bf88d..955cef8 100644
--- a/src/components/DeviceIndicator.vue
+++ b/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],
 			]
 		},
 	},
diff --git a/src/components/DirectoryPicker.vue b/src/components/DirectoryPicker.vue
index e05b6c2..3e3eae1 100644
--- a/src/components/DirectoryPicker.vue
+++ b/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')
 			}
 		},
 	},
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 72ecfca..4d388d7 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -2,17 +2,31 @@
 	<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"
@@ -20,11 +34,19 @@
 				></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
diff --git a/src/components/exchange/FileExporter.vue b/src/components/exchange/FileExporter.vue
index 7d0b5b3..8d91a72 100644
--- a/src/components/exchange/FileExporter.vue
+++ b/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',
diff --git a/src/components/exchange/FileImporter.vue b/src/components/exchange/FileImporter.vue
index 3a225e6..be0ca70 100644
--- a/src/components/exchange/FileImporter.vue
+++ b/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>
diff --git a/src/components/image/ImageDeletion.vue b/src/components/image/ImageDeletion.vue
index ad4b77c..c044843 100644
--- a/src/components/image/ImageDeletion.vue
+++ b/src/components/image/ImageDeletion.vue
@@ -2,17 +2,22 @@
 	<div>
 		<v-btn @click="showDialog = true" color="error" variant="elevated" block v-show="images.length > 0">
 			<v-icon icon="mdi-delete"></v-icon>
-			Delete selected
+			{{ $t('image.deletion.action.delete.selected') }}
 		</v-btn>
 		<v-dialog v-model="showDialog">
 			<template v-slot:default="{ isActive }">
 				<v-card>
-					<v-card-title>Confirm deletion</v-card-title>
+					<v-card-title>{{ $t('image.deletion.action.delete.confirm.title') }}</v-card-title>
 
 					<v-card-text v-show="progress.total === 0">
 						<v-row dense>
 							<v-col cols="12" class="image-container" :style="`column-count: ${columnCount};`">
-								<div v-for="image in images" :key="image.uri.rawURI" @click="onClickImage(image.uri.rawURI)" class="cursor-pointer">
+								<div
+									v-for="image in images"
+									:key="image.uri.rawURI"
+									@click="onClickImage(image.uri.rawURI)"
+									class="cursor-pointer"
+								>
 									<ImageItem
 										:base-dir="baseDir"
 										:image="image"
@@ -29,12 +34,14 @@
 					<v-card-actions>
 						<v-row>
 							<v-col cols="6">
-								<v-btn @click="isActive.value = false" block variant="flat" color="secondary">Cancel </v-btn>
+								<v-btn @click="isActive.value = false" block variant="flat" color="secondary">
+									{{ $t('image.deletion.action.delete.confirm.cancel') }}
+								</v-btn>
 							</v-col>
 							<v-col cols="6">
 								<v-btn @click="deleteSelected" block variant="flat" color="red">
 									<v-icon icon="mdi-delete-alert"></v-icon>
-									Delete
+									{{ $t('image.deletion.action.delete.confirm.ok') }}
 								</v-btn>
 							</v-col>
 						</v-row>
@@ -47,10 +54,10 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import ImageItem, { Image } from "./ImageItem.vue"
+import ImageItem, { Image } from './ImageItem.vue'
 import ProgressBar from '../progress/Bar.vue'
-import { delayProgress } from "../progress/delayed.ts"
-import { URI } from "../../database/uri.ts"
+import { delayProgress } from '../progress/delayed.ts'
+import { URI } from '../../database/uri.ts'
 
 export default defineComponent({
 	name: 'ImageDeletion',
diff --git a/src/components/progress/Bar.vue b/src/components/progress/Bar.vue
index 35bb88c..71d89ab 100644
--- a/src/components/progress/Bar.vue
+++ b/src/components/progress/Bar.vue
@@ -11,7 +11,7 @@
 
 			<span>&nbsp;{{ Math.ceil((current * 100) / total) }}%</span>
 			<span v-if="eta">&nbsp;- {{ eta }}</span>
-			<span v-if="avgDuration" v-show="unit"> &nbsp;- {{ avgDuration.toFixed(2) }}ms per {{ unit }} </span>
+			<span v-if="avgDuration" v-show="unit"> &nbsp;- {{ $t('progress.duration.average.ms', { duration: avgDuration.toFixed(2), unit }) }}</span>
 		</strong>
 	</v-progress-linear>
 </template>
diff --git a/src/components/text/AutoTokenizerLoader.vue b/src/components/text/AutoTokenizerLoader.vue
index a910f65..4e749a2 100644
--- a/src/components/text/AutoTokenizerLoader.vue
+++ b/src/components/text/AutoTokenizerLoader.vue
@@ -1,7 +1,7 @@
 <template>
 	<v-container v-show="progress !== 100">
 		<v-row align-content="center" justify="center" dense>
-			<v-col cols="12" class="text-subtitle-1 text-center">Loading tokenizer</v-col>
+			<v-col cols="12" class="text-subtitle-1 text-center">{{ $t('tokenizer.loading') }}</v-col>
 			<v-col cols="10">
 				<ProgressBar :current="progress" :total="100" hide-steps />
 			</v-col>
diff --git a/src/components/text/ClipTextModelLoader.vue b/src/components/text/ClipTextModelLoader.vue
index f2bd97d..f9de978 100644
--- a/src/components/text/ClipTextModelLoader.vue
+++ b/src/components/text/ClipTextModelLoader.vue
@@ -1,7 +1,7 @@
 <template>
 	<v-container v-show="progress !== 100">
 		<v-row align-content="center" justify="center" dense>
-			<v-col cols="12" class="text-subtitle-1 text-center">Loading text model </v-col>
+			<v-col cols="12" class="text-subtitle-1 text-center">{{ $t('model.text.loading') }}</v-col>
 			<v-col cols="10">
 				<ProgressBar :current="progress" :total="100" hide-steps />
 			</v-col>
diff --git a/src/components/text/TextEmbedding.vue b/src/components/text/TextEmbedding.vue
index f869e8a..c12ed3d 100644
--- a/src/components/text/TextEmbedding.vue
+++ b/src/components/text/TextEmbedding.vue
@@ -5,7 +5,7 @@
 			@click:append-inner="onSearch"
 			@keydown.enter.prevent="onSearch"
 			:disabled="progress.total > 0"
-			label="Search similar"
+			:label="$t('search.label')"
 			variant="solo"
 			single-line
 			hide-details
@@ -13,7 +13,7 @@
 			append-inner-icon="mdi-magnify"
 		>
 		</v-text-field>
-		<ProgressDialog title="Searching" :current="progress.current" :total="progress.total" />
+		<ProgressDialog :title="$t('search.progress.title')" :current="progress.current" :total="progress.total" />
 	</v-container>
 </template>
 
diff --git a/src/components/vision/ClipVisionModelLoader.vue b/src/components/vision/ClipVisionModelLoader.vue
index dc8d694..4cb9295 100644
--- a/src/components/vision/ClipVisionModelLoader.vue
+++ b/src/components/vision/ClipVisionModelLoader.vue
@@ -1,7 +1,7 @@
 <template>
 	<v-container v-show="progress !== 100">
 		<v-row align-content="center" justify="center" dense>
-			<v-col cols="12" class="text-subtitle-1 text-center">Loading vision model </v-col>
+			<v-col cols="12" class="text-subtitle-1 text-center">{{ $t('model.vision.loading') }}</v-col>
 			<v-col cols="10">
 				<ProgressBar :current="progress" :total="100" hide-steps />
 			</v-col>
diff --git a/src/components/vision/ProcessorLoader.vue b/src/components/vision/ProcessorLoader.vue
index 3fb5c07..cec05f9 100644
--- a/src/components/vision/ProcessorLoader.vue
+++ b/src/components/vision/ProcessorLoader.vue
@@ -1,7 +1,7 @@
 <template>
 	<v-container v-show="progress !== 100">
 		<v-row align-content="center" justify="center" dense>
-			<v-col cols="12" class="text-subtitle-1 text-center">Loading processor </v-col>
+			<v-col cols="12" class="text-subtitle-1 text-center">{{ $t('processor.loading') }}</v-col>
 			<v-col cols="10">
 				<ProgressBar :current="progress" :total="100" hide-steps />
 			</v-col>
diff --git a/src/components/vision/VisionEmbedding.vue b/src/components/vision/VisionEmbedding.vue
index 3395d9c..253d421 100644
--- a/src/components/vision/VisionEmbedding.vue
+++ b/src/components/vision/VisionEmbedding.vue
@@ -6,9 +6,15 @@
 		<template v-if="directory">
 			<v-btn v-if="!progress.doing" @click="onClick" :disabled="!isLoaded" color="primary" block>
 				<v-icon icon="mdi-file-eye"></v-icon>
-				Analyse Images
+				{{ $t('vision.analyse.action') }}
 			</v-btn>
-			<ProgressDialog v-else :title="progress.title" :current="progress.current" :total="progress.total" unit="image" />
+			<ProgressDialog
+				v-else
+				:title="progress.title"
+				:current="progress.current"
+				:total="progress.total"
+				:unit="$t('progress.duration.unit.image')"
+			/>
 		</template>
 	</div>
 </template>
@@ -23,7 +29,7 @@ import { useAiStore } from '../../store/ai.ts'
 import ProgressDialog from '../progress/Dialog.vue'
 import { delayProgress } from '../progress/delayed.ts'
 import { VectorEntryKey } from '../../database/vector.ts'
-import { localFileURI, parseURI } from "../../database/uri.ts"
+import { localFileURI, parseURI } from '../../database/uri.ts'
 
 const validImageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.tiff']
 
@@ -74,7 +80,7 @@ export default defineComponent({
 
 			const files = []
 
-			this.progress.title = 'Step 1/4: Scanning files'
+			this.progress.title = this.$t('vision.analyse.step.1')
 			this.progress.total = fileNames.length
 			this.progress.current = 0
 
@@ -105,7 +111,7 @@ export default defineComponent({
 				return
 			}
 
-			this.progress.title = 'Step 2/4: Analyse unknown images'
+			this.progress.title = this.$t('vision.analyse.step.2')
 			this.progress.total = files.length
 			this.progress.current = 0
 
@@ -136,7 +142,7 @@ export default defineComponent({
 				return []
 			}
 
-			this.progress.title = 'Step 3/4: Detect orphaned images'
+			this.progress.title = this.$t('vision.analyse.step.3')
 			this.progress.total = count
 			this.progress.current = 0
 
@@ -149,12 +155,12 @@ export default defineComponent({
 			const delayedProgression = delayProgress((i) => (this.progress.current = i))
 			await this.$vectorDB.iterate(this.directory.name, (entry) => {
 				const parsedURI = parseURI(entry.uri)
-				if(parsedURI === null || parsedURI.type !== 'localFile') {
+				if (parsedURI === null || parsedURI.type !== 'localFile') {
 					//skip non-local files
 					return true
 				}
 
-				const fileName = parsedURI.directory + "/" + parsedURI.name
+				const fileName = parsedURI.directory + '/' + parsedURI.name
 				if (!fileNameMap[fileName]) {
 					result.push(entry.id)
 				}
@@ -170,7 +176,7 @@ export default defineComponent({
 				return
 			}
 
-			this.progress.title = 'Step 4/4: Delete orphaned images'
+			this.progress.title = this.$t('vision.analyse.step.4')
 			this.progress.total = keys.length
 			this.progress.current = 0
 
@@ -182,7 +188,7 @@ export default defineComponent({
 			}
 		},
 		async process() {
-			if(!this.directory) {
+			if (!this.directory) {
 				return
 			}
 
diff --git a/src/i18n/de.json b/src/i18n/de.json
new file mode 100644
index 0000000..42f6019
--- /dev/null
+++ b/src/i18n/de.json
@@ -0,0 +1,101 @@
+{
+  "browser": {
+    "feature": {
+      "support": {
+        "missing": {
+          "indexedDB": "indexedDB not supported",
+          "reason": "Grund",
+          "showDirectoryPicker": "showDirectoryPicker not supported",
+          "title": "Der Browser wird aktuell nicht unterstützt."
+        }
+      }
+    }
+  },
+  "device": {
+    "gpu": {
+      "architecture": "Architektur",
+      "description": "Beschreibung",
+      "device": "Gerät",
+      "features": "Merkmale",
+      "title": "GPU Information",
+      "vendor": "Hersteller"
+    }
+  },
+  "exchange": {
+    "export": {
+      "title": "Export"
+    },
+    "import": {
+      "title": "Import"
+    }
+  },
+  "file": {
+    "directory": {
+      "choose": "Verzeichnis auswählen"
+    }
+  },
+  "landingpage": {
+    "title": "Start"
+  },
+  "model": {
+    "text": {
+      "loading": "Lade Textmodell"
+    },
+    "vision": {
+      "loading": "Lade Visionmodell"
+    }
+  },
+  "processor": {
+    "loading": "Lade Prozessor"
+  },
+  "progress": {
+    "duration": {
+      "average": {
+        "ms": "{duration}ms pro {unit}"
+      },
+      "unit": {
+        "image": "Bild"
+      }
+    }
+  },
+  "search": {
+    "label": "Ähnliche finden",
+    "progress": {
+      "title": "Suche"
+    },
+    "title": "Suchen"
+  },
+  "tokenizer": {
+    "loading": "Lade Tokenisierer"
+  },
+  "settings": {
+    "general": {
+      "language": "Sprache",
+      "theme": "Thema",
+      "title": "Allgemein"
+    },
+    "search": {
+      "ipp": "Elemente pro Seite",
+      "similarity": {
+        "show": "Ähnlichkeitswert anzeigen",
+        "threshold": "Ähnlichkeitsschwelle"
+      },
+      "title": "Suche"
+    }
+  },
+  "vision": {
+    "analyse": {
+      "action": "Analysiere Bilder",
+      "step": {
+        "1": "Schritt 1/4: Durchsuche Dateien",
+        "2": "Schritt 2/4: Analysiere unbekannte Bilder",
+        "3": "Schritt 3/4: Suche verwaiste Bilder",
+        "4": "Schritt 4/4: Lösche verwaiste Bilder"
+      },
+      "title": "Analysieren"
+    },
+    "analysed": {
+      "summary": "<strong>{total}</strong> analysierte Bilder in <strong>{collection}</strong> vorhanden!"
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/i18n/en.json b/src/i18n/en.json
new file mode 100644
index 0000000..344b5ff
--- /dev/null
+++ b/src/i18n/en.json
@@ -0,0 +1,115 @@
+{
+  "browser": {
+    "feature": {
+      "support": {
+        "missing": {
+          "indexedDB": "indexedDB not supported",
+          "reason": "Reason",
+          "showDirectoryPicker": "showDirectoryPicker not supported",
+          "title": "Your browser is currently not supported."
+        }
+      }
+    }
+  },
+  "device": {
+    "gpu": {
+      "architecture": "Architecture",
+      "description": "Description",
+      "device": "Device",
+      "features": "Features",
+      "title": "GPU info",
+      "vendor": "Vendor"
+    }
+  },
+  "exchange": {
+    "export": {
+      "title": "Export"
+    },
+    "import": {
+      "title": "Import"
+    }
+  },
+  "file": {
+    "directory": {
+      "choose": "Choose directory"
+    }
+  },
+  "image": {
+    "deletion": {
+      "action": {
+        "delete": {
+          "confirm": {
+            "cancel": "Cancel",
+            "ok": "Delete",
+            "title": "Confirm deletion"
+          },
+          "selected": "Delete selected"
+        }
+      }
+    }
+  },
+  "landingpage": {
+    "title": "Home"
+  },
+  "model": {
+    "text": {
+      "loading": "Loading text model"
+    },
+    "vision": {
+      "loading": "Loading vision model"
+    }
+  },
+  "processor": {
+    "loading": "Loading processor"
+  },
+  "progress": {
+    "duration": {
+      "average": {
+        "ms": "{duration}ms per {unit}"
+      },
+      "unit": {
+        "image": "image"
+      }
+    }
+  },
+  "search": {
+    "label": "Search similar",
+    "progress": {
+      "title": "Searching"
+    },
+    "title": "Search"
+  },
+  "settings": {
+    "general": {
+      "language": "Language",
+      "theme": "Theme",
+      "title": "General"
+    },
+    "search": {
+      "ipp": "Items per page",
+      "similarity": {
+        "show": "Show similarity",
+        "threshold": "Similarity threshold"
+      },
+      "title": "Search"
+    }
+  },
+  "tokenizer": {
+    "loading": "Loading tokenizer"
+  },
+  "vision": {
+    "analyse": {
+      "action": "Analyse Images",
+      "step": {
+        "1": "Step 1/4: Scanning files",
+        "2": "Step 2/4: Analyse unknown images",
+        "3": "Step 3/4: Detect orphaned images",
+        "4": "Step 4/4: Delete orphaned images"
+      },
+      "title": "Analyse"
+    },
+    "analysed": {
+      "summary": "<strong>{total}</strong> analysed images in <strong>{collection}</strong> found!"
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
new file mode 100644
index 0000000..3d913f4
--- /dev/null
+++ b/src/i18n/index.ts
@@ -0,0 +1,13 @@
+import de from './de.json'
+import en from './en.json'
+
+const localeMappings = {
+	'de': de,
+	'en': en
+}
+
+export default {
+	locales: Object.keys(localeMappings),
+	localeMappings,
+	defaultLocale: 'en'
+}
diff --git a/src/main.ts b/src/main.ts
index a8a2d74..96e924d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,10 @@ import { createPinia } from 'pinia'
 
 import { createVectorDatabase } from './database/vector'
 
+import { createI18n } from 'vue-i18n'
+import i18n from "./i18n/index"
+
+
 // Vuetify
 import '@mdi/font/css/materialdesignicons.css'
 import 'vuetify/styles'
@@ -15,6 +19,7 @@ import appRouter from './router/index'
 import App from './App.vue'
 import { useAiStore } from './store/ai.ts'
 
+//database
 const database = await createVectorDatabase()
 const pinia = createPinia()
 
@@ -23,6 +28,7 @@ const vuetify = createVuetify({
 	directives,
 })
 
+//APP
 let app = createApp(App)
 app = app.use(pinia)
 await useAiStore().detectDevice()
@@ -30,6 +36,13 @@ await useAiStore().detectDevice()
 app = app.use(database)
 app = app.use(appRouter)
 
+app = app.use(createI18n({
+	locale: i18n.defaultLocale,
+	availableLocales: i18n.locales,
+	messages: {
+		...i18n.localeMappings
+	},
+}))
 
 app = app.use(vuetify)
 declare module '@vue/runtime-core' {
diff --git a/src/router/middleware/support.ts b/src/router/middleware/support.ts
index 4146a87..976b290 100644
--- a/src/router/middleware/support.ts
+++ b/src/router/middleware/support.ts
@@ -1,22 +1,21 @@
-import { NavigationGuardNext, NavigationGuardWithThis, RouteLocationNormalized } from "vue-router"
-import { RouteUnsupported } from "../index.ts"
+import { NavigationGuardNext, NavigationGuardWithThis, RouteLocationNormalized } from 'vue-router'
+import { RouteUnsupported } from '../index.ts'
 
 export const supportMiddleware: NavigationGuardWithThis<undefined> = (
 	_to: RouteLocationNormalized,
 	_from: RouteLocationNormalized,
 	next: NavigationGuardNext,
 ) => {
-
 	const fail = (reason: string) => {
 		next({ name: RouteUnsupported, query: { reason: reason } })
 	}
 
-	if(!window.showDirectoryPicker){
-		fail("showDirectoryPicker not supported")
+	if (!window.showDirectoryPicker) {
+		fail('browser.feature.support.missing.showDirectoryPicker')
 		return
 	}
-	if(!window.indexedDB){
-		fail("indexedDB not supported")
+	if (!window.indexedDB) {
+		fail('browser.feature.support.missing.indexedDB')
 		return
 	}
 	next()
diff --git a/src/store/settings.ts b/src/store/settings.ts
index d975e00..a8c9b77 100644
--- a/src/store/settings.ts
+++ b/src/store/settings.ts
@@ -5,6 +5,7 @@ const storePrefix = `${__PROJECT_NAME__}:settings:`
 const searchPrefix = `${storePrefix}:search:`
 
 const keyTheme = storePrefix + 'theme'
+const keyLocale = storePrefix + 'locale'
 const keyItemsPerPage = searchPrefix + 'itemsPerPage'
 const keySimilarityThreshold = searchPrefix + 'similarityThreshold'
 const keyShowSimilarity = searchPrefix + 'showSimilarity'
@@ -13,6 +14,7 @@ export const useSettingsStore = defineStore('settings', {
 	state: () => {
 		return {
 			theme: localStorage.getItem(keyTheme) || 'light',
+			locale: localStorage.getItem(keyLocale) || 'en',
 			search: {
 				itemsPerPage: Number.parseInt(localStorage.getItem(keyItemsPerPage) || '25'),
 				similarityThreshold: Number.parseFloat(localStorage.getItem(keySimilarityThreshold) || '0.1'),
@@ -29,6 +31,10 @@ export const useSettingsStore = defineStore('settings', {
 			}
 			localStorage.setItem(keyTheme, this.theme)
 		},
+		setLocale(locale: string) {
+			this.locale = locale
+			localStorage.setItem(keyLocale, locale)
+		},
 		setItemsPerPage(value: number) {
 			this.search.itemsPerPage = value
 			localStorage.setItem(keyItemsPerPage, `${this.search.itemsPerPage}`)
diff --git a/src/views/Unsupported.vue b/src/views/Unsupported.vue
index d9b00cd..e59be0a 100644
--- a/src/views/Unsupported.vue
+++ b/src/views/Unsupported.vue
@@ -1,7 +1,7 @@
 <template>
 	<v-alert type="warning" icon="mdi-emoticon-cry-outline">
-		<v-alert-title>Your browser is currently not supported.</v-alert-title>
-		<strong>Reason: </strong><span>{{ reason }}</span>
+		<v-alert-title>{{ $t('browser.feature.support.missing.title') }}</v-alert-title>
+		<strong>{{ $t('browser.feature.support.missing.reason') }}: </strong><span>{{ reason }}</span>
 	</v-alert>
 </template>
 
@@ -17,6 +17,7 @@ export default defineComponent({
 	mounted() {
 		const reasonQuery = this.$route.query.reason
 		this.reason = Array.isArray(reasonQuery) ? reasonQuery[0] : reasonQuery
+		this.reason = this.$t(this.reason)
 
 		window.history.pushState({}, '', '/')
 	},
diff --git a/src/views/directory/Search.vue b/src/views/directory/Search.vue
index 67bcd03..e8e32e5 100644
--- a/src/views/directory/Search.vue
+++ b/src/views/directory/Search.vue
@@ -11,11 +11,10 @@
 	</template>
 	<template v-else>
 		<v-container class="d-flex justify-center align-center">
-			<span v-if="totalImages !== null">
-				<strong>{{ totalImages }}</strong>
-				analysed images in
-				<strong>{{ mainDirectoryName }}</strong>
-				found!
+			<span
+				v-if="totalImages !== 0"
+				v-html="$t('vision.analysed.summary', { total: totalImages, collection: mainDirectoryName })"
+			>
 			</span>
 		</v-container>
 	</template>