Dymas/abogen
1
0
Fork 0
mirror of https://github.com/denizsafak/abogen.git synced 2026-07-19 22:00:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Improve UI consistency and accessibility across dashboard and settings pages

Browse Source
This commit is contained in:
JB
2025-10-06 10:37:34 -07:00
parent 5497697741
commit 54bc632b2e
4 changed files with 77 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
abogen/web/templates/index.html
+23 -24
View File
@@ -4,46 +4,45 @@
{% block content %}
<section class="card">
<h1 class="card__title">Create a new audiobook</h1>
<h1 class="card__title">Create a New Audiobook</h1>
<form action="{{ url_for('web.enqueue_job') }}" method="post" enctype="multipart/form-data" class="grid grid--two form-grid">
<div class="grid">
<div class="field">
<label for="source_file">Source file</label>
<label for="source_file">Source File</label>
<input type="file" id="source_file" name="source_file" accept=".txt,.pdf,.epub,.md,.markdown">
</div>
<div class="field">
<label for="language">Language</label>
<label for="language">Language</label>
<select id="language" name="language">
{% for key, label in options.languages.items() %}
<option value="{{ key }}">{{ label }}</option>
{% endfor %}
</select>
</div>
<div class="field" data-conditional="standard" data-role="voice-field">
<label for="voice">Voice</label>
<div class="field">
<label for="voice_profile">Voice Profile</label>
<select id="voice_profile" name="voice_profile" data-role="voice-profile">
<option value="__standard" {% if not options.voice_profile_options %}selected{% endif %}>Standard Voice</option>
<option value="__formula">Custom Voice Formula</option>
{% if options.voice_profile_options %}
<optgroup label="Saved mixes">
{% for profile in options.voice_profile_options %}
<option value="{{ profile.name }}" data-language="{{ profile.language }}" data-formula="{{ profile.formula|e }}" {% if loop.first %}selected{% endif %}>{{ profile.name }}{% if profile.language %} ({{ profile.language|upper }}){% endif %}</option>
{% endfor %}
</optgroup>
{% endif %}
</select>
</div>
<div class="field" data-role="voice-field" {% if options.voice_profile_options %}hidden aria-hidden="true"{% endif %}>
<label for="voice">Voice</label>
<select id="voice" name="voice" data-role="voice-select" data-default="{{ settings.default_voice }}">
{% for voice in options.voices %}
<option value="{{ voice }}" {% if settings.default_voice == voice %}selected{% endif %}>{{ voice }}</option>
{% endfor %}
</select>
</div>
<div class="field">
<label for="voice_profile">Voice profile</label>
<select id="voice_profile" name="voice_profile" data-role="voice-profile">
<option value="__standard" selected>Standard voice</option>
<option value="__formula">Formula</option>
{% if options.voice_profile_options %}
<optgroup label="Saved mixes">
{% for profile in options.voice_profile_options %}
<option value="{{ profile.name }}" data-language="{{ profile.language }}" data-formula="{{ profile.formula|e }}">{{ profile.name }} {% if profile.language %}({{ profile.language|upper }}){% endif %}</option>
{% endfor %}
</optgroup>
{% endif %}
</select>
<p class="tag">Manage mixes in the <a href="{{ url_for('web.voice_profiles_page') }}">voice mixer</a>.</p>
</div>
<div class="field" data-conditional="formula" data-role="formula-field" hidden>
<label for="voice_formula">Custom voice formula</label>
<div class="field" data-conditional="formula" data-role="formula-field" hidden aria-hidden="true">
<label for="voice_formula">Custom Voice Formula</label>
<input type="text" id="voice_formula" name="voice_formula" placeholder="af_nova*0.4+am_liam*0.6" data-role="voice-formula">
</div>
<div class="field">
@@ -65,7 +64,7 @@
</div>
<div class="grid">
<div class="field field--full">
<label for="source_text">Or paste text directly</label>
<label for="source_text">Or Paste Text Directly</label>
<textarea id="source_text" name="source_text" rows="12" placeholder="Drop some text here if you don't have a file handy..." data-role="source-text"></textarea>
</div>
<div class="text-preview" data-role="text-preview" aria-live="polite">
@@ -80,7 +79,7 @@
<pre class="text-preview__body" data-role="preview-body">Paste text to see a live preview and character count.</pre>
</div>
<div class="field field--actions">
<button type="submit" class="button">Queue conversion</button>
<button type="submit" class="button">Queue Conversion</button>
</div>
</div>
</form>
abogen/web/templates/settings.html
+16 -16
View File
@@ -4,7 +4,7 @@
{% block content %}
<section class="card settings">
<h1 class="card__title">Application settings</h1>
<h1 class="card__title">Application Settings</h1>
<p class="tag">Settings apply to new jobs you queue from the dashboard.</p>
{% if saved %}
@@ -13,9 +13,9 @@
<form action="{{ url_for('web.settings_page') }}" method="post" class="settings__form">
<fieldset class="settings__section">
<legend>Output defaults</legend>
<legend>Output Defaults</legend>
<div class="field">
<label for="output_format">Audio format</label>
<label for="output_format">Audio Format</label>
<select id="output_format" name="output_format">
{% for fmt in options.output_formats %}
<option value="{{ fmt }}" {% if settings.output_format == fmt %}selected{% endif %}>{{ fmt }}</option>
@@ -23,7 +23,7 @@
</select>
</div>
<div class="field">
<label for="subtitle_format">Subtitle file format</label>
<label for="subtitle_format">Subtitle File Format</label>
<select id="subtitle_format" name="subtitle_format">
{% for value, text in options.subtitle_formats %}
<option value="{{ value }}" {% if settings.subtitle_format == value %}selected{% endif %}>{{ text }}</option>
@@ -31,7 +31,7 @@
</select>
</div>
<div class="field">
<label for="default_voice">Default voice</label>
<label for="default_voice">Default Voice</label>
<select id="default_voice" name="default_voice">
{% for voice in options.voices %}
<option value="{{ voice }}" {% if settings.default_voice == voice %}selected{% endif %}>{{ voice }}</option>
@@ -40,7 +40,7 @@
<p class="hint">Used when “Standard voice” is selected on the dashboard.</p>
</div>
<div class="field">
<label for="save_mode">Save location</label>
<label for="save_mode">Save Location</label>
<select id="save_mode" name="save_mode">
{% for location in save_locations %}
<option value="{{ location.value }}" {% if settings.save_mode == location.value %}selected{% endif %}>{{ location.label }}</option>
@@ -51,31 +51,31 @@
</fieldset>
<fieldset class="settings__section">
<legend>Processing</legend>
<legend>Processing</legend>
<div class="field field--choices">
<label class="toggle-pill">
<input type="checkbox" name="replace_single_newlines" value="true" {% if settings.replace_single_newlines %}checked{% endif %}>
<span>Replace single newlines</span>
<span>Replace Single Newlines</span>
</label>
<label class="toggle-pill">
<input type="checkbox" name="use_gpu" value="true" {% if settings.use_gpu %}checked{% endif %}>
<span>Use GPU (when available)</span>
<span>Use GPU (When Available)</span>
</label>
<label class="toggle-pill">
<input type="checkbox" name="save_chapters_separately" value="true" {% if settings.save_chapters_separately %}checked{% endif %}>
<span>Save each chapter separately</span>
<span>Save Each Chapter Separately</span>
</label>
<label class="toggle-pill">
<input type="checkbox" name="merge_chapters_at_end" value="true" {% if settings.merge_chapters_at_end %}checked{% endif %}>
<span>Also create merged audiobook</span>
<span>Also Create Merged Audiobook</span>
</label>
<label class="toggle-pill">
<input type="checkbox" name="save_as_project" value="true" {% if settings.save_as_project %}checked{% endif %}>
<span>Save as project with metadata</span>
<span>Save as Project With Metadata</span>
</label>
</div>
<div class="field">
<label for="separate_chapters_format">Separate chapter format</label>
<label for="separate_chapters_format">Separate Chapter Format</label>
<select id="separate_chapters_format" name="separate_chapters_format">
{% for fmt in options.separate_formats %}
<option value="{{ fmt }}" {% if settings.separate_chapters_format == fmt %}selected{% endif %}>{{ fmt|upper }}</option>
@@ -83,17 +83,17 @@
</select>
</div>
<div class="field">
<label for="silence_between_chapters">Silence between chapters (seconds)</label>
<label for="silence_between_chapters">Silence Between Chapters (Seconds)</label>
<input type="number" step="0.5" min="0" id="silence_between_chapters" name="silence_between_chapters" value="{{ settings.silence_between_chapters }}">
</div>
<div class="field">
<label for="max_subtitle_words">Max words per subtitle entry</label>
<label for="max_subtitle_words">Max Words Per Subtitle Entry</label>
<input type="number" min="1" max="200" id="max_subtitle_words" name="max_subtitle_words" value="{{ settings.max_subtitle_words }}">
</div>
</fieldset>
<div class="settings__actions">
<button type="submit" class="button">Save settings</button>
<button type="submit" class="button">Save Settings</button>
</div>
</form>
</section>