feat: add capability to analyze Lichess games with any Maia version

CSSLab · Nov 18, 2024 · 800fcb1 · 800fcb1
1 parent 01f9127
commit 800fcb1
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 45 deletions.
diff --git a/src/api/analysis/analysis.ts b/src/api/analysis/analysis.ts
@@ -160,14 +160,26 @@ export const getAnalyzedTournamentGame = async (gameId = ['FkgYSri1']) => {
   } as any as AnalyzedGame
 }
 
-export const getAnalyzedLichessGame = async (id: string, pgn: string) => {
-  const res = await fetch(buildUrl('analysis/analyze_user_game'), {
-    method: 'POST',
-    body: pgn,
-    headers: {
-      'Content-Type': 'text/plain',
+export const getAnalyzedLichessGame = async (
+  id: string,
+  pgn: string,
+  maia_model = 'maia_kdd_1500',
+) => {
+  const res = await fetch(
+    buildUrl(
+      'analysis/analyze_user_game?' +
+        new URLSearchParams({
+          maia_model,
+        }),
+    ),
+    {
+      method: 'POST',
+      body: pgn,
+      headers: {
+        'Content-Type': 'text/plain',
+      },
     },
-  })
+  )
 
   if (res.status === 401) {
     throw new Error('Unauthorized')
@@ -245,5 +257,6 @@ export const getAnalyzedLichessGame = async (id: string, pgn: string) => {
     gameType,
     termination,
     positionEvaluations,
-  } as any as AnalyzedGame
+    pgn,
+  } as AnalyzedGame
 }
diff --git a/src/components/AnalysisGameList/AnalysisGameList.tsx b/src/components/AnalysisGameList/AnalysisGameList.tsx
@@ -1,10 +1,10 @@
 import {
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
   useRef,
+  useMemo,
   Dispatch,
+  useState,
+  useEffect,
+  useContext,
   SetStateAction,
 } from 'react'
 import { motion } from 'framer-motion'
@@ -14,6 +14,7 @@ import { AnalysisListContext, GameControllerContext } from 'src/contexts'
 
 interface AnalysisGameListProps {
   currentId: string[] | null
+  currentMaiaModel: string
   loadNewTournamentGame: (
     newId: string[],
     setCurrentMove: Dispatch<SetStateAction<number>>,
@@ -22,11 +23,13 @@ interface AnalysisGameListProps {
     id: string,
     pgn: string,
     setCurrentMove: Dispatch<SetStateAction<number>>,
+    currentMaiaModel: string,
   ) => Promise<void>
 }
 
 const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
   currentId,
+  currentMaiaModel,
   loadNewTournamentGame,
   loadNewLichessGames,
 }) => {
@@ -143,6 +146,7 @@ const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
                     game.id,
                     game.pgn,
                     controller.setCurrentIndex,
+                    currentMaiaModel,
                   )
                   setLoadingIndex(null)
                 }}

diff --git a/src/hooks/useAnalysisController/useAnalysisController.ts b/src/hooks/useAnalysisController/useAnalysisController.ts
@@ -203,13 +203,14 @@ export const useAnalysisController = (
   ])
 
   const data = useMemo(() => {
+    if (!plotData[currentMaiaModel]) return []
     return plotData[currentMaiaModel][controller.currentIndex]
   }, [controller.currentIndex, currentMaiaModel, plotData])
 
-  const positionEvaluation = useMemo(
-    () => game.positionEvaluations[currentMaiaModel][controller.currentIndex],
-    [controller.currentIndex, currentMaiaModel, game.positionEvaluations],
-  )
+  // const positionEvaluation = useMemo(
+  //   () => game.positionEvaluations[currentMaiaModel][controller.currentIndex],
+  //   [controller.currentIndex, currentMaiaModel, game.positionEvaluations],
+  // )
 
   const moveEvaluation = useMemo(() => {
     if (currentMove) {
@@ -414,7 +415,7 @@ export const useAnalysisController = (
     maiaModels,
     currentMaiaModel,
     setCurrentMaiaModel,
-    positionEvaluation,
+    // positionEvaluation,
     currentMove,
     setCurrentMove,
     moveEvaluation,

diff --git a/src/hooks/useStockfishEngine/engine.ts b/src/hooks/useStockfishEngine/engine.ts
@@ -61,7 +61,6 @@ class Engine {
   }
 
   private onMessage(msg: string) {
-    console.log(msg)
     const matches = [
       ...msg.matchAll(
         /info depth (\d+) seldepth (\d+) multipv (\d+) score (?:cp (-?\d+)|mate (-?\d+)).+ pv ((?:\S+\s*)+)/g,

diff --git a/src/pages/analysis/[...id].tsx b/src/pages/analysis/[...id].tsx
@@ -1,10 +1,10 @@
 import React, {
   useMemo,
+  Dispatch,
   useState,
   useEffect,
   useContext,
   useCallback,
-  Dispatch,
   SetStateAction,
 } from 'react'
 import Head from 'next/head'
@@ -37,6 +37,18 @@ import AnalysisGameList from 'src/components/AnalysisGameList/AnalysisGameList'
 import { HorizontalEvaluationBar } from 'src/components/HorizontalEvaluationBar'
 import { GameControllerContext } from 'src/contexts/GameControllerContext/GameControllerContext'
 
+const MAIA_MODELS = [
+  'maia_kdd_1100',
+  'maia_kdd_1200',
+  'maia_kdd_1300',
+  'maia_kdd_1400',
+  'maia_kdd_1500',
+  'maia_kdd_1600',
+  'maia_kdd_1700',
+  'maia_kdd_1800',
+  'maia_kdd_1900',
+]
+
 const AnalysisPage: NextPage = () => {
   const { openedModals, setInstructionsModalProps: setInstructionsModalProps } =
     useContext(ModalContext)
@@ -81,10 +93,11 @@ const AnalysisPage: NextPage = () => {
       id: string,
       pgn: string,
       setCurrentMove?: Dispatch<SetStateAction<number>>,
+      currentMaiaModel = 'maia_kdd_1500',
     ) => {
       let game
       try {
-        game = await getAnalyzedLichessGame(id, pgn)
+        game = await getAnalyzedLichessGame(id, pgn, currentMaiaModel)
       } catch (e) {
         router.push('/401')
         return
@@ -107,7 +120,7 @@ const AnalysisPage: NextPage = () => {
         if (queryId[1] == 'lichess') {
           const pgn = await getLichessGamePGN(queryId[0])
 
-          getAndSetLichessGames(queryId[0], pgn)
+          getAndSetLichessGames(queryId[0], pgn, undefined)
         } else {
           getAndSetTournamentGame(queryId)
         }
@@ -119,16 +132,13 @@ const AnalysisPage: NextPage = () => {
     <>
       {analyzedGame ? (
         <Analysis
+          currentId={currentId}
           analyzedGame={analyzedGame}
+          setAnalyzedGame={setAnalyzedGame}
           initialIndex={index ? Number(index) : 0}
           initialOrientation={orientation == 'black' ? 'black' : 'white'}
-          listController={
-            <AnalysisGameList
-              currentId={currentId}
-              loadNewTournamentGame={getAndSetTournamentGame}
-              loadNewLichessGames={getAndSetLichessGames}
-            />
-          }
+          getAndSetTournamentGame={getAndSetTournamentGame}
+          getAndSetLichessGames={getAndSetLichessGames}
         />
       ) : (
         <Loading />
@@ -138,18 +148,34 @@ const AnalysisPage: NextPage = () => {
 }
 
 interface Props {
+  currentId: string[]
+  getAndSetTournamentGame: (
+    newId: string[],
+    setCurrentMove?: Dispatch<SetStateAction<number>>,
+  ) => Promise<void>
+  getAndSetLichessGames: (
+    id: string,
+    pgn: string,
+    setCurrentMove?: Dispatch<SetStateAction<number>>,
+    currentMaiaModel?: string,
+  ) => Promise<void>
   analyzedGame: AnalyzedGame
   initialIndex: number
   initialOrientation: Color
-  listController: React.ReactNode
+
+  setAnalyzedGame: Dispatch<SetStateAction<AnalyzedGame | undefined>>
 }
 
 const Analysis: React.FC<Props> = ({
+  currentId,
   analyzedGame,
   initialIndex,
   initialOrientation,
-  listController,
+  getAndSetTournamentGame,
+  getAndSetLichessGames,
+  setAnalyzedGame,
 }: Props) => {
+  const router = useRouter()
   const { theme } = useContext(ThemeContext)
   const { width } = useContext(WindowSizeContext)
   const isMobile = useMemo(() => width > 0 && width <= 670, [width])
@@ -161,7 +187,6 @@ const Analysis: React.FC<Props> = ({
     moves,
     data,
     controller,
-    maiaModels,
     setCurrentMaiaModel,
     currentMaiaModel,
     moveEvaluation,
@@ -192,6 +217,37 @@ const Analysis: React.FC<Props> = ({
     })
   }
 
+  const updateMaiaModel = async (model: string) => {
+    if (analyzedGame.type === 'tournament') {
+      setCurrentMaiaModel(model)
+    } else if (analyzedGame.type === 'pgn') {
+      if (analyzedGame.maiaEvaluations[model]) {
+        setCurrentMaiaModel(model)
+        return
+      }
+
+      let game
+      try {
+        game = await getAnalyzedLichessGame(
+          analyzedGame.id,
+          analyzedGame.pgn as string,
+          model,
+        )
+      } catch (e) {
+        router.push('/401')
+        return
+      }
+      const evals = game.maiaEvaluations[model]
+      if (evals) {
+        const newAnalyzedGame = { ...analyzedGame }
+        newAnalyzedGame.maiaEvaluations[model] = evals
+
+        setAnalyzedGame(newAnalyzedGame)
+        setCurrentMaiaModel(model)
+      }
+    }
+  }
+
   useEffect(() => {
     let topStockfishMove, topMaiaMove
     const maia =
@@ -320,24 +376,24 @@ const Analysis: React.FC<Props> = ({
             <div className="flex flex-col">
               <p>Analyze using:</p>
               <select
-                disabled={maiaModels.length === 1}
-                className={`cursor-pointer rounded border-none bg-human-4 p-2 outline-none ${maiaModels.length === 1 ? 'cursor-not-allowed' : 'cursor-pointer'}`}
                 value={currentMaiaModel}
-                onChange={(e) => {
-                  setCurrentMaiaModel(e.target.value)
-                }}
+                className="cursor-pointer rounded border-none bg-human-4 p-2 outline-none"
+                onChange={(e) => updateMaiaModel(e.target.value)}
               >
-                {maiaModels.map((model) => (
+                {MAIA_MODELS.map((model) => (
                   <option value={model} key={model}>
                     {model.replace('maia_kdd_', 'Maia ')}
                   </option>
                 ))}
               </select>
             </div>
-
             <ContinueAgainstMaia launchContinue={launchContinue} />
-
-            {listController}
+            <AnalysisGameList
+              currentId={currentId}
+              currentMaiaModel={currentMaiaModel}
+              loadNewTournamentGame={getAndSetTournamentGame}
+              loadNewLichessGames={getAndSetLichessGames}
+            />
           </div>
           <div className="relative flex aspect-square w-full max-w-[75vh]">
             <GameBoard
@@ -541,19 +597,22 @@ const Analysis: React.FC<Props> = ({
               <select
                 className="w-full cursor-pointer rounded border-none bg-human-4 p-2 outline-none"
                 value={currentMaiaModel}
-                onChange={(e) => {
-                  setCurrentMaiaModel(e.target.value)
-                }}
+                onChange={(e) => updateMaiaModel(e.target.value)}
               >
-                {maiaModels.map((model) => (
+                {MAIA_MODELS.map((model) => (
                   <option value={model} key={model}>
                     {model.replace('maia_kdd_', 'Maia ')}
                   </option>
                 ))}
               </select>
             </div>
             <ContinueAgainstMaia launchContinue={launchContinue} />
-            {listController}
+            <AnalysisGameList
+              currentId={currentId}
+              currentMaiaModel={currentMaiaModel}
+              loadNewTournamentGame={getAndSetTournamentGame}
+              loadNewLichessGames={getAndSetLichessGames}
+            />
           </div>
         </div>
       </div>

diff --git a/src/types/analysis/index.ts b/src/types/analysis/index.ts
@@ -32,6 +32,7 @@ export interface AnalyzedGame extends Game {
   positionEvaluations: { [model: string]: PositionEvaluation[] }
   availableMoves: AvailableMoves[]
   type: EvaluationType
+  pgn?: string
 }
 
 export interface Termination {