fix: prevent negative values from appearing in downloadProgress (#465)

## Description

Changes:
- updated the downloading strategy to prevent negative values from
appearing in downloadProgress

### Type of change

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Documentation update (improves or adds clarity to existing
documentation)

### Tested on

- [x] iOS
- [ ] Android

### Checklist

- [x] I have performed a self-review of my code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have updated the documentation accordingly
- [x] My changes generate no new warnings

Author: jakmro

packages/react-native-executorch/src/controllers/LLMController.ts

@@ -102,22 +102,34 @@ export class LLMController {
     this.isReadyCallback(false);
 
     try {
-      const paths = await ResourceFetcher.fetch(
-        onDownloadProgressCallback,
+      const tokenizersPromise = ResourceFetcher.fetch(
+        undefined,
         tokenizerSource,
-        tokenizerConfigSource,
+        tokenizerConfigSource
+      );
+
+      const modelPromise = ResourceFetcher.fetch(
+        onDownloadProgressCallback,
         modelSource
       );
-      if (paths === null || paths?.length < 3) {
+
+      const [tokenizersResults, modelResult] = await Promise.all([
+        tokenizersPromise,
+        modelPromise,
+      ]);
+
+      const tokenizerPath = tokenizersResults?.[0];
+      const tokenizerConfigPath = tokenizersResults?.[1];
+      const modelPath = modelResult?.[0];
+
+      if (!tokenizerPath || !tokenizerConfigPath || !modelPath) {
         throw new Error('Download interrupted!');
       }
-      const tokenizerFileUri = paths[0]!;
-      const tokenizerConfigFileUri = paths[1]!;
-      const modelFileUri = paths[2]!;
+
       this.tokenizerConfig = JSON.parse(
-        await readAsStringAsync('file://' + tokenizerConfigFileUri!)
+        await readAsStringAsync('file://' + tokenizerConfigPath!)
       );
-      this.nativeModule = global.loadLLM(modelFileUri, tokenizerFileUri);
+      this.nativeModule = global.loadLLM(modelPath, tokenizerPath);
       this.isReadyCallback(true);
       this.onToken = (data: string) => {
         if (

packages/react-native-executorch/src/controllers/SpeechToTextController.ts

@@ -100,18 +100,23 @@ export class SpeechToTextController {
     this.config = MODEL_CONFIGS[modelName];
 
     try {
-      await this.tokenizerModule.load(
+      const tokenizerLoadPromise = this.tokenizerModule.load(
         tokenizerSource || this.config.tokenizer.source
       );
-      const paths = await ResourceFetcher.fetch(
+      const pathsPromise = ResourceFetcher.fetch(
         onDownloadProgressCallback,
         encoderSource || this.config.sources.encoder,
         decoderSource || this.config.sources.decoder
       );
-      if (paths === null || paths.length < 2) {
+      const [_, encoderDecoderResults] = await Promise.all([
+        tokenizerLoadPromise,
+        pathsPromise,
+      ]);
+      encoderSource = encoderDecoderResults?.[0];
+      decoderSource = encoderDecoderResults?.[1];
+      if (!encoderSource || !decoderSource) {
         throw new Error('Download interrupted.');
       }
-      [encoderSource, decoderSource] = paths;
     } catch (e) {
       this.onErrorCallback(e);
       return;
@@ -127,8 +132,8 @@ export class SpeechToTextController {
 
     try {
       const nativeSpeechToText = await global.loadSpeechToText(
-        encoderSource!,
-        decoderSource!,
+        encoderSource,
+        decoderSource,
         modelName
       );
       this.speechToTextNativeModule = nativeSpeechToText;

packages/react-native-executorch/src/hooks/natural_language_processing/useTokenizer.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { TokenizerModule } from '../../modules/natural_language_processing/TokenizerModule';
 import { ResourceSource } from '../../types/common';
 import { ETError, getError } from '../../Error';
@@ -14,33 +14,30 @@ export const useTokenizer = ({
   const [isReady, setIsReady] = useState(false);
   const [isGenerating, setIsGenerating] = useState(false);
   const [downloadProgress, setDownloadProgress] = useState(0);
-  const tokenizerModuleRef = useRef<TokenizerModule | null>(null);
+  const model = useMemo(() => new TokenizerModule(), []);
 
   useEffect(() => {
-    const loadModule = async () => {
+    if (preventLoad) return;
+    (async () => {
+      setDownloadProgress(0);
+      setError(null);
       try {
         setIsReady(false);
-        tokenizerModuleRef.current = new TokenizerModule();
-        tokenizerModuleRef.current.load(tokenizerSource, setDownloadProgress);
+        await model.load(tokenizerSource, setDownloadProgress);
         setIsReady(true);
       } catch (err) {
         setError((err as Error).message);
       }
-    };
-    if (!preventLoad) {
-      loadModule();
-    }
-  }, [tokenizerSource, preventLoad]);
+    })();
+  }, [model, tokenizerSource, preventLoad]);
 
   const stateWrapper = <T extends (...args: any[]) => Promise<any>>(fn: T) => {
-    return async (...args: Parameters<T>): Promise<ReturnType<T>> => {
-      if (!isReady || !tokenizerModuleRef.current)
-        throw new Error(getError(ETError.ModuleNotLoaded));
+    return (...args: Parameters<T>): Promise<ReturnType<T>> => {
+      if (!isReady) throw new Error(getError(ETError.ModuleNotLoaded));
       if (isGenerating) throw new Error(getError(ETError.ModelGenerating));
-
-      setIsGenerating(true);
       try {
-        return await fn.apply(tokenizerModuleRef.current, args);
+        setIsGenerating(true);
+        return fn.apply(model, args);
       } finally {
         setIsGenerating(false);
       }

packages/react-native-executorch/src/modules/natural_language_processing/TextEmbeddingsModule.ts

@@ -8,18 +8,21 @@ export class TextEmbeddingsModule extends BaseNonStaticModule {
     tokenizerSource: ResourceSource,
     onDownloadProgressCallback: (_: number) => void = () => {}
   ): Promise<void> {
-    const paths = await ResourceFetcher.fetch(
+    const modelPromise = ResourceFetcher.fetch(
       onDownloadProgressCallback,
-      modelSource,
-      tokenizerSource
+      modelSource
     );
-    if (paths === null || paths.length < 2) {
+    const tokenizerPromise = ResourceFetcher.fetch(undefined, tokenizerSource);
+    const [modelResult, tokenizerResult] = await Promise.all([
+      modelPromise,
+      tokenizerPromise,
+    ]);
+    const modelPath = modelResult?.[0];
+    const tokenizerPath = tokenizerResult?.[0];
+    if (!modelPath || !tokenizerPath) {
       throw new Error('Download interrupted.');
     }
-    this.nativeModule = global.loadTextEmbeddings(
-      paths[0] || '',
-      paths[1] || ''
-    );
+    this.nativeModule = global.loadTextEmbeddings(modelPath, tokenizerPath);
   }
 
   async forward(input: string): Promise<Float32Array> {

packages/react-native-executorch/src/modules/natural_language_processing/TokenizerModule.ts

@@ -12,10 +12,11 @@ export class TokenizerModule {
       onDownloadProgressCallback,
       modelSource
     );
-    if (paths === null || paths.length < 1) {
+    const path = paths?.[0];
+    if (!path) {
       throw new Error('Download interrupted.');
     }
-    this.nativeModule = global.loadTokenizerModule(paths[0] || '');
+    this.nativeModule = global.loadTokenizerModule(path);
   }
 
   async encode(s: string) {

packages/react-native-executorch/src/utils/ResourceFetcher.ts

@@ -376,6 +376,11 @@ export class ResourceFetcher {
       sourceExtended.cacheFileUri,
       { sessionType: FileSystemSessionType.BACKGROUND },
       ({ totalBytesWritten, totalBytesExpectedToWrite }) => {
+        if (totalBytesExpectedToWrite === -1) {
+          // If totalBytesExpectedToWrite is -1, it means the server does not provide content length.
+          sourceExtended.callback!(0);
+          return;
+        }
         sourceExtended.callback!(totalBytesWritten / totalBytesExpectedToWrite);
       }
     );

packages/react-native-executorch/src/utils/ResourceFetcherUtils.ts

@@ -90,6 +90,10 @@ export namespace ResourceFetcherUtils {
           }
 
           const contentLength = response.headers.get('content-length');
+          if (!contentLength) {
+            Logger.warn(`No content-length header for ${source}`);
+          }
+
           length = contentLength ? parseInt(contentLength, 10) : 0;
           previousFilesTotalLength = totalLength;
           totalLength += length;
@@ -134,6 +138,13 @@ export namespace ResourceFetcherUtils {
         setProgress(1);
         return;
       }
+
+      // Avoid division by zero
+      if (totalLength === 0) {
+        setProgress(0);
+        return;
+      }
+
       const baseProgress = previousFilesTotalLength / totalLength;
       const scaledProgress = progress * (currentFileLength / totalLength);
       const updatedProgress = baseProgress + scaledProgress;