fix: make LLMModule and SpeechToTextModule non-static post C++ port (#479)

## Description

<!-- Provide a concise and descriptive summary of the changes
implemented in this PR. -->

### Introduces a breaking change?

- [x] Yes
- [ ] No

### Type of change

- [ ] Bug fix (change which fixes an issue)
- [x] New feature (change which adds functionality)
- [x] Documentation update (improves or adds clarity to existing
documentation)
- [ ] Other (chores, tests, code style improvements etc.)

### Tested on

- [ ] iOS
- [ ] Android

### Testing instructions

<!-- Provide step-by-step instructions on how to test your changes.
Include setup details if necessary. -->

### Screenshots

<!-- Add screenshots here, if applicable -->

### Related issues

<!-- Link related issues here using #issue-number -->

### Checklist

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

### Additional notes

<!-- Include any additional information, assumptions, or context that
reviewers might need to understand this PR. -->

---------

Co-authored-by: Mateusz Sluszniak <56299341+msluszniak@users.noreply.github.com>
Co-authored-by: Mateusz Kopcinski <120639731+mkopcins@users.noreply.github.com>

Author: 3 people

docs/docs/03-typescript-api/01-natural-language-processing/LLMModule.md

@@ -31,24 +31,19 @@ export class LLMController {
   private messageHistoryCallback: (messageHistory: Message[]) => void;
   private isReadyCallback: (isReady: boolean) => void;
   private isGeneratingCallback: (isGenerating: boolean) => void;
-  private onDownloadProgressCallback:
-    | ((downloadProgress: number) => void)
-    | undefined;
 
   constructor({
     tokenCallback,
     responseCallback,
     messageHistoryCallback,
     isReadyCallback,
     isGeneratingCallback,
-    onDownloadProgressCallback,
   }: {
     tokenCallback?: (token: string) => void;
     responseCallback?: (response: string) => void;
     messageHistoryCallback?: (messageHistory: Message[]) => void;
     isReadyCallback?: (isReady: boolean) => void;
     isGeneratingCallback?: (isGenerating: boolean) => void;
-    onDownloadProgressCallback?: (downloadProgress: number) => void;
   }) {
     if (responseCallback !== undefined) {
       Logger.warn(
@@ -74,8 +69,6 @@ export class LLMController {
       this._isGenerating = isGenerating;
       isGeneratingCallback?.(isGenerating);
     };
-
-    this.onDownloadProgressCallback = onDownloadProgressCallback;
   }
 
   public get response() {
@@ -95,10 +88,12 @@ export class LLMController {
     modelSource,
     tokenizerSource,
     tokenizerConfigSource,
+    onDownloadProgressCallback,
   }: {
     modelSource: ResourceSource;
     tokenizerSource: ResourceSource;
     tokenizerConfigSource: ResourceSource;
+    onDownloadProgressCallback?: (downloadProgress: number) => void;
   }) {
     // reset inner state when loading new model
     this.responseCallback('');
@@ -108,7 +103,7 @@ export class LLMController {
 
     try {
       const paths = await ResourceFetcher.fetch(
-        this.onDownloadProgressCallback,
+        onDownloadProgressCallback,
         tokenizerSource,
         tokenizerConfigSource,
         modelSource

docs/docs/03-typescript-api/01-natural-language-processing/SpeechToTextModule.md

@@ -34,17 +34,13 @@ export class SpeechToTextController {
 
   // User callbacks
   private decodedTranscribeCallback: (sequence: number[]) => void;
-  private modelDownloadProgressCallback:
-    | ((downloadProgress: number) => void)
-    | undefined;
   private isReadyCallback: (isReady: boolean) => void;
   private isGeneratingCallback: (isGenerating: boolean) => void;
   private onErrorCallback: (error: any) => void;
   private config!: ModelConfig;
 
   constructor({
     transcribeCallback,
-    modelDownloadProgressCallback,
     isReadyCallback,
     isGeneratingCallback,
     onErrorCallback,
@@ -53,7 +49,6 @@ export class SpeechToTextController {
     streamingConfig,
   }: {
     transcribeCallback: (sequence: string) => void;
-    modelDownloadProgressCallback?: (downloadProgress: number) => void;
     isReadyCallback?: (isReady: boolean) => void;
     isGeneratingCallback?: (isGenerating: boolean) => void;
     onErrorCallback?: (error: Error | undefined) => void;
@@ -64,7 +59,6 @@ export class SpeechToTextController {
     this.tokenizerModule = new TokenizerModule();
     this.decodedTranscribeCallback = async (seq) =>
       transcribeCallback(await this.tokenIdsToText(seq));
-    this.modelDownloadProgressCallback = modelDownloadProgressCallback;
     this.isReadyCallback = (isReady) => {
       this.isReady = isReady;
       isReadyCallback?.(isReady);
@@ -88,12 +82,19 @@ export class SpeechToTextController {
     );
   }
 
-  public async loadModel(
-    modelName: AvailableModels,
-    encoderSource?: ResourceSource,
-    decoderSource?: ResourceSource,
-    tokenizerSource?: ResourceSource
-  ) {
+  public async load({
+    modelName,
+    encoderSource,
+    decoderSource,
+    tokenizerSource,
+    onDownloadProgressCallback,
+  }: {
+    modelName: AvailableModels;
+    encoderSource?: ResourceSource;
+    decoderSource?: ResourceSource;
+    tokenizerSource?: ResourceSource;
+    onDownloadProgressCallback?: (downloadProgress: number) => void;
+  }) {
     this.onErrorCallback(undefined);
     this.isReadyCallback(false);
     this.config = MODEL_CONFIGS[modelName];
@@ -103,7 +104,7 @@ export class SpeechToTextController {
         tokenizerSource || this.config.tokenizer.source
       );
       const paths = await ResourceFetcher.fetch(
-        this.modelDownloadProgressCallback,
+        onDownloadProgressCallback,
         encoderSource || this.config.sources.encoder,
         decoderSource || this.config.sources.decoder
       );

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

@@ -43,7 +43,6 @@ export const useLLM = ({
         messageHistoryCallback: setMessageHistory,
         isReadyCallback: setIsReady,
         isGeneratingCallback: setIsGenerating,
-        onDownloadProgressCallback: setDownloadProgress,
       }),
     [tokenCallback]
   );
@@ -60,6 +59,7 @@ export const useLLM = ({
           modelSource,
           tokenizerSource,
           tokenizerConfigSource,
+          onDownloadProgressCallback: setDownloadProgress,
         });
       } catch (e) {
         setError(e);

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

@@ -60,7 +60,6 @@ export const useSpeechToText = ({
         isReadyCallback: setIsReady,
         isGeneratingCallback: setIsGenerating,
         onErrorCallback: setError,
-        modelDownloadProgressCallback: setDownloadProgress,
       }),
     []
   );
@@ -71,12 +70,13 @@ export const useSpeechToText = ({
 
   useEffect(() => {
     const loadModel = async () => {
-      await model.loadModel(
+      await model.load({
         modelName,
         encoderSource,
         decoderSource,
-        tokenizerSource
-      );
+        tokenizerSource,
+        onDownloadProgressCallback: setDownloadProgress,
+      });
     };
     if (!preventLoad) {
       loadModel();

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

@@ -3,47 +3,52 @@ import { ResourceSource } from '../../types/common';
 import { ChatConfig, LLMTool, Message, ToolsConfig } from '../../types/llm';
 
 export class LLMModule {
-  static controller: LLMController;
+  private controller: LLMController;
 
-  static async load({
+  constructor({
+    tokenCallback,
+    responseCallback,
+    messageHistoryCallback,
+  }: {
+    tokenCallback?: (token: string) => void;
+    responseCallback?: (response: string) => void;
+    messageHistoryCallback?: (messageHistory: Message[]) => void;
+  } = {}) {
+    this.controller = new LLMController({
+      tokenCallback,
+      responseCallback,
+      messageHistoryCallback,
+    });
+  }
+
+  async load({
     modelSource,
     tokenizerSource,
     tokenizerConfigSource,
     onDownloadProgressCallback,
-    tokenCallback,
-    responseCallback,
-    messageHistoryCallback,
   }: {
     modelSource: ResourceSource;
     tokenizerSource: ResourceSource;
     tokenizerConfigSource: ResourceSource;
     onDownloadProgressCallback?: (_downloadProgress: number) => void;
-    tokenCallback?: (token: string) => void;
-    responseCallback?: (response: string) => void;
-    messageHistoryCallback?: (messageHistory: Message[]) => void;
   }) {
-    this.controller = new LLMController({
-      tokenCallback: tokenCallback,
-      responseCallback: responseCallback,
-      messageHistoryCallback: messageHistoryCallback,
-      onDownloadProgressCallback: onDownloadProgressCallback,
-    });
     await this.controller.load({
       modelSource,
       tokenizerSource,
       tokenizerConfigSource,
+      onDownloadProgressCallback,
     });
   }
 
-  static setTokenCallback({
+  setTokenCallback({
     tokenCallback,
   }: {
     tokenCallback: (token: string) => void;
   }) {
     this.controller.setTokenCallback(tokenCallback);
   }
 
-  static configure({
+  configure({
     chatConfig,
     toolsConfig,
   }: {
@@ -53,34 +58,31 @@ export class LLMModule {
     this.controller.configure({ chatConfig, toolsConfig });
   }
 
-  static async forward(input: string): Promise<string> {
+  async forward(input: string): Promise<string> {
     await this.controller.forward(input);
     return this.controller.response;
   }
 
-  static async generate(
-    messages: Message[],
-    tools?: LLMTool[]
-  ): Promise<string> {
+  async generate(messages: Message[], tools?: LLMTool[]): Promise<string> {
     await this.controller.generate(messages, tools);
     return this.controller.response;
   }
 
-  static async sendMessage(message: string): Promise<Message[]> {
+  async sendMessage(message: string): Promise<Message[]> {
     await this.controller.sendMessage(message);
     return this.controller.messageHistory;
   }
 
-  static async deleteMessage(index: number): Promise<Message[]> {
-    await this.controller.deleteMessage(index);
+  deleteMessage(index: number): Message[] {
+    this.controller.deleteMessage(index);
     return this.controller.messageHistory;
   }
 
-  static interrupt() {
+  interrupt() {
     this.controller.interrupt();
   }
 
-  static delete() {
+  delete() {
     this.controller.delete();
   }
 }

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

@@ -4,70 +4,79 @@ import { AvailableModels, SpeechToTextLanguage } from '../../types/stt';
 import { STREAMING_ACTION } from '../../constants/sttDefaults';
 
 export class SpeechToTextModule {
-  static module: SpeechToTextController;
+  private module: SpeechToTextController;
 
-  static onDownloadProgressCallback = (_downloadProgress: number) => {};
-
-  static async load(
-    modelName: AvailableModels,
-    transcribeCallback: (sequence: string) => void,
-    modelDownloadProgressCallback?: (downloadProgress: number) => void,
-    encoderSource?: ResourceSource,
-    decoderSource?: ResourceSource,
-    tokenizerSource?: ResourceSource,
+  constructor({
+    transcribeCallback,
+    overlapSeconds,
+    windowSize,
+    streamingConfig,
+  }: {
+    transcribeCallback?: (sequence: string) => void;
     overlapSeconds?: ConstructorParameters<
       typeof SpeechToTextController
-    >['0']['overlapSeconds'],
+    >['0']['overlapSeconds'];
     windowSize?: ConstructorParameters<
       typeof SpeechToTextController
-    >['0']['windowSize'],
+    >['0']['windowSize'];
     streamingConfig?: ConstructorParameters<
       typeof SpeechToTextController
-    >['0']['streamingConfig']
-  ) {
+    >['0']['streamingConfig'];
+  } = {}) {
     this.module = new SpeechToTextController({
-      transcribeCallback: transcribeCallback,
-      modelDownloadProgressCallback: modelDownloadProgressCallback,
-      overlapSeconds: overlapSeconds,
-      windowSize: windowSize,
-      streamingConfig: streamingConfig,
+      transcribeCallback: transcribeCallback || (() => {}),
+      overlapSeconds,
+      windowSize,
+      streamingConfig,
     });
-    await this.module.loadModel(
-      (modelName = modelName),
-      (encoderSource = encoderSource),
-      (decoderSource = decoderSource),
-      (tokenizerSource = tokenizerSource)
-    );
   }
 
-  static configureStreaming(
+  async load({
+    modelName,
+    encoderSource,
+    decoderSource,
+    tokenizerSource,
+    onDownloadProgressCallback,
+  }: {
+    modelName: AvailableModels;
+    encoderSource?: ResourceSource;
+    decoderSource?: ResourceSource;
+    tokenizerSource?: ResourceSource;
+    onDownloadProgressCallback?: (downloadProgress: number) => void;
+  }) {
+    await this.module.load({
+      modelName,
+      encoderSource,
+      decoderSource,
+      tokenizerSource,
+      onDownloadProgressCallback,
+    });
+  }
+
+  configureStreaming(
     overlapSeconds: Parameters<SpeechToTextController['configureStreaming']>[0],
     windowSize: Parameters<SpeechToTextController['configureStreaming']>[1],
     streamingConfig: Parameters<SpeechToTextController['configureStreaming']>[2]
   ) {
-    this.module?.configureStreaming(
-      overlapSeconds,
-      windowSize,
-      streamingConfig
-    );
+    this.module.configureStreaming(overlapSeconds, windowSize, streamingConfig);
   }
 
-  static async encode(waveform: Float32Array) {
+  async encode(waveform: Float32Array) {
     return await this.module.encode(waveform);
   }
 
-  static async decode(seq: number[]) {
+  async decode(seq: number[]) {
     return await this.module.decode(seq);
   }
 
-  static async transcribe(
+  async transcribe(
     waveform: number[],
     audioLanguage?: SpeechToTextLanguage
   ): ReturnType<SpeechToTextController['transcribe']> {
     return await this.module.transcribe(waveform, audioLanguage);
   }
 
-  static async streamingTranscribe(
+  async streamingTranscribe(
     streamAction: STREAMING_ACTION,
     waveform?: number[],
     audioLanguage?: SpeechToTextLanguage