arcane-os 0.7.0 → 0.7.2

package/runtime/arcane/components/browser-ai-setup.html

@@ -1,18 +1,46 @@
 <link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
 <style>
     :host{display:block;min-width:0}
-    .availability{display:grid;gap:var(--arcane-space-2);margin:0}
-    .availability div{display:grid;gap:var(--arcane-space-1)}
-    .availability dt{font-weight:700}
-    .availability dd{margin:0}
-    .flag-choice{margin-block:var(--arcane-space-4)}
-    .flag-choice h3{margin-block:var(--arcane-space-2)}
-    .actions{display:flex;flex-wrap:wrap;gap:var(--arcane-space-2)}
-    p,dt,dd,li,button,a{overflow-wrap:anywhere}
-    button{white-space:normal}
-    .flag-address{display:block;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;margin-block:var(--arcane-space-2)}
-    #gpuAvailability{white-space:normal;overflow-wrap:anywhere;line-height:1.4;max-width:100%;box-sizing:border-box}
-    li{margin-block:var(--arcane-space-2)}
+    .flag-choice {
+        margin-block: var(--arcane-space-2);
+    }
+
+    .flag-choice h4 {
+        margin-block: var(--arcane-space-1);
+    }
+
+    p,
+    button,
+    a {
+        overflow-wrap: anywhere;
+    }
+
+    button {
+        white-space: normal;
+    }
+
+    .arcane-help:empty {
+        display: none;
+    }
+
+    .gpu-status {
+        box-sizing: border-box;
+        max-width: 100%;
+        line-height: 1.4;
+        white-space: normal;
+        overflow-wrap: anywhere;
+    }
+
+    .gpu-status[data-status="unknown"] {
+        background: var(--arcane-action);
+        border-color: var(--arcane-action);
+        color: var(--arcane-action-text);
+    }
+
+    summary:focus-visible {
+        outline: .18em solid var(--arcane-focus);
+        outline-offset: .18em;
+    }
 </style>
 
 <section class="arcane-card" aria-labelledby="setupTitle">
@@ -20,37 +48,28 @@
         <h2 id="setupTitle" class="arcane-section-heading">Browser AI acceleration</h2>
     </header>
     <div class="arcane-card__body">
-        <p id="browserName"></p>
-        <dl class="availability" aria-live="polite">
-            <div><dt>WebNN API</dt><dd id="webnnAvailability"></dd></div>
-            <div><dt>WebGPU API</dt><dd id="webgpuAvailability"></dd></div>
-        </dl>
-        <p class="arcane-help">These checks show browser APIs only. They do not report whether a model is running on an NPU or GPU.</p>
-        <h3>NPU setup</h3>
-        <p id="browserInstructions"></p>
-        <div id="flagAddresses"></div>
-        <ol id="setupSteps"></ol>
-        <p>Browser API availability does not confirm that an NPU or a particular model is supported. You choose whether to change the browser setting.</p>
-        <p><a href="https://onnxruntime.ai/docs/tutorials/web/ep-webnn.html">ONNX Runtime WebNN setup documentation</a></p>
-        <h3>GPU performance</h3>
-        <p><span id="gpuAvailability" class="arcane-badge" role="status" aria-live="polite"></span></p>
+        <h3>NPU</h3>
+        <p id="webnnAvailability" role="status" aria-live="polite"></p>
+        <div id="npuSetup">
+            <p id="browserInstructions"></p>
+            <div id="flagAddresses"></div>
+        </div>
+        <h3>GPU</h3>
+        <p><span id="gpuAvailability" class="arcane-badge gpu-status" role="status" aria-live="polite"></span></p>
         <p id="gpuAdapterName" class="arcane-help"></p>
-        <button id="detectGpu" class="arcane-button arcane-button--secondary" type="button">Detect GPU</button>
-        <p id="gpuInstructions"></p>
-        <div id="gpuFlagAddress">
-            <a id="gpuFlagsLink" class="flag-address"></a>
-            <button id="copyGpuAddress" class="arcane-button arcane-button--secondary" type="button">Copy GPU flags address</button>
-            <ol>
-                <li>Open the address above. If the browser blocks the link, copy the address and paste it into the address bar.</li>
-                <li>Find “Force High Performance GPU” and choose Enabled.</li>
-                <li>Save your work, then completely close and reopen the browser before loading the model again.</li>
-            </ol>
+        <div id="gpuSetup" hidden>
+            <p>“Force High Performance GPU” prefers your faster GPU.</p>
+            <button id="copyGpuAddress" class="arcane-button arcane-button--secondary" type="button">Copy GPU flag address</button>
         </div>
-        <p class="arcane-help">GPU detection reports adapter availability. This page cannot read the flag's current setting or confirm that a model is using that adapter.</p>
+        <p>Paste a copied address into your browser's address bar. Enable the flag, save your work, and relaunch.</p>
+        <details>
+            <summary>Setup help</summary>
+            <p><a href="https://onnxruntime.ai/docs/tutorials/web/ep-webnn.html">WebNN setup documentation</a></p>
+        </details>
         <p id="copyStatus" class="arcane-help" role="status" aria-live="polite"></p>
     </div>
     <footer class="arcane-card__footer">
-        <button id="refreshAvailability" class="arcane-button arcane-button--secondary" type="button">Refresh browser availability</button>
+        <button id="refreshAvailability" class="arcane-button arcane-button--secondary" type="button">Refresh</button>
         <p id="setupStatus" class="arcane-help" role="status" aria-live="polite"></p>
     </footer>
 </section>
@@ -63,9 +82,8 @@
     const {
         getBrowserDeviceSettings,
         detectBrowserGpu,
-        openBrowserDeviceSettings,
         WEBNN_BROWSER_SETTINGS
-    }=await import('../sdk/ai/browser-device-settings.mjs');
+    } = await import('../sdk/ai/browser-device-settings.mjs');
     const {arcaneLogging}=await import('arcane-os/logging');
     const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
     const events=createArcaneEventSource(host,{
@@ -77,18 +95,12 @@
     const copyStatus=root.querySelector('#copyStatus');
     const gpuAvailability=root.querySelector('#gpuAvailability');
     const gpuAdapterName=root.querySelector('#gpuAdapterName');
-    const detectGpuButton=root.querySelector('#detectGpu');
-    const gpuFlagsLink=root.querySelector('#gpuFlagsLink');
+    const refreshButton = root.querySelector('#refreshAvailability');
     const copyGpuButton=root.querySelector('#copyGpuAddress');
     const copyButtons=[copyGpuButton];
     const choices=[];
-    const setupSteps=[
-        'If the flags page does not open, copy the matching address into your browser\'s address bar and open it.',
-        'Find “Enables WebNN API” and choose Enabled.',
-        'Save your work, then use the browser\'s Relaunch control.',
-        'Return to this page and select Refresh browser availability.'
-    ];
     let copyTask=null;
+    let copyingAddress = null;
     let gpuTask=null;
     let destroyed=false;
 
@@ -97,152 +109,154 @@
     host.open=open;
     host.destroy=destroy;
 
-    function refresh(){
-        if(destroyed)return false;
-        const settings=getBrowserDeviceSettings();
-        root.querySelector('#browserName').textContent=settings.browserId==='unknown'
-            ?'Browser not identified.'
-            :`Browser: ${settings.name}.`;
-        root.querySelector('#webnnAvailability').textContent=settings.webnnAvailable
-            ?'Exposed to this page.'
-            :'Unavailable to this page.';
-        root.querySelector('#webgpuAvailability').textContent=settings.webgpuAvailable
-            ?'Exposed to this page.'
-            :'Unavailable to this page.';
-        root.querySelector('#browserInstructions').textContent=settings.webnnFlagsURL
-            ?`Open the ${settings.name} WebNN flags link below to set up NPU access.`
-            :'A matching WebNN flags address is not known for this browser. Choose Google Chrome or Microsoft Edge below if that is the browser you are using.';
-        for(const choice of choices){
-            choice.row.hidden=Boolean(settings.webnnFlagsURL)
-                &&choice.target.url!==settings.webnnFlagsURL;
-        }
-        const gpuTarget=settings.highPerformanceGpu;
-        root.querySelector('#gpuFlagAddress').hidden=!gpuTarget;
-        root.querySelector('#gpuInstructions').textContent=gpuTarget
-            ?`If this computer has multiple GPUs, use the ${gpuTarget.name} flags link to request the high-performance GPU when available.`
-            :'The Force High Performance GPU flag is documented here for desktop Windows Chromium browsers. No matching flags link is known for this browser and platform.';
-        if(gpuTarget){
-            gpuFlagsLink.href=gpuTarget.url;
-            gpuFlagsLink.textContent=gpuTarget.url;
-            gpuFlagsLink.setAttribute('aria-label',`${gpuTarget.name} Force High Performance GPU flags address: ${gpuTarget.url}`);
-        }else{
-            gpuFlagsLink.removeAttribute('href');
-            gpuFlagsLink.textContent='';
+    function refresh() {
+        if (destroyed) return false;
+        const settings = getBrowserDeviceSettings();
+        root.querySelector('#webnnAvailability').textContent = settings.webnnAvailable
+            ? 'WebNN available.'
+            : 'WebNN unavailable.';
+        const unknownBrowser = settings.browserId === 'unknown';
+        root.querySelector('#browserInstructions').textContent = settings.webnnFlagsURL || unknownBrowser
+            ? '“Enables WebNN API” allows NPU use when supported.'
+            : 'See Setup help for this browser.';
+        for (const choice of choices) {
+            choice.row.hidden = !unknownBrowser && choice.target.url !== settings.webnnFlagsURL;
+            choice.heading.hidden = !unknownBrowser;
         }
+        renderGpuGuidance(settings);
         return settings;
     }
 
-    function checkGpu(){
-        if(destroyed)return Promise.resolve(false);
-        if(gpuTask)return gpuTask;
-        gpuAvailability.textContent='Detecting GPU...';
-        gpuAvailability.dataset.status='pending';
-        gpuAdapterName.textContent='';
-        detectGpuButton.disabled=true;
-        gpuTask=detect().finally(function finishGpuDetection(){
-            gpuTask=null;
-            if(!destroyed)detectGpuButton.disabled=false;
-        });
+    function renderGpuGuidance(settings = getBrowserDeviceSettings()) {
+        root.querySelector('#gpuSetup').hidden = !settings.highPerformanceGpu;
+    }
+
+    function checkGpu() {
+        if (destroyed) return Promise.resolve(false);
+        if (gpuTask) return gpuTask;
+        gpuAvailability.textContent = 'Detecting GPU...';
+        gpuAvailability.dataset.status = 'pending';
+        gpuAdapterName.textContent = '';
+        refreshButton.disabled = true;
+        gpuTask = detect().finally(
+            function finishGpuDetection() {
+                gpuTask = null;
+                if (!destroyed) refreshButton.disabled = false;
+            }
+        );
         return gpuTask;
 
-        async function detect(){
-            try{
-                const result=await detectBrowserGpu();
-                if(destroyed)return false;
-                gpuAvailability.textContent=result.available
-                    ?result.isFallbackAdapter===true
-                        ?'Fallback WebGPU adapter detected.'
-                        :'GPU detected — WebGPU adapter available.'
-                    :'No WebGPU adapter available to this page.';
-                gpuAvailability.dataset.status=result.available&&result.isFallbackAdapter!==true
-                    ?'success':'warning';
-                gpuAdapterName.textContent=result.available?result.name:'';
+        async function detect() {
+            try {
+                const result = await detectBrowserGpu();
+                if (destroyed) return false;
+                if (!result.available) {
+                    gpuAvailability.textContent = 'GPU unavailable.';
+                    gpuAvailability.dataset.status = 'warning';
+                } else if (result.performanceStatus === 'discrete') {
+                    gpuAvailability.textContent = 'Already using the performance GPU.';
+                    gpuAvailability.dataset.status = 'success';
+                } else if (result.performanceStatus === 'integrated') {
+                    gpuAvailability.textContent = 'Integrated GPU available.';
+                    gpuAvailability.dataset.status = 'warning';
+                } else if (result.performanceStatus === 'fallback') {
+                    gpuAvailability.textContent = 'Software adapter available.';
+                    gpuAvailability.dataset.status = 'warning';
+                } else {
+                    gpuAvailability.textContent = 'GPU available.';
+                    gpuAvailability.dataset.status = 'unknown';
+                }
+                gpuAdapterName.textContent = result.available ? result.name : '';
                 return result;
-            }catch(error){
-                if(!destroyed){
-                    gpuAvailability.textContent='GPU detection failed. Select Detect GPU to try again.';
-                    gpuAvailability.dataset.status='error';
-                    arcaneLogging.error('Unable to detect the browser GPU adapter.',error);
+            } catch (error) {
+                if (!destroyed) {
+                    gpuAvailability.textContent = 'GPU detection failed. Select Refresh to retry.';
+                    gpuAvailability.dataset.status = 'error';
+                    arcaneLogging.error('Unable to detect the browser GPU adapter.', error);
                 }
                 return false;
             }
         }
     }
 
-    function open(browserId){
-        if(destroyed)return false;
-        const current=refresh();
-        const selectedId=browserId??current.browserId;
-        const target=WEBNN_BROWSER_SETTINGS.find(function matchSetupBrowser(browser){
-            return browser.browserId===selectedId;
-        });
-        if(!target){
-            status.textContent='Choose the Google Chrome or Microsoft Edge flags link that matches your browser.';
-            return false;
-        }
-        const instructions=setupSteps.map(function numberSetupStep(step,index){
-            return `${index+1}. ${step}`;
-        }).join('\n');
-        openBrowserDeviceSettings(
-            target,
-            `NPU setup for ${target.name}\n\n${instructions}\n\n${target.url}`
+    function open(browserId) {
+        if (destroyed) return Promise.resolve(false);
+        const current = refresh();
+        const selectedId = browserId ?? current.browserId;
+        const target = WEBNN_BROWSER_SETTINGS.find(
+            function matchSetupBrowser(browser) {
+                return browser.browserId === selectedId;
+            }
         );
-        status.textContent='If the flags page did not open, copy its address above and paste it into your browser\'s address bar.';
+        if (!target) {
+            status.textContent = current.browserId === 'unknown'
+                ? 'Choose Chrome or Edge to copy its NPU flag address.'
+                : 'No NPU flag address for this browser.';
+            return Promise.resolve(false);
+        }
+        return copyAddress(target.url);
     }
 
-    function copyAddress(address){
-        if(destroyed)return Promise.resolve(false);
-        if(copyTask)return copyTask;
-        copyStatus.textContent='Copying address...';
-        for(const button of copyButtons)button.disabled=true;
-        copyTask=writeAddress().finally(function finishAddressCopy(){
-            copyTask=null;
-            if(!destroyed){
-                for(const button of copyButtons)button.disabled=false;
+    function copyAddress(address) {
+        if (destroyed) return Promise.resolve(false);
+        if (copyTask) return copyingAddress === address ? copyTask : Promise.resolve(false);
+        copyStatus.textContent = 'Copying address...';
+        for (const button of copyButtons) {
+            button.disabled = true;
+        }
+        copyingAddress = address;
+        copyTask = writeAddress().finally(
+            function finishAddressCopy() {
+                copyTask = null;
+                copyingAddress = null;
+                if (!destroyed) {
+                    for (const button of copyButtons) {
+                        button.disabled = false;
+                    }
+                }
             }
-        });
+        );
         return copyTask;
 
-        async function writeAddress(){
-            try{
+        async function writeAddress() {
+            try {
                 await globalThis.navigator.clipboard.writeText(address);
-                if(destroyed)return false;
-                copyStatus.textContent='Address copied. Paste it into your browser\'s address bar.';
+                if (destroyed) return false;
+                copyStatus.textContent = 'Address copied. Paste it into your browser\'s address bar.';
                 return true;
-            }catch(error){
-                if(!destroyed){
-                    copyStatus.textContent='The address could not be copied automatically. Select the complete address above, copy it manually, and paste it into your browser\'s address bar.';
-                    arcaneLogging.error('Unable to copy the browser flags address.',error);
+            } catch (error) {
+                if (!destroyed) {
+                    copyStatus.textContent = `Copy failed. Paste this address into your browser's address bar: ${address}`;
+                    arcaneLogging.error('Unable to copy the browser flags address.', error);
                 }
                 return false;
             }
         }
     }
 
-    const addressList=root.querySelector('#flagAddresses');
-    for(const target of WEBNN_BROWSER_SETTINGS){
-        const row=document.createElement('section');
-        const heading=document.createElement('h3');
-        const address=document.createElement('a');
-        const actions=document.createElement('div');
-        const copyButton=document.createElement('button');
-        row.className='flag-choice';
-        heading.textContent=target.name;
-        address.className='flag-address';
-        address.href=target.url;
-        address.textContent=target.url;
-        address.setAttribute('aria-label',`${target.name} WebNN flags address: ${target.url}`);
-        actions.className='actions';
-        copyButton.type='button';
-        copyButton.className='arcane-button arcane-button--secondary';
-        copyButton.textContent=`Copy ${target.name} address`;
-        copyButton.addEventListener('click',function copySelectedBrowserAddress(){
-            return copyAddress(target.url);
-        },{signal:lifecycleController.signal});
-        actions.append(copyButton);
-        row.append(heading,address,actions);
+    const addressList = root.querySelector('#flagAddresses');
+    for (const target of WEBNN_BROWSER_SETTINGS) {
+        const row = document.createElement('section');
+        const heading = document.createElement('h4');
+        const copyButton = document.createElement('button');
+        row.className = 'flag-choice';
+        heading.textContent = target.name;
+        copyButton.type = 'button';
+        copyButton.className = 'arcane-button arcane-button--secondary';
+        copyButton.textContent = 'Copy NPU flag address';
+        copyButton.setAttribute('aria-label', `Copy NPU flag address for ${target.name}`);
+        copyButton.addEventListener(
+            'click',
+            function copySelectedBrowserAddress() {
+                return copyAddress(target.url);
+            },
+            {signal: lifecycleController.signal}
+        );
+        row.append(heading, copyButton);
         addressList.append(row);
-        choices.push({row,target});
+        choices.push(
+            {row, heading, target}
+        );
         copyButtons.push(copyButton);
     }
 
@@ -250,19 +264,15 @@
         const target=getBrowserDeviceSettings().highPerformanceGpu;
         if(target)return copyAddress(target.url);
     },{signal:lifecycleController.signal});
-    detectGpuButton.addEventListener('click',checkGpu,{signal:lifecycleController.signal});
-    const stepList=root.querySelector('#setupSteps');
-    for(const step of setupSteps){
-        const item=document.createElement('li');
-        item.textContent=step;
-        stepList.append(item);
-    }
-
-    root.querySelector('#refreshAvailability').addEventListener('click',function refreshBrowserAvailability(){
-        refresh();
-        status.textContent='Browser API availability refreshed.';
-        return checkGpu();
-    },{signal:lifecycleController.signal});
+    refreshButton.addEventListener(
+        'click',
+        function refreshBrowserAvailability() {
+            refresh();
+            status.textContent = '';
+            return checkGpu();
+        },
+        {signal: lifecycleController.signal}
+    );
     host.ownerDocument.defaultView.addEventListener('pagehide',function disposeBeforePageUnload(event){
         if(!event.persisted)destroy();
     },{

package/runtime/arcane/components/speech.html

@@ -80,9 +80,12 @@
         display: none;
     }
 
-    .speech_status {
+    .speech_feedback {
         grid-column: 2;
         min-width: 0;
+    }
+
+    .speech_status {
         margin: 0;
         color: var(--arcane-muted, var(--text-color));
         font-size: .86rem;
@@ -94,6 +97,18 @@
         color: var(--arcane-danger, var(--danger-color));
     }
 
+    .stt_activation_progress {
+        display: block;
+        width: 100%;
+        height: .6rem;
+        margin-block-start: .7rem;
+        accent-color: var(--arcane-action, var(--primary-color));
+    }
+
+    .stt_activation_progress[hidden] {
+        display: none;
+    }
+
     #muteButton {
         grid-column: 3;
         justify-self: end;
@@ -112,7 +127,7 @@
             grid-row: 1 / span 2;
         }
 
-        .speech_status {
+        .speech_feedback {
             grid-row: 2;
             grid-column: 2 / span 2;
         }
@@ -128,7 +143,15 @@
 <button id="recordButton" type="button" aria-label="Transcription unavailable" disabled>Hold to talk</button>
 <button id="sttActivationButton" type="button" hidden disabled>Start transcription</button>
 <button id="stopButton" type="button" class="hidden" disabled>Send</button>
-<p id="speechStatus" class="speech_status" role="status" aria-live="polite"></p>
+<div class="speech_feedback">
+    <p id="speechStatus" class="speech_status" role="status" aria-live="polite"></p>
+    <progress
+        id="sttActivationProgress"
+        class="stt_activation_progress"
+        aria-label="Transcription model activation progress"
+        hidden
+    ></progress>
+</div>
 <button id="muteButton" type="button" class="mute" aria-pressed="true" aria-label="Voice unavailable" disabled>Voice unavailable</button>
 
 <script type="module">
@@ -179,6 +202,7 @@
     const shadowRoot = host.shadowRoot;
     const recordButton = shadowRoot.querySelector('#recordButton');
     const sttActivationButton = shadowRoot.querySelector('#sttActivationButton');
+    const sttActivationProgress = shadowRoot.querySelector('#sttActivationProgress');
     const stopButton = shadowRoot.querySelector('#stopButton');
     const muteButton = shadowRoot.querySelector('#muteButton');
     const speechStatus = shadowRoot.querySelector('#speechStatus');
@@ -319,6 +343,7 @@
         {
             host,
             button: sttActivationButton,
+            progress: sttActivationProgress,
             onChange: renderSTTActivationState,
             eventSource: events
         }
@@ -668,6 +693,12 @@
         if (localStatus?.message) {
             messages.push(localStatus.message);
             tone = localStatus.tone;
+            if (sttActivationController.pending
+                || ['loading', 'unloading'].includes(sttRole.state)) {
+                messages.push(
+                    describeSTTRole()
+                );
+            }
         } else {
             messages.push(describeSTTRole());
         }

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

@@ -42,15 +42,40 @@
     }
 
     .description,
-    .status{
-        margin:0;
+    .status {
+        margin: 0;
+        overflow-wrap: anywhere;
+    }
+
+    .transcription-feedback {
+        min-width: 0;
+    }
+
+    .stt-activation-progress {
+        display: block;
+        width: 100%;
+        height: .6rem;
+        margin-block-start: .7rem;
+        accent-color: var(--arcane-action, var(--primary-color));
+    }
+
+    .stt-activation-progress[hidden] {
+        display: none;
     }
 </style>
 
 <section class="voice-transcription">
     <p id="description" class="description"></p>
     <section id="transcript" class="transcript"></section>
-    <p id="status" class="status" role="status" aria-live="polite"></p>
+    <div class="transcription-feedback">
+        <p id="status" class="status" role="status" aria-live="polite"></p>
+        <progress
+            id="sttActivationProgress"
+            class="stt-activation-progress"
+            aria-label="Transcription model activation progress"
+            hidden
+        ></progress>
+    </div>
     <section class="controls">
         <button id="start" type="button" disabled></button>
         <button id="sttActivation" type="button" hidden disabled>Start transcription</button>
@@ -104,6 +129,7 @@
     const status=host.shadowRoot.querySelector('#status');
     const startButton=host.shadowRoot.querySelector('#start');
     const sttActivationButton=host.shadowRoot.querySelector('#sttActivation');
+    const sttActivationProgress = host.shadowRoot.querySelector('#sttActivationProgress');
     const stopButton=host.shadowRoot.querySelector('#stop');
     const completeButton=host.shadowRoot.querySelector('#complete');
     const runtimeStateAbortController=new AbortController();
@@ -225,6 +251,7 @@
         {
             host,
             button:sttActivationButton,
+            progress: sttActivationProgress,
             onChange:renderState,
             eventSource:events
         }