Update app.py

app.py

@@ -1,17 +1,12 @@
 import streamlit as st
+import streamlit.components.v1 as components
 import chess
-import chess.svg
 from gradio_client import Client
-import cairosvg
-from PIL import Image
-import io
+import json
 
 # Initialize the Gradio client
 client = Client("xianbao/SambaNova-fast")
 
-# Initialize the chess board
-board = chess.Board()
-
 # Function to get AI move
 def get_ai_move(board):
     fen = board.fen()
@@ -29,39 +24,134 @@ def get_ai_move(board):
     
     return result.strip()
 
-# Function to render the chess board
-def render_board(board):
-    svg = chess.svg.board(board=board)
-    png = cairosvg.svg2png(bytestring=svg.encode('utf-8'))
-    return Image.open(io.BytesIO(png))
-
 # Streamlit app
-st.title("Chess against LLaMA 405B")
+st.title("Interactive Chess against LLaMA 405B")
 
 # Initialize session state
 if 'board' not in st.session_state:
     st.session_state.board = chess.Board()
+if 'user_move' not in st.session_state:
+    st.session_state.user_move = None
+
+# Create a custom component for the chessboard
+def chessboard_component():
+    components.html(
+        """
+        <div id="board" style="width: 400px"></div>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.3/chess.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.min.js"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.min.css">
+        <script>
+        var board = null
+        var game = new Chess()
+        var $status = $('#status')
+        var $fen = $('#fen')
+        var $pgn = $('#pgn')
+
+        function onDragStart (source, piece, position, orientation) {
+          if (game.game_over()) return false
+          if (piece.search(/^b/) !== -1) return false
+        }
+
+        function onDrop (source, target) {
+          var move = game.move({
+            from: source,
+            to: target,
+            promotion: 'q'
+          })
+
+          if (move === null) return 'snapback'
+          updateStatus()
+          
+          // Send move to Python
+          window.parent.postMessage({
+            type: 'move',
+            move: move.from + move.to
+          }, '*')
+        }
+
+        function onSnapEnd () {
+          board.position(game.fen())
+        }
+
+        function updateStatus () {
+          var status = ''
+
+          var moveColor = 'White'
+          if (game.turn() === 'b') {
+            moveColor = 'Black'
+          }
 
-# Display the current board state
-st.image(render_board(st.session_state.board))
+          if (game.in_checkmate()) {
+            status = 'Game over, ' + moveColor + ' is in checkmate.'
+          }
+          else if (game.in_draw()) {
+            status = 'Game over, drawn position'
+          }
+          else {
+            status = moveColor + ' to move'
+            if (game.in_check()) {
+              status += ', ' + moveColor + ' is in check'
+            }
+          }
 
-# Get user's move
-user_move = st.text_input("Enter your move (e.g., 'e2e4'):")
+          $status.html(status)
+          $fen.html(game.fen())
+          $pgn.html(game.pgn())
+        }
 
-if st.button("Make Move"):
+        var config = {
+          draggable: true,
+          position: 'start',
+          onDragStart: onDragStart,
+          onDrop: onDrop,
+          onSnapEnd: onSnapEnd
+        }
+        board = Chessboard('board', config)
+
+        updateStatus()
+
+        // Listen for moves from Python
+        window.addEventListener('message', function(event) {
+          if (event.data.type === 'move') {
+            game.move(event.data.move)
+            board.position(game.fen())
+            updateStatus()
+          }
+        })
+        </script>
+        """,
+        height=450,
+    )
+
+# Display the interactive chessboard
+chessboard_component()
+
+# Handle user moves
+if st.session_state.user_move:
     try:
-        move = chess.Move.from_uci(user_move)
+        move = chess.Move.from_uci(st.session_state.user_move)
         if move in st.session_state.board.legal_moves:
             st.session_state.board.push(move)
-            st.image(render_board(st.session_state.board))
             
             if not st.session_state.board.is_game_over():
                 with st.spinner("AI is thinking..."):
                     ai_move = get_ai_move(st.session_state.board)
                 ai_move_obj = chess.Move.from_uci(ai_move)
                 st.session_state.board.push(ai_move_obj)
-                st.image(render_board(st.session_state.board))
                 st.write(f"AI's move: {ai_move}")
+                
+                # Send AI move to JavaScript
+                st.components.v1.html(
+                    f"""
+                    <script>
+                    window.parent.postMessage({{
+                        type: 'move',
+                        move: '{ai_move}'
+                    }}, '*')
+                    </script>
+                    """
+                )
             
             if st.session_state.board.is_game_over():
                 st.write("Game Over!")
@@ -69,11 +159,14 @@ if st.button("Make Move"):
         else:
             st.write("Invalid move. Please try again.")
     except ValueError:
-        st.write("Invalid input. Please enter a move in UCI notation (e.g., 'e2e4').")
+        st.write("Invalid input. Please make a move on the board.")
+    
+    st.session_state.user_move = None
 
 # Reset button
 if st.button("Reset Game"):
     st.session_state.board = chess.Board()
+    st.session_state.user_move = None
     st.experimental_rerun()
 
 # Display game status
@@ -82,4 +175,35 @@ st.write(f"Fullmove number: {st.session_state.board.fullmove_number}")
 st.write(f"Halfmove clock: {st.session_state.board.halfmove_clock}")
 st.write(f"Is check? {st.session_state.board.is_check()}")
 st.write(f"Is checkmate? {st.session_state.board.is_checkmate()}")
-st.write(f"Is stalemate? {st.session_state.board.is_stalemate()}")
+st.write(f"Is stalemate? {st.session_state.board.is_stalemate()}")
+
+# JavaScript to Python communication
+components.html(
+    """
+    <script>
+    window.addEventListener('message', function(event) {
+        if (event.data.type === 'move') {
+            window.parent.postMessage({
+                type: 'streamlit:set_widget_value',
+                widgetType: 'custom',
+                widgetName: 'user_move',
+                value: event.data.move,
+            }, '*')
+        }
+    })
+    </script>
+    """
+)
+
+# Python to JavaScript communication
+if st.session_state.user_move:
+    components.html(
+        f"""
+        <script>
+        window.parent.postMessage({{
+            type: 'move',
+            move: '{st.session_state.user_move}'
+        }}, '*')
+        </script>
+        """
+    )