1 of 11

UtaFormatix

Architecture design

2 of 11

What is UtaFormatix

  • A web application for converting projects among singing voice synthesizer softwares (e.g. VOCALOID, UTAU and other MIDI-like formats)
  • Built with Kotlin for JavaScript and React
  • Fully static web page with generated JavaScript files
  • Released at Jul. 2020
  • 3.2k users and 1.9k new users during last 30 days (via Google Analytics)
  • Deployed with Github Pages

​

3 of 11

Tech stack

  • Language: Kotlin -> JavaScript
  • Target: Browser
  • UI Framework: React
  • Design Framework: MUI (Material UI)
  • Project/Dependency: Gradle with npm
  • CI/CD: Github Actions / Pages

4 of 11

How it works

  1. Import file(s) via browser
    • Convert source format into internal data
  2. Select output format
  3. Configure
    • Take the configurations to reshape the internal data
    • Take the configurations to enable certain features in generation
    • Generate file
  4. Export file via browser
    • Download the generated file

​

5 of 11

What it keeps across conversion

  1. Project basic info
  2. Master track info (e.g. tempo changes, time signatures)
  3. Track info (e.g. name)
  4. Note info in tracks (e.g. pitch key, time, length, lyrics)
  5. Pitch tuning parameters

​

​

6 of 11

Layers

View (React component)

State

Props

(parameters)

Model

IO

(conversion logic between internal data format and source/target format)

7 of 11

Model

  • Key class Project
  • Single instance to contain all data
  • Copy to use new instance on every change across different screen (to fit unidirectional data flow)

​

8 of 11

IO

  • Key class Format
  • Define all info and processes (lambda) needed for conversion
  • Actual logic is written separately
  • Readable: format itself tells everything we need while used in the View layer
  • Extendable: Easy to add new format or new fields

9 of 11

View

  • Key class StageInfo, AppState
  • Corresponding to each screen, containing required data
  • Held by the main component in a stack to support step popping back

10 of 11

Others

  • Customized localization module using i18next
    • Change all texts immediately when changed language
    • Detect from OS language and caches
  • Embedded markdown renderer
  • Take feedback from header and error dialogs
  • Export zipped archive if output files are multiple using jszip
  • Handle certain encodings using encoding-japanese

​

​

11 of 11

Questions please