Templates & UI Customization
Relevant source files
The following files were used as context for generating this wiki page:
The Wikispeech server utilizes a combination of Flask-based Jinja2 templates and client-side JavaScript components to provide a user interface for TTS interaction, lexicon management, and workflow demonstrations. The UI architecture is designed to support various input types (text, SSML, IPA) and provide visual feedback for synthesis results, including synchronized word highlighting.
UI Customization is achieved through external CSS frameworks, modular JavaScript editors like Trumbowyg for HTML manipulation, and JSON Schema-based editors for complex data structures like lexicon entries.
User Interface Architecture
The UI is structured around several primary entry points served by the Wikispeech server. The main documentation and example page is usage.html, while complex interactions are handled via test.html in the workflow demo.
Core UI Components
The system relies on several integrated components to provide a full editing and synthesis experience:
| Component | Description | Implementation Source |
|---|---|---|
| Usage Page | Displays API usage, supported languages, and parameter documentation. | usage.html |
| Workflow Demo | A multi-tab interface for Input, Synthesis, and Lexicon management. | workflow_demo/test.html |
| Simple Player | Handles audio playback and synchronized text highlighting. | wikispeech_simple_player.js |
| HTML Editor | A WYSIWYG editor for preparing text for synthesis. | Trumbowyg |
| Lexicon Editor | A JSON-editor based interface for modifying word transcriptions. | test_workflow.js |
Synthesis Flow Logic
The following diagram illustrates how the UI interacts with the Wikispeech server to process text and return audio with timing data.
The UI flow begins with a user request containing language and input text, which the server processes through adapters before returning a JSON object containing audio data and timing tokens.
Sources: wikispeech.py:180-250, wikispeech_simple_player.js:130-160
Template System
The server uses Flask's render_template function to serve HTML files with dynamic context.
usage.html
This template serves as the landing page when no parameters are provided. It dynamically renders:
- Server URL: The hostname derived from the request.
- Languages: A list of supported language codes (e.g.,
sv,en,ar). - Example Links: Hyperlinks demonstrating API calls for different voices and processors.
Sources: wikispeech.py:205-208, usage.html
workflow_demo/test.html
This is a more complex template utilizing a tabbed interface. It organizes the UI into functional zones:
- Input: Contains the
html_editorpowered by Trumbowyg. - Synthesis: Displays editable chunks of text with "Speak" buttons.
- Lexicon: Provides a sortable table of words found in the text.
- Lexicon Entry Editor: A JSON-based editor for detailed entry modification.
Sources: workflow_demo/test.html:50-150, workflow_demo/README.md
UI Customization & Styling
UI styling is managed through CSS and modular JavaScript plugins. The project uses a responsive tab system and external editors to enhance the user experience.
Responsive Tab System
The layout in test.html uses a responsive tab component defined in style.css. It features:
- Box Sizing Reset: Ensures consistent layout calculations.
- Media Queries: Adjusts tab navigation from icons-only on small screens to icons and text labels on larger screens.
- Active States: Visual differentiation for the current tab using high-contrast colors (
#dc446e).
Sources: workflow_demo/ext/responsivetabs/css/style.css:200-280
HTML Editor Customization (Trumbowyg)
The Wikispeech server integrates the Trumbowyg WYSIWYG editor for preparing synthesis input.
- Configuration: The editor is initialized on the
#html_editordiv. - Semantic HTML: The editor is configured to produce clean HTML, converting tags like
<b>to<strong>and wrapping text nodes in<p>tags for consistent paragraph processing. - SSML Support: The
test_workflow.jsscript includes logic to filter HTML content from the editor into valid SSML blocks before sending them to the server.
Sources: workflow_demo/test.html:180-185, workflow_demo/ext/Trumbowyg-master/src/trumbowyg.js:700-750, workflow_demo/test_workflow.js:335-350
Interactive Components & Client-side Logic
The UI uses JavaScript to handle real-time validation and synchronized feedback.
Synchronized Highlighting
The wikispeech_simple_player.js script manages the relationship between audio playback and the visual display of tokens.
High-level sequence of synchronized audio-text highlighting.
Sources: wikispeech_simple_player.js:350-420
Token Timing Implementation
When synthesis results return, the JavaScript client generates a series of <span> elements with data-begin and data-dur attributes. This enables:
- Click-to-seek: Clicking a word sets the
audio.currentTimeto the word's start time. - Word Tracking: During playback, the current word is identified by comparing
audio.currentTimeagainst the indexedwordTimes.
Sources: wikispeech_simple_player.js:230-260, wikispeech_simple_player.js:380-400
Conclusion
Templates and UI customization in Wikispeech focus on providing an accessible interface for both basic TTS usage and advanced lexicon editing. By leveraging standardized web technologies like HTML5 audio, synchronized timing tokens, and modular JavaScript editors, the system enables a seamless "edit-synthesise-listen" loop.