feat!: multilingual text-to-speech (#1134)

## Description

Introduces major changes to the text-to-speech module based on Kokoro
model, including:
- **Multilingual text-to-speech** - a set of complete pipelines & voices
for different languages. A complete list of (currently) supported
languages can be found below.
- **Improved phonemization & speech quality** - utilizing neural
phonemization model as a fallback for the old lexicon-base phonemization
significantly improves speech quality, particularly for non-standard,
out of dictionary words.
- **Timestamp-based audio cutting** - an improve postprocessing
algorithm, eliminates artifacts introduced by .pte model, resulting in
cleaner, more natural speech.
- **API changes**: prepared for voice-cloning & custom, fine-tuned
versions of Kokoro model.

Supported language current status:
- 🇺🇸 American English: ✅
- 🇬🇧 British English: ✅
- 🇫🇷 French: ✅
- 🇪🇸 Spanish: ✅
- 🇵🇹/🇧🇷 Portugese: ✅
- 🇮🇹 Italian: ✅
- 🇵🇱 Polish: ✅
- 🇩🇪 German: ✅
- 🇮🇳 Hindi: ✅
- 🇯🇵 Japanese: ❌ (coming soon)
- 🇨🇳 Mandarin Chinese: ❌ (coming soon)

### Introduces a breaking change?

- [x] Yes
- [ ] No

There are 2 major breaking changes introduced by this PR:
- Changed **"synthezation from phonemes"** API. 

   Old API:
   ```
    const audioData = await tts.forwardFromPhonemes({
      phonemes:
'ɐ mˈæn hˌu dˈʌzᵊnt tɹˈʌst hɪmsˈɛlf, kæn nˈɛvəɹ ɹˈiᵊli tɹˈʌst ˈɛniwˌʌn
ˈɛls.',
    });
    ```
    
    New API:
    ```
    const audioData = await tts.forward({
      text:
'ɐ mˈæn hˌu dˈʌzᵊnt tɹˈʌst hɪmsˈɛlf, kæn nˈɛvəɹ ɹˈiᵊli tɹˈʌst ˈɛniwˌʌn
ˈɛls.',
phonemize: false, # Disables phonemization and treats text as phonemes
    });
    ```
- Changed predefined model - voice setups. Now both model files &
voice/phonemization files are bundled together, due to languages like
Polish or German having fine-tuned model weights.

  Old API:
  ```
  const model = useTextToSpeech({
    model: KOKORO_MEDIUM,
    voice: KOKORO_VOICE_AF_HEART,
  });
  ```
  
  New API:
  ```
  const model = useTextToSpeech(KOKORO_AMERICAN_ENGLISH_FEMALE_HEART);
  ```

### Type of change

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

### Tested on

- [x] iOS
- [x] Android

### Testing instructions

Play around demo speech apps.

Unit tests for RNE-specific code will be added later on.
Phonemis package has it's own, wide range of unit tests implemented (see
[Phonemis repo](https://github.com/IgorSwat/Phonemis))

### Screenshots

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

### Related issues

#712 

### Checklist

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

### Additional notes

---------

Co-authored-by: Bartosz Hanc <bartosz.hanc02@gmail.com>
Co-authored-by: Mateusz Słuszniak <mateusz.sluszniak@swmansion.com>

Author: 3 people

.cspell-wordlist.txt

@@ -206,3 +206,9 @@ Deinitialize
 fastsam
 promptable
 topk
+phonemize
+phonemization
+Siwis
+SIWIS
+Mateusz
+MATEUSZ

.gitmodules

@@ -4,3 +4,7 @@
 [submodule "third-party/googletest"]
 	path = third-party/googletest
 	url = https://github.com/google/googletest.git
+[submodule "packages/react-native-executorch/third-party/common/phonemis"]
+	path = packages/react-native-executorch/third-party/common/phonemis
+	url = https://github.com/IgorSwat/Phonemis
+	branch = main

apps/speech/components/ModelPicker.tsx

@@ -1,10 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
 import {
   Dimensions,
+  Modal,
   ScrollView,
   StyleSheet,
   Text,
   TouchableOpacity,
+  TouchableWithoutFeedback,
   View,
 } from 'react-native';
 
@@ -21,7 +23,7 @@ type Props<T> = {
   disabled?: boolean;
 };
 
-const DROPDOWN_MAX_HEIGHT = 200;
+const DROPDOWN_MAX_HEIGHT = 300;
 
 export function ModelPicker<T>({
   models,
@@ -31,8 +33,11 @@ export function ModelPicker<T>({
   disabled,
 }: Props<T>) {
   const [open, setOpen] = useState(false);
-  const [triggerHeight, setTriggerHeight] = useState(0);
-  const [expandUp, setExpandUp] = useState(false);
+  const [dropdownLayout, setDropdownLayout] = useState({
+    x: 0,
+    y: 0,
+    width: 0,
+  });
   const triggerRef = useRef<React.ComponentRef<typeof TouchableOpacity>>(null);
   const selected = models.find((m) => m.value === selectedModel);
 
@@ -50,23 +55,22 @@ export function ModelPicker<T>({
       (
         _x: number,
         _y: number,
-        _width: number,
+        width: number,
         height: number,
-        _pageX: number,
+        pageX: number,
         pageY: number
       ) => {
-        setTriggerHeight(height);
         const spaceBelow = Dimensions.get('window').height - (pageY + height);
-        setExpandUp(spaceBelow < DROPDOWN_MAX_HEIGHT);
+        const y =
+          spaceBelow >= DROPDOWN_MAX_HEIGHT
+            ? pageY + height + 2
+            : pageY - Math.min(DROPDOWN_MAX_HEIGHT, models.length * 42) - 2;
+        setDropdownLayout({ x: pageX, y, width });
         setOpen(true);
       }
     );
   };
 
-  const dropdownPosition = expandUp
-    ? { bottom: triggerHeight + 2 }
-    : { top: triggerHeight + 2 };
-
   return (
     <View style={styles.container}>
       <TouchableOpacity
@@ -80,36 +84,51 @@ export function ModelPicker<T>({
         <Text style={styles.chevron}>{open ? '▲' : '▼'}</Text>
       </TouchableOpacity>
 
-      {open && (
-        <ScrollView
-          style={[styles.dropdown, dropdownPosition]}
-          nestedScrollEnabled
-          keyboardShouldPersistTaps="handled"
-        >
-          {models.map((item) => {
-            const isSelected = item.value === selectedModel;
-            return (
-              <TouchableOpacity
-                key={item.label}
-                style={[styles.option, isSelected && styles.optionSelected]}
-                onPress={() => {
-                  onSelect(item.value);
-                  setOpen(false);
-                }}
-              >
-                <Text
-                  style={[
-                    styles.optionText,
-                    isSelected && styles.optionTextSelected,
-                  ]}
-                >
-                  {item.label}
-                </Text>
-              </TouchableOpacity>
-            );
-          })}
-        </ScrollView>
-      )}
+      <Modal
+        visible={open}
+        transparent
+        animationType="none"
+        onRequestClose={() => setOpen(false)}
+      >
+        <TouchableWithoutFeedback onPress={() => setOpen(false)}>
+          <View style={StyleSheet.absoluteFill}>
+            <ScrollView
+              style={[
+                styles.dropdown,
+                {
+                  top: dropdownLayout.y,
+                  left: dropdownLayout.x,
+                  width: dropdownLayout.width,
+                },
+              ]}
+              keyboardShouldPersistTaps="handled"
+            >
+              {models.map((item) => {
+                const isSelected = item.value === selectedModel;
+                return (
+                  <TouchableOpacity
+                    key={item.label}
+                    style={[styles.option, isSelected && styles.optionSelected]}
+                    onPress={() => {
+                      onSelect(item.value);
+                      setOpen(false);
+                    }}
+                  >
+                    <Text
+                      style={[
+                        styles.optionText,
+                        isSelected && styles.optionTextSelected,
+                      ]}
+                    >
+                      {item.label}
+                    </Text>
+                  </TouchableOpacity>
+                );
+              })}
+            </ScrollView>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
     </View>
   );
 }
@@ -119,7 +138,6 @@ const styles = StyleSheet.create({
     marginHorizontal: 12,
     marginVertical: 4,
     alignSelf: 'stretch',
-    zIndex: 100,
   },
   trigger: {
     flexDirection: 'row',
@@ -152,18 +170,15 @@ const styles = StyleSheet.create({
   },
   dropdown: {
     position: 'absolute',
-    left: 0,
-    right: 0,
     borderWidth: 1,
     borderColor: '#C1C6E5',
     borderRadius: 8,
     backgroundColor: '#fff',
     maxHeight: DROPDOWN_MAX_HEIGHT,
-    zIndex: 100,
-    elevation: 4,
+    elevation: 8,
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
+    shadowOpacity: 0.15,
     shadowRadius: 4,
   },
   option: {

apps/speech/package.json

@@ -20,7 +20,7 @@
     "metro-config": "^0.83.0",
     "react": "19.2.5",
     "react-native": "0.83.4",
-    "react-native-audio-api": "0.12.0",
+    "react-native-audio-api": "0.12.2",
     "react-native-device-info": "^15.0.2",
     "react-native-executorch": "workspace:*",
     "react-native-executorch-expo-resource-fetcher": "workspace:*",

apps/speech/screens/Quiz.tsx

@@ -18,8 +18,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import {
-  KOKORO_MEDIUM,
-  KOKORO_VOICE_AM_SANTA,
+  KOKORO_AMERICAN_ENGLISH_MALE_SANTA,
   useTextToSpeech,
 } from 'react-native-executorch';
 import {
@@ -60,10 +59,7 @@ const createAudioBufferFromVector = (
 
 export const Quiz = ({ onBack }: { onBack: () => void }) => {
   // --- Hooks & State ---
-  const model = useTextToSpeech({
-    model: KOKORO_MEDIUM,
-    voice: KOKORO_VOICE_AM_SANTA,
-  });
+  const model = useTextToSpeech(KOKORO_AMERICAN_ENGLISH_MALE_SANTA);
 
   const [shuffledQuestions] = useState(() => shuffleArray(QUESTIONS));
   const [currentIndex, setCurrentIndex] = useState(0);

apps/speech/screens/TextToSpeechLLMScreen.tsx

@@ -12,8 +12,7 @@ import SWMIcon from '../assets/swm_icon.svg';
 import {
   useLLM,
   useTextToSpeech,
-  KOKORO_MEDIUM,
-  KOKORO_VOICE_AF_HEART,
+  KOKORO_AMERICAN_ENGLISH_FEMALE_HEART,
   LLAMA3_2_1B_QLORA,
 } from 'react-native-executorch';
 import {
@@ -54,10 +53,7 @@ export const TextToSpeechLLMScreen = ({ onBack }: TextToSpeechLLMProps) => {
   const [displayText, setDisplayText] = useState('');
   const [isTtsStreaming, setIsTtsStreaming] = useState(false);
   const llm = useLLM({ model: LLAMA3_2_1B_QLORA });
-  const tts = useTextToSpeech({
-    model: KOKORO_MEDIUM,
-    voice: KOKORO_VOICE_AF_HEART,
-  });
+  const tts = useTextToSpeech(KOKORO_AMERICAN_ENGLISH_FEMALE_HEART);
 
   const processedLengthRef = useRef(0);
   const audioContextRef = useRef<AudioContext | null>(null);