Fix button text colors

vitaliiznak · Sep 17, 2024 · 7461f6b · 7461f6b
1 parent 2891013
commit 7461f6b
Show file tree

Hide file tree

Showing 11 changed files with 131 additions and 30 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -55,10 +55,11 @@ const App: Component = () => {
       background-color: ${colors.surface};
       border: none;
       font-size: ${typography.fontSize.xs};
+      color: ${colors.textLight};
 
       &.active {
         background-color: ${colors.primary};
-        color: ${colors.surface};
+        color: ${colors.textLight};
       }
 
       @media (max-width: 600px) {

diff --git a/src/NeuralNetworkVisualizer/renderer.ts b/src/NeuralNetworkVisualizer/renderer.ts
@@ -77,7 +77,7 @@ export class NetworkRenderer {
   private drawHiddenNode(node: VisualNode, selectedNode: VisualNode | null, isHighlighted: boolean) {
     const nodeColor = 'rgba(255, 255, 255, 0.8)'; // White with 80% opacity
     const strokeColor = colors.border;
-    const labelColor = colors.textDark; // Use a darker color for labels
+    const labelColor = colors.text; // Use a darker color for labels
 
     // Draw node
     this.ctx.fillStyle = nodeColor;
@@ -210,21 +210,21 @@ export class NetworkRenderer {
     this.ctx.lineTo(biasX, biasY + 8);
     this.ctx.lineTo(biasX - 8, biasY);
     this.ctx.closePath();
-    this.ctx.fillStyle = node.bias >= 0 ? colors.secondary : colors.secondaryDark; // Use different color for negative bias
+    this.ctx.fillStyle = node.bias >= 0 ? colors.secondary : colors.textLight; // Use different color for negative bias
     this.ctx.fill();
     this.ctx.strokeStyle = colors.border;
     this.ctx.lineWidth = 1;
     this.ctx.stroke();
 
     // Draw the bias value
-    this.ctx.fillStyle = colors.text; // Use dark text for better contrast
+    this.ctx.fillStyle = '#fff'; // Use white text for better contrast
     this.ctx.font = 'bold 8px Arial';
     this.ctx.textAlign = 'center';
     this.ctx.textBaseline = 'middle';
     this.ctx.fillText(`${node.bias >= 0 ? '+' : '-'}${Math.abs(node.bias).toFixed(2)}`, biasX, biasY); // Add + or - prefix
 
     // Add "Bias" label
-    this.ctx.fillStyle = colors.textLight;
+    this.ctx.fillStyle = '#fff';
     this.ctx.font = '7px Arial';
     this.ctx.fillText('Bias', biasX, biasY + 15);
   }
@@ -249,7 +249,7 @@ export class NetworkRenderer {
     this.ctx.stroke();
 
     // Draw the output value
-    this.ctx.fillStyle = colors.text; // Use dark text for better contrast
+    this.ctx.fillStyle = '#fff'; // Use dark text for better contrast
     this.ctx.font = 'bold 8px Arial';
     this.ctx.textAlign = 'center';
     this.ctx.textBaseline = 'middle';

diff --git a/src/SidebarCockpit.tsx b/src/SidebarCockpit.tsx
@@ -42,9 +42,10 @@ const styles = {
     ${commonStyles.button}
     font-size: ${typography.fontSize.sm};
     padding: 0.25rem 0.5rem;
+    color: ${colors.textLight};
     &.active {
       background-color: ${colors.primary};
-      color: ${colors.surface};
+      color: ${colors.textLight};
     }
   `,
   metricsContainer: css`
@@ -144,7 +145,7 @@ const Cockpit: Component = () => {
         </Show>
         <Show when={activeTab() === "training"}>
           <TrainingConfigForm />
-          <TrainingControls onVisualizationUpdate={() => { }} />
+          <TrainingControls />
         </Show>
         <Show when={activeTab() === "simulation"}>
           <SimulationInputForm onSimulate={() => { }} />

diff --git a/src/TrainingControl/IterationIndicator.tsx b/src/TrainingControl/IterationIndicator.tsx
@@ -0,0 +1,20 @@
+import { createEffect } from 'solid-js';
+
+type IterationIndicatorProps = {
+  iteration: number;
+};
+
+function IterationIndicator(props: IterationIndicatorProps) {
+  createEffect(() => {
+    // Trigger any side effects when the iteration changes
+    console.log(`Starting iteration ${props.iteration}`);
+  });
+
+  return (
+    <div class="iteration-indicator">
+      <h2>Iteration {props.iteration}</h2>
+    </div>
+  );
+}
+
+export default IterationIndicator;
diff --git a/src/TrainingControl/TrainingConfigForm.tsx b/src/TrainingControl/TrainingConfigForm.tsx
@@ -34,6 +34,7 @@ const styles = {
   button: css`
     ${commonStyles.button}
     ${commonStyles.primaryButton}
+    color: ${colors.textLight};
     grid-column: span 2;
   `,
 };

diff --git a/src/TrainingControl/TrainingControls.tsx b/src/TrainingControl/TrainingControls.tsx
@@ -1,5 +1,5 @@
 import { Component, createEffect, createSignal, Show } from "solid-js";
-import { css } from "@emotion/css";
+import { css, keyframes } from "@emotion/css";
 import { actions, store } from '../store';
 import TrainingStepsVisualizer from './TrainingStepsVisualizer';
 import TrainingStatus from "./TrainingStatus";
@@ -9,10 +9,22 @@ import { commonStyles } from '../styles/common';
 import { FaSolidBackward, FaSolidCalculator, FaSolidForward, FaSolidWeightScale } from "solid-icons/fa";
 import LossHistoryChart from "./LossHistoryChart";
 
+// Define keyframes for animations
+const fadeIn = keyframes`
+  from { opacity: 0; transform: translateY(-20%); }
+  to { opacity: 1; transform: translateY(0); }
+`;
+
+const fadeOut = keyframes`
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-20%); }
+`;
+
 const styles = {
   container: css`
     ${commonStyles.card}
     margin-top: 1rem;
+    position: relative;
   `,
   title: css`
     font-size: ${typography.fontSize.xl};
@@ -38,12 +50,17 @@ const styles = {
     justify-content: center;
     padding: 0.25rem;
     border-radius: 4px;
-    font-size: ${typography.fontSize.xxs};
+    font-size: ${typography.fontSize.base};
 
     &:hover:not(:disabled) {
       transform: none;
       box-shadow: none;
     }
+
+    span {
+      margin-left: 4px;
+      font-size: ${typography.fontSize.xxxs};
+    }
   `,
   exportButton: css`
     ${commonStyles.button}
@@ -107,31 +124,70 @@ const styles = {
       box-shadow: none;
     }
   `,
+  // New iteration indicator style
+  iterationIndicator: css`
+    text-align: center;
+    margin: 1rem 0;
+    font-size: ${typography.fontSize.xl};
+    font-weight: ${typography.fontWeight.bold};
+    color: ${colors.primary};
+    animation: ${fadeIn} 0.5s ease-in-out;
+  `,
+  // Enhanced notification style
+  notification: css`
+    position: fixed;
+    top: 20%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: ${colors.primary};
+    color: ${colors.textLight};
+    padding: 1rem 2rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    animation: ${fadeIn} 0.5s ease-in-out, ${fadeOut} 0.5s ease-in-out 2.5s;
+    z-index: 1000;
+  `,
 };
 
 const TrainingControls: Component = () => {
   const [zoomRange, setZoomRange] = createSignal<[number, number]>([0, 100]);
   const [chartType, setChartType] = createSignal<'bar' | 'line'>('line');
   const [isLossCalculated, setIsLossCalculated] = createSignal(false);
+  const [showNotification, setShowNotification] = createSignal(false);
+  const [currentIteration, setCurrentIteration] = createSignal(1);
 
   createEffect(() => {
-    const { currentPhase } = store.trainingState
+    const { currentPhase } = store.trainingState;
     if (currentPhase === 'forward' || currentPhase === 'backward') {
       setIsLossCalculated(false);
     } else if (currentPhase === 'loss') {
       setIsLossCalculated(true);
     }
   });
 
+  createEffect(() => {
+    if (
+      store.trainingState.currentPhase === 'update' &&
+      store.trainingState.backwardStepGradients.length === 0
+    ) {
+      setShowNotification(true);
+      setTimeout(() => setShowNotification(false), 3000);
+      // Increment iteration count
+      setCurrentIteration(prev => prev + 1);
+      // Reset for the next iteration
+      actions.trainingStateReset();
+    }
+  });
+
   const iterationProgress = () => {
-    const currentIteration = store.trainingState.iteration || 0;
+    const iteration = store.trainingState.iteration || 0;
     const totalIterations = store.trainingConfig?.iterations || 1;
-    return currentIteration / totalIterations;
+    return iteration / totalIterations;
   };
 
   const getLossColor = (loss: number) => {
     if (loss < 0.2) return colors.success;
-    if (loss < 0.5) return colors.error;
+    if (loss < 0.5) return colors.warning;
     return colors.error;
   };
 
@@ -144,9 +200,7 @@ const TrainingControls: Component = () => {
     store.trainingState.backwardStepGradients.length > 0;
 
   const isBackwardDisabled = () => store.trainingState.currentPhase !== 'loss';
-
   const isUpdateWeightsDisabled = () => store.trainingState.backwardStepGradients.length === 0;
-
   const isResetDisabled = () => store.trainingState.forwardStepResults.length === 0;
 
   const singleStepForward = () => {
@@ -185,8 +239,17 @@ const TrainingControls: Component = () => {
 
   return (
     <div class={styles.container}>
+      <Show when={showNotification()}>
+        <div class={styles.notification}>
+          Iteration {currentIteration() - 1} Completed! Starting Iteration {currentIteration()}...
+        </div>
+      </Show>
+      <div class={styles.iterationIndicator}>
+        Current Iteration: {currentIteration()}
+      </div>
       <TrainingStatus
         iteration={store.trainingState.iteration || 0}
+        totalIterations={store.trainingConfig?.iterations || 1}
         currentLoss={store.trainingState.currentLoss}
         iterationProgress={iterationProgress()}
         getLossColor={getLossColor}
@@ -208,6 +271,7 @@ const TrainingControls: Component = () => {
           aria-label="Forward"
         >
           <FaSolidForward />
+          <span>Forward</span>
         </button>
         <button
           class={styles.controlButton}
@@ -216,6 +280,7 @@ const TrainingControls: Component = () => {
           aria-label="Calculate Loss"
         >
           <FaSolidCalculator />
+          <span>Loss</span>
         </button>
         <button
           class={styles.controlButton}
@@ -224,6 +289,7 @@ const TrainingControls: Component = () => {
           aria-label="Backward"
         >
           <FaSolidBackward />
+          <span>Backward</span>
         </button>
         <button
           class={styles.controlButton}
@@ -232,6 +298,7 @@ const TrainingControls: Component = () => {
           aria-label="Update Weights"
         >
           <FaSolidWeightScale />
+          <span>Update</span>
         </button>
       </div>
       <div class={styles.separator}></div>

diff --git a/src/TrainingControl/TrainingStatus.tsx b/src/TrainingControl/TrainingStatus.tsx
@@ -21,17 +21,18 @@ const TrainingStatus: Component<TrainingStatusProps> = (props) => {
     statusItem: css`
       padding: 1rem;
       border-radius: 0.5rem;
+      background-color: ${colors.surface};
       transition: all 0.3s ease;
       &:hover {
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         transform: translateY(-2px);
       }
     `,
     iterationItem: css`
-      background-color: ${colors.primary}22;
+      border-left: 4px solid ${colors.primary};
     `,
     lossItem: css`
-      background-color: ${colors.warning}22;
+      border-left: 4px solid ${colors.error};
     `,
     statusLabel: css`
       font-size: 0.875rem;

diff --git a/src/components/CollapsibleSidebar.tsx b/src/components/CollapsibleSidebar.tsx
@@ -8,7 +8,7 @@ const CollapsibleSidebar: Component<{ children: JSX.Element }> = (props) => {
   const [isOpen, setIsOpen] = createSignal(true);
 
   // Adjust the width to make the sidebar wider by default
-  const sidebarWidthOpen = 400; // Width of the sidebar when open (in pixels)
+  const sidebarWidthOpen = 480; // Width of the sidebar when open (in pixels)
   const toggleButtonOffset = sidebarWidthOpen - 50; // Position of the toggle button when sidebar is open
 
   const styles = {

diff --git a/src/styles/colors.ts b/src/styles/colors.ts
@@ -2,14 +2,17 @@ export const colors = {
   primary: '#4A90E2',
   primaryDark: '#2F3A4B',
   secondary: '#50E3C2',
-  background: '#1F2937',
+  background: 'var(--background-color)',
   surface: '#374151',
-  text: '#F3F4F6',
-  textLight: '#D1D5DB',
+  text: 'var(--text-color)',
+  textLight: 'var(--text-light)',
   border: '#4B5563',
   shadow: 'rgba(0, 0, 0, 0.3)',
   warning: '#F59E0B',
   error: '#EF4444',
   legendBackground: '#212121',
-  legendText: '#F3F4F6', 
+  legendText: 'var(--text-color)', 
+
+  // Add textDark if needed
+  textDark: 'var(--text-light)', // Example value
 };
diff --git a/src/styles/common.ts b/src/styles/common.ts
@@ -19,7 +19,7 @@ export const commonStyles = {
     border-radius: 0.25rem;
     cursor: pointer;
     transition: background-color 0.2s, color 0.2s;
-    color: ${colors.text};
+    color: ${colors.textLight};
     background-color: ${colors.surface};
 
     &:disabled {
@@ -35,7 +35,7 @@ export const commonStyles = {
 
   primaryButton: css`
     background-color: ${colors.primary};
-    color: ${colors.surface};
+    color: ${colors.textLight};
     border: none;
     
     &:hover:not(:disabled) {
@@ -45,11 +45,11 @@ export const commonStyles = {
 
   secondaryButton: css`
     background-color: ${colors.secondary};
-    color: ${colors.text};
+    color: ${colors.textLight};
     border: none;
     
     &:hover:not(:disabled) {
-      background-color: ${colors.secondaryDark};
+      background-color: ${colors.textLight};
     }
   `,
 

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,5 +1,12 @@
+:root {
+    --background-color: #1F2937;
+    --text-color: #F3F4F6;
+    --text-light: #D1D5DB;
+    /* Add other variables as needed */
+}
+
 body {
     margin: 0;
-    background-color: #1F2937; /* This matches the dark mode background color */
-    color: #F3F4F6; /* This matches the dark mode text color */
-  }
+    background-color: var(--background-color);
+    color: var(--text-color);
+}