Update app.py

app.py

@@ -1,7 +1,10 @@
 import streamlit as st
-from streamlit_js_eval import streamlit_js_eval
 import chess
+import chess.svg
 from gradio_client import Client
+from cairosvg import svg2png
+from PIL import Image
+import io
 
 # Initialize the Gradio client
 client = Client("xianbao/SambaNova-fast")
@@ -23,83 +26,35 @@ def get_ai_move(board):
     
     return result.strip()
 
+# Function to convert SVG to PNG
+def svg_to_png(svg_string):
+    png_bytes = svg2png(bytestring=svg_string.encode('utf-8'))
+    return Image.open(io.BytesIO(png_bytes))
+
 # Streamlit app
 st.set_page_config(layout="wide")
-st.title("Interactive Chess against LLaMA 405B")
+st.title("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():
-    st.components.v1.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()
-
-        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'
-          
-          // Send move to Python
-          window.parent.streamlit.setComponentValue(move.from + move.to)
-        }
-
-        function onSnapEnd () {
-          board.position(game.fen())
-        }
 
-        var config = {
-          draggable: true,
-          position: 'start',
-          onDragStart: onDragStart,
-          onDrop: onDrop,
-          onSnapEnd: onSnapEnd
-        }
-        board = Chessboard('board', config)
+# Display the chessboard
+svg_board = chess.svg.board(board=st.session_state.board)
+st.image(svg_to_png(svg_board), width=400)
 
-        // Function to make a move
-        function makeMove(move) {
-          game.move(move)
-          board.position(game.fen())
-        }
+# Input for user's move
+user_move = st.text_input("Enter your move (e.g., 'e2e4'):")
 
-        // Expose the makeMove function globally
-        window.makeMove = makeMove
-        </script>
-        """,
-        height=450,
-    )
-
-# Display the interactive chessboard
-chessboard_component()
-
-# Handle user moves
-move = streamlit_js_eval(js_expressions='parent.window.streamlit.getComponentValue()', key='get_move')
-
-if move:
+if st.button("Make Move"):
     try:
-        chess_move = chess.Move.from_uci(move)
-        if chess_move in st.session_state.board.legal_moves:
-            st.session_state.board.push(chess_move)
+        move = chess.Move.from_uci(user_move)
+        if move in st.session_state.board.legal_moves:
+            st.session_state.board.push(move)
+            
+            # Display updated board
+            svg_board = chess.svg.board(board=st.session_state.board)
+            st.image(svg_to_png(svg_board), width=400)
             
             if not st.session_state.board.is_game_over():
                 with st.spinner("AI is thinking..."):
@@ -108,8 +63,9 @@ if move:
                 st.session_state.board.push(ai_move_obj)
                 st.write(f"AI's move: {ai_move}")
                 
-                # Send AI move to JavaScript
-                streamlit_js_eval(js_expressions=[f'makeMove("{ai_move}")'], key='make_ai_move')
+                # Display updated board after AI move
+                svg_board = chess.svg.board(board=st.session_state.board)
+                st.image(svg_to_png(svg_board), width=400)
             
             if st.session_state.board.is_game_over():
                 st.write("Game Over!")
@@ -117,18 +73,24 @@ if move:
         else:
             st.write("Invalid move. Please try again.")
     except ValueError:
-        st.write("Invalid input. Please make a move on the board.")
+        st.write("Invalid input. Please enter a move in UCI notation (e.g., 'e2e4').")
 
 # Reset button
 if st.button("Reset Game"):
     st.session_state.board = chess.Board()
-    streamlit_js_eval(js_expressions=['board.start()', 'game.reset()'], key='reset_board')
-    st.rerun()
+    st.experimental_rerun()
 
 # Display game status
 st.write(f"Current turn: {'White' if st.session_state.board.turn else 'Black'}")
 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 check? {'Yes' if st.session_state.board.is_check() else 'No'}")
+st.write(f"Is game over? {'Yes' if st.session_state.board.is_game_over() else 'No'}")
+
+# Hide the default Streamlit watermark
+hide_streamlit_style = """
+<style>
+#MainMenu {visibility: hidden;}
+footer {visibility: hidden;}
+</style>
+"""
+st.markdown(hide_streamlit_style, unsafe_allow_html=True)