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

feat: Enhance voice mixer UI with new preview speed control and improved layout for profile actions

Browse Source
This commit is contained in:
JB
2025-10-06 07:56:42 -07:00
parent 97d81d78e2
commit e44ba1e903
4 changed files with 254 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
abogen/utils.py
+14
View File
@@ -110,6 +110,20 @@ def get_user_settings_dir():
if override:
return ensure_directory(override)
data_root = os.environ.get("ABOGEN_DATA") or os.environ.get("ABOGEN_DATA_DIR")
if data_root:
try:
return ensure_directory(os.path.join(data_root, "settings"))
except OSError:
pass
data_mount = "/data"
if os.path.isdir(data_mount):
try:
return ensure_directory(os.path.join(data_mount, "settings"))
except OSError:
pass
from platformdirs import user_config_dir
if platform.system() != "Windows":
abogen/web/static/styles.css
+183 -8
View File
@@ -594,11 +594,34 @@ progress.progress::-moz-progress-bar {
}
.voice-editor__meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
display: flex;
flex-direction: column;
gap: 1rem;
}
.voice-editor__identity {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1rem;
align-items: flex-end;
}
.voice-editor__name-field {
flex: 1 1 220px;
min-width: 200px;
}
.voice-editor__toolbar {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.voice-editor__language {
max-width: 260px;
width: min(100%, 260px);
}
.voice-editor__summary {
display: flex;
align-items: center;
@@ -919,17 +942,56 @@ progress.progress::-moz-progress-bar {
gap: 1.25rem;
}
.button-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.voice-preview {
display: grid;
gap: 0.75rem;
}
.field--slider {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.field--slider label {
display: flex;
align-items: center;
gap: 0.5rem;
}
#preview-speed {
width: 100%;
appearance: none;
height: 8px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.25);
outline: none;
transition: box-shadow 0.2s ease;
}
#preview-speed:focus-visible {
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.2);
}
#preview-speed::-webkit-slider-thumb {
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-strong));
border: none;
box-shadow: 0 6px 15px rgba(14, 165, 233, 0.4);
}
#preview-speed::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-strong));
border: none;
box-shadow: 0 6px 15px rgba(14, 165, 233, 0.4);
}
.voice-preview__controls {
display: flex;
flex-wrap: wrap;
@@ -968,6 +1030,105 @@ progress.progress::-moz-progress-bar {
pointer-events: none;
}
.icon-button {
appearance: none;
border-radius: 16px;
width: 2.6rem;
height: 2.6rem;
display: grid;
place-items: center;
border: 1px solid rgba(148, 163, 184, 0.25);
background: rgba(15, 23, 42, 0.4);
color: var(--muted);
cursor: pointer;
transition: color 0.2s ease, border 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.icon-button svg {
width: 1.15rem;
height: 1.15rem;
}
.icon-button:hover {
border-color: var(--accent);
color: var(--accent);
}
.icon-button:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.icon-button:disabled {
opacity: 0.45;
cursor: not-allowed;
box-shadow: none;
}
.icon-button--primary {
background: linear-gradient(135deg, var(--accent), var(--accent-strong));
border: none;
color: #fff;
box-shadow: 0 10px 25px rgba(56, 189, 248, 0.32);
}
.icon-button--primary:hover {
box-shadow: 0 14px 28px rgba(14, 165, 233, 0.4);
}
.icon-button--danger {
background: linear-gradient(135deg, var(--danger), #ef4444);
border: none;
color: #fff;
box-shadow: 0 10px 25px rgba(239, 68, 68, 0.28);
}
.icon-button--danger:hover {
box-shadow: 0 14px 30px rgba(248, 113, 113, 0.35);
}
.icon-button--danger:disabled {
background: rgba(248, 113, 113, 0.2);
color: rgba(248, 113, 113, 0.65);
border: 1px solid rgba(248, 113, 113, 0.25);
}
.icon-button--primary:disabled {
background: rgba(56, 189, 248, 0.25);
border: 1px solid rgba(56, 189, 248, 0.2);
color: rgba(255, 255, 255, 0.8);
box-shadow: none;
}
.button[data-role="preview-button"] {
position: relative;
}
.button[data-role="preview-button"][data-loading="true"] {
padding-left: 2.8rem;
color: rgba(255, 255, 255, 0.8);
}
.button[data-role="preview-button"][data-loading="true"]::after {
content: "";
position: absolute;
left: 1.1rem;
top: 50%;
width: 1rem;
height: 1rem;
margin-top: -0.5rem;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.35);
border-right-color: rgba(255, 255, 255, 0.85);
animation: spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.button[data-role="preview-button"][data-loading="true"]::after {
animation-duration: 1.6s;
}
}
@media (max-width: 980px) {
.voice-mixer__layout {
grid-template-columns: 1fr;
@@ -1002,4 +1163,18 @@ progress.progress::-moz-progress-bar {
.voice-mix__dropzone {
min-height: 220px;
}
.field--slider label {
flex-direction: column;
align-items: flex-start;
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
abogen/web/static/voices.js
+30
View File
@@ -19,6 +19,7 @@ const setupVoiceMixer = () => {
const loadSampleBtn = app.querySelector('[data-role="load-sample"]');
const previewTextEl = app.querySelector('[data-role="preview-text"]');
const previewAudio = app.querySelector('[data-role="preview-audio"]');
const previewSpeedLabel = app.querySelector('[data-role="preview-speed-display"]');
const profileSummaryEl = app.querySelector('[data-role="profile-summary"]');
const mixTotalEl = app.querySelector('[data-role="mix-total"]');
const nameInput = document.getElementById("profile-name");
@@ -33,6 +34,10 @@ const setupVoiceMixer = () => {
const voiceFilterSelect = app.querySelector('[data-role="voice-filter"]');
const genderFilterEl = app.querySelector('[data-role="gender-filter"]');
if (previewBtn && !previewBtn.dataset.label) {
previewBtn.dataset.label = previewBtn.textContent.trim();
}
if (!profileListEl || !availableListEl || !selectedListEl) {
return;
}
@@ -71,6 +76,15 @@ const setupVoiceMixer = () => {
slider.style.background = `linear-gradient(90deg, var(--accent) 0%, var(--accent) ${percent}%, rgba(148, 163, 184, 0.25) ${percent}%, rgba(148, 163, 184, 0.25) 100%)`;
};
const setRangeFill = (slider) => {
if (!slider) return;
const min = parseFloat(slider.min || "0");
const max = parseFloat(slider.max || "1");
const value = parseFloat(slider.value || String(min));
const percent = max === min ? 0 : Math.round(((value - min) / (max - min)) * 100);
slider.style.background = `linear-gradient(90deg, var(--accent) 0%, var(--accent) ${percent}%, rgba(148, 163, 184, 0.25) ${percent}%, rgba(148, 163, 184, 0.25) 100%)`;
};
const voiceGenderIcon = (gender) => {
if (!gender) return "•";
const initial = gender[0].toLowerCase();
@@ -683,6 +697,8 @@ const setupVoiceMixer = () => {
}
previewBtn.disabled = true;
previewBtn.dataset.loading = "true";
previewBtn.setAttribute("aria-busy", "true");
previewBtn.textContent = "Previewing…";
setStatus("Generating preview…", "info", 0);
try {
const response = await fetch("/api/voice-profiles/preview", {
@@ -708,6 +724,8 @@ const setupVoiceMixer = () => {
} finally {
previewBtn.disabled = false;
previewBtn.dataset.loading = "false";
previewBtn.textContent = previewBtn.dataset.label || "Preview mix";
previewBtn.removeAttribute("aria-busy");
}
};
@@ -752,6 +770,18 @@ const setupVoiceMixer = () => {
});
}
if (speedInput) {
const updatePreviewSpeedLabel = () => {
const speed = parseFloat(speedInput.value || "1");
if (previewSpeedLabel) {
previewSpeedLabel.textContent = `${speed.toFixed(2)}×`;
}
setRangeFill(speedInput);
};
speedInput.addEventListener("input", updatePreviewSpeedLabel);
updatePreviewSpeedLabel();
}
if (genderFilterEl) {
genderFilterEl.addEventListener("click", (event) => {
const target = event.target;
abogen/web/templates/voices.html
+25 -11
View File
@@ -26,11 +26,30 @@
<form id="voice-profile-form" class="voice-editor" autocomplete="off">
<div class="voice-status" data-role="status"></div>
<div class="voice-editor__meta">
<div class="field">
<div class="voice-editor__identity">
<div class="field voice-editor__name-field">
<label for="profile-name">Profile name</label>
<input id="profile-name" name="name" type="text" placeholder="Narrator blend" required>
</div>
<div class="field">
<div class="voice-editor__toolbar" role="group" aria-label="Profile actions">
<button type="submit" class="icon-button icon-button--primary" data-role="save-profile" disabled aria-label="Save profile" title="Save profile">
<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
<path d="M5 3h11l5 5v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm7 4a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-5 11h10v-5H7v5z" fill="currentColor" />
</svg>
</button>
<button type="button" class="icon-button" data-role="duplicate-profile" aria-label="Duplicate profile" title="Duplicate profile" disabled>
<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
<path d="M8 4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2V4zm-3 6a2 2 0 0 1 2-2h1v8a3 3 0 0 0 3 3h8v1a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z" fill="currentColor" />
</svg>
</button>
<button type="button" class="icon-button icon-button--danger" data-role="delete-profile" aria-label="Delete profile" title="Delete profile" disabled>
<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
<path d="M9 3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1h5v2H4V3h5zm1 5h2v10h-2V8zm4 0h2v10h-2V8zM6 8h2v10H6V8z" fill="currentColor" />
</svg>
</button>
</div>
</div>
<div class="field voice-editor__language">
<label for="profile-language">Language</label>
<select id="profile-language" name="language">
{% for key, label in options.languages.items() %}
@@ -38,10 +57,6 @@
{% endfor %}
</select>
</div>
<div class="field">
<label for="preview-speed">Preview speed</label>
<input id="preview-speed" type="number" step="0.05" min="0.7" max="1.3" value="1.0">
</div>
</div>
<div class="voice-editor__summary">
<span data-role="profile-summary">Select or create a profile to begin.</span>
@@ -84,16 +99,15 @@
</section>
</div>
<div class="voice-editor__actions">
<div class="button-row">
<button type="submit" class="button" data-role="save-profile" disabled>Save profile</button>
<button type="button" class="button button--ghost" data-role="duplicate-profile">Duplicate</button>
<button type="button" class="button button--danger" data-role="delete-profile">Delete</button>
</div>
<div class="voice-preview">
<div class="field">
<label for="preview-text">Preview text</label>
<textarea id="preview-text" rows="3" data-role="preview-text" placeholder="Paste a short line to audition your mix."></textarea>
</div>
<div class="field field--slider">
<label for="preview-speed">Preview speed <span class="tag" data-role="preview-speed-display">1.00×</span></label>
<input id="preview-speed" type="range" min="0.7" max="1.3" step="0.05" value="1.0" data-role="preview-speed">
</div>
<div class="voice-preview__controls">
<button type="button" class="button" data-role="preview-button">Preview mix</button>
<button type="button" class="button button--ghost" data-role="load-sample">Use sample text</button>