Real-Time Object Detection in Browser with Transformers.js
CODE PREVIEW
エディタを読み込み中…
P
Prompt
Create a single HTML page that loads @xenova/transformers from CDN and performs real-time object detection via webcam. Use COCO-SSD model 'Xenova/detr-resnet-50' (DETR). Show video stream and draw bounding boxes & labels on a canvas overlay. Minimalist UI, dark theme. Include loading state and error handling. Use ES modules.
この作例では、Transformers.js を CDN 経由でブラウザに読み込み、DETR-ResNet-50 モデルを使って Webカメラ映像からリアルタイム物体検出を実行します。検出されたオブジェクトはバウンディングボックスとラベル・信頼度スコアとともにキャンバス上に描画。ダークテーマのシンプルな UI で、ローディング・エラー表示も含まれています。
Prompt Overview
In this example, Transformers.js is loaded into the browser via CDN, and real-time object detection is performed on webcam footage using the DETR-ResNet-50 model. Detected objects are drawn on a canvas with bounding boxes, labels, and confidence scores. The UI features a simple dark theme and includes loading and error displays.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選