CoolFace
Apppublic

intellisr/Intellisr_Sinhala_TTS_Piper

sourceHugging Faceupdated 5mo agoView on Hugging Face
0likes
App README

Sinhala TTS — browser demo (Piper)

Static HTML + JavaScript demo that runs Piper in the browser with ONNX Runtime Web and espeak-ng (WASM). The page offers an Intellisr Hugging Face model dropdown (add <option value="org/repo">…</option> in index.html as you ship more voices). After you choose a model, a loading overlay runs while the app fetches model.onnx.json, downloads model.onnx, and initializes espeak / ONNX in the browser; Speak stays off until that finishes. If only one non-placeholder model exists in the list, it is auto-selected on first load so the voice still downloads without an extra click.

Hugging Face Space (step by step)

This app is a static site: index.html at the repo root, ES modules, and resources/ (WASM + ~24 MB espeakng.worker.data). The YAML at the top of this file tells Spaces to use `sdk: static` and `app_file: index.html`.

1. Create the Space on Hugging Face

  1. 1.Log in at huggingface.co.
  2. 2.Click your avatar → New Space (or huggingface.co/new-space).
  3. 3.Choose an owner, Space name, and visibility (Public is typical for demos).
  4. 4.Under Space SDK, pick Static (or “Blank” / static HTML, depending on the UI).
  5. 5.Create the Space. You will get an empty repo and a URL like https://huggingface.co/spaces/<you>/<space-name>.

2. Put these files in the Space repo

At the root of the Space (same level as README.md), you need at least:

PathRole
README.mdMust start with the YAML block (title, sdk: static, app_file: index.html).
index.htmlMain page.
app.jsApp logic.
nts.jsNumber-to-Sinhala helper.
resources/piper.jsPiper + phoneme pipeline.
resources/espeakng.worker.jsEmscripten glue.
resources/espeakng.worker.wasmespeak-ng WASM.
resources/espeakng.worker.dataespeak-ng data (~24 MB).

The voice does not have to live in the Space repo: the browser downloads `model.onnx` and `model.onnx.json` from the Hub model you select (e.g. intellisr/sinhala-tts-piper-v1).

3. Large files and Git LFS

espeakng.worker.data is large. If git push fails or Hub warns about file size, track it with [Git LFS](https://git-lfs.com/) before pushing:

bash
git lfs install
git lfs track "resources/espeakng.worker.data"
git add .gitattributes resources/espeakng.worker.data
# … add the rest of the files, commit, push

4. Push from your machine

If the Space was created empty:

bash
git clone https://huggingface.co/spaces/<YOUR_USERNAME>/<SPACE_NAME>
cd <SPACE_NAME>
# Copy in index.html, app.js, nts.js, README.md, resources/, etc.
git add .
git commit -m "Add static Sinhala TTS Piper demo"
git push

Use a personal access token as the password when Git asks (Settings → Access Tokens → read/write for repos).

5. After deploy

Open `https://huggingface.co/spaces/<you>/<space-name>`. Wait for the Space to build (static Spaces are quick). Pick a model in the dropdown and wait for the loading overlay; then use Speak.

Official reference: Static HTML Spaces.

Gatsby + CloudFront Pages

  1. 1.Copy the entire web bundle into your site’s static directory, preserving paths, for example:
  • —static/sinhala-tts/index.html
  • —static/sinhala-tts/app.js
  • —static/sinhala-tts/nts.js
  • —static/sinhala-tts/resources/ (all files under it, including espeakng.worker.data and .wasm)
  1. 1.Open `/sinhala-tts/` (or whatever folder name you used).
  1. 1.Optional: before app.js runs, set a default Hub repo only when the dropdown has no valid selection (placeholder still selected):
html
<script>
  window.__SINHALA_TTS_HUB_REPO__ = "intellisr/sinhala-tts-piper-v1";
</script>

Choosing a model in the dropdown always wins over this global.

Local files

You can still load model.onnx (and model.onnx.json if needed) from disk using the file inputs.

License

The upstream Piper / espeak-ng WASM stack is GPL-3.0. The voice bundle intellisr/sinhala-tts-piper-v1 is also distributed under GPL-3.0; see the model card.