Compare commits

...
8 Commits
Author SHA1 Message Date
Gitea Actions 954e066859 Release 0.1.40 [auto-version-bump] 2026-10-16 00:55:53 +02:00
Ein Anderssono ea7e349fc2 Report actual speech playback state
Build and publish frontend / publish (push) Successful in 41s
2026-10-16 00:55:32 +02:00
Gitea Actions 557fc77a52 Release 0.1.39 [auto-version-bump] 2026-10-16 00:43:32 +02:00
Ein Anderssono d788ca39ec Version frontend assets and disable stale caching
Build and publish frontend / publish (push) Successful in 41s
2026-10-16 00:43:09 +02:00
Gitea Actions 00f7334580 Release 0.1.38 [auto-version-bump] 2026-10-16 00:41:18 +02:00
Ein Anderssono c5c0fb6b03 Offer speech retry after iOS playback errors
Build and publish frontend / publish (push) Successful in 43s
2026-10-16 00:40:52 +02:00
Gitea Actions cc17b501cc Release 0.1.37 [auto-version-bump] 2026-10-15 23:58:56 +02:00
Ein Anderssono 1c8d429f81 Show an inline speech retry control
Build and publish frontend / publish (push) Successful in 42s
2026-10-15 23:58:34 +02:00
8 changed files with 105 additions and 12 deletions
+1 -1
View File
@@ -20,7 +20,7 @@ When a character or NPC is created, its saved voice identity is masculine, femin
System voice commands require the prefix `röstkommando`: `upprepa`, `avbryt`, `hjälp`, `alternativ`, or `paus`. Without the prefix, the same words remain ordinary dialogue. Speech recognition and synthesis are browser-dependent; release acceptance must record which real iPhone/Safari/VoiceOver and Android/Chrome/TalkBack combinations were actually checked. System voice commands require the prefix `röstkommando`: `upprepa`, `avbryt`, `hjälp`, `alternativ`, or `paus`. Without the prefix, the same words remain ordinary dialogue. Speech recognition and synthesis are browser-dependent; release acceptance must record which real iPhone/Safari/VoiceOver and Android/Chrome/TalkBack combinations were actually checked.
On iPhone and iPad, Safari may require a direct tap or key press before it permits speech output. The frontend primes speech silently on the first player gesture and then reads game replies automatically. If the first-visit introduction did not play, use **Läs introduktionen igen**; while playing, **Läs senaste repliken** in the voice settings is the recovery action if Safari blocks a reply. The introduction is only marked as heard after the browser reports that speech actually started. The speech queue avoids an immediate `cancel()` followed by `speak()`, which older WebKit releases can drop. On iPhone and iPad, Safari may require a direct tap or key press before it permits speech output. The frontend primes speech silently on the first player gesture and then reads game replies automatically. The status reports speech as in progress only after the browser's `onstart` event. Voice settings include **Testa ljudet**; if a game reply does not start, a **Läs senaste repliken** button appears in the dialogue. When Safari reports speech started but the player hears nothing, the status suggests checking device volume and audio output. The introduction is only marked as heard after the browser reports that speech actually started. The speech queue avoids an immediate `cancel()` followed by `speak()`, which older WebKit releases can drop.
The browser and API stay on the same public origin, `https://ai-spel.k3s.k0.nu`. The ingress routes `/` to this frontend service and routes `/api`, `/version`, and `/health` to the Rust service. That keeps the current server-side session cookie same-origin and avoids browser CORS configuration. The browser and API stay on the same public origin, `https://ai-spel.k3s.k0.nu`. The ingress routes `/` to this frontend service and routes `/api`, `/version`, and `/health` to the Rust service. That keeps the current server-side session cookie same-origin and avoids browser CORS configuration.
+1 -1
View File
@@ -1 +1 @@
0.1.36 0.1.40
+2 -2
View File
@@ -2,5 +2,5 @@ apiVersion: v2
name: ai-spel-frontend name: ai-spel-frontend
description: Static web frontend for the Swedish life simulator description: Static web frontend for the Swedish life simulator
type: application type: application
version: 0.1.36 version: 0.1.40
appVersion: "0.1.36" appVersion: "0.1.40"
+41 -3
View File
@@ -72,7 +72,7 @@
</section> </section>
</main> </main>
<footer id="version-footer">Frontend <span id="frontend-version">__FRONTEND_VERSION__</span> · API <span id="api-version">hämtar version…</span></footer> <footer id="version-footer">Frontend <span id="frontend-version">__FRONTEND_VERSION__</span> · API <span id="api-version">hämtar version…</span></footer>
<script src="/voice.js"></script> <script src="/voice.js?v=__FRONTEND_VERSION__"></script>
<script> <script>
const auth = document.querySelector('#auth'); const auth = document.querySelector('#auth');
const play = document.querySelector('#play'); const play = document.querySelector('#play');
@@ -89,6 +89,7 @@
let pendingDialogue = null; let pendingDialogue = null;
let latestAssistantText = ''; let latestAssistantText = '';
let latestAssistantVoice = {role: 'narrator', voiceIdentity: 'neutral'}; let latestAssistantVoice = {role: 'narrator', voiceIdentity: 'neutral'};
let speechRecoveryElement = null;
const voiceSettingsKey = 'ai-spel.voice-settings.v2'; const voiceSettingsKey = 'ai-spel.voice-settings.v2';
let voiceSettings = window.GameVoice.loadSettings(localStorage, voiceSettingsKey, 'ai-spel.voice-settings.v1'); let voiceSettings = window.GameVoice.loadSettings(localStorage, voiceSettingsKey, 'ai-spel.voice-settings.v1');
let voiceController; let voiceController;
@@ -117,7 +118,7 @@
latestAssistantText = content; latestAssistantText = content;
latestAssistantVoice = options.voice || {role: 'narrator', voiceIdentity: 'neutral'}; latestAssistantVoice = options.voice || {role: 'narrator', voiceIdentity: 'neutral'};
if (options.speak !== false && location.pathname !== '/admin') { if (options.speak !== false && location.pathname !== '/admin') {
voiceController?.speak(content, latestAssistantVoice); voiceController?.speak(content, {...latestAssistantVoice, onStart: clearSpeechRecovery});
} }
} }
return line; return line;
@@ -156,6 +157,33 @@
const authVoiceStatus = document.querySelector('#auth-voice-status'); const authVoiceStatus = document.querySelector('#auth-voice-status');
if (authVoiceStatus && !auth.hidden && message) authVoiceStatus.textContent = message; if (authVoiceStatus && !auth.hidden && message) authVoiceStatus.textContent = message;
} }
function clearSpeechRecovery() {
speechRecoveryElement?.remove();
speechRecoveryElement = null;
const status = document.querySelector('#voice-status');
if (status?.textContent.startsWith('Uppläsningen startade inte')) setVoiceStatus('Läser upp dialog.');
}
function showSpeechRecovery(message) {
clearSpeechRecovery();
const item = document.createElement('li');
item.dataset.role = 'voice-controls';
item.setAttribute('aria-label', 'Uppläsning kunde inte starta');
const explanation = document.createElement('p');
explanation.textContent = message;
const retry = document.createElement('button');
retry.type = 'button';
retry.textContent = 'Läs senaste repliken';
retry.addEventListener('click', () => {
voiceController.activateFromUserGesture();
if (voiceController.speak(latestAssistantText, {...latestAssistantVoice, onStart: clearSpeechRecovery})) {
clearSpeechRecovery();
}
});
item.append(explanation, retry);
transcript.append(item);
item.scrollIntoView({block: 'end'});
speechRecoveryElement = item;
}
function refreshMicrophone() { function refreshMicrophone() {
const button = document.querySelector('#microphone'); const button = document.querySelector('#microphone');
if (button) button.disabled = play.hidden || messageField.disabled || submitBusy; if (button) button.disabled = play.hidden || messageField.disabled || submitBusy;
@@ -191,6 +219,8 @@
microphone.textContent = listening ? 'Avsluta mikrofon' : 'Starta mikrofon'; microphone.textContent = listening ? 'Avsluta mikrofon' : 'Starta mikrofon';
refreshMicrophone(); refreshMicrophone();
if (message) setVoiceStatus(message); if (message) setVoiceStatus(message);
else if (state === 'IDLE') setVoiceStatus('');
if (/Läs senaste repliken/.test(message)) showSpeechRecovery(message);
playVoiceSignal(state === 'IDLE' && /Mikrofonen är avstängd/.test(message) ? 'STOPPED' : state); playVoiceSignal(state === 'IDLE' && /Mikrofonen är avstängd/.test(message) ? 'STOPPED' : state);
}, },
onTranscript(text) { onTranscript(text) {
@@ -238,8 +268,16 @@
signalLabel.append(signals, document.createTextNode(' Ljudsignal vid röstinmatning')); fieldset.append(signalLabel); signalLabel.append(signals, document.createTextNode(' Ljudsignal vid röstinmatning')); fieldset.append(signalLabel);
item.append(fieldset); item.append(fieldset);
const speakLatest = () => { const speakLatest = () => {
if (!voiceController.speak(latestAssistantText, latestAssistantVoice)) setVoiceStatus('Talsyntes stöds inte i den här webbläsaren. Dialogen finns kvar som text.'); voiceController.activateFromUserGesture();
if (!voiceController.speak(latestAssistantText, {...latestAssistantVoice, onStart: clearSpeechRecovery})) setVoiceStatus('Talsyntes stöds inte i den här webbläsaren. Dialogen finns kvar som text.');
}; };
const testSpeech = () => {
voiceController.activateFromUserGesture();
if (!voiceController.speak('Det här är ett test av uppläsningen.', {role: 'narrator', voiceIdentity: 'neutral', onStart: clearSpeechRecovery})) {
setVoiceStatus('Talsyntes stöds inte i den här webbläsaren. Dialogen finns kvar som text.');
}
};
addVoiceButton(item, 'Testa ljudet', testSpeech);
addVoiceButton(item, 'Läs senaste repliken', speakLatest); addVoiceButton(item, 'Läs senaste repliken', speakLatest);
addVoiceButton(item, 'Upprepa', speakLatest); addVoiceButton(item, 'Upprepa', speakLatest);
addVoiceButton(item, 'Avbryt uppläsning', () => voiceController.cancelSpeech()); addVoiceButton(item, 'Avbryt uppläsning', () => voiceController.cancelSpeech());
+3 -1
View File
@@ -10,7 +10,9 @@ server {
} }
location / { location / {
add_header Cache-Control "no-cache" always; add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0" always;
add_header Pragma "no-cache" always;
add_header Expires "0" always;
try_files $uri $uri/ /index.html; try_files $uri $uri/ /index.html;
} }
} }
+7
View File
@@ -4,6 +4,8 @@ set -euo pipefail
test -s index.html test -s index.html
grep -q '<html lang="sv">' index.html grep -q '<html lang="sv">' index.html
grep -q 'id="frontend-version">__FRONTEND_VERSION__' index.html grep -q 'id="frontend-version">__FRONTEND_VERSION__' index.html
grep -q '<script src="/voice.js?v=__FRONTEND_VERSION__"></script>' index.html
grep -q 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0' nginx/default.conf
grep -q "request('/version')" index.html grep -q "request('/version')" index.html
grep -Fq "credentials: 'same-origin'" index.html grep -Fq "credentials: 'same-origin'" index.html
grep -q 'id="dialogue" aria-label="Dialoghistorik" role="log" aria-live="polite"' index.html grep -q 'id="dialogue" aria-label="Dialoghistorik" role="log" aria-live="polite"' index.html
@@ -14,14 +16,19 @@ grep -q 'id="auth-repeat-intro"' index.html
grep -q 'function playFirstVisitIntroduction' index.html grep -q 'function playFirstVisitIntroduction' index.html
grep -q 'id="auth-voice-status" role="status" aria-live="polite"' index.html grep -q 'id="auth-voice-status" role="status" aria-live="polite"' index.html
grep -q 'activateFromUserGesture' index.html grep -q 'activateFromUserGesture' index.html
grep -q 'function showSpeechRecovery' index.html
grep -q "retry.textContent = 'Läs senaste repliken'" index.html
grep -q "location.pathname !== '/admin'" index.html grep -q "location.pathname !== '/admin'" index.html
grep -q "if (options.speak !== false && location.pathname !== '/admin')" index.html grep -q "if (options.speak !== false && location.pathname !== '/admin')" index.html
grep -q 'id="microphone" aria-pressed="false"' index.html grep -q 'id="microphone" aria-pressed="false"' index.html
grep -q 'id="voice-status" role="status" aria-live="polite"' index.html grep -q 'id="voice-status" role="status" aria-live="polite"' index.html
grep -q "window.GameVoice.createVoiceController" index.html grep -q "window.GameVoice.createVoiceController" index.html
grep -q "addVoiceButton(item, 'Testa ljudet'" index.html
grep -q 'Jag förstår – starta mikrofonen' index.html grep -q 'Jag förstår – starta mikrofonen' index.html
grep -q 'supportsRecognition' voice.js grep -q 'supportsRecognition' voice.js
grep -q 'characterVoiceProfile' voice.js grep -q 'characterVoiceProfile' voice.js
grep -q 'utterance.volume = 1' voice.js
grep -q 'Uppläsningen har startat' voice.js
grep -q 'WebKit versions before Safari 27' voice.js grep -q 'WebKit versions before Safari 27' voice.js
grep -q "voiceIdentity: speakingNpc.voice_identity" index.html grep -q "voiceIdentity: speakingNpc.voice_identity" index.html
grep -q "role: 'narrator', voiceIdentity: 'neutral'" index.html grep -q "role: 'narrator', voiceIdentity: 'neutral'" index.html
+29
View File
@@ -130,6 +130,17 @@ test('TTS selects Swedish fallback, applies rate, and cancellation invalidates c
assert.equal(h.controller.getState(), 'IDLE'); assert.equal(h.controller.getState(), 'IDLE');
}); });
test('speech is reported as in progress only after the native onstart event', () => {
const h = makeHarness();
h.controller.speak('Hej.');
assert.equal(h.controller.getState(), 'QUEUED');
assert.match(h.states.at(-1).message, /Startar uppläsningen/);
h.utterances[0].onstart();
assert.equal(h.controller.getState(), 'SPEAKING');
assert.match(h.states.at(-1).message, /Uppläsningen har startat/);
assert.match(h.states.at(-1).message, /iPadens volym/);
});
test('iOS user gesture primes speech silently and idle speech is not cancelled before speak', () => { test('iOS user gesture primes speech silently and idle speech is not cancelled before speak', () => {
const h = makeHarness(); const h = makeHarness();
assert.equal(h.controller.activateFromUserGesture(), true); assert.equal(h.controller.activateFromUserGesture(), true);
@@ -155,8 +166,24 @@ test('replacing active speech waits one event-loop turn after WebKit cancel', ()
test('speech start timeout tells the player how to recover when mobile playback is blocked', () => { test('speech start timeout tells the player how to recover when mobile playback is blocked', () => {
const h = makeHarness(); const h = makeHarness();
h.controller.speak('En replik'); h.controller.speak('En replik');
const cancelledBeforeTimeout = h.synthesis.cancelled;
h.runTimer(4000); h.runTimer(4000);
assert.match(h.states.at(-1).message, /Tryck på Läs senaste repliken/); assert.match(h.states.at(-1).message, /Tryck på Läs senaste repliken/);
assert.equal(h.synthesis.cancelled, cancelledBeforeTimeout + 1);
const cancelledBeforeRetry = h.synthesis.cancelled;
h.controller.speak('Manuell återläsning');
assert.equal(h.synthesis.spoken.at(-1).text, 'Manuell återläsning');
assert.equal(h.synthesis.cancelled, cancelledBeforeRetry);
});
test('iOS not-allowed speech error offers an immediate gesture-based retry', () => {
const h = makeHarness();
h.controller.speak('En replik');
h.utterances[0].onerror({error: 'not-allowed'});
assert.match(h.states.at(-1).message, /Safari blockerade uppläsningen/);
assert.match(h.states.at(-1).message, /Läs senaste repliken/);
assert.equal(h.controller.speak('Försök igen'), true);
assert.equal(h.synthesis.spoken.at(-1).text, 'Försök igen');
}); });
test('character voice identity gives stable distinct masculine, feminine, and neutral timbres', () => { test('character voice identity gives stable distinct masculine, feminine, and neutral timbres', () => {
@@ -186,6 +213,8 @@ test('TTS and microphone are mutually exclusive', () => {
h.controller.startListening(); h.controller.startListening();
h.controller.speak('Svar'); h.controller.speak('Svar');
assert.equal(h.recognitions[0].aborted, true); assert.equal(h.recognitions[0].aborted, true);
assert.equal(h.controller.getState(), 'QUEUED');
h.utterances[0].onstart();
assert.equal(h.controller.getState(), 'SPEAKING'); assert.equal(h.controller.getState(), 'SPEAKING');
}); });
+21 -4
View File
@@ -205,7 +205,10 @@
} }
function speak(text, voiceOptions = {}) { function speak(text, voiceOptions = {}) {
if (!text || !win.speechSynthesis || !win.SpeechSynthesisUtterance) return false; if (!text || !win.speechSynthesis || !win.SpeechSynthesisUtterance) {
setState('IDLE', 'Talsyntes stöds inte i den här webbläsaren. Dialogen finns kvar som text.');
return false;
}
stopListening(); stopListening();
const hadQueuedUtterance = currentUtterance !== null; const hadQueuedUtterance = currentUtterance !== null;
if (hadQueuedUtterance) cancelSpeech(); if (hadQueuedUtterance) cancelSpeech();
@@ -214,6 +217,7 @@
try { utterance = new win.SpeechSynthesisUtterance(text); } try { utterance = new win.SpeechSynthesisUtterance(text); }
catch (_) { setState('IDLE', 'Talsyntesen kunde inte startas. Dialogen finns kvar som text.'); return false; } catch (_) { setState('IDLE', 'Talsyntesen kunde inte startas. Dialogen finns kvar som text.'); return false; }
utterance.lang = settings.language || 'sv-SE'; utterance.lang = settings.language || 'sv-SE';
utterance.volume = 1;
const profile = voiceOptions.characterId ? settings.speakerProfiles?.[voiceOptions.characterId] || {} : {}; const profile = voiceOptions.characterId ? settings.speakerProfiles?.[voiceOptions.characterId] || {} : {};
const identityProfile = characterVoiceProfile(voiceOptions.voiceIdentity, voiceOptions.characterId); const identityProfile = characterVoiceProfile(voiceOptions.voiceIdentity, voiceOptions.characterId);
const isNarrator = voiceOptions.role === 'narrator'; const isNarrator = voiceOptions.role === 'narrator';
@@ -229,6 +233,7 @@
if (token !== generation) return; if (token !== generation) return;
if (speechStartTimer !== null) win.clearTimeout(speechStartTimer); if (speechStartTimer !== null) win.clearTimeout(speechStartTimer);
speechStartTimer = null; speechStartTimer = null;
setState('SPEAKING', 'Uppläsningen har startat. Om du inte hör ljud, kontrollera iPadens volym och ljudutgång.');
if (typeof voiceOptions.onStart === 'function') voiceOptions.onStart(); if (typeof voiceOptions.onStart === 'function') voiceOptions.onStart();
}; };
utterance.onend = () => { utterance.onend = () => {
@@ -240,7 +245,7 @@
currentUtterance = null; currentUtterance = null;
setState('IDLE'); setState('IDLE');
}; };
utterance.onerror = () => { utterance.onerror = event => {
if (token !== generation) return; if (token !== generation) return;
if (speechTimer !== null) win.clearTimeout(speechTimer); if (speechTimer !== null) win.clearTimeout(speechTimer);
if (speechStartTimer !== null) win.clearTimeout(speechStartTimer); if (speechStartTimer !== null) win.clearTimeout(speechStartTimer);
@@ -248,13 +253,25 @@
speechStartTimer = null; speechStartTimer = null;
currentUtterance = null; currentUtterance = null;
generation += 1; generation += 1;
setState('IDLE', 'Uppläsningen avbröts. Dialogen finns kvar som text.'); const blocked = event?.error === 'not-allowed' || event?.error === 'service-not-allowed';
const message = blocked
? 'Safari blockerade uppläsningen. Tryck på Läs senaste repliken för att starta ljudet.'
: 'Uppläsningen avbröts. Tryck på Läs senaste repliken för att försöka igen. Dialogen finns kvar som text.';
setState('IDLE', message);
}; };
setState('SPEAKING', 'Läser upp dialog.'); setState('QUEUED', 'Startar uppläsningen.');
currentUtterance = utterance; currentUtterance = utterance;
speechStartTimer = win.setTimeout(() => { speechStartTimer = win.setTimeout(() => {
if (token !== generation || currentUtterance !== utterance) return; if (token !== generation || currentUtterance !== utterance) return;
speechStartTimer = null; speechStartTimer = null;
generation += 1;
currentUtterance = null;
if (speechTimer !== null) win.clearTimeout(speechTimer);
speechTimer = null;
// Drop a blocked native utterance now. A player retry can then call
// speak() directly from its button gesture instead of following a
// same-turn cancel() that older WebKit versions may discard.
try { win.speechSynthesis.cancel(); } catch (_) { /* Best effort. */ }
setState('IDLE', 'Uppläsningen startade inte. Tryck på Läs senaste repliken för att starta ljudet.'); setState('IDLE', 'Uppläsningen startade inte. Tryck på Läs senaste repliken för att starta ljudet.');
}, 4000); }, 4000);
speechTimer = win.setTimeout(() => { speechTimer = win.setTimeout(() => {