mARTin-B78/tts-voice-creator-clone-and-design-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: use MDI silhouettes for avatars and add flag to compact meta row

Browse Source
This commit is contained in:
mARTin-B78 2026-06-23 10:28:06 +02:00
parent 307922b90c
commit 7a296e4273
3 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/index.html
View File

@ -26,7 +26,7 @@
<!-- ── Core styles (local — no CDN dependency for first paint) ────────── -->
<link rel="stylesheet" href="/static/vendor/mdi/materialdesignicons.min.css">
<link rel="stylesheet" href="/static/style.css?v=1.8.0-8">
<link rel="stylesheet" href="/static/style.css?v=1.8.0-9">
<!-- ── Flag icons — non-blocking (loaded async, icons appear after JS) ── -->

7
static/js/voice-inspector.js
View File

@ -58,11 +58,14 @@ function selectVoice(wrap) {
const inspFlagIcon = inspFlagCc
? `<span class="fi fi-${inspFlagCc.toLowerCase()}" role="img" aria-label="${langCode}"></span>` : null;
const defaultSilClass = curGender === 'M' ? 'mdi-face-man' : (curGender === 'F' ? 'mdi-face-woman' : 'mdi-account');
const silHtml = `<span class="mdi ${defaultSilClass}" style="color:#fff;font-size:32px;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:${color}"></span>`;
const inspIconHtml = window.voiceAvatarIcon ? window.voiceAvatarIcon(v.avatar, 48) : null;
const avatarHtml = picSrcInsp
? `<img src="${picSrcInsp}" alt="" class="insp-avatar-img">`
: inspIconHtml || inspFlagIcon || initial;
const avatarBgStyle = (picSrcInsp || inspIconHtml || inspFlagIcon) ? '' : `style="background:${color}"`;
: inspIconHtml || silHtml;
const avatarBgStyle = (picSrcInsp || inspIconHtml) ? '' : `style="background:${color}"`;
const flagIconHtml = inspFlagIcon || '';

16
static/js/voice-library.js
View File

@ -1884,15 +1884,17 @@ function makeVoiceRow(v) {
? `<span class="fi fi-${currentFlag.toLowerCase()}" role="img" aria-label="${langCode}"></span>`
: null;
// Avatar: photo > gender/type icon > flag icon > initial letter (with color)
// Avatar: photo > gender/type icon > silhouette (with color)
const defaultSilClass = gender === 'M' ? 'mdi-face-man' : (gender === 'F' ? 'mdi-face-woman' : 'mdi-account');
const silHtml = `<span class="mdi ${defaultSilClass}" style="color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:${color}"></span>`;
const iconHtml = window.voiceAvatarIcon ? window.voiceAvatarIcon(v.avatar, 34) : null;
const avatarClass = picSrc ? 'vl-avatar vl-avatar-photo'
: iconHtml ? 'vl-avatar vl-avatar-icon'
: flagIconHtml ? 'vl-avatar vl-avatar-flag' : 'vl-avatar vl-avatar-initial';
const avatarStyle = (picSrc || iconHtml || flagIconHtml) ? '' : `style="background:${color}"`;
: iconHtml ? 'vl-avatar vl-avatar-icon' : 'vl-avatar vl-avatar-sil';
const avatarStyle = (picSrc || iconHtml) ? '' : `style="background:${color}"`;
const avatarContent = picSrc
? `<img src="${picSrc}" alt="" class="vl-avatar-img" loading="lazy" decoding="async">`
: iconHtml || flagIconHtml || `<span class="vl-avatar-letter" style="color:#fff;background:${color}">${initial}</span>`;
: iconHtml || silHtml;
wrap.innerHTML = `
<div class="vl-compact">
@ -1902,9 +1904,11 @@ function makeVoiceRow(v) {
? `<input type="text" class="vl-inline-edit vl-name-input" data-field="name" value="${escHtml(dispName)}" title="Display Name" placeholder="Name">`
: `<span class="vl-name" title="${escHtml(v.id)}">${escHtml(dispName)}</span>`}
<div class="vl-meta">
<span class="vl-type-label ${isClone ? 'vl-type-clone' : 'vl-type-design'}">${isClone ? 'Clone' : 'Design'}</span>
<span class="vl-lang-label" title="${escHtml(currentFlag || langCode)}">${flagEmoji} ${escHtml(langCode)}</span>
${gender ? `<span class="vl-gender-label ${genderClass[gender]||'g-n'}" title="${genderLabel[gender]||''}">${genderMap[gender]||'?'} ${genderLabel[gender]||''}</span>` : ''}
${benchText !== '-' ? `<span class="vl-bench-chip ${benchCls}" title="${escHtml(benchTitle)}"><span class="mdi mdi-timer-outline"></span> ${escHtml(benchText)}</span>` : ''}
<div class="vr-rating" style="font-size:13px;min-height:unset">${starsHtml}</div>
<span class="vl-type-label ${isClone ? 'vl-type-clone' : 'vl-type-design'}">${isClone ? 'Clone' : 'Design'}</span>
</div>
</div>
<div class="vr-play-group">