Update app.py

app.py

@@ -20,74 +20,66 @@ st.set_page_config(layout="wide")
 st.markdown("""
     <style>
     .stApp {
-        background-color: #f5f5f5;
-        color: #333;
+        background-color: #252830;
+        color: white;
         font-family: Arial, sans-serif;
     }
     h1, h2, h3 {
-        color: #333;
+        color: white;
         font-weight: bold;
         margin: 0;
         padding: 5px 0;
     }
     .stButton>button {
-        background-color: #e0e0e0;
-        color: #333;
-        border: 2px solid #999;
+        background-color: #555;
+        color: white;
+        border: 2px solid #777;
         border-radius: 5px;
         padding: 5px 10px;
         font-size: 14px;
         font-weight: bold;
     }
     .stButton>button:hover {
-        background-color: #c0c0c0;
-        border-color: #777;
+        background-color: #777;
+        border-color: #999;
     }
     .stSelectbox, .stSlider {
-        background-color: #fff;
-        color: #333;
-        border: 2px solid #999;
+        background-color: #333;
+        color: white;
+        border: 2px solid #777;
         border-radius: 5px;
         padding: 5px;
     }
     .stCheckbox label {
-        color: #333;
+        color: white;
         font-size: 14px;
         font-weight: bold;
     }
     .control-bar {
-        background-color: #e0e0e0;
+        background-color: #1e2126;
         padding: 10px;
-        border: 2px solid #999;
+        border: 2px solid #333;
         border-radius: 5px;
         margin-bottom: 10px;
     }
     .panel {
-        background-color: #fff;
+        background-color: #2e3238;
         padding: 10px;
-        border: 2px solid #999;
+        border: 2px solid #777;
         border-radius: 5px;
         margin: 10px 0;
     }
     .stSelectbox label, .stSlider label {
-        color: #333;
+        color: white;
         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:
@@ -99,46 +91,36 @@ 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: 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}")
+    # Row 1
+    col1, col2, col3, col4, col5 = st.columns(5)
     with col1:
-        learning_rate = st.selectbox("Learning Rate", [0.0001, 0.001, 0.03, 0.1, 0.3, 1], index=2)
+        problem_type = st.selectbox("Problem Type", ["Classification", "Regression"])
     with col2:
-        activation = st.selectbox("Activation", ["ReLU", "Sigmoid", "Tanh"], index=2)
+        dataset_options = {"Classification": ["Blobs", "Circles", "Spirals", "XOR"], "Regression": ["Sine Wave"]}
+        dataset_type = st.selectbox("Dataset", dataset_options[problem_type])
     with col3:
-        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])
+        learning_rate = st.selectbox("Learning Rate", [0.0001, 0.001, 0.03, 0.1, 0.3, 1], index=2)
     with col4:
-        reg_rate = st.selectbox("Reg Rate", [0.0, 0.001, 0.01, 0.1, 1], index=0)
+        activation = st.selectbox("Activation", ["ReLU", "Sigmoid", "Tanh"], index=2)
     with col5:
-        problem_type = st.selectbox("Problem Type", ["Classification", "Regression"])
+        batch_size = st.slider("Batch Size", 1, 30, 10)
+    
+    # Row 2
+    col6, col7, col8, col9, col10 = st.columns(5)
     with col6:
-        dataset_options = {"Classification": ["Blobs", "Circles", "Spirals", "XOR"], "Regression": ["Sine Wave"]}
-        dataset_type = st.selectbox("Dataset", dataset_options[problem_type])
+        noise_level = st.slider("Noise", 0, 50, 0, step=5)
     with col7:
-        batch_size = st.slider("Batch Size", 1, 30, 10)
+        reg_type = st.selectbox("Regularization", ["None", "L1", "L2"], index=0)
     with col8:
-        noise_level = st.slider("Noise", 0, 50, 0, step=5)
+        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)
     st.markdown('</div>', unsafe_allow_html=True)
 
 # Dataset generation
@@ -181,41 +163,28 @@ if problem_type == "Classification":
 # Main layout
 col_left, col_center, col_right = st.columns([1, 2, 1])
 
-# Left panel: Data and Features with Seaborn
+# Left panel: Dataset with Seaborn
 with col_left:
     st.markdown('<div class="panel">', unsafe_allow_html=True)
-    st.subheader("DATA")
-    st.write("Which dataset do you want to use?")
+    st.subheader("Data")
     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.write("Which properties do you want to feed in?")
+    st.subheader("Features")
     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 ANN Visualization
+# Center panel: Horizontal Network Visualization
 with col_center:
     st.markdown('<div class="panel">', unsafe_allow_html=True)
-    st.subheader("HIDDEN LAYERS")
+    st.subheader("Network")
 
     def draw_nn(features, hidden_neurons):
         G = nx.DiGraph()
@@ -229,16 +198,16 @@ with col_center:
             for node in layer:
                 G.add_node(node, layer=layer_idx)
                 if layer_idx == 0:
-                    node_colors[node] = "#ff9f40"  # Orange for input
+                    node_colors[node] = "#90EE90"  # Green for input
                 elif layer_idx == len(all_layers) - 1:
-                    node_colors[node] = "#ff9f40"  # Orange for output
+                    node_colors[node] = "#FFA07A"  # Orange for output
                 else:
-                    node_colors[node] = "#40a0ff"  # Blue for hidden
+                    node_colors[node] = "#87CEFA"  # 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, weight=np.random.uniform(0.1, 1.0))  # Random weight for thickness
+                    G.add_edge(node1, node2)
 
         pos = nx.multipartite_layout(G, subset_key="layer", align="vertical")
         pos_rotated = {node: (-y, x) for node, (x, y) in pos.items()}
@@ -246,42 +215,22 @@ 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("#f5f5f5")
-        edge_colors = [plt.cm.RdBu(G[u][v]['weight']) for u, v in G.edges()]
+        ax.set_facecolor("#252830")
         nx.draw(
             G, pos_rotated,
             with_labels=True,
             node_color=[node_colors[node] for node in G.nodes()],
-            edge_color=edge_colors,
-            node_shape="s",  # Square nodes
-            node_size=1200,
+            edge_color="white",
+            node_size=600,
             font_size=8,
             font_color="black",
             font_weight="bold",
             edgecolors="black",
-            width=[G[u][v]['weight'] * 2 for u, v in G.edges()],  # Vary thickness
-            arrows=False,
+            width=1.0,
+            arrows=True,
             ax=ax
         )
-        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,))
-
+        plt.title("Neural Network Structure", color="white", fontsize=12, pad=10)
         return fig
 
     st.pyplot(draw_nn(selected_features, st.session_state.hidden_layer_neurons))
@@ -304,54 +253,33 @@ 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,))
+        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
+# Right panel: Output and Training
 with col_right:
     st.markdown('<div class="panel">', unsafe_allow_html=True)
-    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)
+    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
 
-# 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,)))
@@ -372,7 +300,6 @@ if st.session_state.training:
             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"])
@@ -381,24 +308,28 @@ if st.session_state.training:
                 with col1:
                     plt.figure(figsize=(3, 3))
                     if problem_type == "Classification":
-                        y_pred_proba = self.model.predict(self.X, verbose=0)
+                        # Ensure we use only the first two features for 2D plotting
+                        X_2d = self.X[:, :2]  # Use only X1 and X2 for decision boundary
+                        y_pred_proba = self.model.predict(X_2d, verbose=0)
                         y_pred = (y_pred_proba > 0.5).astype(int).ravel()
                         try:
-                            plot_decision_regions(self.X[:, :2], self.y, clf=self.model, legend=2)
+                            plot_decision_regions(X_2d, self.y, clf=self.model, legend=2, colors='blue,red')
+                            plt.scatter(X_2d[:, 0], X_2d[:, 1], c=self.y, cmap='coolwarm', edgecolors='k', alpha=0.7)
                         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),
-                                                 np.linspace(self.X[:, 1].min(), self.X[:, 1].max(), 100))
+                            xx, yy = np.meshgrid(np.linspace(X_2d[:, 0].min(), X_2d[:, 0].max(), 100),
+                                                 np.linspace(X_2d[:, 1].min(), X_2d[:, 1].max(), 100))
                             grid = np.c_[xx.ravel(), yy.ravel()]
                             Z = self.model.predict(grid, verbose=0)
                             Z = (Z > 0.5).astype(int).reshape(xx.shape)
+                            plt.contour(xx, yy, Z, levels=[0.5], colors='black', linewidths=2)  # Clear decision boundary
                             plt.contourf(xx, yy, Z, alpha=0.3, cmap="coolwarm")
-                            plt.scatter(self.X[:, 0], self.X[:, 1], c=self.y, cmap="coolwarm", edgecolors="k", alpha=0.7)
+                            plt.scatter(X_2d[:, 0], X_2d[:, 1], c=self.y, cmap="coolwarm", edgecolors="k", alpha=0.7)
                     else:
                         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("#e6f3ff")
+                    plt.gca().set_facecolor("#333")
                     plt.xticks([])
                     plt.yticks([])
                     st.pyplot(plt)
@@ -407,9 +338,11 @@ if st.session_state.training:
                     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("#e6f3ff")
+                    ax.set_facecolor("#333")
                     st.pyplot(fig)
 
-    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)
+    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)