added voice functionality and increased avatar size
All checks were successful
Deploy FluentGerman.ai / deploy (push) Successful in 53s
All checks were successful
Deploy FluentGerman.ai / deploy (push) Successful in 53s
This commit is contained in:
@@ -845,9 +845,20 @@ tr:hover td {
|
||||
/* ── Avatar ───────────────────────────────────────────────────────── */
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.avatar-container.speaking {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.avatar-container.speaking .avatar-ring {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 20px var(--accent-glow);
|
||||
animation: avatarSpeakPulse 1.2s infinite;
|
||||
}
|
||||
|
||||
.avatar-ring {
|
||||
@@ -1199,4 +1210,21 @@ tr:hover td {
|
||||
color: var(--text-muted);
|
||||
opacity: 0.6;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
@keyframes avatarSpeakPulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.15);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
@@ -30,7 +30,7 @@
|
||||
<button type="submit" class="btn btn-primary btn-block">Sign In</button>
|
||||
</form>
|
||||
</div>
|
||||
<span class="version-label">v0.1.1</span>
|
||||
<span class="version-label">v0.2.0</span>
|
||||
</div>
|
||||
|
||||
<script src="/js/api.js"></script>
|
||||
|
||||
@@ -199,8 +199,19 @@ class VoiceManager {
|
||||
const audioBlob = await response.blob();
|
||||
const audioUrl = URL.createObjectURL(audioBlob);
|
||||
const audio = new Audio(audioUrl);
|
||||
|
||||
// Visual feedback
|
||||
const avatarContainer = document.querySelector('.avatar-container');
|
||||
if (avatarContainer) avatarContainer.classList.add('speaking');
|
||||
|
||||
await audio.play();
|
||||
return new Promise(resolve => { audio.onended = resolve; });
|
||||
|
||||
return new Promise(resolve => {
|
||||
audio.onended = () => {
|
||||
if (avatarContainer) avatarContainer.classList.remove('speaking');
|
||||
resolve();
|
||||
};
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('[Voice] API TTS failed:', e);
|
||||
|
||||
Reference in New Issue
Block a user