rtmlib-ts 0.0.2

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "rtmlib-ts",
+  "version": "0.0.2",
+  "description": "High-performance browser-based AI library for real-time object detection (YOLO12) and pose estimation (RTMW) using ONNX Runtime Web",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "playground": "npm i && cd playground && npm run build"
+
+  },
+  "keywords": [
+    "pose-estimation",
+    "rtmpose",
+    "dwpose",
+    "rtmo",
+    "rtmw",
+    "yolo",
+    "yolo12",
+    "object-detection",
+    "computer-vision",
+    "onnx",
+    "webassembly"
+  ],
+  "author": "Based on rtmlib by Tao Jiang",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GOH23/rtmlib-ts"
+  },
+  "bugs": {
+    "url": "https://github.com/GOH23/rtmlib-ts/issues"
+  },
+  "homepage": "https://github.com/GOH23/rtmlib-ts#readme",
+  "dependencies": {
+    "jszip": "^3.10.1",
+    "onnxruntime-web": "^1.24.3",
+    "opencv-bindings": "^4.5.5",
+    "sharp": "^0.34.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.19.15",
+    "next": "^16.1.6",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.7.3"
+  }
+}

package/playground/README.md

@@ -0,0 +1,114 @@
+# rtmlib-ts Playground
+
+Interactive Next.js app for testing rtmlib-ts library features.
+
+## Quick Start
+
+```bash
+# Install dependencies
+npm install
+
+# Run development server
+npm run dev
+
+# Open in browser
+http://localhost:3000
+```
+
+## Features
+
+### Object Detection
+- Detect any of 80 COCO classes
+- Filter by specific classes (person, car, dog, etc.)
+- Real-time camera support
+- Image upload
+
+### Pose Estimation
+- 17 keypoints per person
+- Skeleton visualization
+- Real-time camera support
+- Image upload
+
+## Usage
+
+1. **Select Mode**: Choose between Object Detection or Pose Estimation
+2. **Choose Input**: 
+   - Click "Use Camera" for live detection
+   - Click "Upload Image" to process a file
+3. **Select Classes** (Object Detection only):
+   - Check specific classes to detect
+   - Uncheck all to detect all 80 classes
+4. **Click Detect**: Run inference and see results
+
+## Models
+
+Models are served from `/public/models/`:
+
+```
+public/models/
+├── yolo/
+│   ├── yolov12n.onnx      # Object detection
+│   └── yolov26n.onnx
+└── rtmpose/
+    └── end2end.onnx       # Pose estimation
+```
+
+## Tech Stack
+
+- **Framework**: Next.js 15 (App Router)
+- **Library**: rtmlib-ts (local import)
+- **Backend**: ONNX Runtime Web (WASM)
+- **Styling**: Inline CSS (no dependencies)
+
+## Code Example
+
+```typescript
+import { ObjectDetector, PoseDetector } from 'rtmlib-ts';
+
+// Object Detection
+const detector = new ObjectDetector({
+  model: '/models/yolo/yolov12n.onnx',
+  classes: ['person', 'car'],
+});
+await detector.init();
+const objects = await detector.detectFromCanvas(canvas);
+
+// Pose Estimation
+const poseDetector = new PoseDetector({
+  detModel: '/models/yolo/yolov12n.onnx',
+  poseModel: '/models/rtmpose/end2end.onnx',
+});
+await poseDetector.init();
+const people = await poseDetector.detectFromCanvas(canvas);
+```
+
+## Performance
+
+Expected inference times (varies by device):
+
+| Mode | Input | Time |
+|------|-------|------|
+| Object (WASM) | 640×640 | ~80ms |
+| Object (WebGPU) | 640×640 | ~30ms |
+| Pose (WASM) | 640×640 | ~150ms |
+| Pose (WebGPU) | 640×640 | ~60ms |
+
+## Troubleshooting
+
+### "Models not found"
+- Ensure models are in `public/models/`
+- Check browser console for 404 errors
+
+### "Camera not working"
+- Grant camera permissions
+- Use HTTPS or localhost
+- Check browser compatibility
+
+### "Slow inference"
+- Switch to WebGPU backend in code
+- Reduce input size
+- Use fewer classes
+
+## License
+
+Apache 2.0

package/playground/app/globals.css

@@ -0,0 +1,17 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  min-height: 100vh;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}

package/playground/app/layout.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "rtmlib-ts Playground",
+  description: "Test Object Detection and Pose Estimation",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}