fix TS type issues

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "ts:check": "vue-tsc -b",
     "build": "vue-tsc -b && vite build",
     "preview": "vite preview"
   },

src/components/DeviceIndicator.vue

@@ -6,7 +6,7 @@
 			</v-btn>
 		</template>
 
-		<template v-slot:default="{ isActive }">
+		<template v-slot:default>
 			<v-card title="GPU info">
 				<v-list>
 					<v-list-item v-for="([icon, key, value]) in gpuInfo" :key="key" :prepend-icon="icon" density="compact">
@@ -59,9 +59,9 @@ export default defineComponent({
 				return 'info'
 			}
 		},
-		gpuInfo() {
-			if (this.device.type !== 'webgpu') {
-				return null
+		gpuInfo(): [string, string, string | string[]][] {
+			if (this.device.type !== 'webgpu' || !this.device.gpu.adapter) {
+				return []
 			}
 
 			const features = [] as string[]

src/components/DirectoryPicker.vue

@@ -7,21 +7,21 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { mapActions, mapState } from "pinia"
+import { mapActions, mapState } from 'pinia'
 import { useFileStore } from '../store/file.ts'
 
 export default defineComponent({
 	name: 'DirectoryPicker',
 	emits: ['change'],
 	props: {
 		variant: {
-			type: String,
+			type: String as () => 'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain',
 			default: 'elevated',
 		},
 		color: {
 			type: String,
 			default: null,
-		}
+		},
 	},
 	computed: {
 		...mapState(useFileStore, ['mainDirectory']),

src/components/exchange/exchange.ts

@@ -11,15 +11,15 @@ type Entry = {
 }
 
 export const exportFile = async (
-	fileHandle,
+	fileHandle: FileSystemFileHandle,
 	vectorDB: VectorDatabase,
 	progressCallback: (c: number, t: number) => void,
 ) => {
 	const writableStream = await fileHandle.createWritable()
 
 	const keys = await vectorDB.getKeys()
 
-	for (let k = 0, i = 0; k < keys.length; k++) {
+	for (let k = 0; k < keys.length; k++) {
 		const key = keys[k]
 		progressCallback(k, keys.length)
 
@@ -48,10 +48,10 @@ export const exportFile = async (
 	await writableStream.close()
 }
 
-const fileReader = (file) => ({
+const fileReader = (file: File) => ({
 	total: file.size,
 	offset: 0,
-	readNBytes(n: number) {
+	readNBytes(n: number): Promise<ArrayBuffer> {
 		const fileSlice = file.slice(this.offset, this.offset + n)
 		return new Promise((resolve, reject) => {
 			const reader = new FileReader()
@@ -84,7 +84,7 @@ const fileReader = (file) => ({
 })
 
 export const importFile = async (
-	fileHandle,
+	fileHandle: FileSystemFileHandle,
 	vectorDB: VectorDatabase,
 	progressCallback: (c: number, t: number) => void,
 ) => {

src/components/image/ImageDeletion.vue

@@ -77,7 +77,7 @@ export default defineComponent({
 	},
 	computed: {
 		columnCount() {
-			switch (this.$vuetify.display.name) {
+			switch (String(this.$vuetify.display.name)) {
 				case 'xs':
 					return 4
 				case 'sm':
@@ -96,11 +96,11 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		onClickImage(i) {
-			if (this.selected[i]) {
-				delete this.selected[i]
+		onClickImage(name: string) {
+			if (this.selected[name]) {
+				delete this.selected[name]
 			} else {
-				this.selected[i] = true
+				this.selected[name] = true
 			}
 		},
 		async deleteDatabaseEntry(fileName: string) {

src/components/image/ImageItem.vue

@@ -45,7 +45,7 @@ export default defineComponent({
 				try {
 					const file = await this.baseDir.getFileHandle(this.name)
 					this.url = URL.createObjectURL(await file.getFile())
-				} catch (e) {
+				} catch (e: Error) {
 					if (e.name !== 'NotFoundError') {
 						console.error(e)
 					}

src/components/image/ImagePaging.vue

@@ -80,7 +80,7 @@ export default defineComponent({
 			return this.limit || this.search.itemsPerPage
 		},
 		columnCount() {
-			switch (this.$vuetify.display.name) {
+			switch (String(this.$vuetify.display.name)) {
 				case 'xs':
 					return 1
 				case 'sm':
@@ -109,7 +109,7 @@ export default defineComponent({
 		end() {
 			return Math.min(this.start + this.limitToUse, this.view.length)
 		},
-		displayItems(): Promise<Image[]> {
+		displayItems(): Image[] {
 			if (!this.baseDir) return []
 
 			const imageItems = [] as Image[]
@@ -129,11 +129,11 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		onClickImage(i) {
-			if (this.selected[i]) {
-				delete this.selected[i]
+		onClickImage(name: string) {
+			if (this.selected[name]) {
+				delete this.selected[name]
 			} else {
-				this.selected[i] = true
+				this.selected[name] = true
 			}
 		},
 		onDeleted(deleted: string[]) {

src/components/progress/Bar.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-progress-linear v-if="total > 0" v-model="current" :max="total" height="36" color="primary">
+	<v-progress-linear v-if="!total || total > 0" v-model="current" :max="total" height="36" color="primary">
 		<strong>
 			<template v-if="!hideSteps">
 				<span>{{ current }}</span>
@@ -24,11 +24,11 @@ export default defineComponent({
 	props: {
 		current: {
 			type: Number,
-			required: false,
+			default: 0,
 		},
 		total: {
 			type: Number,
-			required: false,
+			default: 0,
 		},
 		hideSteps: {
 			type: Boolean,
@@ -42,7 +42,7 @@ export default defineComponent({
 	data() {
 		return {
 			t: new Date().getTime(),
-			avgDuration: null as Number | null,
+			avgDuration: 0,
 		}
 	},
 	computed: {

src/components/progress/Dialog.vue

@@ -21,11 +21,11 @@ export default defineComponent({
 		},
 		current: {
 			type: Number,
-			required: false,
+			default: 0,
 		},
 		total: {
 			type: Number,
-			required: false,
+			default: 0,
 		},
 		hideSteps: {
 			type: Boolean,

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">Loading tokenizer</v-col>
 			<v-col cols="10">
 				<ProgressBar :current="progress" :total="100" hide-steps />
 			</v-col>
@@ -31,7 +31,7 @@ export default defineComponent({
 		}
 	},
 	computed: {
-		...mapState(useAiStore, ['tokenizer', 'device']),
+		...mapState(useAiStore, ['tokenizer']),
 	},
 	methods: {
 		...mapActions(useAiStore, ['setTokenizer']),
@@ -41,12 +41,11 @@ export default defineComponent({
 				return
 			}
 			const tokenizer = await AutoTokenizer.from_pretrained(this.modelName, {
-				progress_callback: (progress) => {
+				progress_callback: (progress: { progress: number }) => {
 					if (progress.progress) {
 						this.progress = progress.progress
 					}
 				},
-				device: this.device.type,
 			})
 			this.progress = 100
 			this.setTokenizer(tokenizer)

src/components/text/ClipTextModelLoader.vue

@@ -36,12 +36,12 @@ export default defineComponent({
 	methods: {
 		...mapActions(useAiStore, ['setTextModel']),
 		async load() {
-			if (this.modelValue) {
+			if (this.textModel) {
 				this.progress = 100
 				return
 			}
 			const model = await CLIPTextModelWithProjection.from_pretrained(this.modelName, {
-				progress_callback: (progress) => {
+				progress_callback: (progress: { progress: number }) => {
 					if (progress.progress) {
 						this.progress = progress.progress
 					}

src/components/text/TextEmbedding.vue

@@ -26,9 +26,9 @@ import { VectorEntry } from '../../database/vector'
 import AutoTokenizerLoader from './AutoTokenizerLoader.vue'
 import ClipTextModelLoader from './ClipTextModelLoader.vue'
 import ProgressBar from '../progress/Bar.vue'
-import ProgressDialog from "../progress/Dialog.vue"
-import { useSettingsStore } from "../../store/settings.ts"
-import { delayProgress } from "../progress/delayed.ts"
+import ProgressDialog from '../progress/Dialog.vue'
+import { useSettingsStore } from '../../store/settings.ts'
+import { delayProgress } from '../progress/delayed.ts'
 
 export interface ImageResult {
 	path: string
@@ -41,7 +41,7 @@ export default defineComponent({
 	props: {
 		directory: {
 			type: String,
-			required: false,
+			default: null,
 		},
 		similarityThreshold: {
 			type: Number,
@@ -53,8 +53,8 @@ export default defineComponent({
 		return {
 			searchTerm: '',
 			progress: {
-				total: null as Number | null,
-				current: null as Number | null,
+				total: 0,
+				current: 0,
 			},
 		}
 	},
@@ -70,6 +70,10 @@ export default defineComponent({
 	},
 	methods: {
 		async process() {
+			if (!this.tokenizer || !this.textModel) {
+				return
+			}
+
 			this.progress.total = await this.$vectorDB.count(this.directory)
 			this.progress.current = 0
 
@@ -83,7 +87,7 @@ export default defineComponent({
 
 			const delayedProgression = delayProgress((i) => (this.progress.current = i))
 			const process = (entry: VectorEntry): boolean => {
-				const similarity = cos_sim(text_embeds[0].data, entry.embedding)
+				const similarity = cos_sim(text_embeds[0].data, Array.from(entry.embedding))
 
 				if (similarity >= this.similarityThresholdToUse) {
 					candidates.push({

src/components/vision/ClipVisionModelLoader.vue

@@ -36,12 +36,12 @@ export default defineComponent({
 	methods: {
 		...mapActions(useAiStore, ['setVisionModel']),
 		async load() {
-			if (this.modelValue) {
+			if (this.visionModel) {
 				this.progress = 100
 				return
 			}
 			const model = await CLIPVisionModelWithProjection.from_pretrained(this.modelName, {
-				progress_callback: (progress) => {
+				progress_callback: (progress: { progress: number }) => {
 					if (progress.progress) {
 						this.progress = progress.progress
 					}

src/components/vision/ProcessorLoader.vue

@@ -31,25 +31,24 @@ export default defineComponent({
 		}
 	},
 	computed: {
-		...mapState(useAiStore, ['processor', 'device']),
+		...mapState(useAiStore, ['processor']),
 	},
 	methods: {
 		...mapActions(useAiStore, ['setProcessor']),
 		async load() {
-			if (this.modelValue) {
+			if (this.processor) {
 				this.progress = 100
 				return
 			}
-			const model = await AutoProcessor.from_pretrained(this.modelName, {
-				progress_callback: (progress) => {
+			const processor = await AutoProcessor.from_pretrained(this.modelName, {
+				progress_callback: (progress: { progress: number }) => {
 					if (progress.progress) {
 						this.progress = progress.progress
 					}
 				},
-				device: this.device.type,
 			})
 			this.progress = 100
-			this.setProcessor(model)
+			this.setProcessor(processor)
 		},
 	},
 	mounted() {