create-interface-skill

ラベリングインターフェースの作成

HumanSignal インターフェースを作成します。1 つの JSX ソースファイル（Screen.jsx）を使い、その最後の式は、default React コンポーネントと、getResults、parseResults、paramsSchema、outputSchema、hotkeys などの任意のエクスポートを含む、括弧で囲まれたオブジェクトリテラルにします。

これは JSX ベースの Interfaces ランタイムです。ユーザーから ReactCode を明示的に求められない限り、旧形式の <ReactCode> XML タグは使わないでください。

信頼できる情報源

references/ 配下のファイルは、アプリ内の「Create with Agent」アシスタントがモデルに送信するものと同じモジュールから生成されています。これらが正式な情報源です。モジュールの契約、スキーマのルール、送信前チェックリスト、領域の契約、スタイルとアクセシビリティの要件に正確に従ってください。

必須の読み取り順序

1. references/core-contract.md を最初から最後まで読んでください。送信前チェックリストを含む、すべてのインターフェースに適用される基本契約です。
2. references/schemas.md と references/styling-a11y.md を読んでください。すべてのインターフェースでスキーマが必要であり、デザインシステムのトークンを使ってライトモードとダークモードの両方に対応する必要があります。
3. リクエストに該当するドメインモジュールと、適用する完全な例を読みます。

リファレンス	対象範囲
references/core-contract.md	応答／出力形式、防御的なコーディング、送信前チェックリスト、編集ツール、動的画面モジュール、パラメーター、アクセシビリティの基本、タスクデータへのアクセス。
references/text-spans.md	絶対オフセットによるテキストのハイライト、NER／エンティティスパン、選択オフセットのヘルパー。
references/spatial-bounding.md	空間領域の永続化、ShellRegion の形状、表示／ロック状態、AnnotationResult の形状、画像のナビゲーションと選択ツール（選択、パン、ズーム、全体表示／100％表示）、ランキング／順序付け（Interface Components がオフの場合に限り、従来の DIY 方式）。
references/video-frames.md	HTML5 動画のシークに安全な FPS の調査と、タイムラインナビゲーション用の安定したフレームカウンター（FIT-2803）。
references/schemas.md	inputSchema、outputSchema の構文、必須の出力フィールド、dependsOn、parseResults。
references/schemas-spatial.md	複数選択の画像 URL、空間キーポイントのスキーマ、PDF OCR／バウンディングボックスのスキーマ。
references/example-classification.md	感情分析／テキスト分類の画面モジュールの完全な例。
references/example-ner.md	固有表現認識（NER）の画面モジュールの完全な例。
references/example-audio.md	シェル関係アンカーと正しいシリアライズを用いた、音声／波形の時間範囲領域（FIT-2247）。
references/example-spatial.md	画像バウンディングボックス／空間画面モジュールの完全な例。
references/video-timeline.md	EditorDeps.video を使って読み込み時に実際の fps を調べること、フレーム数を単調に保つこと、注釈フレームを 24fps のフォールバック値に決して切り詰めないこと（FIT-2804）。
references/styling-a11y.md	テーマ対応トークン、タイポグラフィ、スペーシング、コンポーネント、レイアウト、操作／アクセシビリティのルール。

4. 必要な references/reference.md のセクションだけを読んでください（UI が task.data を読み取る場合は、まずスキーマとサンプルデータを確認します）。references/examples.md は、reference.md から参照されている場合にのみ開いてください。

ローカルで作成する際の実行時の注意点

• 注入されるグローバル変数。 core-contract に記載されている React ／フック／getField のグローバル変数に加え、サンドボックスには EditorUI（@humansignal/ui 名前空間）と EditorDeps（例：EditorDeps.audioDecoder.WasmStreamingDecoder、EditorDeps.video.probeFrameRate）が注入されます。
• window.InterfaceComponents（AudioCanvas、useComponentHotkeys）は参照しないでください。 これらは fflag_interfaces_components の背後で制御されており、無効になっています。core-contract と example-audio に示されているように、EditorDeps.audioDecoder.WasmStreamingDecoder を使ってオーディオインターフェースを構築し、reference.md にある InterfaceComponents の手順は無視してください。
• EditorUI の二経路の落とし穴。 EditorUI が注入されるのは実行時の iframe 内だけであり、paramsSchema を抽出する管理時の eval には注入されません。トップレベルで EditorUI を参照すると EditorUI is not defined がスローされ、Labeling Settings の paramsSchema がエラーなく壊れます。レンダリング内で参照するか、省略してデザイントークンを使ったインラインスタイルを使用してください。
• シェルが管理する動作。 ラベリングシェルは、送信／更新、元に戻す／やり直し／リセット、Regions／Info／Relations パネル、リージョンの表示設定、コメントを管理します。core-contract と spatial-bounding の props とコールバック（addRegion、updateRegion、deleteRegion、selectRegion、selectedRegionIds、非表示／ロック状態）を通じて操作してください。画面内でこれらを再実装しないでください。カスタムの削除ボタン、ローカルのみのリージョン状態、非表示状態の無視などは、シェルのパネルや履歴を破損させます。
• コンパイラーによる抽出。 コンパイラーは、最後にある括弧付きオブジェクトリテラルをモジュールのエクスポートに変換します。ファイルが裸の ({ default: ... }) で終わっていない場合、エディターは "Module missing 'default' function export." というエラーで拒否します。
• 永続ストレージはありません。 localStorage ／ sessionStorage は iframe が再マウントされるたびにリセットされるメモリー内の代替機能です。データを永続化するには、ミューテーションコールバックとアノテーション結果のみを使用してください。
• サンプルデータ。 task.json はコンパクトに保ち、paramsSchema ／ inputSchema の各 dataField から、正確な default タスクデータパスを使用してください。
• Label Studio への保存。 インターフェースの作成または更新には、label-studio-sdk interface sync <dir> --title "<Title>" --publish（新しいインターフェースの場合。必要に応じて --workspace <id> を追加）または label-studio-sdk interface sync <dir> --message "<change>"（サイドカーファイルで追跡されている既存のインターフェースの場合）のみを使用してください。後者では未公開のドラフトが作成されるため、新しいプロジェクトで使用する場合は --publish を追加してください。sync はモジュールから inputSchema ／ outputSchema ／ paramsSchema を抽出し、コードとともに保存します。自分で /api/interfaces/ に POST ／ PATCH しないでください。サーバーはコードからスキーマを読み取れないため、手動で構築したリクエストではエラーなしに空の output_schema ／ input_schema が保存され、そのインターフェースから作成されたプロジェクトでは Data Manager のアノテーションフィルターが失われます。同期後、GET /api/interfaces/<id>/ が空でない output_schema を返すことを確認してください。