arcane-os 0.46.0 → 0.48.0

package/runtime/arcane/components/speech.html

@@ -34,7 +34,8 @@
         user-select: none;
     }
 
-    button:focus-visible {
+    button:focus-visible,
+    #recognitionLanguage:focus-visible {
         outline: .2rem solid var(--arcane-focus, var(--focus-color));
         outline-offset: .18rem;
     }
@@ -85,6 +86,32 @@
         min-width: 0;
     }
 
+    .recognition_language {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: .35rem .6rem;
+        margin-block-end: .35rem;
+        font-size: .86rem;
+    }
+
+    .recognition_language[hidden] {
+        display: none;
+    }
+
+    #recognitionLanguage {
+        box-sizing: border-box;
+        width: 10rem;
+        max-width: 100%;
+        min-height: 2.25rem;
+        padding: .35rem .5rem;
+        border: 1px solid var(--arcane-border, var(--border-color));
+        border-radius: var(--arcane-radius-small, .4rem);
+        background: var(--arcane-surface, var(--background-color));
+        color: var(--arcane-text, var(--text-color));
+        font: inherit;
+    }
+
     .speech_status {
         margin: 0;
         color: var(--arcane-muted, var(--text-color));
@@ -162,6 +189,25 @@
 <button id="sttActivationButton" type="button" hidden disabled>Start transcription</button>
 <button id="stopButton" type="button" class="hidden" disabled>Send</button>
 <div class="speech_feedback">
+    <label id="recognitionLanguageControl" class="recognition_language" hidden>
+        Recognition language
+        <input id="recognitionLanguage" type="text" list="recognitionLanguages" placeholder="Browser default" title="Recognition language tag, such as en-US or es-MX" autocomplete="off" spellcheck="false">
+        <datalist id="recognitionLanguages">
+            <option value="en-US">English (United States)</option>
+            <option value="en-GB">English (United Kingdom)</option>
+            <option value="es-MX">Spanish (Mexico)</option>
+            <option value="es-ES">Spanish (Spain)</option>
+            <option value="fr-FR">French</option>
+            <option value="de-DE">German</option>
+            <option value="it-IT">Italian</option>
+            <option value="pt-BR">Portuguese (Brazil)</option>
+            <option value="ja-JP">Japanese</option>
+            <option value="ko-KR">Korean</option>
+            <option value="zh-CN">Chinese (Mandarin, mainland China)</option>
+            <option value="hi-IN">Hindi</option>
+            <option value="ar-SA">Arabic (Saudi Arabia)</option>
+        </datalist>
+    </label>
     <p id="speechStatus" class="speech_status" role="status" aria-live="polite"></p>
     <progress
         id="sttActivationProgress"
@@ -191,6 +237,7 @@
         }
     );
     const aiModuleImport = import('../modules/AI.js');
+    const providerRuntimeImport = import('../modules/AIProviderRuntime.js');
     const {
         requestAIRuntimeIntent,
         subscribeAIRuntimeState
@@ -200,6 +247,8 @@
         formatAIRuntimeProgress
     } = await import('../modules/ComponentContracts.js');
     const {getBrowserDeviceClass} = await browserDeviceImport;
+    const {getAIProviderRuntime} = await providerRuntimeImport;
+    const providerRuntime = getAIProviderRuntime();
 
     const host = this;
     const deviceClass = getBrowserDeviceClass();
@@ -211,6 +260,7 @@
             source: 'arcane.component.speech',
             eventTypes: [
                 'speech-ready',
+                'speech-transcription-progress',
                 'speech-transcription-complete',
                 'speech-transcription-error',
                 'speech-transcription-cancelled',
@@ -229,6 +279,8 @@
     const stopButton = shadowRoot.querySelector('#stopButton');
     const muteButton = shadowRoot.querySelector('#muteButton');
     const speechStatus = shadowRoot.querySelector('#speechStatus');
+    const recognitionLanguageControl = shadowRoot.querySelector('#recognitionLanguageControl');
+    const recognitionLanguageInput = shadowRoot.querySelector('#recognitionLanguage');
     const silenceDuration = 0;
     const runtimeStateAbortController = new AbortController();
 
@@ -237,6 +289,7 @@
     let microphonePermissionStatus = null;
     let microphonePermissionListener = null;
     let captureSession = null;
+    let nativeCaptureSession = null;
     let recordingRequested = false;
     let recordingGeneration = 0;
     let transcriptionGeneration = 0;
@@ -254,6 +307,18 @@
     let transcriptionOperationId = null;
     let ttsOperationId = null;
     let destroyed = false;
+    let recognitionLanguage = is.string(host.recognitionLanguage)
+        ? host.recognitionLanguage
+        : navigator.language || '';
+    Object.defineProperty(host, 'recognitionLanguage', {
+        configurable: true,
+        enumerable: true,
+        get: function getRecognitionLanguage() {
+            return recognitionLanguage;
+        },
+        set: setRecognitionLanguage
+    });
+    recognitionLanguageInput.value = recognitionLanguage;
 
     function nextSpeechOperationId(kind) {
         eventOperationSequence += 1;
@@ -345,6 +410,7 @@
 
     const initialMutedWasHydrated = is.boolean(host.initialMuted);
     host.initialMuted = initialMutedWasHydrated ? host.initialMuted : true;
+    host.displayTranscription = host.displayTranscription !== false;
     host.muted = true;
     host.configure = configure;
     host.destroy = destroy;
@@ -362,8 +428,8 @@
     host.setMuted = setMuted;
     host.availability = {
         microphone: transcriptionEnabled && Boolean(
-            navigator.mediaDevices?.getUserMedia
-            && globalThis.MediaRecorder
+            (navigator.mediaDevices?.getUserMedia && globalThis.MediaRecorder)
+            || globalThis.SpeechRecognition || globalThis.webkitSpeechRecognition
         ),
         stt: false,
         tts: false
@@ -392,6 +458,7 @@
     recordButton.addEventListener('blur', handleRecordBlur, lifecycleListenerOptions);
     stopButton.addEventListener('click', stop, lifecycleListenerOptions);
     muteButton.addEventListener('click', muteToggle, lifecycleListenerOptions);
+    recognitionLanguageInput.addEventListener('input', updateRecognitionLanguage, lifecycleListenerOptions);
     window.addEventListener('ai-ready', synchronizeAIReadiness, lifecycleListenerOptions);
     window.addEventListener(
         'pagehide',
@@ -473,10 +540,28 @@
             host.initialMuted = configuredMuted;
             applyConfiguredMutedState(configuredMuted);
         }
+        if (Object.prototype.hasOwnProperty.call(options, 'recognitionLanguage')) {
+            host.recognitionLanguage = options.recognitionLanguage;
+        }
+        if (Object.prototype.hasOwnProperty.call(options, 'displayTranscription')) {
+            host.displayTranscription = options.displayTranscription !== false;
+        }
 
         return host;
     }
 
+    function setRecognitionLanguage(language) {
+        if (!is.string(language)) {
+            throw new TypeError('Recognition language must be a BCP47 language tag string.');
+        }
+        recognitionLanguage = language;
+        recognitionLanguageInput.value = language;
+    }
+
+    function updateRecognitionLanguage() {
+        host.recognitionLanguage = recognitionLanguageInput.value;
+    }
+
     function updateMicrophoneAvailability(available) {
         if (destroyed) {
             return;
@@ -613,6 +698,12 @@
     }
 
     function renderControls() {
+        recognitionLanguageControl.hidden = !transcriptionEnabled
+            || !providerRuntime.supportsTranscriptionCapture();
+        recognitionLanguageInput.disabled = destroyed
+            || recordingRequested
+            || Boolean(nativeCaptureSession)
+            || transcriptionActive;
         if (!transcriptionEnabled) {
             recordButton.hidden = true;
             recordButton.disabled = true;
@@ -626,24 +717,25 @@
         }
         const transcriptionReady = sttRole.state === 'ready';
         const microphoneReady = host.availability.microphone
-            && is.function(globalThis.MediaRecorder)
-            && is.function(navigator.mediaDevices?.getUserMedia);
+            && (providerRuntime.supportsTranscriptionCapture()
+                || (is.function(globalThis.MediaRecorder)
+                    && is.function(navigator.mediaDevices?.getUserMedia)));
         const activationVisible = sttActivationController.visible;
         recordButton.hidden = activationVisible;
         recordButton.disabled = !transcriptionReady
             || !microphoneReady
-            || sttRole.busy
+            || (sttRole.busy && !nativeCaptureSession)
             || transcriptionActive
             || destroyed;
         stopButton.disabled = destroyed
             || !transcriptionReady
-            || sttRole.busy
-            || captureSession?.recorder.state !== 'recording';
+            || (sttRole.busy && !nativeCaptureSession)
+            || (!nativeCaptureSession && captureSession?.recorder.state !== 'recording');
         recordButton.title = transcriptionButtonTitle();
         recordButton.setAttribute('aria-label', recordButton.title);
         recordButton.setAttribute(
             'aria-pressed',
-            String(recordingRequested || Boolean(captureSession))
+            String(recordingRequested || Boolean(captureSession) || Boolean(nativeCaptureSession))
         );
         sttActivationButton.hidden = !activationVisible;
         sttActivationButton.disabled = destroyed
@@ -759,10 +851,21 @@
                     describeSTTRole()
                 );
             }
-        } else if (transcriptionEnabled) {
+        } else if (transcriptionEnabled
+            && (recognitionLanguageControl.hidden
+                || sttRole.state !== 'ready'
+                || !host.availability.microphone
+                || sttRole.busy
+                || sttActivationController.pending)) {
             messages.push(describeSTTRole());
         }
-        messages.push(describeTTSRole());
+        if (recognitionLanguageControl.hidden
+            || pendingTTSIntent
+            || pendingUnmute
+            || ['loading', 'unloading', 'error'].includes(ttsRole.state)
+            || ttsRole.busy) {
+            messages.push(describeTTSRole());
+        }
         if ((transcriptionEnabled && sttRole.state === 'error')
             || ttsRole.state === 'error') {
             tone = 'error';
@@ -1288,21 +1391,23 @@
                 }
             }
         );
-        transcriptionOperationId = null;
+        if (transcriptionOperationId === operationId) transcriptionOperationId = null;
         return accepted;
     }
 
     async function record() {
+        const liveCapture = providerRuntime.supportsTranscriptionCapture();
         if (
             !transcriptionEnabled
             || destroyed
             || sttRole.state !== 'ready'
             || sttRole.busy
             || !host.availability.microphone
-            || !is.function(globalThis.MediaRecorder)
-            || !is.function(navigator.mediaDevices?.getUserMedia)
+            || (!liveCapture && (!is.function(globalThis.MediaRecorder)
+                || !is.function(navigator.mediaDevices?.getUserMedia)))
             || recordingRequested
             || captureSession
+            || nativeCaptureSession
             || transcriptionActive
         ) {
             resetRecordPress();
@@ -1322,6 +1427,8 @@
         renderControls();
         renderStatus();
 
+        if (liveCapture) return startNativeRecognition(generation, operationId);
+
         let stream;
         try {
             stream = await navigator.mediaDevices.getUserMedia({ audio: true });
@@ -1461,6 +1568,132 @@
         }
     }
 
+    function startNativeRecognition(generation, operationId) {
+        const session = {
+            generation,
+            operationId,
+            controller: new AbortController(),
+            capture: null,
+            text: [],
+            interim: '',
+            cancelled: false,
+            error: null
+        };
+        nativeCaptureSession = session;
+        function currentNativeCapture() {
+            return !destroyed && !session.cancelled
+                && nativeCaptureSession === session
+                && generation === recordingGeneration;
+        }
+        function displayNativeRecognitionText() {
+            if (!currentNativeCapture()) return;
+            localStatus = {
+                message: (host.displayTranscription
+                    ? session.text.join('') + session.interim
+                    : '') || 'Listening. Release to finish.',
+                tone: '',
+                owner: 'recording',
+                generation
+            };
+            renderStatus();
+            publishNativeRecognitionProgress();
+        }
+        function publishNativeRecognitionProgress() {
+            const text = session.text.join('');
+            dispatchSpeechEvent(
+                'speech-transcription-progress',
+                {text, interim: session.interim},
+                {
+                    operationId,
+                    publicDetail: {text, interim: session.interim}
+                }
+            );
+        }
+        async function finishNativeRecognition(error = null) {
+            if (!currentNativeCapture()) return;
+            if (session.interim) {
+                session.interim = '';
+                publishNativeRecognitionProgress();
+                if (!currentNativeCapture()) return;
+            }
+            nativeCaptureSession = null;
+            recordingRequested = false;
+            resetRecordPress();
+            clearRecordingStatus(generation);
+            if (error && error !== session.error) {
+                session.error = error;
+                reportTranscriptionError(error);
+            }
+            // Keep confirmed final words after a service/cleanup failure. Only
+            // explicit cancellation or supersession abandons this submission.
+            if (session.text.length && !destroyed && !session.cancelled
+                && generation === recordingGeneration) {
+                transcriptionOperationId = operationId;
+                await transcribe(session.text.join(''));
+            } else if (transcriptionOperationId === operationId) {
+                transcriptionOperationId = null;
+            }
+            renderControls();
+            renderStatus();
+        }
+        try {
+            session.capture = providerRuntime.createTranscriptionCapture(
+                {
+                    continuous: true,
+                    language: recognitionLanguage || undefined,
+                    onSegment: function retainFinalRecognition(segment) {
+                        if (!currentNativeCapture()) return;
+                        session.text.push(segment.text);
+                        session.interim = '';
+                        displayNativeRecognitionText();
+                    },
+                    onInterim: function displayInterimRecognition(result) {
+                        if (!currentNativeCapture()) return;
+                        session.interim = result.text;
+                        displayNativeRecognitionText();
+                    },
+                    onError: function reportNativeRecognitionFailure(error) {
+                        if (!currentNativeCapture()) return;
+                        session.error = error;
+                        reportTranscriptionError(error);
+                    }
+                }
+            );
+            if (!session.capture) throw new Error('The selected live transcription service is unavailable.');
+            session.capture.done.then(
+                function nativeRecognitionCompleted() {
+                    return finishNativeRecognition();
+                },
+                finishNativeRecognition
+            ).catch(
+                function reportNativeRecognitionSettlementFailure(error) {
+                    if (destroyed || generation !== recordingGeneration) return;
+                    reportTranscriptionError(error);
+                }
+            );
+            // No awaited preparation precedes the browser's gesture-bound start.
+            const starting = session.capture.start({signal: session.controller.signal});
+            return Promise.resolve(starting).catch(
+                function reportNativeRecognitionStartupFailure(error) {
+                    if (!currentNativeCapture()) return false;
+                    session.capture.cancel();
+                    nativeCaptureSession = null;
+                    recordingRequested = false;
+                    resetRecordPress();
+                    if (error !== session.error) reportTranscriptionError(error);
+                    return false;
+                }
+            );
+        } catch (error) {
+            session.capture?.cancel();
+            nativeCaptureSession = null;
+            recordingRequested = false;
+            resetRecordPress();
+            if (error !== session.error) reportTranscriptionError(error);
+            return false;
+        }
+    }
+
     function stopAfterSilence() {
         clearSilenceTimer();
         stop();
@@ -1483,6 +1716,12 @@
     }
 
     function stop() {
+        if (nativeCaptureSession) {
+            recordingRequested = false;
+            nativeCaptureSession.capture.stop();
+            renderControls();
+            return true;
+        }
         const pendingCaptureStart = recordingRequested && !captureSession;
         const generation = recordingGeneration;
         const operationId = transcriptionOperationId;
@@ -1703,6 +1942,7 @@
     function cancelSTTOperation(reason) {
         const hadActiveOperation = recordingRequested
             || Boolean(captureSession)
+            || Boolean(nativeCaptureSession)
             || transcriptionActive;
         recordingGeneration += 1;
         transcriptionGeneration += 1;
@@ -1713,6 +1953,14 @@
         clearSilenceTimer();
         resetRecordPress();
 
+        if (nativeCaptureSession) {
+            const session = nativeCaptureSession;
+            nativeCaptureSession = null;
+            session.cancelled = true;
+            session.controller.abort();
+            session.capture?.cancel();
+        }
+
         if (captureSession) {
             captureSession.cancelled = true;
             if (captureSession.recorder.state !== 'inactive') {
@@ -1769,6 +2017,7 @@
 
     function handlePageHide(event) {
         if (event.persisted === true) {
+            if (nativeCaptureSession) stop();
             return;
         }
         destroy();

package/runtime/arcane/components/voice-transcription.html

@@ -80,7 +80,7 @@
 
 <section class="voice-transcription">
     <p id="description" class="description" part="description"></p>
-    <section id="transcript" class="transcript" part="transcript"></section>
+    <section id="transcript" class="transcript" part="transcript" aria-live="polite"></section>
     <div class="transcription-feedback">
         <p id="status" class="status" part="status" role="status" aria-live="polite"></p>
         <progress
@@ -136,13 +136,16 @@
         {default:MD},
         {appendTranscription,createSTTActivationController,normalizeVoiceOptions},
         {requestAIRuntimeIntent,subscribeAIRuntimeState},
-        {default:ContinuousVoiceCapture}
+        {default:ContinuousVoiceCapture},
+        {getAIProviderRuntime}
     ]=await Promise.all([
         import('../modules/MD.js'),
         import('../modules/ComponentContracts.js'),
         import('../modules/AIRuntimeState.js'),
-        import('../modules/ContinuousVoiceCapture.js')
+        import('../modules/ContinuousVoiceCapture.js'),
+        import('../modules/AIProviderRuntime.js')
     ]);
+    const providerRuntime=getAIProviderRuntime();
     const description=host.shadowRoot.querySelector('#description');
     const transcriptElement=host.shadowRoot.querySelector('#transcript');
     const status=host.shadowRoot.querySelector('#status');
@@ -385,6 +388,7 @@
             flushing:false,
             processing:'idle',
             queue:[],
+            interim:'',
             failure:null,
             captureError:null,
             worker:null,
@@ -396,15 +400,26 @@
             if(!isCurrentContinuousSession(session)||!session.listening){
                 return false;
             }
-            session.capture=new ContinuousVoiceCapture({
+            const captureOptions={
                 ...options.capture,
                 onSegment:function capturedSegment(clip){
                     if(!isCurrentContinuousSession(session)){
                         return;
                     }
-                    session.queue.push({...clip,stage:'transcribe',segment:null});
+                    session.queue.push({
+                        ...clip,
+                        stage:is.string(clip.text)?'append':'transcribe',
+                        segment:is.string(clip.text)?clip.text:null
+                    });
+                    if(is.string(clip.text)) session.interim='';
+                    renderTranscript();
                     processContinuousQueue(session);
                 },
+                onInterim:function displayInterimRecognition(result){
+                    if(!isCurrentContinuousSession(session)) return;
+                    session.interim=result.text;
+                    renderTranscript();
+                },
                 onState:function captureStateChanged(nextState){
                     if(!isCurrentContinuousSession(session)){
                         return;
@@ -412,8 +427,11 @@
                     session.captureState=nextState;
                     if(nextState==='stopped'||nextState==='interrupted'){
                         session.listening=false;
+                        session.interim='';
+                        renderTranscript();
                     }
                     renderContinuousState(session);
+                    settleContinuousDrain(session);
                 },
                 onError:function captureFailed(error){
                     if(!isCurrentContinuousSession(session)){
@@ -425,7 +443,29 @@
                     reportContinuousError(session,'capture',error);
                     settleContinuousDrain(session);
                 }
-            });
+            };
+            session.capture=!options.transcribe
+                ?providerRuntime.createTranscriptionCapture(captureOptions):null;
+            session.native=Boolean(session.capture);
+            if(!session.capture){
+                session.capture=new ContinuousVoiceCapture(captureOptions);
+            }else{
+                session.capture.done.then(function nativeRecognitionEnded(){
+                    if(!isCurrentContinuousSession(session)) return;
+                    session.listening=false;
+                    session.interim='';
+                    renderTranscript();
+                    if(!session.captureError) session.captureState='stopped';
+                    renderContinuousState(session);
+                    settleContinuousDrain(session);
+                }).catch(function nativeRecognitionCleanupFailed(error){
+                    if(!isCurrentContinuousSession(session)) return;
+                    session.captureError=error;
+                    session.listening=false;
+                    reportContinuousError(session,'capture',error);
+                    settleContinuousDrain(session);
+                });
+            }
             const started=await session.capture.start({
                 mediaConstraints:options.mediaConstraints,
                 signal:session.controller.signal
@@ -598,7 +638,10 @@
                         throw new TypeError('Transcription must return the complete text as a string.');
                     }
                     clip.segment=result;
-                    if(result.length===0){
+                    clip.stage='append';
+                }
+                if(clip.stage==='append'){
+                    if(clip.segment.length===0){
                         session.queue.shift();
                         const detail={sequence:clip.sequence,transcript};
                         dispatchVoiceEvent('voice-transcription-empty',detail,{
@@ -606,7 +649,7 @@
                         });
                         continue;
                     }
-                    clip.transcript=appendTranscription(transcript,result,options.separator);
+                    clip.transcript=appendTranscription(transcript,clip.segment,options.separator);
                     clip.stage='save';
                     transcript=clip.transcript;
                     renderTranscript();
@@ -740,6 +783,7 @@
             return false;
         }
         continuousSession=null;
+        renderTranscript();
         session.controller.abort();
         session.requestController?.abort();
         session.capture?.cancel();
@@ -766,7 +810,8 @@
     }
 
     async function startRecording(){
-        if(options.capture.mode==='continuous'){
+        if(options.capture.mode==='continuous'
+            ||(!options.transcribe&&providerRuntime.supportsTranscriptionCapture())){
             return startContinuousRecording();
         }
         if(!canStartVoiceRecording(sttRole,state,destroyed)){
@@ -1290,7 +1335,19 @@
     }
 
     function renderTranscript(){
-        transcriptElement.innerHTML=new MD(transcript).safeRendered;
+        // Display live recognition in the output without committing hypotheses
+        // or letting an earlier save delay later finalized text.
+        let output=transcript;
+        const session=continuousSession;
+        if(session&&isCurrentContinuousSession(session)){
+            for(const clip of session.queue){
+                if(clip.stage==='append'){
+                    output=appendTranscription(output,clip.segment,options.separator);
+                }
+            }
+            output=appendTranscription(output,session.interim,options.separator);
+        }
+        transcriptElement.innerHTML=new MD(output).safeRendered;
         transcriptElement.querySelectorAll('a').forEach(
             link=>{
                 link.target='_blank';
@@ -1366,6 +1423,16 @@
         sttActivationController.synchronize(sttRole);
         if(continuousSession){
             const session=continuousSession;
+            if(session.native&&session.listening
+                &&(sttRole.state!=='ready'
+                    ||previousRole.providerId!==sttRole.providerId
+                    ||previousRole.modelId!==sttRole.modelId)){
+                session.capture?.cancel();
+                session.listening=false;
+                session.captureState='interrupted';
+                session.interim='';
+                renderTranscript();
+            }
             if(['completing','complete'].includes(state)){
                 renderState();
                 return;

package/runtime/arcane/css/document-site.css

@@ -1,3 +1,5 @@
+@import url('./print.css');
+
 /* Reusable, progressively enhanced documentation-site layout.
  * Load after Arcane theme.css and primitives.css.
  */
@@ -944,38 +946,3 @@ body.static-doc-site{
     }
 }
 
-@media print{
-    .static-site-header,
-    .static-site-footer,
-    .static-section-nav,
-    .static-previous-next,
-    .static-related,
-    .static-document__source,
-    .skip-link{
-        display:none;
-    }
-
-    .static-site-main,
-    .static-site-main--document{
-        max-inline-size:none;
-        padding:0;
-    }
-
-    .static-document-layout{
-        display:block;
-    }
-
-    .static-document{
-        inline-size:100%;
-    }
-
-    .static-document__content table{
-        display:table;
-        overflow:visible;
-    }
-
-    .static-document__content table :where(code,kbd){
-        overflow-wrap:anywhere;
-        word-break:break-word;
-    }
-}