Merge branch 'main' into feat/resource-fetcher-adapters

Author: rizalibnu

.cspell-wordlist.txt

@@ -99,3 +99,9 @@ RNFS
 libfbjni
 libc
 gradlew
+AEROPLANE
+DININGTABLE
+POTTEDPLANT
+TVMONITOR
+sublist
+TTFT

RELEASE.md

@@ -10,7 +10,7 @@ The release process of new minor version consists of the following steps:
 4. Create a new release branch `release/{MAJOR}.{MINOR}`and push it to the remote.
 5. Stability tests are performed on the release branch and all fixes to the new-found issues are pushed into the main branch and cherry-picked into the release branch. This allows for further development on the main branch without interfering with the release process.
 6. Once all tests are passed, tag the release branch with proper version tag `v{MAJOR}.{MINOR}.0` and run `npm publish`.
-7. Create versioned docs by running from repo root `(cd docs && yarn docusaurus docs:version {MAJOR}.{MINOR}.x)` (the 'x' part is intentional and is not to be substituted).
+7. Create versioned docs by running from repo root `(cd docs && yarn docusaurus docs:version {MAJOR}.{MINOR}.x)` (the 'x' part is intentional and is not to be substituted). Also, make sure that all the links in `api-reference` are not broken.
 8. Create a PR with the updated docs.
 9. Create the release notes on GitHub.
 10. Update README.md with release video, if available.

apps/computer-vision/app/ocr_vertical/index.tsx

@@ -1,7 +1,7 @@
 import Spinner from '../../components/Spinner';
 import { BottomBar } from '../../components/BottomBar';
 import { getImage } from '../../utils';
-import { useVerticalOCR, VERTICAL_OCR_ENGLISH } from 'react-native-executorch';
+import { useVerticalOCR, OCR_ENGLISH } from 'react-native-executorch';
 import { View, StyleSheet, Image, Text, ScrollView } from 'react-native';
 import ImageWithBboxes2 from '../../components/ImageWithOCRBboxes';
 import React, { useContext, useEffect, useState } from 'react';
@@ -16,7 +16,7 @@ export default function VerticalOCRScree() {
     height: number;
   }>();
   const model = useVerticalOCR({
-    model: VERTICAL_OCR_ENGLISH,
+    model: OCR_ENGLISH,
     independentCharacters: true,
   });
   const { setGlobalGenerating } = useContext(GeneratingContext);

apps/llm/app/llm/index.tsx

@@ -97,7 +97,7 @@ function LLMScreen() {
                   ? ColorPalette.blueDark
                   : ColorPalette.blueLight,
               }}
-              placeholder="Your message"
+              placeholder={isTextInputFocused ? '' : 'Your message'}
               placeholderTextColor={'#C1C6E5'}
               multiline={true}
               ref={textInputRef}

apps/llm/app/llm_structured_output/index.tsx

@@ -179,7 +179,11 @@ function LLMScreen() {
                   ? ColorPalette.blueDark
                   : ColorPalette.blueLight,
               }}
-              placeholder="Your message e.g. I'm John. Is this product damaged? I can give you $100 for this."
+              placeholder={
+                isTextInputFocused
+                  ? ''
+                  : "Your message e.g. I'm John. Is this product damaged? I can give you $100 for this."
+              }
               placeholderTextColor={'#C1C6E5'}
               multiline={true}
               ref={textInputRef}

apps/llm/app/llm_tool_calling/index.tsx

@@ -146,7 +146,7 @@ function LLMToolCallingScreen() {
                   ? ColorPalette.blueDark
                   : ColorPalette.blueLight,
               }}
-              placeholder="Your message"
+              placeholder={isTextInputFocused ? '' : 'Your message'}
               placeholderTextColor={'#C1C6E5'}
               multiline={true}
               ref={textInputRef}

apps/speech/screens/SpeechToTextScreen.tsx

@@ -50,16 +50,28 @@ export const SpeechToTextScreen = ({ onBack }: { onBack: () => void }) => {
     AudioManager.requestRecordingPermissions();
   }, []);
 
+  async function getAudioFile(sourceUri: string) {
+    const destination = FileSystem.cacheDirectory + 'audio_file.wav';
+
+    if (sourceUri.startsWith('http')) {
+      const { uri } = await FileSystem.downloadAsync(sourceUri, destination);
+      return uri;
+    } else {
+      await FileSystem.copyAsync({
+        from: sourceUri,
+        to: destination,
+      });
+      return destination;
+    }
+  }
+
   const handleTranscribeFromURL = async () => {
     if (!audioURL.trim()) {
       console.warn('Please provide a valid audio file URL');
       return;
     }
 
-    const { uri } = await FileSystem.downloadAsync(
-      audioURL,
-      FileSystem.cacheDirectory + 'audio_file'
-    );
+    const uri = await getAudioFile(audioURL);
 
     const audioContext = new AudioContext({ sampleRate: 16000 });
 

docs/README.md

@@ -1,41 +1,112 @@
-# Website
+# React Native ExecuTorch Documentation
 
-This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+This directory contains the source code for the documentation website of React Native ExecuTorch, built with [Docusaurus](https://docusaurus.io/).
 
-### Installation
+## Getting Started
 
-```
-$ yarn
-```
+### Prerequisites
 
-### Local Development
+- Node.js (v20+)
+- Yarn
 
-```
-$ yarn start
+### Installation
+
+Navigate to the `docs` directory and install dependencies:
+
+```bash
+cd docs
+yarn install
 ```
 
-This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+### Running Locally
 
-### Build
+Start the development server. **Note:** This command automatically generates the API reference from the TypeScript source before starting the site.
 
+```bash
+yarn start
 ```
-$ yarn build
-```
+The site will open at `http://localhost:3000/react-native-executorch/`.
 
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
+## Building
+To build the static files for production:
+
+```bash
+yarn build
+```
+The output will be generated in the `build/` directory.
 
-### Deployment
+## Deployment
 
 Using SSH:
 
-```
+```bash
 $ USE_SSH=true yarn deploy
 ```
 
 Not using SSH:
 
-```
+```bash
 $ GIT_USER=<Your GitHub username> yarn deploy
 ```
 
 If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
+
+## How API Reference Generation Works
+
+We use `docusaurus-plugin-typedoc` to automatically generate documentation from the TypeScript source code.
+
+1. **Source:** The plugin reads `../packages/react-native-executorch/src/index.ts`.
+
+2. **Generation:** On `yarn start` or `yarn build`, it generates Markdown files into `docs/06-api-reference`.
+
+3. **Sidebar Integration:** Docusaurus strips the number prefix (`06-`) from URLs but requires the folder name for configuration. We use a specific sidebar setup to ensure breadcrumbs work while keeping the UI clean.
+
+### Sidebar Configuration (`sidebars.js`)
+The "API Reference" section is configured with specific settings to handle breadcrumbs correctly:
+
+- `collapsed: true`: Keeps the huge list of API files closed by default.
+
+- **`link` property**: Points to `api-reference/index`. This ensures clicking the text "API Reference" redirects to the Overview page.
+
+- **`items` array**: We nest the autogenerated items inside. This is **critical** because it creates the parent-child relationship needed for breadcrumbs (e.g., `Home > API Reference > LLMType`).
+
+### Troubleshooting Sidebar: 
+
+If you change the folder structure, ensure `dirName` matches the physical folder (`06-api-reference`), but `id` uses the Docusaurus ID (`api-reference/index`).
+
+## Releasing & Versioning
+
+We use Docusaurus versioning to "freeze" documentation for older releases.
+
+### Creating a New Version
+
+When you release a new npm version (e.g., `1.0.0`), you must snapshot the documentation. Run this command from the `docs/` folder:
+
+```bash
+yarn docusaurus docs:version 1.0.0
+```
+### Why is this important?
+
+1. It copies the current contents of `docs/` (including the **currently generated API reference**) into `versioned_docs/version-1.0.0`.
+2. This ensures that if the TypeScript API changes in the future, the docs for v1.0.0 remain accurate to that version.
+
+### Working on "Next"
+
+Edit files in `docs/` as usual. These changes appear in the "Next" version of the site (the default view), reflecting the current `main` branch.
+
+## Troubleshooting
+
+### "Duplicate ID" Errors
+If you see build errors about duplicate IDs, it usually means an old generation artifact is conflicting with a new one. Run:
+
+```bash
+yarn clear
+```
+This deletes the `.docusaurus` cache and `build` folder.
+
+### API Docs Not Updating
+
+TypeDoc runs strictly at startup. If you modify comments in the TypeScript package:
+
+1. Stop the server.
+2. Run `yarn start` again to regenerate the Markdown files.

docs/docs/01-fundamentals/01-getting-started.md

@@ -1,6 +1,6 @@
 ---
 title: Getting Started
-slug: /
+slug: /fundamentals/getting-started
 keywords:
   [
     react native,
@@ -90,11 +90,20 @@ Running the app with the library:
 yarn run expo:<ios | android> -d
 ```
 
+## Supporting new models in React Native ExecuTorch
+
+Adding new functionality to the library follows a consistent three-step integration pipeline:
+
+1. **Model Serialization:** We export PyTorch models for specific tasks (e.g., object detection) into the \*.pte format, which is optimized for the ExecuTorch runtime.
+
+2. **Native Implementation:** We develop a C++ execution layer that interfaces with the ExecuTorch runtime to handle inference. This layer also manages model-dependent logic, such as data pre-processing and post-processing.
+
+3. **TS Bindings:** Finally, we implement a TypeScript API that bridges the JavaScript environment to the native C++ logic, providing a clean, typed interface for the end user."
+
 ## Good reads
 
 If you want to dive deeper into ExecuTorch or our previous work with the framework, we highly encourage you to check out the following resources:
 
 - [ExecuTorch docs](https://pytorch.org/executorch/stable/index.html)
-- [Native code for iOS](https://medium.com/swmansion/bringing-native-ai-to-your-mobile-apps-with-executorch-part-i-ios-f1562a4556e8?source=user_profile_page---------0-------------250189c98ccf---------------)
-- [Native code for Android](https://medium.com/swmansion/bringing-native-ai-to-your-mobile-apps-with-executorch-part-ii-android-29431b6b9f7f?source=user_profile_page---------2-------------b8e3a5cb1c63---------------)
-- [Exporting to Android with XNNPACK](https://medium.com/swmansion/exporting-ai-models-on-android-with-xnnpack-and-executorch-3e70cff51c59?source=user_profile_page---------1-------------b8e3a5cb1c63---------------)
+- [React Native RAG](https://blog.swmansion.com/introducing-react-native-rag-fbb62efa4991)
+- [Offline Text Recognition on Mobile: How We Brought EasyOCR to React Native ExecuTorch](https://blog.swmansion.com/bringing-easyocr-to-react-native-executorch-2401c09c2d0c)

docs/docs/01-fundamentals/02-loading-models.md

@@ -36,6 +36,10 @@ useExecutorchModule({
 The downloaded files are stored in documents directory of your application.
 :::
 
+## Predefined Models
+
+Our library offers out-of-the-box support for multiple models. To make things easier, we created aliases for our model exported to `pte` format. For full list of aliases, check out: [API Reference](../06-api-reference/index.md#models---classification)
+
 ## Example
 
 The following code snippet demonstrates how to load model and tokenizer files using `useLLM` hook: