add readme. fix downloader operation.

components/Settings.tsx

@@ -17,7 +17,7 @@ import {
   getWhisperTarget,
   whisper_model_tag_t,
 } from "@/app/lib/whisper";
-import { Paths } from "expo-file-system/next";
+import { File, Paths } from "expo-file-system/next";
 
 type Language = {
   code: string;
@@ -30,12 +30,12 @@ type LanguageMatrix = {
 
 type connection_test_t =
   | {
-      success: true;
-    }
+    success: true;
+  }
   | {
-      success: false;
-      error: string;
-    };
+    success: false;
+    error: string;
+  };
 
 const SettingsComponent: React.FC = () => {
   const [hostLanguage, setHostLanguage] = useState<string | null>(null);
@@ -58,6 +58,7 @@ const SettingsComponent: React.FC = () => {
     FileSystem.DownloadProgressData | undefined
   >();
   const [downloader, setDownloader] = useState<DownloadResumable | undefined>();
+  const [whisperModelTarget, setWhisperModelTarget] = useState<File | undefined>()
 
   const fillHostLanguageOptions = async () => {
     const settings = await Settings.getDefault();
@@ -96,10 +97,11 @@ const SettingsComponent: React.FC = () => {
       setLibretranslateBaseUrl(libretranslateUrl);
       console.log("libretranslate url = %s", libretranslateUrl);
       try {
-        const wModel = await settings.getWhisperModel();
-        setWhisperModel(wModel || "small");
+        const wModel = await settings.getWhisperModel() || "small";
+        setWhisperModel(wModel);
+        setWhisperModelTarget(new File(WHISPER_MODELS[wModel].target))
       } catch (err) {
-        console.warn(err);
+        console.warn("Could not set whisper model: %s", err);
       }
 
       // setWhisperModel(wModel);
@@ -112,7 +114,9 @@ const SettingsComponent: React.FC = () => {
       if (!whisperModel) return null;
       const dlStatus = await getWhisperDownloadStatus(whisperModel);
       setDownloadStatus(dlStatus);
-    }, 200);
+      setWhisperModelTarget(new File(WHISPER_MODELS[whisperModel].target))
+      console.log("Setting whisper model target to %s", whisperModelTarget);
+    }, 1000);
 
     setInterval(async () => {
       if (!libretranslateBaseUrl) return;
@@ -150,6 +154,16 @@ const SettingsComponent: React.FC = () => {
     }, 1000);
   }, []);
 
+  const fileExists = async (file: File) => {
+    const info = await FileSystem.getInfoAsync(file.uri);
+    return info.exists;
+  }
+
+  const doDelete = async () => {
+    if (!whisperModelTarget) return;
+    whisperModelTarget.delete();
+  }
+
   const doReadownload = async () => {
     if (!whisperModel) return;
     await initiateWhisperDownload(whisperModel, {
@@ -164,6 +178,7 @@ const SettingsComponent: React.FC = () => {
       setDownloader(
         await initiateWhisperDownload(whisperModel, {
           onDownload: setWhisperDownloadProgress,
+          force_redownload: true,
         })
       );
       await downloader?.downloadAsync();
@@ -195,6 +210,18 @@ const SettingsComponent: React.FC = () => {
     await fillHostLanguageOptions();
   };
 
+  const handleWhisperModelChange = async (value: string) => {
+    const settings = await Settings.getDefault();
+    setWhisperModel(value);
+    await settings.setWhisperModel(value);
+    setWhisperModelTarget(getWhisperTarget(value));
+  }
+
+  const doStopDownload = async () => {
+    if (!downloader) return;
+    await downloader.pauseAsync()
+  }
+
   return isLoaded ? (
     <View style={styles.container}>
       <Text style={styles.label}>Host Language:</Text>
@@ -226,9 +253,9 @@ const SettingsComponent: React.FC = () => {
           </Text>
         ))}
       <Picker
-        selectedValue={whisperModel || ""}
+        selectedValue={whisperModel || "small"}
         style={{ height: 50, width: "100%" }}
-        onValueChange={setWhisperModel}
+        onValueChange={handleWhisperModelChange}
         accessibilityHint="language"
       >
         {Object.entries(WHISPER_MODELS).map(([key, { label }]) => (
@@ -239,13 +266,28 @@ const SettingsComponent: React.FC = () => {
         { /* If there's a downloader, that means we're in the middle of a download */}
         {downloader && whisperDownloadProgress && (
           <Text>
-            {whisperDownloadProgress.totalBytesWritten} of {whisperDownloadProgress.totalBytesExpectedToWrite}
+            {whisperDownloadProgress.totalBytesWritten} bytes of {whisperDownloadProgress.totalBytesExpectedToWrite} bytes 
+
+            ({Math.round((whisperDownloadProgress.totalBytesWritten / whisperDownloadProgress.totalBytesExpectedToWrite) * 100)} %)
           </Text>
         )
         }
-        <Pressable onPress={doDownload} style={styles.button}>
-          <Text style={styles.buttonText}>Download</Text>
-        </Pressable>
+        <View style={styles.downloadButtonWrapper}>
+          {downloader && whisperDownloadProgress && (whisperDownloadProgress.totalBytesWritten !== whisperDownloadProgress.totalBytesExpectedToWrite) ? (
+            (<Pressable onPress={doStopDownload} style={styles.pauseDownloadButton}>
+              <Text style={styles.buttonText}>Pause Download</Text>
+            </Pressable>)
+          ) :
+            (<Pressable onPress={doDownload} style={styles.downloadButton}>
+              <Text style={styles.buttonText}>Download</Text>
+            </Pressable>)
+          }
+          {whisperModelTarget && fileExists(whisperModelTarget) &&
+            (<Pressable onPress={doDelete} style={styles.deleteButton}>
+              <Text style={styles.buttonText}>Delete</Text>
+            </Pressable>)
+          }
+        </View>
       </View>
     </View>
   ) : (
@@ -257,14 +299,26 @@ const SettingsComponent: React.FC = () => {
 
 // Create styles for the component
 const styles = StyleSheet.create({
-  button: {
-    backgroundColor: "blue",
+  downloadButtonWrapper: {
+    flex: 1,
     flexDirection: "row",
-    display: "flex",
-    flexShrink: 1,
-    padding: 20,
     alignItems: "center",
-    alignContent: "center",
+    verticalAlign: "middle",
+  },
+  downloadButton: {
+    backgroundColor: "blue",
+    padding: 10,
+    margin: 10,
+  },
+  deleteButton: {
+    backgroundColor: "darkred",
+    padding: 10,
+    margin: 10,
+  },
+  pauseDownloadButton: {
+    backgroundColor: "#444444",
+    padding: 10,
+    margin: 10,
   },
   buttonText: {
     color: "white",