diff --git a/connect4/README.md b/connect4/README.md
index bdbe637cf..61cd80deb 100644
--- a/connect4/README.md
+++ b/connect4/README.md
@@ -42,3 +42,60 @@ I trained a tensorflow model for 6x7 Connect4 board (100 episodes,
 10 epochs per iteration and 25 MCTS simulations per turn) for 32 iterations which took about ~5 hours on a i7-6700HQ laptop
 
 After 32 iterations, the model get a pretty good result (83 win,7 lose,10 draw)  vs the 'OneStepLookaheadConnect4Player' player.
+
+##front-end
+###by chatgpt
+
+Sure! Here is a high-level overview of how you could implement a Connect Four game using React:
+
+Set up a new React project using a tool like create-react-app.
+Create a Board component that represents the game board. This component should render a 6x7 grid of cells.
+Create a Cell component that represents an individual cell on the board. This component should be able to display a colored circle if it is occupied by a player's piece.
+Create a Game component that keeps track of the state of the game, including which player's turn it is, which cells are occupied, and whether the game has been won or drawn. This component should render the Board component and handle user interaction (e.g. clicking on a cell to place a piece).
+Implement the game logic for determining when a player has won or when the game is a draw. This can be done by checking for horizontal, vertical, and diagonal lines of four connected pieces.
+Add some styling to make the game look nice and add some UI elements, such as buttons for starting a new game or displaying the current player's turn.
+Here is some sample code that demonstrates how the Cell and Board components could be implemented:
+
+Copy code
+import React from 'react';
+
+const Cell = ({ color }) => {
+  return (
+    <div
+      className="cell"
+      style={{
+        backgroundColor: color,
+        border: '1px solid black',
+        width: '100%',
+        height: '100%',
+        borderRadius: '50%',
+      }}
+    />
+  );
+};
+
+const Board = ({ board }) => {
+  return (
+    <div className="board">
+      {board.map((row, i) => (
+        <div className="row" key={i}>
+          {row.map((color, j) => (
+            <Cell color={color} key={j} />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+The board prop for the Board component should be a 2D array of strings representing the colors of each cell on the board. For example:
+
+Copy code
+const board = [
+  ['red', 'yellow', 'red', 'yellow', 'red', 'yellow', 'red'],
+  ['yellow', 'red', 'yellow', 'red', 'yellow', 'red', 'yellow'],
+  ['red', 'yellow', 'red', 'yellow', 'red', 'yellow', 'red'],
+  ['yellow', 'red', 'yellow', 'red', 'yellow', 'red', 'yellow'],
+  ['red', 'yellow', 'red', 'yellow', 'red', 'yellow', 'red'],
+  ['yellow', 'red', 'yellow', 'red', 'yellow', 'red', 'yellow'],
+];
+I hope this gives you a good starting point for building your Connect Four game! Let me know if you have any questions or need further guidance.
diff --git a/connect4/keras/Connect4NNet.py b/connect4/keras/Connect4NNet.py
index 31ab35188..0ddb3b048 100644
--- a/connect4/keras/Connect4NNet.py
+++ b/connect4/keras/Connect4NNet.py
@@ -1,6 +1,8 @@
 import sys
 sys.path.append('..')
 from utils import *
+import tensorflow.compat.v1 as tf
+tf.disable_v2_behavior()
 
 import argparse
 from tensorflow.keras.models import *
@@ -82,9 +84,7 @@ def __init__(self, game, args):
 
         self.pi = Dense(self.action_size, activation='softmax', name='pi')(policy_head(t))
         self.v = Dense(1, activation='tanh', name='v')(value_head(t))
-	
-	self.calculate_loss()
-
+        self.calculate_loss()
         self.model = Model(inputs=self.input_boards, outputs=[self.pi, self.v])
         self.model.compile(loss=[self.loss_pi ,self.loss_v], optimizer=Adam(args.lr))
 
diff --git a/writeup.pdf b/writeup.pdf
new file mode 100644
index 000000000..4ad7cdd4b
Binary files /dev/null and b/writeup.pdf differ