fix: create indexedDb objectStore using Date.now() as version

cmgriffing · Jul 21, 2024 · d45de8d · d45de8d
1 parent 8ad932a
commit d45de8d
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 46 deletions.
diff --git 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<SetStateAction<ModelOption[]>>) => {
-      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<SetStateAction<ModelOption[]>>
+      ) => {
+        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
@@ -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<string[]> {
     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 () {