|
| 1 | +--- |
| 2 | +title: useSpeechToText |
| 3 | +sidebar_position: 1 |
| 4 | +--- |
| 5 | + |
| 6 | +With the latest `v0.3.0` release we introduce a new hook - `useSpeechToText`. Speech to text is a task that allows to transform spoken language to written text. It is commonly used to implement features such as transcription or voice assistants. As of now, [all supported STT models](#supported-models) run on the XNNPACK backend. |
| 7 | + |
| 8 | +:::info |
| 9 | +Currently, we do not support direct microphone input streaming to the model. Instead, in v0.3.0, we provide a way to transcribe an audio file. |
| 10 | +::: |
| 11 | + |
| 12 | +:::caution |
| 13 | +It is recommended to use models provided by us, which are available at our [Hugging Face repository](https://huggingface.co/software-mansion/react-native-executorch-moonshine-tiny). You can also use [constants](https://github.com/software-mansion/react-native-executorch/tree/main/src/constants/modelUrls.ts) shipped with our library |
| 14 | +::: |
| 15 | + |
| 16 | +## Reference |
| 17 | + |
| 18 | +```typescript |
| 19 | +import { useSpeechToText } from 'react-native-executorch'; |
| 20 | + |
| 21 | +const { transcribe, error, loadAudio } = useSpeechToText({ |
| 22 | + modelName: 'moonshine', |
| 23 | +}); |
| 24 | + |
| 25 | +const audioUrl = ...; // URL with audio to transcribe |
| 26 | + |
| 27 | +await loadAudio(audioUrl); |
| 28 | +const transcription = await transcribe(); |
| 29 | +if (error) { |
| 30 | + console.log(error); |
| 31 | +} else { |
| 32 | + console.log(transcription); |
| 33 | +} |
| 34 | +``` |
| 35 | + |
| 36 | +### Streaming |
| 37 | + |
| 38 | +Given that STT models can process audio no longer than 30 seconds, there is a need to chunk the input audio. Chunking audio may result in cutting speech mid-sentence, which might be hard to understand for the model. To make it work, we employed an algorithm (adapted for mobile devices from [whisper-streaming](https://aclanthology.org/2023.ijcnlp-demo.3.pdf)) that uses overlapping audio chunks. This might introduce some overhead, but allows for processing audio inputs of arbitrary length. |
| 39 | + |
| 40 | +### Arguments |
| 41 | + |
| 42 | +**`modelName`** |
| 43 | +A literal of `"moonshine" | "whisper"` which serves as an identifier for which model should be used. |
| 44 | + |
| 45 | +**`encoderSource?`** |
| 46 | +A string that specifies the location of a .pte file for the encoder. For further information on passing model sources, check out [Loading Models](https://docs.swmansion.com/react-native-executorch/docs/fundamentals/loading-models). Defaults to [constants](https://github.com/software-mansion/react-native-executorch/blob/main/src/constants/modelUrls.ts) for given model. |
| 47 | + |
| 48 | +**`decoderSource?`** |
| 49 | +Analogous to the encoderSource, this takes in a string which is a source for the decoder part of the model. Defaults to [constants](https://github.com/software-mansion/react-native-executorch/blob/main/src/constants/modelUrls.ts) for given model. |
| 50 | + |
| 51 | +**`tokenizerSource?`** |
| 52 | +A string that specifies the location to the tokenizer for the model. This works just as the encoder and decoder do. Defaults to [constants](https://github.com/software-mansion/react-native-executorch/blob/main/src/constants/modelUrls.ts) for given model. |
| 53 | + |
| 54 | +**`overlapSeconds?`** |
| 55 | +Specifies the length of overlap between consecutive audio chunks (expressed in seconds). |
| 56 | + |
| 57 | +**`windowSize?`** |
| 58 | +Specifies the size of each audio chunk (expressed in seconds). |
| 59 | + |
| 60 | +### Returns |
| 61 | + |
| 62 | +| Field | Type | Description | |
| 63 | +| ------------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
| 64 | +| `transcribe` | `(input?: number[]) => Promise<string>` | Starts a transcription process for a given input array, which should be a waveform at 16kHz. When no input is provided, it uses an internal state which is set by calling `loadAudio`. Resolves a promise with the output transcription when the model is finished. | |
| 65 | +| `loadAudio` | `(url: string) => void` | Loads audio file from given url. It sets an internal state which serves as an input to `transcribe()`. | |
| 66 | +| `error` | <code>Error | undefined</code> | Contains the error message if the model failed to load. | |
| 67 | +| `sequence` | <code>string</code> | This property is updated with each generated token. If you're looking to obtain tokens as they're generated, you should use this property. | |
| 68 | +| `isGenerating` | `boolean` | Indicates whether the model is currently processing an inference. | |
| 69 | +| `isReady` | `boolean` | Indicates whether the model has successfully loaded and is ready for inference. | |
| 70 | +| `downloadProgress` | `number` | Tracks the progress of the model download process. | |
| 71 | + |
| 72 | +## Running the model |
| 73 | + |
| 74 | +Before running the model's `transcribe` method be sure to obtain waveform of the audio You wish to transcribe. You can either use `loadAudio` method to load audio from a url and save it in model's internal state or obtain the waveform on your own (remember to use sampling rate of 16kHz!). In the latter case just pass the obtained waveform as argument to the `transcribe` method which returns a promise resolving to the generated tokens when successful. If the model fails during inference the `error` property contains details of the error. If you want to obtain tokens in a streaming fashion, you can also use the sequence property, which is updated with each generated token, similar to the [useLLM](../llms/useLLM.md) hook. |
| 75 | + |
| 76 | +## Example |
| 77 | + |
| 78 | +```typescript |
| 79 | +import { Button, Text } from 'react-native'; |
| 80 | +import { useSpeechToText } from 'react-native-executorch'; |
| 81 | + |
| 82 | +function App() { |
| 83 | + const { loadAudio, transcribe, sequence, error } = useSpeechToText({ |
| 84 | + modelName: 'whisper', |
| 85 | + }); |
| 86 | + |
| 87 | + const audioUrl = ...; // URL with audio to transcribe |
| 88 | + |
| 89 | + return ( |
| 90 | + <View> |
| 91 | + <Button |
| 92 | + onPress={async () => { |
| 93 | + await loadAudio(audioUrl); |
| 94 | + await transcribe(); |
| 95 | + } |
| 96 | + title="Transcribe" |
| 97 | + /> |
| 98 | + <Text>{error ? error : sequence}</Text> |
| 99 | + </View> |
| 100 | + ); |
| 101 | +} |
| 102 | +``` |
| 103 | +
|
| 104 | +## Supported models |
| 105 | +
|
| 106 | +| Model | Language | |
| 107 | +| --------------------------------------------------------------------- | -------- | |
| 108 | +| [Whisper tiny.en](https://huggingface.co/openai/whisper-tiny.en) | English | |
| 109 | +| [Moonshine tiny](https://huggingface.co/UsefulSensors/moonshine-tiny) | English | |
| 110 | +
|
| 111 | +## Benchmarks |
| 112 | +
|
| 113 | +### Model size |
| 114 | +
|
| 115 | +| Model | XNNPACK [MB] | |
| 116 | +| -------------- | ------------ | |
| 117 | +| WHISPER_TINY | 231.0 | |
| 118 | +| MOONSHINE_TINY | 148.9 | |
| 119 | +
|
| 120 | +### Memory usage |
| 121 | +
|
| 122 | +| Model | Android (XNNPACK) [MB] | iOS (XNNPACK) [MB] | |
| 123 | +| -------------- | ---------------------- | ------------------ | |
| 124 | +| WHISPER_TINY | 900 | 600 | |
| 125 | +| MOONSHINE_TINY | 650 | 560 | |
0 commit comments