feat : add user input engineWorkersNb

src/sections/analysis/panelHeader/analyzeButton.tsx

@@ -3,6 +3,7 @@ import {
   engineDepthAtom,
   engineMultiPvAtom,
   engineNameAtom,
+  engineWorkersNbAtom,
   evaluationProgressAtom,
   gameAtom,
   gameEvalAtom,
@@ -19,12 +20,12 @@ import { useEffect, useCallback } from "react";
 import { usePlayersData } from "@/hooks/usePlayersData";
 import { Typography } from "@mui/material";
 import { useCurrentPosition } from "../hooks/useCurrentPosition";
-import { getRecommendedWorkersNb } from "@/lib/engine/worker";
 
 export default function AnalyzeButton() {
   const engineName = useAtomValue(engineNameAtom);
   const engine = useEngine(engineName);
   useCurrentPosition(engine);
+  const engineWorkersNb = useAtomValue(engineWorkersNbAtom);
   const [evaluationProgress, setEvaluationProgress] = useAtom(
     evaluationProgressAtom
   );
@@ -58,7 +59,7 @@ export default function AnalyzeButton() {
         white: white?.rating,
         black: black?.rating,
       },
-      workersNb: getRecommendedWorkersNb(),
+      workersNb: engineWorkersNb,
     });
 
     setEval(newGameEval);
@@ -86,6 +87,7 @@ export default function AnalyzeButton() {
   }, [
     engine,
     engineName,
+    engineWorkersNb,
     game,
     engineDepth,
     engineMultiPv,

src/sections/analysis/states.ts

@@ -1,8 +1,10 @@
 import { DEFAULT_ENGINE } from "@/constants";
+import { getRecommendedWorkersNb } from "@/lib/engine/worker";
 import { EngineName } from "@/types/enums";
 import { CurrentPosition, GameEval, SavedEvals } from "@/types/eval";
 import { Chess } from "chess.js";
 import { atom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
 
 export const gameEvalAtom = atom<GameEval | undefined>(undefined);
 export const gameAtom = atom(new Chess());
@@ -16,6 +18,10 @@ export const showPlayerMoveIconAtom = atom(true);
 export const engineNameAtom = atom<EngineName>(DEFAULT_ENGINE);
 export const engineDepthAtom = atom(14);
 export const engineMultiPvAtom = atom(3);
+export const engineWorkersNbAtom = atomWithStorage(
+  "engineWorkersNb",
+  getRecommendedWorkersNb()
+);
 export const evaluationProgressAtom = atom(0);
 
 export const savedEvalsAtom = atom<SavedEvals>({});

src/sections/engineSettings/engineSettingsDialog.tsx

@@ -20,6 +20,7 @@ import {
   engineNameAtom,
   engineDepthAtom,
   engineMultiPvAtom,
+  engineWorkersNbAtom,
 } from "../analysis/states";
 import ArrowOptions from "./arrowOptions";
 import { useAtomLocalStorage } from "@/hooks/useAtomLocalStorage";
@@ -35,6 +36,7 @@ import {
   PIECE_SETS,
   STRONGEST_ENGINE,
 } from "@/constants";
+import { getRecommendedWorkersNb } from "@/lib/engine/worker";
 
 interface Props {
   open: boolean;
@@ -56,6 +58,7 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
   );
   const [boardHue, setBoardHue] = useAtom(boardHueAtom);
   const [pieceSet, setPieceSet] = useAtom(pieceSetAtom);
+  const [engineWorkersNb, setEngineWorkersNb] = useAtom(engineWorkersNbAtom);
 
   const theme = useTheme();
   const isDarkMode = theme.palette.mode === "dark";
@@ -72,12 +75,15 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
 
   return (
     <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
-      <DialogTitle variant="h5">Settings</DialogTitle>
+      <DialogTitle variant="h5" sx={{ paddingBottom: 1 }}>
+        Settings
+      </DialogTitle>
       <DialogContent sx={{ paddingBottom: 0 }}>
         <Grid
           container
           justifyContent="center"
           alignItems="center"
+          paddingTop={1}
           spacing={3}
           size={12}
         >
@@ -86,12 +92,14 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
             justifyContent="center"
             size={{ xs: 12, sm: 7, md: 8 }}
           >
-            <Typography>
+            <Typography variant="body2">
               {ENGINE_LABELS[DEFAULT_ENGINE].small} is the default engine if
               your device support its requirements. It offers the best balance
               between speed and strength.{" "}
               {ENGINE_LABELS[STRONGEST_ENGINE].small} is the strongest engine
-              available, note that it requires a one time download of 75MB.
+              available, note that it requires a one time download of{" "}
+              {ENGINE_LABELS[STRONGEST_ENGINE].sizeMb}MB and is much more
+              compute intensive.
             </Typography>
           </Grid>
 
@@ -162,6 +170,7 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
           <Grid
             container
             justifyContent="center"
+            alignItems="center"
             size={{ xs: 12, sm: 4, md: 3 }}
           >
             <FormControl variant="outlined">
@@ -194,6 +203,26 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
               </Select>
             </FormControl>
           </Grid>
+
+          <Grid container justifyContent="center" size={{ xs: 12, sm: 7 }}>
+            <Slider
+              label="Number of threads"
+              value={engineWorkersNb}
+              setValue={setEngineWorkersNb}
+              min={1}
+              max={10}
+              marksFilter={1}
+            />
+          </Grid>
+
+          <Grid container justifyContent="center" size={{ xs: 12, sm: 5 }}>
+            <Typography variant="body2">
+              More threads means quicker analysis but only if your device can
+              handle them, otherwise it may have the opposite effect. The
+              estimated best value for your device is{" "}
+              {getRecommendedWorkersNb()}.
+            </Typography>
+          </Grid>
         </Grid>
       </DialogContent>
       <DialogActions sx={{ m: 1 }}>