Skip to main content

CAD/CAM Integration (Hackathon Demo)

Simulating ML-driven design automation for water treatment equipment

Overview​

This documentation shows how Edubotx ML models can drive CAD/CAM design parameters through simulation. We simulate:

  • Sensor data → ML predictions → Design parameters
  • 2D/3D visualization of generated designs
  • G-code simulation for manufacturing preview

No real hardware required - everything runs in Next.js!

Documentation Index​

#DocumentWhat It CoversTime
01Quick StartSetup in 10 minutes10 min
02Sensor SimulationSimulate water quality sensors30 min
03Design GeneratorML → CAD parameters45 min
04Visualization2D/3D preview with Three.js45 min
05G-code SimulatorCNC toolpath preview30 min
06Demo PageComplete integration page60 min

Total implementation time: ~3.5 hours

Architecture (Simplified)​

┌─────────────────────────────────────────────────────────────┐
│                    HACKATHON DEMO FLOW                       │
│                                                              │
│  [Simulated Sensors] ──▶ [ML API] ──▶ [Design Parameters]   │
│         │                    │                │              │
│         ▼                    ▼                ▼              │
│    generateParams()     /api/predict    calculateDesign()   │
│         │                    │                │              │
│         └────────────────────┴────────────────┘              │
│                              │                               │
│                              ▼                               │
│                    [Visualization]                           │
│                    - 2D SVG Preview                          │
│                    - 3D Three.js Model                       │
│                    - G-code Animation                        │
└─────────────────────────────────────────────────────────────┘

Tech Stack (Simple)​

ComponentLibraryWhy
FrontendNext.js 14Already using
3D RenderingThree.js / react-three-fiberEasy 3D
2D DrawingSVG (built-in)No extra deps
ChartsRechartsAlready using
StateReact useStateSimple

No Docker, Redis, or complex infra needed!

What We're Simulating​

1. Sensors → ML​

Water Quality Sensor (simulated)
├── pH: 6.5 - 8.5
├── BOD: 100 - 400 mg/L
├── COD: 200 - 800 mg/L
├── TSS: 50 - 300 mg/L
└── Flow Rate: 50 - 200 m³/hr
         │
         ▼
    ML Prediction API
         │
         ▼
Treatment Requirements
├── Tank Volume: X m³
├── Aeration: Y kg O₂/hr
└── Filter Area: Z m²

2. ML → Design Parameters​

ML Output                    CAD Parameters
─────────────────────────────────────────────
Flow Rate: 100 m³/hr    →    Tank Diameter: 2.5m
BOD Level: High         →    Aeration Slots: 8
TSS Level: Medium       →    Filter Layers: 3
Retention: 6 hrs        →    Tank Height: 4m

3. Design → Visualization​

CAD Parameters              Visual Output
─────────────────────────────────────────────
Tank Diameter: 2.5m    →    [3D Cylinder Model]
Inlet Size: 150mm      →    [Pipe Connection]
Outlet Size: 150mm     →    [Pipe Connection]
Baffles: 4             →    [Internal Plates]

Quick Install​

# Install only what's needed
npm install three @react-three/fiber @react-three/drei

# That's it! No other dependencies needed

File Structure (New)​

src/
├── app/(core)/cad-cam-demo/
│   ├── page.tsx              # Main demo page
│   ├── components/
│   │   ├── SensorSimulator.tsx
│   │   ├── DesignPreview.tsx
│   │   ├── Tank3DModel.tsx
│   │   ├── GCodeViewer.tsx
│   │   └── ParameterPanel.tsx
│   └── utils/
│       ├── design-calculator.ts
│       ├── gcode-generator.ts
│       └── types.ts
└── lib/cad/
    ├── simulator.ts          # Sensor simulation
    └── design-engine.ts      # ML → Design conversion

Next: 01-QUICK-START.md​

Start the 10-minute setup guide →