Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
db76289660 | ||
|
|
702780c61b | ||
|
|
eceb33052d | ||
|
|
32e89cca73 | ||
|
|
878fc3f8ca | ||
|
|
954e066859 | ||
|
|
ea7e349fc2 | ||
|
|
557fc77a52 | ||
|
|
d788ca39ec | ||
|
|
00f7334580 | ||
|
|
c5c0fb6b03 |
@@ -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**; if a game reply does not start, a **Läs senaste repliken** button appears in the dialogue, with the same action also available in voice settings. 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.
|
||||||
|
|
||||||
|
|||||||
@@ -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.37
|
version: 0.1.42
|
||||||
appVersion: "0.1.37"
|
appVersion: "0.1.42"
|
||||||
+17
-6
@@ -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');
|
||||||
@@ -93,7 +93,6 @@
|
|||||||
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;
|
||||||
let speechActivatedByGesture = false;
|
|
||||||
let audioContext;
|
let audioContext;
|
||||||
let voiceDisclosureAcknowledged = false;
|
let voiceDisclosureAcknowledged = false;
|
||||||
let adminOffset = 0;
|
let adminOffset = 0;
|
||||||
@@ -219,7 +218,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);
|
||||||
if (/Uppläsningen startade inte/.test(message)) showSpeechRecovery(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) {
|
||||||
@@ -227,8 +227,8 @@
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
function primeSpeechFromGesture(event) {
|
function primeSpeechFromGesture(event) {
|
||||||
if (speechActivatedByGesture || !event.isTrusted) return;
|
if (!event.isTrusted) return;
|
||||||
speechActivatedByGesture = voiceController.activateFromUserGesture();
|
voiceController.activateFromUserGesture();
|
||||||
}
|
}
|
||||||
document.addEventListener('pointerdown', primeSpeechFromGesture, true);
|
document.addEventListener('pointerdown', primeSpeechFromGesture, true);
|
||||||
document.addEventListener('keydown', primeSpeechFromGesture, true);
|
document.addEventListener('keydown', primeSpeechFromGesture, true);
|
||||||
@@ -267,8 +267,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 = () => {
|
||||||
|
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.');
|
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());
|
||||||
@@ -347,7 +355,6 @@
|
|||||||
auth.hidden = true;
|
auth.hidden = true;
|
||||||
adminView.hidden = true;
|
adminView.hidden = true;
|
||||||
play.hidden = false;
|
play.hidden = false;
|
||||||
document.querySelector('#version-footer').hidden = true;
|
|
||||||
refreshMicrophone();
|
refreshMicrophone();
|
||||||
messageField.focus();
|
messageField.focus();
|
||||||
}
|
}
|
||||||
@@ -731,6 +738,10 @@
|
|||||||
refreshMicrophone();
|
refreshMicrophone();
|
||||||
voiceController.stopListening();
|
voiceController.stopListening();
|
||||||
voiceController.cancelSpeech();
|
voiceController.cancelSpeech();
|
||||||
|
// cancel() above may also have discarded Safari's silent speech-channel
|
||||||
|
// primer. Restore it synchronously inside the submit gesture, before
|
||||||
|
// waiting for the API response that will be read aloud.
|
||||||
|
voiceController.activateFromUserGesture();
|
||||||
messageField.value = '';
|
messageField.value = '';
|
||||||
try {
|
try {
|
||||||
if (stage === 'biography') await handleBiography(message);
|
if (stage === 'biography') await handleBiography(message);
|
||||||
|
|||||||
+3
-1
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
|
||||||
@@ -21,9 +23,12 @@ grep -q "if (options.speak !== false && location.pathname !== '/admin')" index.h
|
|||||||
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 'Webbläsaren har startat talsyntesen' 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
|
||||||
|
|||||||
@@ -130,6 +130,31 @@ test('TTS selects Swedish fallback, applies rate, and cancellation invalidates c
|
|||||||
assert.equal(h.controller.getState(), 'IDLE');
|
assert.equal(h.controller.getState(), 'IDLE');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('a player gesture restores the iOS speech primer after cancelling a queued reply', () => {
|
||||||
|
const h = makeHarness();
|
||||||
|
assert.equal(h.controller.activateFromUserGesture(), true);
|
||||||
|
assert.equal(h.synthesis.spoken[0].text, ' ');
|
||||||
|
h.controller.speak('Tidigare replik');
|
||||||
|
h.controller.cancelSpeech();
|
||||||
|
const countAfterCancel = h.synthesis.spoken.length;
|
||||||
|
assert.equal(h.controller.activateFromUserGesture(), true);
|
||||||
|
assert.equal(h.synthesis.spoken.length, countAfterCancel + 1);
|
||||||
|
assert.equal(h.synthesis.spoken.at(-1).text, ' ');
|
||||||
|
h.controller.speak('Nytt svar');
|
||||||
|
assert.equal(h.synthesis.spoken.at(-1).text, 'Nytt svar');
|
||||||
|
});
|
||||||
|
|
||||||
|
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, /Webbläsaren har startat talsyntesen/);
|
||||||
|
assert.match(h.states.at(-1).message, /Läs senaste repliken/);
|
||||||
|
});
|
||||||
|
|
||||||
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);
|
||||||
@@ -165,6 +190,16 @@ test('speech start timeout tells the player how to recover when mobile playback
|
|||||||
assert.equal(h.synthesis.cancelled, cancelledBeforeRetry);
|
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', () => {
|
||||||
const profile = GameVoice.characterVoiceProfile;
|
const profile = GameVoice.characterVoiceProfile;
|
||||||
const masculine = profile('masculine', 'character-1');
|
const masculine = profile('masculine', 'character-1');
|
||||||
@@ -192,6 +227,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.at(-1).onstart();
|
||||||
assert.equal(h.controller.getState(), 'SPEAKING');
|
assert.equal(h.controller.getState(), 'SPEAKING');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -100,6 +100,9 @@
|
|||||||
// same turn as cancel(). Do not clear an already-empty native queue.
|
// same turn as cancel(). Do not clear an already-empty native queue.
|
||||||
if (wasQueued) {
|
if (wasQueued) {
|
||||||
try { win.speechSynthesis?.cancel(); } catch (_) { /* Best effort. */ }
|
try { win.speechSynthesis?.cancel(); } catch (_) { /* Best effort. */ }
|
||||||
|
// cancel() also removes the silent user-gesture primer from the native
|
||||||
|
// queue. A later reply must prime again from the next player gesture.
|
||||||
|
speechPrimed = false;
|
||||||
}
|
}
|
||||||
if (!recognition) setState('IDLE');
|
if (!recognition) setState('IDLE');
|
||||||
}
|
}
|
||||||
@@ -149,6 +152,10 @@
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
cancelSpeech();
|
cancelSpeech();
|
||||||
|
// This runs synchronously from the microphone button gesture. If
|
||||||
|
// cancelSpeech() removed the earlier primer, restore it before starting
|
||||||
|
// recognition so a spoken reply can follow the transcript.
|
||||||
|
activateFromUserGesture();
|
||||||
const token = ++generation;
|
const token = ++generation;
|
||||||
let instance;
|
let instance;
|
||||||
try { instance = new Recognition(); }
|
try { instance = new Recognition(); }
|
||||||
@@ -205,7 +212,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 +224,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';
|
||||||
@@ -230,6 +241,9 @@
|
|||||||
if (speechStartTimer !== null) win.clearTimeout(speechStartTimer);
|
if (speechStartTimer !== null) win.clearTimeout(speechStartTimer);
|
||||||
speechStartTimer = null;
|
speechStartTimer = null;
|
||||||
if (typeof voiceOptions.onStart === 'function') voiceOptions.onStart();
|
if (typeof voiceOptions.onStart === 'function') voiceOptions.onStart();
|
||||||
|
// onstart confirms the browser speech engine accepted the utterance;
|
||||||
|
// it cannot confirm that sound reached the device's speakers.
|
||||||
|
setState('SPEAKING', 'Webbläsaren har startat talsyntesen. Om du inte hör ljud, tryck på Läs senaste repliken.');
|
||||||
};
|
};
|
||||||
utterance.onend = () => {
|
utterance.onend = () => {
|
||||||
if (token !== generation) return;
|
if (token !== generation) return;
|
||||||
@@ -240,7 +254,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,9 +262,13 @@
|
|||||||
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;
|
||||||
|
|||||||
Reference in New Issue
Block a user