diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx index adfa070..8b2e27e 100644 --- a/src/components/SettingsModal.tsx +++ b/src/components/SettingsModal.tsx @@ -1,4 +1,10 @@ -import { Dispatch, SetStateAction, useCallback, useEffect, useState } from "react"; +import { + Dispatch, + SetStateAction, + useCallback, + useEffect, + useState, +} from "react"; import { useAtom } from "jotai"; import { Modal, @@ -46,8 +52,10 @@ export function SettingsModal({ const whisperModelUpdated = useCallback((_newModel: Uint8Array) => { setNewModel(_newModel); }, []); - const [whisperModelsBaseState, setWhisperModelsBaseState] = useState(whisperModelsBase); - const [whisperModelsQuantizedState, setWhisperModelsQuantizedState] = useState(whisperModelsQuantized); + const [whisperModelsBaseState, setWhisperModelsBaseState] = + useState(whisperModelsBase); + const [whisperModelsQuantizedState, setWhisperModelsQuantizedState] = + useState(whisperModelsQuantized); useEffect(() => { setNewModel(model); @@ -70,24 +78,31 @@ export function SettingsModal({ } = useModelData(selectedModel, whisperModelUpdated); useEffect(() => { - const updateModels = async (models: ModelOption[], setStateCallback: Dispatch>) => { - const downloadedModels = await getDownloadedModels(); - const updatedModels = models.map((item) => { - const isDownloaded = downloadedModels.includes(item.value); - return { - ...item, - label: isDownloaded ? `${item.label} Downloaded` : item.label - }; - }); - setStateCallback(updatedModels); - }; + if (whisperModelLoaded) { + const updateModels = async ( + models: ModelOption[], + setStateCallback: Dispatch> + ) => { + const downloadedModels = await getDownloadedModels().catch( + () => [] as string[] + ); + const updatedModels = models.map((item) => { + const isDownloaded = downloadedModels.includes(item.value); + return { + ...item, + label: isDownloaded ? `${item.label} Downloaded` : item.label, + }; + }); + setStateCallback(updatedModels); + }; - (async () => { - await Promise.all([ - updateModels(whisperModelsBase, setWhisperModelsBaseState), - updateModels(whisperModelsQuantized, setWhisperModelsQuantizedState), - ]) - })(); + (async () => { + await Promise.all([ + updateModels(whisperModelsBase, setWhisperModelsBaseState), + updateModels(whisperModelsQuantized, setWhisperModelsQuantizedState), + ]); + })(); + } }, [whisperModelLoaded]); return ( diff --git a/src/utils/model-data.ts b/src/utils/model-data.ts index 9e1816a..15c5a00 100644 --- a/src/utils/model-data.ts +++ b/src/utils/model-data.ts @@ -1,6 +1,6 @@ import { whisperModelSizes } from "../whisper-utils"; -const dbVersion = 1; +const dbVersion = Date.now(); const dbName = "whisperModels"; // local @@ -20,19 +20,23 @@ export function getDownloadedModels(): Promise { const openRequest = indexedDB.open(dbName, dbVersion); openRequest.onsuccess = function () { - const db = openRequest.result; - const tx = db.transaction(["models"], "readonly"); - const objectStore = tx.objectStore("models"); - const localFilesRequest = objectStore.getAllKeys(); - - localFilesRequest.onsuccess = function () { - resolve((localFilesRequest.result as string[]) || []); - }; - - localFilesRequest.onerror = function () { - console.error("Failed to fetch models"); - reject(new Error("Failed to fetch models")); - }; + try { + const db = openRequest.result; + const tx = db.transaction(["models"], "readonly"); + const objectStore = tx.objectStore("models"); + const localFilesRequest = objectStore.getAllKeys(); + + localFilesRequest.onsuccess = function () { + resolve((localFilesRequest.result as string[]) || []); + }; + + localFilesRequest.onerror = function () { + console.error("Failed to fetch models"); + reject(new Error("Failed to fetch models")); + }; + } catch (e: unknown) { + reject(e); + } }; openRequest.onerror = function () { @@ -66,20 +70,14 @@ export function loadOrGetModel( openRequest.onupgradeneeded = function () { const db = openRequest.result; - if (db.version == 1) { + try { db.createObjectStore("models", { autoIncrement: false }); - console.log( - "loadRemote: created IndexedDB " + db.name + " version " + db.version - ); - } else { - // clear the database - // @ts-expect-error this event type seems wrong - const os = openRequest.transaction.objectStore("models"); - os.clear(); - console.log( - "loadRemote: cleared IndexedDB " + db.name + " version " + db.version - ); + } catch (e: unknown) { + console.log("indexeddb models already created"); } + console.log( + "loadRemote: created IndexedDB " + db.name + " version " + db.version + ); }; openRequest.onsuccess = function () {