How Pipboard Turns Front‑End Development into Interactive Machine‑Learning Tutorials

Foreword

The story began with a suspected alert when visiting the GitHub Pages domain

pipboard.imgcook.com

, which turned out to be a missing

CNAME

file after a pull‑request merge, causing the site to show a PoC warning.

After investigating the custom domain settings, the missing

CNAME

was restored, but the warning persisted. The issue was traced to a malicious actor who monitored CNAME changes in public repositories, submitted a conflicting

CNAME

commit, and hijacked the domain, exposing a GitHub Pages vulnerability.

The incident highlights the need for developers using GitHub Pages to verify CNAME handling and consider DNS provider effects.

Why Pipboard Exists

Pipcook targets front‑end developers with a machine‑learning framework, yet many find the learning curve steep. Pipboard was created to provide a low‑cost, interactive way to experience model training and understand underlying concepts.

It visualizes parameters and processes, turning the tutorial into a hands‑on learning experience.

Usage Experience

Step 1: Open the Pipboard page (PC only)

The interface has three panels: left for data collection, middle for model training, and right for prediction.

Step 2: Collect Sample Data

Use the camera or upload files to gather image samples, ensuring balanced class counts for better model performance. Class names can be edited directly.

Step 3: Train the Model

After collecting samples for all classes, adjust training parameters in the middle panel, then start training. Accuracy and loss metrics are displayed to evaluate performance.

Step 4: View Prediction Results

Once training completes, the right panel shows real‑time predictions from webcam input, displaying class probabilities.

Step 5: Export the Model

Click the export button to download the trained model and code for local use.

Future Plans

The first version mirrors Google’s Teachable Machine interaction. Future work will add visualizations for data collection (audio, images), model layers, and a block‑based JavaScript editor for plugin development, making model creation more accessible.

Conclusion

Developing Pipboard was both a tutorial creation and a personal learning journey, covering image‑to‑tensor conversion, webcam APIs, and front‑end compatibility challenges while demonstrating the power of modern browsers.