How to Use NN-Visuals

Basic Usage

NN-Visuals is an interactive tool for visualizing neural network architectures. This guide will help you understand how to use all the features of the application.

Visualize Different Networks	Choose from different pre-designed network architectures including FCNN, LeNet, and AlexNet.
Customize Appearance	Adjust colors, sizes, and display properties of the neural network components.
Interactive Exploration	Zoom, pan, and navigate through the network visualization.
Export Options	Save your visualizations as PNG images for presentations or publications.

Navigating the Visualization

How to Zoom In/Out

You can zoom in and out of the neural network visualization using several methods:

• Mouse Scroll Wheel: Scroll up to zoom in and down to zoom out
• Trackpad Gestures: Pinch to zoom in and out (on supported devices)
• Keyboard: Use + to zoom in and - to zoom out

Panning and Moving Around

To move around the visualization:

• Click and Drag: Click and hold your mouse button while moving to pan the view
• Trackpad: Use two finger drag gestures to pan the view

NN-Visuals Settings Box

How to Show/Hide the NN-Visuals Setting Box

The settings box allows you to customize the visualization. To toggle its visibility:

• Click the gear icon button located at the top-right corner of the screen
• The settings panel will slide in from the left side when shown, and slide out when hidden

How to Change the Size of the NN-Visuals Setting Box

The settings box has a fixed width on desktop screens, but will automatically adjust on smaller devices. On mobile devices, the settings panel will expand to full width when displayed.

How to Change the Color of the NN-Visuals Setting Box

The application follows a consistent color scheme using CSS variables. You can adjust colors through the settings panel options, which will affect both the visualization and the UI components.

In the settings box, you can customize:

• Node colors and sizes
• Connection colors and widths
• Background colors
• Text labels and styling

Working with Styles

How to Switch Between the 3 Styles

NN-Visuals offers three different visualization styles:

• Default Style: The standard representation with balanced colors and sizing
• Publication Style: Clean, minimalist design optimized for academic papers and publications
• Presentation Style: Bold, colorful design with enhanced labels for presentations and teaching

To switch between styles:

1. Open the settings panel by clicking the gear icon
2. Locate the "Style" section in the settings panel
3. Click on one of the three style options to apply it immediately

Exporting Visualizations

How to Export the Image

To export your visualization as a PNG image:

1. Adjust the visualization to your preferred view and settings
2. Click the "Export" or "Download" button in the settings panel
3. Choose "Export as PNG" from the options
4. Wait for the export process to complete (you'll see a loading indicator)
5. Your browser will automatically download the PNG file

The PNG export uses server-side rendering to ensure high-quality images suitable for publications and presentations. If you encounter any issues with the server-side export, the application will automatically fall back to client-side export.

Troubleshooting

If you encounter any issues:

• Visualization not loading: Try refreshing the page or checking your internet connection
• Export not working: Make sure the server is running properly if using server-side export
• UI elements overlapping: Try a different browser or adjust your window size

For more detailed information about the application, visit the About page or check out the project on GitHub.

Keyboard Shortcuts

For faster navigation and control, you can use the following keyboard shortcuts anywhere in the app:

• H: Show/hide the settings panel
• F: Switch to FCNN style
• L: Switch to LeNet style
• A: Switch to AlexNet style
• Z: Zoom in
• X: Zoom out

Creating Neural Networks

NN-Visuals allows you to create and visualize different types of neural network architectures. Here's how to create some common network types:

How to Create a Single Layer Perceptron (SLP)

A Single Layer Perceptron is the simplest form of neural network with only input and output layers:

1. Navigate to the FCNN page by clicking on "FCNN" in the navigation bar
2. Open the settings panel by clicking the gear icon
3. Under "Network Structure" section, set the following parameters:
   • Set "Number of Hidden Layers" to 0
   • Configure the "Input Layer Size" based on your data features (e.g., 4 for four input features)
   • Set the "Output Layer Size" based on your number of classes (e.g., 3 for a three-class classification)
4. Click "Apply Changes" to generate the SLP visualization

How to Create a Multi-Layer Perceptron (MLP)

A Multi-Layer Perceptron contains one or more hidden layers between the input and output layers:

1. Navigate to the FCNN page by clicking on "FCNN" in the navigation bar
2. Open the settings panel by clicking the gear icon
3. Under "Network Structure" section, configure the following:
   • Set "Number of Hidden Layers" to 1 or more (e.g., 2 for a two-hidden-layer MLP)
   • For each hidden layer, specify the number of neurons (e.g., 10 neurons in the first hidden layer, 5 in the second)
   • Configure the "Input Layer Size" based on your data features
   • Set the "Output Layer Size" based on your output requirements
4. Under "Activation Functions" (if available), select the activation functions for hidden layers (e.g., ReLU, Sigmoid) and output layer (e.g., Softmax for classification)
5. Click "Apply Changes" to generate the MLP visualization

After creating your SLP or MLP visualization, you can further customize its appearance using the style options described in the "Working with Styles" section above.