fix thread issues and restrict Brave

Author: schlawg

ui/ceval/css/_settings.scss

@@ -35,11 +35,12 @@
       margin-#{$start-direction}: 1ch;
     }
 
-    input[type='range'] {
+    input[type='range'],
+    span {
       cursor: pointer;
       flex: 1 4 auto;
       padding: 0;
-      height: 1.6em;
+      height: 21px; // important
       width: 100%;
       margin: 0 1ch;
     }
@@ -81,5 +82,52 @@
         outline: 2px solid #bbb;
       }
     }
+
+    span {
+      position: relative;
+
+      input[type='range'] {
+        height: 100%;
+        margin: 0;
+      }
+    }
+
+    .tick {
+      position: absolute;
+      top: -12.5px; // 12.5px above the track. track is 21px high
+      height: 46px; // extend 12.5px below the track
+      border-color: $c-primary;
+
+      div {
+        position: absolute;
+        left: -4px; // centers the rotated right angle at x = 0
+        width: 9px;
+        height: 9px;
+        border-left: 3px solid $c-primary;
+        border-bottom: 3px solid $c-primary;
+
+        &:hover {
+          border-color: mix(#fff, $c-primary, 20%);
+        }
+
+        &.arrow-down {
+          transform: rotate(-45deg);
+          top: 0;
+        }
+
+        &.arrow-up {
+          transform: rotate(135deg);
+          bottom: 0;
+        }
+      }
+
+      &.recommended div {
+        border-color: $c-secondary;
+
+        &:hover {
+          border-color: mix(#fff, $c-secondary, 20%);
+        }
+      }
+    }
   }
 }

ui/ceval/src/ctrl.ts

@@ -1,13 +1,12 @@
 import throttle from 'common/throttle';
 import { Engines } from './engines/engines';
 import { CevalOpts, CevalState, CevalEngine, Work, Step, Hovering, PvBoard, Started } from './types';
-import { sanIrreversible, showEngineError } from './util';
+import { sanIrreversible, showEngineError, fewerCores, constrain } from './util';
 import { defaultPosition, setupPosition } from 'chessops/variant';
 import { parseFen } from 'chessops/fen';
 import { lichessRules } from 'chessops/compat';
 import { povChances } from './winningChances';
 import { prop, readonlyProp, Prop, Toggle, toggle } from 'common';
-import { hasFeature } from 'common/device';
 import { Result } from '@badrap/result';
 import { storedIntProp } from 'common/storage';
 import { Rules } from 'chessops';
@@ -176,25 +175,31 @@ export default class CevalCtrl {
     return this.worker?.getState() ?? CevalState.Initial;
   }
 
+  setThreads = (threads: number) => lichess.storage.set('ceval.threads', threads.toString());
+
   threads = () => {
     const stored = lichess.storage.get('ceval.threads');
-    return Math.min(
-      this.engines.active?.maxThreads ?? 96, // Can haz threadripper?
-      stored ? parseInt(stored, 10) : Math.ceil(navigator.hardwareConcurrency / 4),
-    );
+    const desired = stored ? parseInt(stored) : this.recommendedThreads();
+    return constrain(desired, { min: this.engines.active?.minThreads ?? 1, max: this.maxThreads() });
   };
 
-  hashSize = () => {
-    const stored = lichess.storage.get('ceval.hash-size');
-    return Math.min(this.engines.active?.maxHash ?? 16, stored ? parseInt(stored, 10) : 16);
-  };
+  recommendedThreads = () =>
+    constrain(navigator.hardwareConcurrency - (navigator.hardwareConcurrency % 2 ? 0 : 1), {
+      min: this.engines.active?.minThreads ?? 1,
+      max: this.maxThreads(),
+    });
 
-  setThreads = (threads: number) => lichess.storage.set('ceval.threads', threads.toString());
+  maxThreads = () =>
+    fewerCores()
+      ? Math.min(this.engines.active?.maxThreads ?? 32, navigator.hardwareConcurrency)
+      : this.engines.active?.maxThreads ?? 32;
 
   setHashSize = (hash: number) => lichess.storage.set('ceval.hash-size', hash.toString());
 
-  maxThreads = () =>
-    this.engines.external?.maxThreads ?? (hasFeature('sharedMem') ? navigator.hardwareConcurrency : 1);
+  hashSize = () => {
+    const stored = lichess.storage.get('ceval.hash-size');
+    return Math.min(this.maxHash(), stored ? parseInt(stored, 10) : 16);
+  };
 
   maxHash = () => this.engines.active?.maxHash ?? 16;
 

ui/ceval/src/engines/engines.ts

@@ -1,23 +1,26 @@
-import { BrowserEngineInfo, ExternalEngineInfo, EngineInfo, CevalEngine } from '../types';
+import { BrowserEngineInfo, ExternalEngineInfo, EngineInfo, CevalEngine, Requires } from '../types';
 import CevalCtrl from '../ctrl';
 import { SimpleEngine } from './simpleEngine';
 import { StockfishWebEngine } from './stockfishWebEngine';
 import { ThreadedEngine } from './threadedEngine';
 import { ExternalEngine } from './externalEngine';
 import { storedStringProp, StoredProp } from 'common/storage';
-import { isAndroid, isIOS, isIPad, hasFeature } from 'common/device';
+import { isAndroid, isIOS, isIPad, getFirefoxMajorVersion, features, Feature } from 'common/device';
 import { xhrHeader } from 'common/xhr';
-import { pow2floor } from '../util';
 import { lichessRules } from 'chessops/compat';
 
 export class Engines {
-  private localEngines: BrowserEngineInfo[];
-  private localEngineMap: Map<string, WithMake>;
-  private externalEngines: ExternalEngineInfo[];
-  private selectProp: StoredProp<string>;
   private _active: EngineInfo | undefined = undefined;
+  localEngines: BrowserEngineInfo[];
+  localEngineMap: Map<string, WithMake>;
+  externalEngines: ExternalEngineInfo[];
+  selectProp: StoredProp<string>;
+  browserSupport: Requires[] = features().slice();
 
   constructor(private ctrl: CevalCtrl) {
+    if ((getFirefoxMajorVersion() ?? 114) > 113 && !('brave' in navigator)) {
+      this.browserSupport.push('recentFirefoxOrNotBrave');
+    }
     this.localEngineMap = this.makeEngineMap();
     this.localEngines = [...this.localEngineMap.values()].map(e => e.info);
     this.externalEngines = this.ctrl.opts.externalEngines?.map(e => ({ tech: 'EXTERNAL', ...e })) ?? [];
@@ -40,7 +43,7 @@ export class Engines {
         name: 'Fairy Stockfish 14+ NNUE',
         short: 'FSF 14+',
         tech: 'NNUE',
-        requires: ['simd', 'webWorkerDynamicImport'],
+        requires: ['simd', 'recentFirefoxOrNotBrave'],
         variants: [key],
         assets: {
           version: 'sfw003',
@@ -68,7 +71,7 @@ export class Engines {
             name: 'Stockfish 16 NNUE · 7MB',
             short: 'SF 16 · 7MB',
             tech: 'NNUE',
-            requires: ['simd', 'webWorkerDynamicImport'],
+            requires: ['simd', 'recentFirefoxOrNotBrave'],
             minMem: 1536,
             assets: {
               version: 'sfw003',
@@ -84,7 +87,7 @@ export class Engines {
             name: 'Stockfish 16 NNUE · 40MB',
             short: 'SF 16 · 40MB',
             tech: 'NNUE',
-            requires: ['simd', 'webWorkerDynamicImport'],
+            requires: ['simd', 'recentFirefoxOrNotBrave'],
             minMem: 2048,
             assets: {
               version: 'sfw003',
@@ -118,7 +121,7 @@ export class Engines {
             name: 'Fairy Stockfish 14+ HCE',
             short: 'FSF 14+',
             tech: 'HCE',
-            requires: ['simd', 'webWorkerDynamicImport'],
+            requires: ['simd', 'recentFirefoxOrNotBrave'],
             variants: variants.map(v => v[0]),
             assets: {
               version: 'sfw003',
@@ -136,6 +139,7 @@ export class Engines {
             short: 'SF 11 MV',
             tech: 'HCE',
             requires: ['sharedMem'],
+            minThreads: 1,
             variants: variants.map(v => v[0]),
             assets: {
               version: 'a022fa',
@@ -156,6 +160,7 @@ export class Engines {
             short: 'SF 11',
             tech: 'HCE',
             requires: ['sharedMem'],
+            minThreads: 1,
             assets: {
               version: 'a022fa',
               root: 'npm/stockfish.wasm',
@@ -171,6 +176,7 @@ export class Engines {
             name: 'Stockfish WASM',
             short: 'Stockfish',
             tech: 'HCE',
+            minThreads: 1,
             maxThreads: 1,
             requires: ['wasm'],
             obsoletedBy: 'sharedMem',
@@ -188,6 +194,7 @@ export class Engines {
             name: 'Stockfish JS',
             short: 'Stockfish',
             tech: 'HCE',
+            minThreads: 1,
             maxThreads: 1,
             obsoletedBy: 'wasm',
             assets: {
@@ -201,8 +208,8 @@ export class Engines {
       ]
         .filter(
           e =>
-            e.info.requires?.map(req => hasFeature(req)).every(x => !!x) &&
-            !(e.info.obsoletedBy && hasFeature(e.info.obsoletedBy)),
+            e.info.requires?.every((req: Requires) => this.browserSupport.includes(req)) &&
+            !(e.info.obsoletedBy && this.browserSupport.includes(e.info.obsoletedBy as Feature)),
         )
         .map(e => [e.info.id, { info: withDefaults(e.info as BrowserEngineInfo), make: e.make }]),
     );
@@ -268,11 +275,10 @@ export class Engines {
 }
 
 function maxHashMB() {
-  if (navigator.deviceMemory) return pow2floor(navigator.deviceMemory * 128); // chrome/edge/opera
-  else if (isAndroid()) return 64; // budget androids are easy to crash @ 128
+  if (isAndroid()) return 64; // budget androids are easy to crash @ 128
   else if (isIPad()) return 64; // iPadOS safari pretends to be desktop but acts more like iphone
   else if (isIOS()) return 32;
-  return 256; // this is safe, mostly desktop firefox / mac safari users here
+  return 512; // allocating 1024 often fails and offers little benefit over 512, or 16 for that matter
 }
 const maxHash = maxHashMB();
 
@@ -286,9 +292,10 @@ function externalEngineSupports(e: EngineInfo, v: VariantKey) {
 
 const withDefaults = (engine: BrowserEngineInfo): BrowserEngineInfo => ({
   variants: ['standard', 'chess960', 'fromPosition'],
-  maxThreads: navigator.hardwareConcurrency ?? 1,
   minMem: 1024,
   maxHash,
+  minThreads: 2,
+  maxThreads: 32,
   ...engine,
 });
 

ui/ceval/src/types.ts

@@ -31,9 +31,10 @@ export interface EngineInfo {
   tech?: 'HCE' | 'NNUE' | 'EXTERNAL';
   short?: string;
   variants?: VariantKey[];
+  minThreads?: number;
   maxThreads?: number;
   maxHash?: number;
-  requires?: Feature[];
+  requires?: Requires[];
 }
 
 export interface ExternalEngineInfo extends EngineInfo {
@@ -45,9 +46,11 @@ export interface ExternalEngineInfo extends EngineInfo {
 export interface BrowserEngineInfo extends EngineInfo {
   minMem?: number;
   assets: { root?: string; js?: string; wasm?: string; version?: string; nnue?: string };
-  obsoletedBy?: 'sharedMem' | 'wasm';
+  obsoletedBy?: Feature;
 }
 
+export type Requires = Feature | 'recentFirefoxOrNotBrave';
+
 export type EngineNotifier = (status?: {
   download?: { bytes: number; total: number };
   error?: string;

ui/ceval/src/util.ts

@@ -1,4 +1,6 @@
 import { type Dialog, domDialog } from 'common/dialog';
+import { isMobile } from 'common/device';
+import { memoize } from 'common/common';
 
 export function isEvalBetter(a: Tree.ClientEval, b: Tree.ClientEval): boolean {
   return a.depth > b.depth || (a.depth === b.depth && a.nodes > b.nodes);
@@ -17,11 +19,12 @@ export function sanIrreversible(variant: VariantKey, san: string): boolean {
   return variant === 'threeCheck' && san.includes('+');
 }
 
-export const pow2floor = (n: number) => {
-  let pow2 = 1;
-  while (pow2 * 2 <= n) pow2 *= 2;
-  return pow2;
-};
+export function constrain(n: number, constraints: { min?: number; max?: number }): number {
+  const min = constraints.min ?? n;
+  const max = constraints.max ?? n;
+  return Math.max(min, Math.min(max, n));
+}
+export const fewerCores = memoize<boolean>(() => isMobile() || navigator.userAgent.includes('CrOS'));
 
 export const sharedWasmMemory = (lo: number, hi = 32767): WebAssembly.Memory => {
   let shrink = 4; // 32767 -> 24576 -> 16384 -> 12288 -> 8192 -> 6144 -> etc