twitch-overlay-generation

Twitch オーバーレイの生成

each::sense を使って、プロ仕様の配信オーバーレイやグラフィックを生成します。このスキルでは、Twitch、YouTube Gaming、その他の配信プラットフォームに最適化された画像を作成できます。

機能

• ウェブカメラフレーム：ウェブカメラの配置に使うカスタムボーダーとフレーム
• 配信開始前画面：カウントダウンや配信前のグラフィック
• BRB 画面：配信中断時に表示するグラフィック
• 配信終了画面：アウトロや終了シーケンスのグラフィック
• アラートグラフィック：フォロー、サブスクライブ、寄付、レイドのアラート
• チャットボックスフレーム：スタイルを設定したチャットオーバーレイ用のコンテナ
• Twitch パネル：概要、スケジュール、ルールなどのチャンネルパネル用グラフィック
• エモート：チャンネル登録者向けのカスタム Twitch エモート
• サブスクライバーバッジ：登録者向けの段階別ロイヤルティバッジ
• チャンネルバナー：プロフィールバナーやオフライン画面

クイックスタート

curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a cyberpunk themed webcam frame with neon purple and blue colors, futuristic tech elements, transparent center for the webcam"}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'

配信オーバーレイの形式とサイズ

アセットの種類	サイズ	形式	用途
ウェブカメラフレーム	1920x1080	PNG（透過）	配信レイアウトへのオーバーレイ
配信開始前画面	1920x1080	PNG/MP4	配信前の表示
BRB 画面	1920x1080	PNG/MP4	休憩画面
配信終了画面	1920x1080	PNG/MP4	配信終了時
アラートグラフィック	400x400	PNG（透過）	画面上の通知
チャットボックスフレーム	400x600	PNG（透過）	チャットオーバーレイ用コンテナ
Twitch パネル	320x160	PNG	チャンネル情報パネル
エモート	112x112、56x56、28x28	PNG（透過）	チャット用エモート
サブスクバッジ	72x72、36x36、18x18	PNG（透過）	登録者バッジ
チャンネルバナー	1200x480	PNG	プロフィールバナー
オフライン画面	1920x1080	PNG	配信がオフラインのとき

使用例

1. ウェブカメラフレーム付き配信オーバーレイ

curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a 1920x1080 stream overlay with a webcam frame in the bottom right corner. Gaming theme with dark purple and gold accents. Include decorative borders, transparent center for webcam, and space for recent events on the left side. Modern esports aesthetic."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'

2. 配信開始前画面

curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a 1920x1080 Starting Soon screen for a gaming stream. Neon synthwave theme with retro grid, glowing text area for STARTING SOON, animated feel with light rays and particles. Include space for social media handles at the bottom. Pink, purple, and cyan color scheme."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'

3. BRB（すぐに戻ります）画面

curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a 1920x1080 BRB screen for Twitch. Cozy lo-fi aesthetic with warm colors, include a cute animated coffee cup or snack visual. Text space for BE RIGHT BACK in stylized font. Soft lighting, relaxing vibes. Include subtle chat reminder at bottom."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'

4. 配信終了画面

curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a 1920x1080 stream ending screen. Thanks for watching theme with space for STREAM ENDED or THANKS FOR WATCHING text. Include areas for social media icons/handles, next stream schedule, and a follow reminder. Dark elegant theme with gold accents and particle effects."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'

5. アラートグラフィック（フォロー、サブスク、寄付）

# Follow Alert
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a 400x400 transparent PNG follow alert graphic for Twitch. Cute anime-style character celebrating with confetti and sparkles. Include a heart icon and space for NEW FOLLOWER text. Vibrant colors, kawaii aesthetic."}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "alert-set-001",
    "mode": "max"
  }'

# Subscribe Alert (same session for consistency)
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a matching 400x400 subscribe alert. Same style as the follow alert but with a star icon and more elaborate celebration effects. Space for NEW SUB text."}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "alert-set-001",
    "mode": "max"
  }'

# Donation Alert
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a matching 400x400 donation/tip alert. Same style with coin or money effects, extra sparkle and celebration. Space for donation amount text."}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "alert-set-001",
    "mode": "max"
  }'

6. チャットボックスフレーム

curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a 400x600 transparent chat box frame overlay. Cyberpunk tech theme with glowing border edges, circuit board patterns. Mostly transparent center where chat will display. Include a small CHAT header area at top. Neon green and black color scheme."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'

7. Twitch パネルのグラフィック

# About Panel
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a 320x160 Twitch panel graphic for an ABOUT ME section. Clean modern design with the text ABOUT ME. Dark background with gradient accent, gaming controller or headset icon. Professional streamer aesthetic."}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "panel-set-001",
    "mode": "max"
  }'

# Schedule Panel
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a matching 320x160 SCHEDULE panel. Same style as previous with calendar icon. Text says SCHEDULE."}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "panel-set-001",
    "mode": "max"
  }'

# Rules Panel
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a matching 320x160 RULES panel. Same style with a book or list icon."}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "panel-set-001",
    "mode": "max"
  }'

8. Twitch エモートの生成

curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a 112x112 Twitch emote. A cute cat face with heart eyes, chibi/kawaii style. Expressive, bold lines, vibrant colors that pop against dark backgrounds. Transparent background. The emote should be readable at small sizes."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'

# Emote variations
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a set of 3 Twitch emotes at 112x112 each: 1) Pog/excited face, 2) Sad/cry face, 3) Laugh/LUL face. All featuring a cute frog character, consistent style across all three. Bold outlines, expressive features, transparent backgrounds."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'

9. サブスクライバーバッジ

curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a set of 6 Twitch subscriber badges at 72x72 pixels each, tiered progression for 1 month, 3 months, 6 months, 1 year, 2 years, and 3 years. Theme: crystal/gem progression from small rough gem to elaborate crown jewel. Each tier more detailed and prestigious. Transparent backgrounds, clear at small sizes."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'

# Alternative badge style
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create 6 subscriber loyalty badges, 72x72 pixels. Military rank progression theme: bronze star (1mo), silver star (3mo), gold star (6mo), bronze medal (1yr), silver medal (2yr), gold medal with laurels (3yr). Clear iconography, readable at 18x18 size, transparent backgrounds."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'

10. チャンネルバナー

curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a 1200x480 Twitch channel banner. Epic gaming scene with dramatic lighting, mountain landscape with fantasy elements. Space on the right side for channel name text. Color scheme: deep blues and purples with orange accent lighting. Cinematic, high quality."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'

# Offline Screen
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a 1920x1080 Twitch offline screen. Cozy nighttime scene with a gaming setup, monitors off, ambient lighting from RGB peripherals. Text space for CURRENTLY OFFLINE and social media handles. Moody atmospheric lighting, lo-fi aesthetic."}],
    "model": "eachsense/beta",
    "stream": true,
    "mode": "max"
  }'

ベストプラクティス

オーバーレイのデザイン

• 透過：オーバーレイには、背景が透過した PNG を指定します
• セーフゾーン：重要な要素は端から離して配置します（Twitch の UI が隅を覆います）
• 読みやすさ：さまざまなゲーム背景の上でもテキストが読みやすいことを確認します
• 一貫性：session_id を使って、オーバーレイセット全体のスタイルを統一します
• 色のコントラスト：ゲームプレイの妨げにならず、目立つ色を使います

エモートとバッジ

• 太い線：小さいサイズでも見やすいよう、太い輪郭線を使います
• シンプルなデザイン：28x28 や 18x18 のサイズでは、細部を抑えたほうが効果的です
• サイズをテスト：すべてのサイズを指定するか、最小サイズに合わせてデザインします
• 表情を最優先：エモートは感情がひと目で伝わるようにします

画面用グラフィック

• ブランドの一貫性：すべての画面で色とスタイルを統一します
• テキストの優先順位：メインのテキスト（配信開始前、BRB）が最も目立つようにします
• ソーシャル連携：SNS アカウント名を記載するスペースを確保します
• アニメーションを想定：アニメーションに使う可能性を考慮してデザインします

配信グラフィックのプロンプトのヒント

配信オーバーレイを作成する際は、次の詳細を含めます。

1. 寸法：正確なピクセル寸法を指定します
2. テーマ：ゲームのジャンルや美的スタイル（サイバーパンク、居心地のよい雰囲気、アニメなど）
3. 色：ブランドに合ったメインカラーとアクセントカラー
4. 透過：背景を透過させる必要があるかを指定します
5. テキストスペース：テキストやロゴを配置する場所
6. スタイルの参考：eスポーツ、居心地のよい雰囲気、レトロ、ミニマルなど
7. プラットフォーム：Twitch、YouTube、または複数のプラットフォーム

プロンプトの構成例

"Create a [dimensions] [asset type] for [platform].
[Theme/aesthetic] with [color scheme].
Include [specific elements] and space for [text/overlays].
[Transparency requirements]. [Style reference]."

モードの選択

生成を始める前に、ユーザーに確認してください。

「スピードと低コストを優先しますか、それとも高品質を優先しますか？」

モード	最適な用途	速度	品質
max	本番用の最終オーバーレイ、エモートセット、ブランドアセット	遅め	最高
eco	手早いコンセプト、下書き、スタイルの検討	速め	良好

複数ターンでのオーバーレイセット作成

session_idを使用して、統一感のあるオーバーレイパッケージを作成します。

# Create base style
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a webcam frame with a Japanese cherry blossom theme, soft pink and white colors, elegant minimal design"}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "sakura-overlay-set"
  }'

# Create matching starting soon
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a matching Starting Soon screen in the same cherry blossom style"}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "sakura-overlay-set"
  }'

# Create matching BRB screen
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create a matching BRB screen, same aesthetic with falling petals"}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "sakura-overlay-set"
  }'

# Create matching alerts
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "Create follow and subscribe alerts matching this cherry blossom theme"}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "sakura-overlay-set"
  }'

オーバーレイパッケージの作成例

1回のセッションで、ストリーミング用の完全なパッケージを生成します。

# Initialize the package style
curl -X POST https://eachsense-agent.core.eachlabs.run/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "X-API-Key: $EACHLABS_API_KEY" \
  -H "Accept: text/event-stream" \
  -d '{
    "messages": [{"role": "user", "content": "I am creating a complete Twitch overlay package. Theme: Cyberpunk Neon City. Colors: Hot pink, electric blue, purple. Style: Futuristic, glowing edges, holographic elements. Start with the main webcam overlay frame at 1920x1080."}],
    "model": "eachsense/beta",
    "stream": true,
    "session_id": "cyberpunk-package",
    "mode": "max"
  }'

エラー処理

エラー	原因	解決策
Failed to create prediction: HTTP 422	残高不足	eachlabs.aiでチャージしてください
コンテンツポリシー違反	禁止されているコンテンツ	プラットフォームのガイドラインに従うようプロンプトを調整してください
タイムアウト	生成が複雑	クライアントのタイムアウトを最低10分に設定してください
スタイルに一貫性がない	session_idがない	複数アセットの生成にはsession_idを使用してください

関連スキル

• each-sense - APIの基本ドキュメント
• emote-generation - エモート作成に特化
• brand-kit-generation - 完全なブランドアイデンティティパッケージ
• animated-overlay-generation - アニメーション／動画オーバーレイ