Workflow Demo Editor
Relevant source files
The following files were used as context for generating this wiki page:
The Workflow Demo Editor is a functional demonstration of a typical Text-to-Speech (TTS) workflow within the Wikispeech ecosystem. It allows users to edit HTML content, synthesize that text into speech, listen to the output, and manage the underlying lexicon through a multi-tabbed interface. The system bridges the gap between raw text input and fine-tuned phonetic synthesis by providing tools for lexicon lookup and entry modification.
Sources: workflow_demo/README.md:3-15, workflow_demo/test.html:51-56
Architecture and Interface
The editor is built as a single-page application (SPA) using a tabbed navigation system. It integrates several external libraries, including Trumbowyg for HTML editing and a JSON Editor for managing lexicon entries.
Navigation Structure
The interface is divided into four primary functional areas:
- Input: A WYSIWYG editor for preparing HTML content.
- Synthesis: A playback area where text chunks are rendered with audio controls and word-level highlighting.
- Lexicon: A dashboard for reviewing known and unknown words found in the text.
- Lexicon Entry Editor: A detailed editor for modifying specific lexicon records using JSON schemas.
Sources: workflow_demo/test.html:51-56, workflow_demo/README.md:16-18
Core Components
| Component | Technology/Library | Purpose |
|---|---|---|
| HTML Editor | Trumbowyg | Provides the "Input" tab interface for text manipulation. |
| Lexicon Editor | json-editor.js | Handles the complex JSON structure of lexicon entries in the "Entry Editor" tab. |
| Audio Player | wikispeech_simple_player.js | Manages audio playback and synchronized word highlighting. |
| Workflow Logic | test_workflow.js | Orchestrates data flow between tabs and calls to the Wikispeech server. |
Sources: workflow_demo/test.html:142-151, workflow_demo/test_workflow.js:1-10, workflow_demo/ext/json-editor/jsoneditor.js:1-10
Functional Flows
Text Processing and Tokenization
When a user initiates the workflow from the Input tab, the content is filtered and sent to the Wikispeech server for tokenization.
The filterToSSML function ensures that HTML tags like ssml:s are correctly handled and entities like (which break certain parsers) are removed.
Sources: workflow_demo/test_workflow.js:231-270, workflow_demo/test_workflow.js:296-308
Synthesis and Playback
The synthesis tab breaks the input into "text chunks" (based on p or ssml:s tags). Each chunk is associated with a Wikispeech simple player instance.
Lexicon Management
The Lexicon tab displays a sortable table of words found in the text. It identifies whether words are already present in the lexicon (in_lex) or if they were found in the SSML input.
Lexicon Entry Modification
Users can perform a detailed lookup of words. Clicking a word in the words_table triggers displaySelected, which populates the detail view.
- Lookup: Calls
lexserver/lexicon/lookupto retrieve existing entries. - Validation: Uses
lexserver/validation/validateentryto check x-sampa transcriptions against defined symbol sets (e.g.,sv-se_ws-sampa). - Update: Sends modified entries back via
lexserver/lexicon/updateentry.
Sources: workflow_demo/test_workflow.js:46-60, workflow_demo/test_workflow.js:585-610, workflow_demo/test_workflow.js:774-790
Lexicon Data Model
| Field | Type | Description |
|---|---|---|
strn | String | The orthographic form of the word. |
transcriptions | Array | List of phonetic strings (usually x-sampa). |
partOfSpeech | String | Grammatical category. |
preferred | Boolean | Whether this is the primary transcription for the word. |
tag | String | Metadata tags for the entry. |
Sources: workflow_demo/test_workflow.js:174-210, workflow_demo/test_workflow.js:806-830
Implementation Details
HTML Editor Integration (Trumbowyg)
The editor is initialized on the #html_editor div. The workflow uses the Trumbowyg semantic code feature to ensure consistent tag wrapping.
// Initialization
$('#html_editor').trumbowyg();
// Data Retrieval
var html = document.getElementById('html_editor').innerHTML;
Sources: workflow_demo/test.html:145-148, workflow_demo/ext/Trumbowyg-master/src/trumbowyg.js:445-460
JSON Editor for Entries
The json-editor library is used to handle complex lexicon records, ensuring that the nested structures of lemma, transcriptions, and status are preserved during editing.
Sources: workflow_demo/test.html:150-151, workflow_demo/ext/json-editor/jsoneditor.js:231-250
Timing and Highlighting
The wikispeech_simple_player.js script maps token timing received from the server to span elements using data attributes (data-begin, data-dur).
word_span.setAttribute("data-dur", token_duration);
word_span.setAttribute("data-begin", starttime);
Sources: wikispeech_simple_player.js:275-280
Conclusion
The Workflow Demo Editor serves as a comprehensive tool for managing the lifecycle of TTS content. By integrating editing, synthesis, and lexicon management into a single interface, it provides developers and linguists with a environment to validate and improve the Wikispeech server's output.
Sources: workflow_demo/README.md:1-10