Welcome to Bioglass, the futuristic offline website for real-time object detection using AI! This project leverages modern AI models to recognize and highlight objects through your camera—without sending your data to any server. All processing is done locally, keeping your privacy intact. Perfect for experimentation, demos, and building custom AI applications on the web.
- Real-Time Object Detection: Detect objects in your environment instantly using your webcam.
- Bounding Boxes & Labels: Each object is highlighted with a colored bounding box and labeled with its class and confidence percentage.
- Offline-First: Runs entirely in the browser. No internet required after loading assets.
- Cross-Platform: Works on both desktop and mobile devices. Adjusts UI automatically for small screens.
- Progressive Web App (PWA): Install Bioglass as an offline app on your device for quick access.
- Modern AI Models: Uses ONNX Runtime with YOLOv8 for fast, accurate detection.
Bioglass can detect over 80 classes including:
person, bicycle, car, motorcycle, airplane, bus, train, truck, boat, cat, dog, chair, laptop, cell phone, bottle ...and many more.
(Full list available in js/main.js) or wiki
- Initialize Models: ONNX Runtime loads the YOLOv8 model in the browser.
- Camera Access: User grants access to the webcam.
- Frame Processing: Each video frame is converted to a tensor and fed into the model.
- Bounding Boxes & NMS: Detected objects are filtered using Non-Maximum Suppression to avoid overlapping boxes.
- Rendering: Boxes and labels are drawn on an HTML
<canvas>overlay in real time. - Interactive Controls:
- Run Inference: Start detecting objects in full-screen mode.
- Stop Inference: Stop detection and return to the main menu.
- Clone this repository:
git clone https://github.com/yourusername/bioglass.git- Open the project folder:
cd bioglass- Open
index.htmlin a modern browser (Chrome, Edge, or Firefox). No server required.
⚠️ Make sure your browser allows webcam access.
❗And also check if updating packages is allowed in the browser. If there is an image but no display of objects (outline), then it is not supported. Try posting it as a site and opening it, or open the project site and check the work there.❗
If you want to install a clean project without git and other files, download this file unpack and it's ready, you can use it, upload it, etc.
bioglass/
│
├─ index.html # Main HTML page
├─ css/
│ └─ style.css # Styles for desktop & mobile
├─ js/
│ ├─ main.js # Core detection logic
│ └─ opencv.js # OpenCV.js library
├─ model/
│ └─ yolov8n.onnx # AI model file
├─ logo.png # Logo for site & PWA
└─ manifest.json # PWA manifest
Install Bioglass as an app on your device:
- Click Install in your browser's address bar.
- Launch Bioglass from your home screen.
- Enjoy offline AI object detection anywhere!
Visit the project wiki for more information.
If you have any optimization or other issues, or want to suggest an improvement, please let us know in the issues section.
- Add New Classes: Edit
labelsarray injs/main.js. - Change Model: Replace
yolov8n.onnxwith any compatible ONNX model. - Styling: Update
css/style.cssfor colors, buttons, or layout.
- HTML5, CSS3, JavaScript
- ONNX Runtime Web
- OpenCV.js
- YOLOv8 Object Detection
- **Progressive Web App (PWA)
- All video processing happens locally in your browser.
- No frames, images, or video streams are sent to external servers.
- Perfect for privacy-conscious users or offline environments.
Found a bug or want to improve the UI? Contributions are welcome!
- Fork the repository.
- Make your changes.
- Submit a pull request with a clear description.
- Voice feedback announcing detected objects.
- Integration with additional AI models (Mask R-CNN, segmentation).
- Dark mode and theme customization.
- Export detection data to CSV or JSON.
MIT License — free to use, modify, and distribute.
“Bioglass — seeing the world through AI eyes.” 👁️🛸
