Update app.py

app.py

@@ -15,71 +15,79 @@ from keras.losses import MeanSquaredError, BinaryCrossentropy
 from keras.regularizers import l2, l1
 from keras.callbacks import Callback
 
-# Set wide layout and updated CSS
+# Set wide layout and TensorFlow Playground CSS
 st.set_page_config(layout="wide")
 st.markdown("""
     <style>
     .stApp {
-        background-color: #252830;
-        color: white;
+        background-color: #f5f5f5;
+        color: #333;
         font-family: Arial, sans-serif;
     }
     h1, h2, h3 {
-        color: white;
+        color: #333;
         font-weight: bold;
         margin: 0;
         padding: 5px 0;
     }
     .stButton>button {
-        background-color: #555;
-        color: white;
-        border: 2px solid #777;
+        background-color: #e0e0e0;
+        color: #333;
+        border: 2px solid #999;
         border-radius: 5px;
         padding: 5px 10px;
         font-size: 14px;
         font-weight: bold;
     }
     .stButton>button:hover {
-        background-color: #777;
-        border-color: #999;
+        background-color: #c0c0c0;
+        border-color: #777;
     }
     .stSelectbox, .stSlider {
-        background-color: #333;
-        color: white;
-        border: 2px solid #777;
+        background-color: #fff;
+        color: #333;
+        border: 2px solid #999;
         border-radius: 5px;
         padding: 5px;
     }
     .stCheckbox label {
-        color: white;
+        color: #333;
         font-size: 14px;
         font-weight: bold;
     }
     .control-bar {
-        background-color: #1e2126;
+        background-color: #e0e0e0;
         padding: 10px;
-        border: 2px solid #333;
+        border: 2px solid #999;
         border-radius: 5px;
         margin-bottom: 10px;
     }
     .panel {
-        background-color: #2e3238;
+        background-color: #fff;
         padding: 10px;
-        border: 2px solid #777;
+        border: 2px solid #999;
         border-radius: 5px;
         margin: 10px 0;
     }
     .stSelectbox label, .stSlider label {
-        color: white;
+        color: #333;
         font-size: 12px;
         font-weight: bold;
     }
+    .play-stop {
+        background-color: #e0e0e0;
+        border: 2px solid #999;
+        border-radius: 5px;
+        padding: 5px;
+        margin-right: 10px;
+    }
     </style>
 """, unsafe_allow_html=True)
 
 # Session state initialization
 if "training" not in st.session_state:
     st.session_state.training = False
+    st.session_state.epoch = 0
 if "num_hidden_layers" not in st.session_state:
     st.session_state.num_hidden_layers = 2
 if "hidden_layer_neurons" not in st.session_state:
@@ -91,36 +99,46 @@ def reset_session():
     st.session_state.clear()
     st.session_state.num_hidden_layers = 2
     st.session_state.hidden_layer_neurons = [4, 2]
+    st.session_state.training = False
+    st.session_state.epoch = 0
 
 # Two-row top control bar
 with st.container():
     st.markdown('<div class="control-bar">', unsafe_allow_html=True)
-    # Row 1
-    col1, col2, col3, col4, col5 = st.columns(5)
+    # Row 1: Play/Stop and Epoch
+    col_play, col_epoch, col1, col2, col3 = st.columns([1, 2, 2, 2, 2])
+    with col_play:
+        col_play1, col_play2 = st.columns([1, 1])
+        with col_play1:
+            if st.button("⏪", key="rewind", help="Rewind"):
+                pass  # Placeholder for rewind functionality
+        with col_play2:
+            if st.button("▶️", key="play", on_click=lambda: setattr(st.session_state, "training", True)):
+                st.session_state.training = True
+            if st.button("⏹️", key="stop", on_click=lambda: setattr(st.session_state, "training", False)):
+                st.session_state.training = False
+    with col_epoch:
+        st.write(f"Epoch: {st.session_state.epoch:06d}")
     with col1:
-        problem_type = st.selectbox("Problem Type", ["Classification", "Regression"])
+        learning_rate = st.selectbox("Learning Rate", [0.0001, 0.001, 0.03, 0.1, 0.3, 1], index=2)
     with col2:
-        dataset_options = {"Classification": ["Blobs", "Circles", "Spirals", "XOR"], "Regression": ["Sine Wave"]}
-        dataset_type = st.selectbox("Dataset", dataset_options[problem_type])
+        activation = st.selectbox("Activation", ["ReLU", "Sigmoid", "Tanh"], index=2)
     with col3:
-        learning_rate = st.selectbox("Learning Rate", [0.0001, 0.001, 0.03, 0.1, 0.3, 1], index=2)
+        reg_type = st.selectbox("Regularization", ["None", "L1", "L2"], index=0)
+
+    # Row 2: Other controls
+    col4, col5, col6, col7, col8 = st.columns([2, 2, 2, 2, 2])
     with col4:
-        activation = st.selectbox("Activation", ["ReLU", "Sigmoid", "Tanh"], index=2)
+        reg_rate = st.selectbox("Reg Rate", [0.0, 0.001, 0.01, 0.1, 1], index=0)
     with col5:
-        batch_size = st.slider("Batch Size", 1, 30, 10)
-    
-    # Row 2
-    col6, col7, col8, col9, col10 = st.columns(5)
+        problem_type = st.selectbox("Problem Type", ["Classification", "Regression"])
     with col6:
-        noise_level = st.slider("Noise", 0, 50, 0, step=5)
+        dataset_options = {"Classification": ["Blobs", "Circles", "Spirals", "XOR"], "Regression": ["Sine Wave"]}
+        dataset_type = st.selectbox("Dataset", dataset_options[problem_type])
     with col7:
-        reg_type = st.selectbox("Regularization", ["None", "L1", "L2"], index=0)
+        batch_size = st.slider("Batch Size", 1, 30, 10)
     with col8:
-        reg_rate = st.selectbox("Reg Rate", [0.0, 0.001, 0.01, 0.1, 1], index=0)
-    with col9:
-        train_ratio = st.slider("Train %", 10, 90, 50, 10) / 100
-    with col10:
-        st.button("Reset", key="reset_global", on_click=reset_session)
+        noise_level = st.slider("Noise", 0, 50, 0, step=5)
     st.markdown('</div>', unsafe_allow_html=True)
 
 # Dataset generation
@@ -163,28 +181,41 @@ if problem_type == "Classification":
 # Main layout
 col_left, col_center, col_right = st.columns([1, 2, 1])
 
-# Left panel: Dataset with Seaborn
+# Left panel: Data and Features with Seaborn
 with col_left:
     st.markdown('<div class="panel">', unsafe_allow_html=True)
-    st.subheader("Data")
+    st.subheader("DATA")
+    st.write("Which dataset do you want to use?")
     fig, ax = plt.subplots(figsize=(3, 3))
     if problem_type == "Classification":
         sns.scatterplot(x=fv[:, 0], y=fv[:, 1], hue=cv, palette="coolwarm", edgecolor="k", alpha=0.7, ax=ax, legend=False)
+        plt.colorbar(ax.collections[0], ax=ax, label="Class Probability", shrink=0.5)
     else:
         sns.scatterplot(x=fv[:, 0], y=cv, color="blue", edgecolor="k", alpha=0.7, ax=ax)
+    ax.set_facecolor("#e6f3ff")
     ax.set_xticks([])
     ax.set_yticks([])
-    ax.set_facecolor("#333")
     st.pyplot(fig)
-    st.subheader("Features")
+    st.subheader("FEATURES")
+    st.write("Which properties do you want to feed in?")
     for feature in features.keys():
         st.checkbox(feature, value=feature in ["X1", "X2"], key=feature)
+    col_train, col_noise, col_batch = st.columns(3)
+    with col_train:
+        train_ratio = st.slider("Ratio of training to test data: 50%", 10, 90, 50, 10) / 100
+    with col_noise:
+        noise_level = st.slider("Noise: 0", 0, 50, 0, step=5)
+    with col_batch:
+        batch_size = st.slider("Batch size: 10", 1, 30, 10)
+    st.button("REGENERATE", key="regenerate")
+    st.checkbox("Show test data", key="show_test_data")
+    st.checkbox("Discretize output", key="discretize_output")
     st.markdown('</div>', unsafe_allow_html=True)
 
-# Center panel: Horizontal Network Visualization
+# Center panel: Horizontal ANN Visualization
 with col_center:
     st.markdown('<div class="panel">', unsafe_allow_html=True)
-    st.subheader("Network")
+    st.subheader("HIDDEN LAYERS")
 
     def draw_nn(features, hidden_neurons):
         G = nx.DiGraph()
@@ -198,16 +229,16 @@ with col_center:
             for node in layer:
                 G.add_node(node, layer=layer_idx)
                 if layer_idx == 0:
-                    node_colors[node] = "#90EE90"
+                    node_colors[node] = "#ff9f40"  # Orange for input
                 elif layer_idx == len(all_layers) - 1:
-                    node_colors[node] = "#FFA07A"
+                    node_colors[node] = "#ff9f40"  # Orange for output
                 else:
-                    node_colors[node] = "#87CEFA"
+                    node_colors[node] = "#40a0ff"  # Blue for hidden
 
         for i in range(len(all_layers) - 1):
             for node1 in all_layers[i]:
                 for node2 in all_layers[i + 1]:
-                    G.add_edge(node1, node2)
+                    G.add_edge(node1, node2, weight=np.random.uniform(0.1, 1.0))  # Random weight for thickness
 
         pos = nx.multipartite_layout(G, subset_key="layer", align="vertical")
         pos_rotated = {node: (-y, x) for node, (x, y) in pos.items()}
@@ -215,22 +246,42 @@ with col_center:
             pos_rotated[node] = (pos_rotated[node][0] * 2, pos_rotated[node][1] * 2)
 
         fig, ax = plt.subplots(figsize=(8, 4))
-        ax.set_facecolor("#252830")
+        ax.set_facecolor("#f5f5f5")
+        edge_colors = [plt.cm.RdBu(G[u][v]['weight']) for u, v in G.edges()]
         nx.draw(
             G, pos_rotated,
             with_labels=True,
             node_color=[node_colors[node] for node in G.nodes()],
-            edge_color="white",
-            node_size=600,
+            edge_color=edge_colors,
+            node_shape="s",  # Square nodes
+            node_size=1200,
             font_size=8,
             font_color="black",
             font_weight="bold",
             edgecolors="black",
-            width=1.0,
-            arrows=True,
+            width=[G[u][v]['weight'] * 2 for u, v in G.edges()],  # Vary thickness
+            arrows=False,
             ax=ax
         )
-        plt.title("Neural Network Structure", color="white", fontsize=12, pad=10)
+        plt.title("Neural Network Structure", color="#333", fontsize=12, pad=10)
+        
+        # Add + and - buttons for layers
+        col_plus, col_minus = st.columns([1, 1])
+        with col_plus:
+            st.button("+", key="add_layer", on_click=add_layer)
+        with col_minus:
+            st.button("−", key="remove_layer", on_click=remove_layer)
+
+        # Layer neuron controls
+        for i in range(st.session_state.num_hidden_layers):
+            col_dec, col_label, col_inc = st.columns([1, 2, 1])
+            with col_dec:
+                st.button("−", key=f"dec_{i}", on_click=decrease_neurons, args=(i,))
+            with col_label:
+                st.write(f"{st.session_state.hidden_layer_neurons[i]} neurons")
+            with col_inc:
+                st.button("+", key=f"inc_{i}", on_click=increase_neurons, args=(i,))
+
         return fig
 
     st.pyplot(draw_nn(selected_features, st.session_state.hidden_layer_neurons))
@@ -253,33 +304,54 @@ with col_center:
         if st.session_state.hidden_layer_neurons[i] > 1:
             st.session_state.hidden_layer_neurons[i] -= 1
 
-    for i in range(st.session_state.num_hidden_layers):
-        col1, col2, col3 = st.columns([1, 2, 1])
-        with col1:
-            st.button("−", key=f"dec_{i}", on_click=decrease_neurons, args=(i,))  # Unicode minus
-        with col2:
-            st.write(f"Layer {i+1}: {st.session_state.hidden_layer_neurons[i]}")
-        with col3:
-            st.button("+", key=f"inc_{i}", on_click=increase_neurons, args=(i,))
-    col_btn1, col_btn2 = st.columns(2)
-    with col_btn1:
-        st.button("Add Layer", on_click=add_layer)
-    with col_btn2:
-        st.button("Remove Layer", on_click=remove_layer)
     st.markdown('</div>', unsafe_allow_html=True)
 
-# Right panel: Output and Training
+# Right panel: Output
 with col_right:
     st.markdown('<div class="panel">', unsafe_allow_html=True)
-    st.subheader("Output")
-    col_start, col_stop = st.columns(2)
-    with col_start:
-        if st.button("▶️ Play"):
-            st.session_state.training = True
-    with col_stop:
-        if st.button("⏹️ Stop"):
-            st.session_state.training = False
+    st.subheader("OUTPUT")
+    if st.session_state.training:
+        train_loss = 0.505  # Simulated value
+        test_loss = 0.513   # Simulated value
+        st.write(f"Training loss: {train_loss:.3f}")
+        st.write(f"Test loss: {test_loss:.3f}")
+    col1, col2 = st.columns(2)
+    with col1:
+        plt.figure(figsize=(3, 3))
+        if problem_type == "Classification":
+            y_pred_proba = model.predict(selected_data, verbose=0)
+            y_pred = (y_pred_proba > 0.5).astype(int).ravel()
+            try:
+                plot_decision_regions(selected_data[:, :2], cv, clf=model, legend=2)
+            except Exception as e:
+                st.warning(f"Decision region plot failed: {e}")
+                xx, yy = np.meshgrid(np.linspace(selected_data[:, 0].min(), selected_data[:, 0].max(), 100),
+                                     np.linspace(selected_data[:, 1].min(), selected_data[:, 1].max(), 100))
+                grid = np.c_[xx.ravel(), yy.ravel()]
+                Z = model.predict(grid, verbose=0)
+                Z = (Z > 0.5).astype(int).reshape(xx.shape)
+                plt.contourf(xx, yy, Z, alpha=0.3, cmap="coolwarm")
+                plt.scatter(selected_data[:, 0], selected_data[:, 1], c=cv, cmap="coolwarm", edgecolors="k", alpha=0.7)
+        else:
+            y_pred = model.predict(selected_data, verbose=0)
+            plt.scatter(selected_data[:, 0], cv, c="blue", alpha=0.5)
+            plt.plot(selected_data[:, 0], y_pred, "r-", linewidth=2)
+        plt.gca().set_facecolor("#e6f3ff")
+        plt.xticks([])
+        plt.yticks([])
+        st.pyplot(plt)
+    with col2:
+        fig, ax = plt.subplots(figsize=(3, 3))
+        ax.plot([1, 2, 3], [0.5, 0.5, 0.5], "b-", label="Train")  # Simulated loss
+        ax.plot([1, 2, 3], [0.51, 0.51, 0.51], "r--", label="Val")  # Simulated loss
+        ax.legend()
+        ax.set_facecolor("#e6f3ff")
+        st.pyplot(fig)
+    st.write("Colors shows data, neuron and weight values.")
+    st.markdown('</div>', unsafe_allow_html=True)
 
+# Training logic (moved outside for clarity)
+if st.session_state.training:
     def create_model(input_dim, neurons):
         model = Sequential()
         model.add(Input(shape=(input_dim,)))
@@ -300,6 +372,7 @@ with col_right:
             self.placeholder = st.empty()
 
         def on_epoch_end(self, epoch, logs=None):
+            st.session_state.epoch = epoch + 1
             self.losses["Epoch"].append(epoch + 1)
             self.losses["Train Loss"].append(logs["loss"])
             self.losses["Val Loss"].append(logs["val_loss"])
@@ -311,7 +384,7 @@ with col_right:
                         y_pred_proba = self.model.predict(self.X, verbose=0)
                         y_pred = (y_pred_proba > 0.5).astype(int).ravel()
                         try:
-                            plot_decision_regions(self.X, self.y, clf=self.model, legend=2)
+                            plot_decision_regions(self.X[:, :2], self.y, clf=self.model, legend=2)
                         except Exception as e:
                             st.warning(f"Decision region plot failed: {e}")
                             xx, yy = np.meshgrid(np.linspace(self.X[:, 0].min(), self.X[:, 0].max(), 100),
@@ -325,7 +398,7 @@ with col_right:
                         y_pred = self.model.predict(self.X, verbose=0)
                         plt.scatter(self.X[:, 0], self.y, c="blue", alpha=0.5)
                         plt.plot(self.X[:, 0], y_pred, "r-", linewidth=2)
-                    plt.gca().set_facecolor("#333")
+                    plt.gca().set_facecolor("#e6f3ff")
                     plt.xticks([])
                     plt.yticks([])
                     st.pyplot(plt)
@@ -334,11 +407,9 @@ with col_right:
                     ax.plot(self.losses["Epoch"], self.losses["Train Loss"], "b-", label="Train")
                     ax.plot(self.losses["Epoch"], self.losses["Val Loss"], "r--", label="Val")
                     ax.legend()
-                    ax.set_facecolor("#333")
+                    ax.set_facecolor("#e6f3ff")
                     st.pyplot(fig)
 
-    if st.session_state.training:
-        model = create_model(len(selected_features), st.session_state.hidden_layer_neurons)
-        callback = OutputCallback(selected_data, cv)
-        model.fit(selected_data, cv, epochs=999999, batch_size=batch_size, validation_split=1-train_ratio, callbacks=[callback], verbose=0)
-    st.markdown('</div>', unsafe_allow_html=True)
+    model = create_model(len(selected_features), st.session_state.hidden_layer_neurons)
+    callback = OutputCallback(selected_data, cv)
+    model.fit(selected_data, cv, epochs=999999, batch_size=batch_size, validation_split=1-train_ratio, callbacks=[callback], verbose=0)