Matrix Multiplication Parallel Visualization Tool

Discover a web application that visualizes sequential and parallel matrix multiplication in real-time. With OpenMP C++ code sending updates through WebSockets, you can watch parallel computations unfold and explore how work is shared among multiple threads.

Backend repository

Demo

The online demo can be found here. (only working for clients connected through the Eduroam network)

Overview

• Frontend:
  Built with React using Vite.

• Backend:
  Implemented in C++.

  • OpenMP for parallel computations.
  • Simple-WebSocket-Server for real-time communication.
  • spdlog for logging.
  • nlohmann/json for JSON serialization/deserialization.

Features

• Interactive Visualization: Users can observe how tasks are distributed among parallel threads.
• Configurable Input Matrices: Users can input their own matrices of any size from 1 to 50.
• Step-by-Step Execution: Pause and step through the multiplication process to understand the distribution of workload and accumulation of partial results.
• Real-Time Feedback: The frontend receives status updates from the backend server for each multiplication step via WebSockets.

Prerequisites

• General Requirements:

  • CMake for building the C++ project.
  • Node.js for the frontend.

• Dependencies:

  • Backend:

    • OpenSSL (required by the WebSocket server).
    • OpenMP (for parallel computations).
    • Boost.
    • CMake will automatically fetch and build:
      • spdlog v1.11.0
      • nlohmann/json v3.11.3
      • Simple-WebSocket-Server

  • Frontend:

    • Node.

Building and Running

Backend (C++ WebSocket Server)

1. Install Prerequisites:

2. Build the Backend:

   cd backend
   mkdir build && cd build
   cmake ..
   make

3. Run the Backend:

   ./MatmulServer

Frontend (React with Vite)

1. Install Node.js Dependencies:

   cd frontend
   npm install

2. Run the Frontend Development Server:

   npm run dev

Connecting Frontend and Backend

The frontend uses WebSockets to communicate with the backend server. In the frontend /.env file, ensure the 'VITE_WEBSOCKET_URL' matches the backend’s configured URL. For example, if the backend runs on ws://localhost:9002/matmul/:

VITE_WEBSOCKET_URL="ws://localhost:9002/matmul/";

Usage

1. Start the Backend Server: Ensure MatmulServer is running.
2. Start the Frontend: Access http://localhost:5173 in a web browser.
3. Start playing around!

Contributing

Contributions are welcome! Feel free to open issues, submit pull requests, or suggest improvements.

License

This project is licensed under the MIT License. See the LICENSE file for details.