Skip to content

Commit 0ef85b3

Browse files
msluszniakchmjkb
andauthored
docs: Add autogenerated API for React Native ExecuTorch documentation (#748)
## Description This PR adds auto-generated API into documentation. This is based on typedoc comments in TypeScript code which are also added here. During creating this documentation I caught many smaller errors. They are fixed here as well. ### Introduces a breaking change? - [x] Yes - [ ] No * This PR remove constant for vertical OCR. All constants that started with `VERTICAL_OCR_*` are now removed. From now, only `OCR_*` constants should be used for both OCR and vertical OCR. * Passing `number[]` in Speech to Text is now not supported anymore. * Aligned docs with another breaking change, `LLMModule` not does not take responseCallback` ### Type of change - [ ] Bug fix (change which fixes an issue) - [ ] New feature (change which adds functionality) - [x] Documentation update (improves or adds clarity to existing documentation) - [x] Other (chores, tests, code style improvements etc.) ### Tested on - [x] iOS - [ ] Android ### Testing instructions * Build documentation from this PR (`cd docs & yarn & yarn build & yarn serve`) * Check if API of our library is visible in the sidebar to the left (at the very bottom of it) * Then, Scan through the all API Reference and check if all the sections are correctly filled * Check if in the sections with Hooks and TypeScript API all the hand written tables with signatures etc. are removed, now API Reference is a source of truth. You should also check that the links the these section redirects to correct sections. The link themselves are correct (checked in building process), just the site where they pointing might be incorrect. * Check other changed sections of documentation for correctness * Check all the files with code that were changed if the changes are correct. Please **do not** review files in directory `06-api-reference`, they are generated automatically. Also you don't need to check any `*.md` files manually, you can test them all by clicking through the built documentation ;) ### Screenshots <!-- Add screenshots here, if applicable --> ### Related issues #772 #752 #746 #612 #410 ### 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 - [x] 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: Jakub Chmura <92989966+chmjkb@users.noreply.github.com>
1 parent b4770df commit 0ef85b3

336 files changed

Lines changed: 14248 additions & 2317 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

.cspell-wordlist.txt

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,4 +98,9 @@ ocurred
9898
libfbjni
9999
libc
100100
gradlew
101+
AEROPLANE
102+
DININGTABLE
103+
POTTEDPLANT
104+
TVMONITOR
105+
sublist
101106
TTFT

RELEASE.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ The release process of new minor version consists of the following steps:
1010
4. Create a new release branch `release/{MAJOR}.{MINOR}`and push it to the remote.
1111
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.
1212
6. Once all tests are passed, tag the release branch with proper version tag `v{MAJOR}.{MINOR}.0` and run `npm publish`.
13-
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).
13+
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.
1414
8. Create a PR with the updated docs.
1515
9. Create the release notes on GitHub.
1616
10. Update README.md with release video, if available.

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Spinner from '../../components/Spinner';
22
import { BottomBar } from '../../components/BottomBar';
33
import { getImage } from '../../utils';
4-
import { useVerticalOCR, VERTICAL_OCR_ENGLISH } from 'react-native-executorch';
4+
import { useVerticalOCR, OCR_ENGLISH } from 'react-native-executorch';
55
import { View, StyleSheet, Image, Text, ScrollView } from 'react-native';
66
import ImageWithBboxes2 from '../../components/ImageWithOCRBboxes';
77
import React, { useContext, useEffect, useState } from 'react';
@@ -16,7 +16,7 @@ export default function VerticalOCRScree() {
1616
height: number;
1717
}>();
1818
const model = useVerticalOCR({
19-
model: VERTICAL_OCR_ENGLISH,
19+
model: OCR_ENGLISH,
2020
independentCharacters: true,
2121
});
2222
const { setGlobalGenerating } = useContext(GeneratingContext);

docs/README.md

Lines changed: 88 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,112 @@
1-
# Website
1+
# React Native ExecuTorch Documentation
22

3-
This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
3+
This directory contains the source code for the documentation website of React Native ExecuTorch, built with [Docusaurus](https://docusaurus.io/).
44

5-
### Installation
5+
## Getting Started
66

7-
```
8-
$ yarn
9-
```
7+
### Prerequisites
108

11-
### Local Development
9+
- Node.js (v20+)
10+
- Yarn
1211

13-
```
14-
$ yarn start
12+
### Installation
13+
14+
Navigate to the `docs` directory and install dependencies:
15+
16+
```bash
17+
cd docs
18+
yarn install
1519
```
1620

17-
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
21+
### Running Locally
1822

19-
### Build
23+
Start the development server. **Note:** This command automatically generates the API reference from the TypeScript source before starting the site.
2024

25+
```bash
26+
yarn start
2127
```
22-
$ yarn build
23-
```
28+
The site will open at `http://localhost:3000/react-native-executorch/`.
2429

25-
This command generates static content into the `build` directory and can be served using any static contents hosting service.
30+
## Building
31+
To build the static files for production:
32+
33+
```bash
34+
yarn build
35+
```
36+
The output will be generated in the `build/` directory.
2637

27-
### Deployment
38+
## Deployment
2839

2940
Using SSH:
3041

31-
```
42+
```bash
3243
$ USE_SSH=true yarn deploy
3344
```
3445

3546
Not using SSH:
3647

37-
```
48+
```bash
3849
$ GIT_USER=<Your GitHub username> yarn deploy
3950
```
4051

4152
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.
53+
54+
## How API Reference Generation Works
55+
56+
We use `docusaurus-plugin-typedoc` to automatically generate documentation from the TypeScript source code.
57+
58+
1. **Source:** The plugin reads `../packages/react-native-executorch/src/index.ts`.
59+
60+
2. **Generation:** On `yarn start` or `yarn build`, it generates Markdown files into `docs/06-api-reference`.
61+
62+
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.
63+
64+
### Sidebar Configuration (`sidebars.js`)
65+
The "API Reference" section is configured with specific settings to handle breadcrumbs correctly:
66+
67+
- `collapsed: true`: Keeps the huge list of API files closed by default.
68+
69+
- **`link` property**: Points to `api-reference/index`. This ensures clicking the text "API Reference" redirects to the Overview page.
70+
71+
- **`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`).
72+
73+
### Troubleshooting Sidebar:
74+
75+
If you change the folder structure, ensure `dirName` matches the physical folder (`06-api-reference`), but `id` uses the Docusaurus ID (`api-reference/index`).
76+
77+
## Releasing & Versioning
78+
79+
We use Docusaurus versioning to "freeze" documentation for older releases.
80+
81+
### Creating a New Version
82+
83+
When you release a new npm version (e.g., `1.0.0`), you must snapshot the documentation. Run this command from the `docs/` folder:
84+
85+
```bash
86+
yarn docusaurus docs:version 1.0.0
87+
```
88+
### Why is this important?
89+
90+
1. It copies the current contents of `docs/` (including the **currently generated API reference**) into `versioned_docs/version-1.0.0`.
91+
2. This ensures that if the TypeScript API changes in the future, the docs for v1.0.0 remain accurate to that version.
92+
93+
### Working on "Next"
94+
95+
Edit files in `docs/` as usual. These changes appear in the "Next" version of the site (the default view), reflecting the current `main` branch.
96+
97+
## Troubleshooting
98+
99+
### "Duplicate ID" Errors
100+
If you see build errors about duplicate IDs, it usually means an old generation artifact is conflicting with a new one. Run:
101+
102+
```bash
103+
yarn clear
104+
```
105+
This deletes the `.docusaurus` cache and `build` folder.
106+
107+
### API Docs Not Updating
108+
109+
TypeDoc runs strictly at startup. If you modify comments in the TypeScript package:
110+
111+
1. Stop the server.
112+
2. Run `yarn start` again to regenerate the Markdown files.

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,5 @@ Adding new functionality to the library follows a consistent three-step integrat
105105
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:
106106

107107
- [ExecuTorch docs](https://pytorch.org/executorch/stable/index.html)
108-
- [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---------------)
109-
- [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---------------)
110-
- [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---------------)
108+
- [React Native RAG](https://blog.swmansion.com/introducing-react-native-rag-fbb62efa4991)
109+
- [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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@ useExecutorchModule({
3636
The downloaded files are stored in documents directory of your application.
3737
:::
3838

39+
## Predefined Models
40+
41+
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)
42+
3943
## Example
4044

4145
The following code snippet demonstrates how to load model and tokenizer files using `useLLM` hook:

docs/docs/01-fundamentals/03-frequently-asked-questions.md

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,18 @@ Each hook documentation subpage (useClassification, useLLM, etc.) contains a sup
1010

1111
### How can I run my own AI model?
1212

13-
To run your own model, you need to directly access the underlying [ExecuTorch Module API](https://pytorch.org/executorch/stable/extension-module.html). We provide an experimental [React hook](../03-hooks/03-executorch-bindings/useExecutorchModule.md) along with a [TypeScript alternative](../04-typescript-api/03-executorch-bindings/ExecutorchModule.md), which serve as a way to use the aforementioned API without the need of diving into native code. In order to get a model in a format runnable by the runtime, you'll need to get your hands dirty with some ExecuTorch knowledge. For more guides on exporting models, please refer to the [ExecuTorch tutorials](https://pytorch.org/executorch/stable/tutorials/export-to-executorch-tutorial.html). Once you obtain your model in a `.pte` format, you can run it with `useExecuTorchModule` and `ExecuTorchModule`.
13+
To run your own model, you need to directly access the underlying [ExecuTorch Module API](https://pytorch.org/executorch/stable/extension-module.html). We provide [React hook](../03-hooks/03-executorch-bindings/useExecutorchModule.md) along with a [TypeScript alternative](../04-typescript-api/03-executorch-bindings/ExecutorchModule.md), which serve as a way to use the aforementioned API without the need of diving into native code. In order to get a model in a format runnable by the runtime, you'll need to get your hands dirty with some ExecuTorch knowledge. For more guides on exporting models, please refer to the [ExecuTorch tutorials](https://pytorch.org/executorch/stable/tutorials/export-to-executorch-tutorial.html). Once you obtain your model in a `.pte` format, you can run it with `useExecuTorchModule` and `ExecuTorchModule`.
14+
15+
### How React Native ExecuTorch works under the hood?
16+
17+
The general workflow for each functionality in our library goes like this:
18+
19+
- You call a functionality from TypeScript
20+
- TypeScript calls C++ function like model inference or data processing via JSI
21+
- C++ returns result to TypeScript back via JSI
22+
- You get results in TypeScript
23+
24+
Using JSI enables us using **zero-copy data transfer** and **fast, low-level C++**.
1425

1526
### Can you do function calling with useLLM?
1627

0 commit comments

Comments
 (0)