Factory Floor Digital Twin

A React-based interactive factory floor simulation and monitoring system with AI-powered layout generation capabilities.

Demo Video

Watch the demo of the digital twin in action:

UOK Automation Origin.mp4

Features

• Interactive Factory Floor: Visual representation of machines, conveyors, and logistics components
• Real-time Simulation: Live data streaming with temperature, pressure, output, and throughput monitoring
• AI Layout Generation: Upload blueprint images/videos and use AI to automatically detect and place components
• Placement Mode: Drag, resize, and configure factory components
• Anomaly Detection: Automatic alerts for temperature spikes and equipment failures
• Pan and Zoom: Navigate large factory layouts with mouse controls
• Component Management: Add, edit, and delete factory components with custom properties
• Performance Report: Interactive daily performance dashboard with analytics and automation recommendations

Getting Started

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn package manager

Installation

1. Clone or download this project to your local machine

2. Navigate to the project directory:

   cd factory-floor-digital-twin

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open your browser and navigate to http://localhost:3000

Pages

Main Digital Twin (http://localhost:3000)

The interactive factory floor simulation with real-time monitoring, AI layout generation, and component management.

Performance Report (http://localhost:3000/report.html)

A comprehensive daily performance dashboard featuring:

• KPI Summary: Overall efficiency, bottlenecks, and cost analysis
• Interactive Performance Map: Click on factory areas to view detailed analytics
• Charts & Visualizations: Real-time data visualization using Chart.js
• Automation Recommendations: Cost-benefit analysis for different automation solutions
• Component Analysis: Detailed insights for each factory area with actionable recommendations

Usage

Basic Controls

• Simulation Toggle: Use the toggle in the header to start/stop the live simulation
• Pan View: Click and drag on empty areas to pan around the factory floor
• Component Details: Hover over any component to see real-time data

Placement Mode

1. Click "Enter Placement Mode" in the control panel
2. Click on existing components to select and edit them
3. Add new machines by entering an ID and clicking on the factory floor
4. Drag components to reposition them
5. Use resize handles to adjust component sizes
6. Configure pipeline stages and display fields for each component

AI Layout Generation

1. Upload a blueprint image or video using the file input
2. Click "Generate Layout from Media" to analyze the media with AI
3. The AI will detect objects and automatically place appropriate components:
   • People → Order picker units
   • Trucks → Shipping containers
   • Long rectangular objects → Conveyor belts
   • Other objects → Production machines

Component Types

• CNC/MOLD: Production machines with temperature, pressure, and output monitoring
• SHIP: Shipping containers for logistics
• PICK: Order picker units for warehouse operations
• CV: Conveyor belts with throughput monitoring

Status Indicators

• 🟢 Green: Running/Active
• 🔵 Blue: Conveyor systems running
• 🟡 Yellow: Idle/Standby
• 🔴 Red: Error/Alert state

Technical Details

Built With

• React 18: Modern React with hooks
• Vite: Fast build tool and development server
• Tailwind CSS: Utility-first CSS framework
• TensorFlow.js: AI model integration for object detection
• COCO-SSD: Pre-trained object detection model

Project Structure

factory-floor-digital-twin/
├── src/
│   ├── App.jsx          # Main application component
│   ├── main.jsx         # React entry point
│   └── index.css        # Global styles
├── public/              # Static assets
├── package.json         # Dependencies and scripts
├── vite.config.js       # Vite configuration
├── tailwind.config.js   # Tailwind CSS configuration
└── README.md           # This file

Development

Available Scripts

• npm run dev: Start development server
• npm run build: Build for production
• npm run preview: Preview production build
• npm run lint: Run ESLint

Customization

The application is highly customizable:

• Modify initialMachines and initialConveyors arrays to change default components
• Adjust simulation parameters in the simulateDataStream function
• Customize component appearance by modifying the SVG rendering logic
• Add new component types by extending the component mapping logic

Browser Compatibility

• Chrome/Chromium (recommended)
• Firefox
• Safari
• Edge

Note: AI features require a modern browser with WebGL support for TensorFlow.js.

License

This project is open source and available under the MIT License.