feat: text to speech (#710)

## Description

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

### Introduces a breaking change?

- [ ] Yes
- [x] No

### 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)
- [ ] Other (chores, tests, code style improvements etc.)

### Tested on

- [x] iOS
- [x] 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

- [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
- [ ] My changes generate no new warnings

### Additional notes

There are still a few side things to be done on this feature.

---------

Co-authored-by: chmjkb <[email protected]>

Author: IgorSwat

.cspell-wordlist.txt

@@ -84,3 +84,10 @@ FSMN
 fsmn
 subarray
 topp
+kokoro
+phonemizer
+phonemizers
+phonemis
+Español
+Français
+Português

README.md

@@ -111,7 +111,7 @@ const handleGenerate = async () => {
 We currently host a few example [apps](https://github.com/software-mansion/react-native-executorch/tree/main/apps) demonstrating use cases of our library:
 
 - `llm` - Chat application showcasing use of LLMs
-- `speech-to-text` - Whisper model ready for transcription tasks
+- `speech` - Speech to Text & Text to Speech task implementations
 - `computer-vision` - Computer vision related tasks
 - `text-embeddings` - Computing text representations for semantic search
 

apps/speech-to-text/App.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { TextToSpeechScreen } from './screens/TextToSpeechScreen';
+import { SpeechToTextScreen } from './screens/SpeechToTextScreen';
+import ColorPalette from './colors';
+import ExecutorchLogo from './assets/executorch.svg';
+import { Quiz } from './screens/Quiz';
+
+export default function App() {
+  const [currentScreen, setCurrentScreen] = useState<
+    'menu' | 'speech-to-text' | 'text-to-speech' | 'quiz'
+  >('menu');
+
+  const goToMenu = () => setCurrentScreen('menu');
+
+  if (currentScreen === 'text-to-speech') {
+    return <TextToSpeechScreen onBack={goToMenu} />;
+  }
+
+  if (currentScreen === 'speech-to-text') {
+    return <SpeechToTextScreen onBack={goToMenu} />;
+  }
+
+  if (currentScreen === 'quiz') {
+    return <Quiz onBack={goToMenu} />;
+  }
+
+  return (
+    <View style={styles.container}>
+      <ExecutorchLogo width={64} height={64} />
+      <Text style={styles.headerText}>Select a demo model</Text>
+      <View style={styles.buttonContainer}>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => setCurrentScreen('speech-to-text')}
+        >
+          <Text style={styles.buttonText}>Speech to Text</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => setCurrentScreen('text-to-speech')}
+        >
+          <Text style={styles.buttonText}>Text to Speech</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => setCurrentScreen('quiz')}
+        >
+          <Text style={styles.buttonText}>Text to Speech - Quiz</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+export const fontSizes = {
+  xxl: 34,
+  xl: 22,
+  lg: 18,
+  md: 16,
+  sm: 14,
+  xs: 12,
+  xxs: 10,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+  },
+  headerText: {
+    fontSize: fontSizes.lg,
+    color: ColorPalette.strongPrimary,
+    margin: 20,
+  },
+  buttonContainer: {
+    width: '80%',
+    justifyContent: 'space-evenly',
+    marginBottom: 20,
+  },
+  button: {
+    backgroundColor: ColorPalette.strongPrimary,
+    borderRadius: 8,
+    padding: 10,
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: fontSizes.md,
+  },
+});

apps/speech-to-text/.gitignore apps/speech/.gitignoreapps/speech-to-text/.gitignore renamed to apps/speech/.gitignore

@@ -1,7 +1,7 @@
 {
   "expo": {
-    "name": "speech-to-text",
-    "slug": "speech-to-text",
+    "name": "speech",
+    "slug": "speech",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -14,7 +14,7 @@
     },
     "ios": {
       "supportsTablet": true,
-      "bundleIdentifier": "com.anonymous.speechtotext",
+      "bundleIdentifier": "com.anonymous.speech",
       "infoPlist": {
         "NSMicrophoneUsageDescription": "This app needs access to your microphone to record audio."
       }
@@ -24,7 +24,7 @@
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
-      "package": "com.anonymous.speechtotext"
+      "package": "com.anonymous.speech"
     },
     "web": {
       "favicon": "./assets/favicon.png"