Update app.py

app.py

@@ -3,59 +3,75 @@ import networkx as nx
 import pandas as pd
 import numpy as np
 import matplotlib.pyplot as plt
-import seaborn as sns
-from IPython.display import clear_output
-import io
-from sklearn.model_selection import train_test_split
-from sklearn.metrics import log_loss
-from sklearn.datasets import make_classification, make_circles
+from sklearn.datasets import make_circles
 from sklearn.preprocessing import StandardScaler
 from mlxtend.plotting import plot_decision_regions
 import tensorflow as tf
-from keras.optimizers import SGD
 from keras.models import Sequential
 from keras.layers import Input, Dense
+from keras.optimizers import SGD
 from keras.losses import BinaryCrossentropy
 from keras.regularizers import l2, l1
 from keras.callbacks import Callback
 
-# Wide layout and dark theme CSS
+# Set wide layout and apply TensorFlow Playground-inspired CSS
 st.set_page_config(layout="wide")
 st.markdown("""
     <style>
-    body {
+    .stApp {
         background-color: #252830;
         color: white;
+        font-family: Arial, sans-serif;
     }
-    .stApp {
-        background-color: #252830;
+    h1, h2, h3 {
         color: white;
+        font-weight: bold;
+        margin: 0;
+        padding: 5px 0;
     }
     .stButton>button {
         background-color: #555;
         color: white;
+        border: none;
         border-radius: 5px;
         padding: 5px 10px;
+        font-size: 14px;
+    }
+    .stButton>button:hover {
+        background-color: #777;
     }
     .stSelectbox, .stSlider {
         background-color: #333;
         color: white;
         border-radius: 5px;
+        padding: 5px;
     }
     .stCheckbox label {
         color: white;
+        font-size: 14px;
         font-weight: bold;
     }
+    .control-bar {
+        background-color: #1e2126;
+        padding: 10px;
+        border-bottom: 2px solid #333;
+    }
+    .panel {
+        background-color: #2e3238;
+        padding: 10px;
+        border-radius: 5px;
+        margin: 10px 0;
+    }
     </style>
 """, unsafe_allow_html=True)
 
-# Session state initialization
+# Session state initialization (matching URL defaults)
 if "training" not in st.session_state:
     st.session_state.training = False
 if "num_hidden_layers" not in st.session_state:
-    st.session_state.num_hidden_layers = 2  # Default from URL: 4,2
+    st.session_state.num_hidden_layers = 2  # Default: 4,2
 if "hidden_layer_neurons" not in st.session_state:
-    st.session_state.hidden_layer_neurons = [4, 2]  # Default from URL
+    st.session_state.hidden_layer_neurons = [4, 2]
 if "prev_params" not in st.session_state:
     st.session_state.prev_params = {}
 
@@ -64,173 +80,170 @@ def reset_session():
     st.session_state.num_hidden_layers = 2
     st.session_state.hidden_layer_neurons = [4, 2]
 
-# Header bar with controls
-st.markdown("<h1 style='text-align: center; color: white;'>Neural Network Playground</h1>", unsafe_allow_html=True)
-
-# Top controls in columns
-col1, col2, col3, col4, col5 = st.columns([1, 1, 1, 1, 1])
-with col1:
-    dataset_type = st.selectbox("Dataset", ["Circle", "Gaussian"], index=0)  # Circle default
-with col2:
-    learning_rate = st.selectbox("Learning Rate", [0.0001, 0.001, 0.03, 0.1, 0.3, 1], index=2)  # 0.03 default
-with col3:
-    activation_function = st.selectbox("Activation", ["ReLU", "Sigmoid", "Tanh"], index=2)  # Tanh default
-with col4:
-    batch_size = st.slider("Batch Size", 1, 30, 10)  # 10 default
-with col5:
-    noise_level_slider = st.slider("Noise", 0, 50, 0, step=5)  # 0 default
-
-# Additional controls in a second row
-col6, col7, col8, col9 = st.columns([1, 1, 1, 1])
-with col6:
-    regularization_type = st.selectbox("Regularization", ["None", "L1", "L2"], index=0)  # None default
-with col7:
-    regularization_rate = st.selectbox("Reg Rate", [0.0, 0.001, 0.01, 0.1, 1], index=0)  # 0 default
-with col8:
-    train_to_test_ratio = st.slider("Train %", 10, 90, 50, 10) / 100  # 50% default
-with col9:
-    if st.button("Reset"):
-        reset_session()
-
-# Noise scaling
-min_noise = 0.02
-noise_level = min_noise + (noise_level_slider / 50) * (0.2 - min_noise)
-flip_y = noise_level / 50
-class_sep = max(2.0 - 1.5 * flip_y, 0.5)
-cluster_std = min(1.0 + 3.0 * flip_y, 3.0)
-
-# Dataset generation
-if dataset_type == "Gaussian":
-    fv, cv = make_classification(n_samples=800, n_features=2, n_informative=2, n_redundant=0, n_classes=2, class_sep=class_sep, flip_y=flip_y, n_clusters_per_class=1)
-else:
-    fv, cv = make_circles(n_samples=800, shuffle=True, noise=noise_level, factor=0.2)
-
-# Feature selection
+# Top control bar
+with st.container():
+    st.markdown('<div class="control-bar">', unsafe_allow_html=True)
+    col1, col2, col3, col4, col5, col6, col7, col8 = st.columns(8)
+    with col1:
+        dataset_type = st.selectbox("Dataset", ["Circle", "Gaussian"], index=0, label_visibility="collapsed")
+    with col2:
+        learning_rate = st.selectbox("Learning Rate", [0.0001, 0.001, 0.03, 0.1, 0.3, 1], index=2, label_visibility="collapsed")
+    with col3:
+        activation = st.selectbox("Activation", ["ReLU", "Sigmoid", "Tanh"], index=2, label_visibility="collapsed")
+    with col4:
+        batch_size = st.slider("Batch Size", 1, 30, 10, label_visibility="collapsed")
+    with col5:
+        noise_level = st.slider("Noise", 0, 50, 0, step=5, label_visibility="collapsed")
+    with col6:
+        reg_type = st.selectbox("Regularization", ["None", "L1", "L2"], index=0, label_visibility="collapsed")
+    with col7:
+        reg_rate = st.selectbox("Reg Rate", [0.0, 0.001, 0.01, 0.1, 1], index=0, label_visibility="collapsed")
+    with col8:
+        train_ratio = st.slider("Train %", 10, 90, 50, 10, label_visibility="collapsed") / 100
+    st.markdown('</div>', unsafe_allow_html=True)
+
+# Dataset generation (Circle as default)
+fv, cv = make_circles(n_samples=800, shuffle=True, noise=noise_level / 250, factor=0.2)
 std = StandardScaler()
 X = std.fit_transform(fv)
 x1, x2 = X[:, 0], X[:, 1]
-x1_squared, x2_squared = x1**2, x2**2
-x1_x2 = x1 * x2
-cos_x1, sin_x1 = np.cos(x1), np.sin(x1)
-cos_x2, sin_x2 = np.cos(x2), np.sin(x2)
-
-feature_mapping = {
-    "X1": x1, "X2": x2, "X1*X2": x1_x2, "X1^2": x1_squared, "X2^2": x2_squared,
-    "cos(X1)": cos_x1, "sin(X1)": sin_x1, "cos(X2)": cos_x2, "sin(X2)": sin_x2
+features = {
+    "X1": x1, "X2": x2, "X1*X2": x1 * x2, "X1^2": x1**2, "X2^2": x2**2,
+    "cos(X1)": np.cos(x1), "sin(X1)": np.sin(x1), "cos(X2)": np.cos(x2), "sin(X2)": np.sin(x2)
 }
-available_features = list(feature_mapping.keys())
-selected_features = [f for f in available_features if st.checkbox(f, value=f in ["X1", "X2"], key=f)]
-selected_data = np.column_stack([feature_mapping[f] for f in selected_features])
-
-# Hidden layer controls
-def add_layer():
-    if st.session_state.num_hidden_layers < 6:
-        st.session_state.num_hidden_layers += 1
-        st.session_state.hidden_layer_neurons.append(1)
-
-def remove_layer():
-    if st.session_state.num_hidden_layers > 0:
-        st.session_state.num_hidden_layers -= 1
-        st.session_state.hidden_layer_neurons.pop()
-
-def increase_neurons(idx):
-    if st.session_state.hidden_layer_neurons[idx] < 8:
-        st.session_state.hidden_layer_neurons[idx] += 1
-
-def decrease_neurons(idx):
-    if st.session_state.hidden_layer_neurons[idx] > 1:
-        st.session_state.hidden_layer_neurons[idx] -= 1
-
-# Main layout
+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])
+
+# Main layout with three panels
 col_left, col_center, col_right = st.columns([1, 2, 1])
 
+# Left panel: Dataset and Features
 with col_left:
-    st.subheader("Dataset")
+    st.markdown('<div class="panel">', unsafe_allow_html=True)
+    st.subheader("Data")
     fig, ax = plt.subplots(figsize=(3, 3))
     ax.scatter(fv[:, 0], fv[:, 1], c=cv, cmap="coolwarm", edgecolors="k", alpha=0.7)
     ax.set_xticks([])
     ax.set_yticks([])
     ax.set_facecolor("#333")
     st.pyplot(fig)
+    st.subheader("Features")
+    for feature in features.keys():
+        st.checkbox(feature, value=feature in ["X1", "X2"], key=feature)
+    st.markdown('</div>', unsafe_allow_html=True)
 
+# Center panel: Network Visualization and Controls
 with col_center:
-    st.subheader("Network Architecture")
-    def draw_nn(features, neurons, outputs=1):
+    st.markdown('<div class="panel">', unsafe_allow_html=True)
+    st.subheader("Network")
+
+    def draw_nn(features, neurons):
         G = nx.DiGraph()
-        layers = [features] + [[f"hl{i+1}_{j+1}" for j in range(n)] for i, n in enumerate(neurons)] + [["y1"]]
+        layers = [features] + [[f"h{i+1}_{j+1}" for j in range(n)] for i, n in enumerate(neurons)] + [["Output"]]
         node_colors = {}
         for layer_idx, layer in enumerate(layers):
             for node in layer:
                 G.add_node(node, layer=layer_idx)
                 node_colors[node] = "#90EE90" if layer_idx == 0 else "#87CEFA" if layer_idx < len(layers) - 1 else "#FFA07A"
-        for i in range(len(layers) - 1):
-            for n1 in layers[i]:
-                for n2 in layers[i + 1]:
-                    G.add_edge(n1, n2)
+            for i in range(len(layers) - 1):
+                for n1 in layers[i]:
+                    for n2 in layers[i + 1]:
+                        G.add_edge(n1, n2)
         pos = nx.multipartite_layout(G, subset_key="layer")
         fig, ax = plt.subplots(figsize=(8, 4))
         ax.set_facecolor("#252830")
-        nx.draw(G, pos, with_labels=True, node_color=[node_colors[n] for n in G.nodes], edge_color="white", node_size=800, font_size=8, ax=ax, width=0.4)
+        nx.draw(G, pos, with_labels=True, node_color=[node_colors[n] for n in G.nodes], edge_color="white", edgecolors="black",
+                node_size=600, font_size=8, font_color="black", width=0.4)
         return fig
-    
+
     st.pyplot(draw_nn(selected_features, st.session_state.hidden_layer_neurons))
-    
-    # Layer controls
+
+    def add_layer():
+        if st.session_state.num_hidden_layers < 6:
+            st.session_state.num_hidden_layers += 1
+            st.session_state.hidden_layer_neurons.append(1)
+
+    def remove_layer():
+        if st.session_state.num_hidden_layers > 0:
+            st.session_state.num_hidden_layers -= 1
+            st.session_state.hidden_layer_neurons.pop()
+
+    def increase_neurons(i):
+        if st.session_state.hidden_layer_neurons[i] < 8:
+            st.session_state.hidden_layer_neurons[i] += 1
+
+    def decrease_neurons(i):
+        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]} neurons")
+            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,))
-    st.button("Add Layer", on_click=add_layer)
-    st.button("Remove Layer", on_click=remove_layer)
-
+    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
 with col_right:
+    st.markdown('<div class="panel">', unsafe_allow_html=True)
     st.subheader("Output")
-    if st.button("▶️ Start"):
-        st.session_state.training = True
-    if st.button("⏹️ Stop"):
-        st.session_state.training = False
-
-# Model training
-def create_ann_model(input_dim, hidden_layers, neurons_per_layer):
-    model = Sequential()
-    model.add(Input(shape=(input_dim,)))
-    reg = l1(regularization_rate) if regularization_type == "L1" else l2(regularization_rate) if regularization_type == "L2" else None
-    for neurons in neurons_per_layer:
-        model.add(Dense(neurons, activation=activation_function.lower(), kernel_regularizer=reg))
-    model.add(Dense(1, activation='sigmoid'))
-    optimizer = SGD(learning_rate=learning_rate)
-    model.compile(optimizer=optimizer, loss=BinaryCrossentropy(), metrics=['accuracy'])
-    return model
-
-class LossPlotCallback(tf.keras.callbacks.Callback):
-    def __init__(self, X, y):
-        super().__init__()
-        self.loss_df = pd.DataFrame(columns=["Epoch", "Train Loss", "Val Loss"])
-        self.X, self.y = X, y
-        self.plot_placeholder = st.empty()
-
-    def on_epoch_end(self, epoch, logs=None):
-        new_row = pd.DataFrame({"Epoch": [epoch + 1], "Train Loss": [logs['loss']], "Val Loss": [logs['val_loss']]})
-        self.loss_df = pd.concat([self.loss_df, new_row], ignore_index=True)
-        with self.plot_placeholder.container():
-            col1, col2 = st.columns(2)
-            with col1:
-                plt.figure(figsize=(3, 3))
-                plot_decision_regions(self.X, self.y, clf=self.model)
-                st.pyplot(plt)
-            with col2:
-                fig, ax = plt.subplots(figsize=(3, 3))
-                ax.plot(self.loss_df["Epoch"], self.loss_df["Train Loss"], 'b-', label="Train")
-                ax.plot(self.loss_df["Epoch"], self.loss_df["Val Loss"], 'r--', label="Val")
-                ax.legend()
-                ax.set_facecolor("#333")
-                st.pyplot(fig)
-
-if st.session_state.training:
-    ann_model = create_ann_model(len(selected_features), st.session_state.num_hidden_layers, st.session_state.hidden_layer_neurons)
-    loss_plot_callback = LossPlotCallback(selected_data, cv)
-    ann_model.fit(selected_data, cv, epochs=999999, validation_split=1-train_to_test_ratio, batch_size=batch_size, callbacks=[loss_plot_callback], verbose=0)
+    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
+
+    def create_model(input_dim, neurons):
+        model = Sequential()
+        model.add(Input(shape=(input_dim,)))
+        reg = l1(reg_rate) if reg_type == "L1" else l2(reg_rate) if reg_type == "L2" else None
+        for n in neurons:
+            model.add(Dense(n, activation=activation.lower(), kernel_regularizer=reg))
+        model.add(Dense(1, activation="sigmoid"))
+        model.compile(optimizer=SGD(learning_rate=learning_rate), loss=BinaryCrossentropy(), metrics=["accuracy"])
+        return model
+
+    class LossPlotCallback(tf.keras.callbacks.Callback):
+        def __init__(self, X, y):
+            super().__init__()
+            self.X, self.y = X, y
+            self.losses = {"Epoch": [], "Train Loss": [], "Val Loss": []}
+            self.placeholder = st.empty()
+
+        def on_epoch_end(self, epoch, logs=None):
+            self.losses["Epoch"].append(epoch + 1)
+            self.losses["Train Loss"].append(logs["loss"])
+            self.losses["Val Loss"].append(logs["val_loss"])
+            with self.placeholder.container():
+                col1, col2 = st.columns(2)
+                with col1:
+                    plt.figure(figsize=(3, 3))
+                    plot_decision_regions(self.X, self.y, clf=self.model)
+                    plt.gca().set_facecolor("#333")
+                    st.pyplot(plt)
+                with col2:
+                    fig, ax = plt.subplots(figsize=(3, 3))
+                    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")
+                    st.pyplot(fig)
+
+    if st.session_state.training:
+        model = create_model(len(selected_features), st.session_state.hidden_layer_neurons)
+        callback = LossPlotCallback(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()