Update app.py

app.py

@@ -3,18 +3,19 @@ import networkx as nx
 import pandas as pd
 import numpy as np
 import matplotlib.pyplot as plt
+import seaborn as sns
 from sklearn.datasets import make_blobs, make_circles, make_moons
 from sklearn.preprocessing import StandardScaler
 from mlxtend.plotting import plot_decision_regions
 import tensorflow as tf
 from keras.models import Sequential
-from keras.layers import Input, Dense  # Fixed typo here
+from keras.layers import Input, Dense
 from keras.optimizers import SGD
 from keras.losses import MeanSquaredError, BinaryCrossentropy
 from keras.regularizers import l2, l1
 from keras.callbacks import Callback
 
-# Set wide layout and TensorFlow Playground CSS
+# Set wide layout and updated CSS
 st.set_page_config(layout="wide")
 st.markdown("""
     <style>
@@ -32,17 +33,20 @@ st.markdown("""
     .stButton>button {
         background-color: #555;
         color: white;
-        border: none;
+        border: 2px solid #777;
         border-radius: 5px;
         padding: 5px 10px;
         font-size: 14px;
+        font-weight: bold;
     }
     .stButton>button:hover {
         background-color: #777;
+        border-color: #999;
     }
     .stSelectbox, .stSlider {
         background-color: #333;
         color: white;
+        border: 2px solid #777;
         border-radius: 5px;
         padding: 5px;
     }
@@ -54,11 +58,14 @@ st.markdown("""
     .control-bar {
         background-color: #1e2126;
         padding: 10px;
-        border-bottom: 2px solid #333;
+        border: 2px solid #333;
+        border-radius: 5px;
+        margin-bottom: 10px;
     }
     .panel {
         background-color: #2e3238;
         padding: 10px;
+        border: 2px solid #777;
         border-radius: 5px;
         margin: 10px 0;
     }
@@ -85,10 +92,11 @@ def reset_session():
     st.session_state.num_hidden_layers = 2
     st.session_state.hidden_layer_neurons = [4, 2]
 
-# Top control bar with labeled dropdowns and sliders
+# Two-row top control bar
 with st.container():
     st.markdown('<div class="control-bar">', unsafe_allow_html=True)
-    col1, col2, col3, col4, col5, col6, col7, col8, col9 = st.columns(9)
+    # Row 1
+    col1, col2, col3, col4, col5 = st.columns(5)
     with col1:
         problem_type = st.selectbox("Problem Type", ["Classification", "Regression"])
     with col2:
@@ -100,6 +108,9 @@ with st.container():
         activation = st.selectbox("Activation", ["ReLU", "Sigmoid", "Tanh"], index=2)
     with col5:
         batch_size = st.slider("Batch Size", 1, 30, 10)
+    
+    # Row 2
+    col6, col7, col8, col9, col10 = st.columns(5)
     with col6:
         noise_level = st.slider("Noise", 0, 50, 0, step=5)
     with col7:
@@ -108,6 +119,8 @@ with st.container():
         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
@@ -144,18 +157,21 @@ features = {
 selected_features = [f for f in features.keys() if st.session_state.get(f, f in ["X1", "X2"])]
 selected_data = np.column_stack([features[f] for f in selected_features])
 
+if problem_type == "Classification":
+    cv = cv.astype(int)
+
 # Main layout
 col_left, col_center, col_right = st.columns([1, 2, 1])
 
-# Left panel: Dataset and Features
+# Left panel: Dataset with Seaborn
 with col_left:
     st.markdown('<div class="panel">', unsafe_allow_html=True)
     st.subheader("Data")
     fig, ax = plt.subplots(figsize=(3, 3))
     if problem_type == "Classification":
-        ax.scatter(fv[:, 0], fv[:, 1], c=cv, cmap="coolwarm", edgecolors="k", alpha=0.7)
+        sns.scatterplot(x=fv[:, 0], y=fv[:, 1], hue=cv, palette="coolwarm", edgecolor="k", alpha=0.7, ax=ax, legend=False)
     else:
-        ax.scatter(fv[:, 0], cv, c="blue", alpha=0.7)
+        sns.scatterplot(x=fv[:, 0], y=cv, color="blue", edgecolor="k", alpha=0.7, ax=ax)
     ax.set_xticks([])
     ax.set_yticks([])
     ax.set_facecolor("#333")
@@ -165,59 +181,53 @@ with col_left:
         st.checkbox(feature, value=feature in ["X1", "X2"], key=feature)
     st.markdown('</div>', unsafe_allow_html=True)
 
-# Center panel: Network Visualization and Controls
+# Center panel: Horizontal Network Visualization
 with col_center:
     st.markdown('<div class="panel">', unsafe_allow_html=True)
     st.subheader("Network")
 
     def draw_nn(features, hidden_neurons):
         G = nx.DiGraph()
-        
-        # Define layers
         input_layer = features
         hidden_layers = [[f"H{i+1}_{j+1}" for j in range(n)] for i, n in enumerate(hidden_neurons)]
         output_layer = ["Output"]
         all_layers = [input_layer] + hidden_layers + [output_layer]
 
-        # Add nodes with layer attribute
         node_colors = {}
         for layer_idx, layer in enumerate(all_layers):
             for node in layer:
                 G.add_node(node, layer=layer_idx)
                 if layer_idx == 0:
-                    node_colors[node] = "#90EE90"  # Input: Green
+                    node_colors[node] = "#90EE90"
                 elif layer_idx == len(all_layers) - 1:
-                    node_colors[node] = "#FFA07A"  # Output: Orange
+                    node_colors[node] = "#FFA07A"
                 else:
-                    node_colors[node] = "#87CEFA"  # Hidden: Blue
+                    node_colors[node] = "#87CEFA"
 
-        # Add edges (fully connected)
         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)
 
-        # Position nodes using multipartite layout
-        pos = nx.multipartite_layout(G, subset_key="layer", align="horizontal")
-        
-        # Adjust positions for better spacing
-        for node in pos:
-            pos[node][1] *= 2  # Increase vertical spacing
+        pos = nx.multipartite_layout(G, subset_key="layer", align="vertical")
+        pos_rotated = {node: (-y, x) for node, (x, y) in pos.items()}
+        for node in pos_rotated:
+            pos_rotated[node] = (pos_rotated[node][0] * 2, pos_rotated[node][1] * 2)
 
-        # Draw the network
         fig, ax = plt.subplots(figsize=(8, 4))
         ax.set_facecolor("#252830")
         nx.draw(
-            G, pos, 
-            with_labels=True, 
-            node_color=[node_colors[node] for node in G.nodes()], 
-            edge_color="white", 
-            node_size=600, 
-            font_size=8, 
-            font_color="black", 
-            font_weight="bold", 
-            edgecolors="black", 
-            width=0.4, 
+            G, pos_rotated,
+            with_labels=True,
+            node_color=[node_colors[node] for node in G.nodes()],
+            edge_color="white",
+            node_size=600,
+            font_size=8,
+            font_color="black",
+            font_weight="bold",
+            edgecolors="black",
+            width=1.0,
+            arrows=True,
             ax=ax
         )
         plt.title("Neural Network Structure", color="white", fontsize=12, pad=10)
@@ -246,7 +256,7 @@ with col_center:
     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,))
+            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:
@@ -298,12 +308,26 @@ with col_right:
                 with col1:
                     plt.figure(figsize=(3, 3))
                     if problem_type == "Classification":
-                        plot_decision_regions(self.X, self.y, clf=self.model)
+                        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)
+                        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))
+                            grid = np.c_[xx.ravel(), yy.ravel()]
+                            Z = self.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(self.X[:, 0], self.X[:, 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("#333")
+                    plt.xticks([])
+                    plt.yticks([])
                     st.pyplot(plt)
                 with col2:
                     fig, ax = plt.subplots(figsize=(3, 3))
@@ -317,7 +341,4 @@ with col_right:
         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)
-
-if st.button("Reset", key="reset_global"):
-    reset_session()
+    st.markdown('</div>', unsafe_allow_html=True)