> ## Documentation Index
> Fetch the complete documentation index at: https://docs.coreweave.com/llms.txt
> Use this file to discover all available pages before exploring further.

# パネル

> Workspace パネルを使用・カスタマイズして、ログしたデータを可視化します

export const AriaChatBubbles = ({prompt, response}) => {
  const [isDark, setIsDark] = useState(false);
  const [promptCopied, setPromptCopied] = useState(false);
  useEffect(() => {
    const root = document.documentElement;
    const sync = () => setIsDark(root.classList.contains('dark'));
    sync();
    const obs = new MutationObserver(sync);
    obs.observe(root, {
      attributes: true,
      attributeFilter: ['class']
    });
    return () => obs.disconnect();
  }, []);
  useEffect(() => {
    if (!promptCopied) {
      return undefined;
    }
    const timeout = setTimeout(() => setPromptCopied(false), 2000);
    return () => clearTimeout(timeout);
  }, [promptCopied]);
  const copyText = text => {
    navigator.clipboard.writeText(text).then(() => setPromptCopied(true)).catch(console.error);
  };
  const userBg = isDark ? '#363C44' : '#F8F8F8';
  const userBorder = isDark ? '#4B535C' : '#DFE0E2';
  const textColor = isDark ? '#E8E8E9' : '#2B3038';
  const iconColor = isDark ? '#8F949E' : '#79808A';
  const iconHoverBg = isDark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.05)';
  const bubbleText = {
    fontSize: '15px',
    color: textColor,
    overflowWrap: 'anywhere'
  };
  const bubbleBase = {
    maxWidth: '85%'
  };
  const copyIcon = promptCopied ? <svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{
    color: '#FCBC32'
  }}>
      <path d="M20 6 9 17l-5-5" />
    </svg> : <svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
    </svg>;
  return <div aria-label="ARIA chat example" className="not-prose flex flex-col gap-3" role="group">
      {}
      <div className="flex w-full justify-end">
        <div className="flex w-fit items-start gap-1 rounded-2xl py-2 pl-3 pr-1.5" style={{
    ...bubbleBase,
    backgroundColor: userBg,
    border: `1px solid ${userBorder}`
  }}>
          <div className="min-w-0 flex-1 hyphens-auto whitespace-pre-wrap" style={bubbleText}>
            {prompt}
          </div>
          <button type="button" className="mt-0.5 shrink-0 rounded-lg p-1.5 cursor-pointer" style={{
    color: iconColor,
    background: 'transparent'
  }} onMouseEnter={e => {
    e.currentTarget.style.backgroundColor = iconHoverBg;
  }} onMouseLeave={e => {
    e.currentTarget.style.backgroundColor = 'transparent';
  }} onClick={() => copyText(prompt)} aria-label="Copy user prompt">
            {copyIcon}
          </button>
        </div>
      </div>
      {}
      <div className="flex w-full justify-start">
        <div className="w-fit rounded-2xl py-2 px-3" style={{
    ...bubbleBase,
    border: '1px solid #CDF4F7'
  }}>
          <div className="hyphens-auto whitespace-pre-wrap" style={bubbleText}>
            {response}
          </div>
        </div>
      </div>
    </div>;
};

Workspace パネルの可視化を使用すると、[ログしたデータ](/ja/products/wandb/ref/python/experiments/run#method-runlog)をキーごとに探索したり、ハイパーパラメーターと出力メトリクスの関係を可視化したりできます。このページでは、Workspace モードの選択方法、パネルの追加と設定、パネルをセクションに整理する方法、共同作業者との共有方法について説明します。

<h2 id="workspace-modes">
  Workspace モード
</h2>

W\&B プロジェクトでは、2 種類の Workspace モードを使用できます。Workspace 名の横にあるアイコンで、そのモードを確認できます。

| アイコン | Workspace モード |
| - | - |
| <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/automated_workspace.svg?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=76918bfef3e9260d38999c0e7ce3175f" alt="自動 Workspace アイコン" width="32px" data-path="products/wandb/_media/automated_workspace.svg" /> | **自動 Workspace** は、project でログされたすべてのキーのパネルを自動的に生成します。自動 Workspace は次のような場合に選択します。<ul><li>project で利用可能なすべてのデータを可視化して、すぐに使い始めたい場合。</li><li>ログするキーが少ない小規模な project の場合。</li><li>より幅広く分析したい場合。</li></ul>自動 Workspace からパネルを削除した場合は、[クイックパネルビルダー](#quick-panel-builder) を使用して再作成できます。 |
| <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/manual_workspace.svg?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=810ff51fadbb4c438646f3b1fe920107" alt="手動 Workspace アイコン" width="32px" data-path="products/wandb/_media/manual_workspace.svg" /> | **手動 Workspace** は空の状態から始まり、自分で追加したパネルのみを表示します。手動 Workspace は次のような場合に選択します。<ul><li>project でログされたキーのうち、主に一部のキーだけを確認したい場合。</li><li>対象を絞り込んで分析したい場合。</li><li>あまり必要のないパネルを読み込まないようにして、Workspace のパフォーマンスを向上させたい場合。</li></ul>[クイックパネルビルダー](#quick-panel-builder) を使用すると、手動 Workspace とそのセクションに有用な可視化をすばやく追加できます。 |

Workspace でのパネルの生成方法を変更するには、[Workspace をリセット](#reset-a-workspace)します。

<Note>
  **Workspace への変更を元に戻す**

  Workspace への変更を元に戻すには、\[元に戻す] ボタン (左向きの矢印) をクリックするか、**Cmd+Z** (macOS) または **Ctrl+Z** (Windows または Linux) を押します。
</Note>

<h2 id="reset-a-workspace">
  Workspace をリセットする
</h2>

Workspace をリセットすると、モードを変更したり、パネルをクリアして一からやり直したりできます。

Workspace をリセットするには、次の手順を実行します。

1. Workspace の上部にある **action (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックします。
2. **Reset workspace** をクリックします。

<h2 id="configure-the-workspace-layout">
  Workspace レイアウトを設定する
</h2>

Workspace レイアウトの設定では、Workspace 全体でパネルとセクションをどのように整理・表示するかを制御します。

Workspace レイアウトを設定するには、Workspace の上部にある **Settings** をクリックし、**Workspace layout** をクリックします。次の設定を利用できます。

* **Hide empty sections during search** (デフォルトでオン)
* **Sort panels alphabetically** (デフォルトでオフ)
* **Section organization** (デフォルトでは最初の接頭辞でグループ化) 。この設定を変更するには、次の手順を実行します。
  1. 南京錠アイコンをクリックします。
  2. セクション内でのパネルのグループ化方法を選択します。

Workspace の折れ線グラフのデフォルトを設定するには、[Line plots](/ja/products/wandb/app/features/panels/line-plot) を参照してください。

<h3 id="configure-a-sections-layout">
  セクションのレイアウトを設定する
</h3>

セクションのレイアウトを設定するには、そのセクションの歯車アイコンをクリックし、**Display preferences** をクリックします。次の設定を利用できます。

* **Turn on or off colored run names in tooltips** (ツールチップで run 名を色付きで表示するかどうか。デフォルトはオン)
* **Only show highlighted run in companion chart tooltips** (関連チャートのツールチップに、ハイライトされた run のみを表示する。デフォルトはオフ)
* **Number of runs shown in tooltips** (ツールチップに表示する run の数。単一の run、すべての run、または **Default**)
* **Display full run names on the primary chart tooltip** (プライマリチャートのツールチップに run 名を省略せずに表示する。デフォルトはオフ)

<h2 id="view-a-panel-in-full-screen-mode">
  パネルを全画面モードで表示する
</h2>

全画面モードではパネルをより広く表示できるため、データを詳しく確認したい場合に便利です。全画面モードでは、run selector が表示されます。

パネルを全画面モードで表示するには、次の手順を実行します。

1. パネルにカーソルを合わせます。
2. パネルの **action (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックし、全画面ボタンをクリックします。このボタンは、カメラのファインダーのような、正方形の四隅を示す枠線の形をしています。
   <Frame>
     <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/panel_fullscreen.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=d6f1b7dcee25ca63fa4793b365da88a3" alt="全画面表示のパネル" width="352" height="79" data-path="products/wandb/_media/panel_fullscreen.png" />
   </Frame>

全画面モードで表示中に[パネルを共有](#share-a-panel)すると、生成されたリンクは自動的に全画面モードで開きます。

全画面モードでは、次のヒントを活用してください。

* 全画面モードからパネルの Workspace に戻るには、ページ上部にある左向きの矢印をクリックします。
* 全画面モードを終了せずにセクション内のパネルを切り替えるには、パネルの下にある **Previous** ボタンと **Next** ボタン、または左右の矢印キーを使用します。
* パネルの表示領域をさらに広げるには、**Cmd+.** (macOS) または **Ctrl+.** (Windows または Linux) で run selector を最小化します。
* [メディアパネル](/ja/products/wandb/app/features/panels/media)の画像を全画面モードで表示している場合は、キーボードショートカットで拡大・縮小、ズームのリセット、画面に合わせたズームを行えます。詳しくは[キーボードショートカット](/ja/products/wandb/app/keyboard-shortcuts#media-panels)を参照してください。

全画面モードやパネルで使用できるその他のショートカットについては、[キーボードショートカット](/ja/products/wandb/app/keyboard-shortcuts)を参照してください。

<h2 id="add-panels">
  パネルを追加する
</h2>

以下のセクションでは、Workspace にパネルを追加する方法について説明します。パネルは 1 つずつ追加することも、選択したキーごとに自動で追加することもできます。また、ARIA にパネルの追加を依頼することもできます。

<h3 id="add-a-panel-manually">
  パネルを手動で追加する
</h3>

パネルを 1 つずつ Workspace に追加します。追加先には、Workspace 全体 (グローバル) またはセクションを指定できます。

<h4 id="add-panels-to-a-workspace">
  Workspace にパネルを追加する
</h4>

1. プロジェクトの Workspace にアクセスします。
2. panel search フィールドの右側にある **Add panels** をクリックします。
3. 表示されるモーダルで、チャート、メディア、クエリパネルなど、追加するパネルのタイプを選択します。

<h4 id="add-panels-to-a-section">
  セクションにパネルを追加する
</h4>

1. プロジェクトの Workspace にアクセスします。
2. オプション: 新しいセクションを作成します。Workspace の一番下までスクロールし、**Add section** をクリックします。
3. セクションの **action (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックし、**+ Add panels** をクリックします。
4. 表示されたモーダルで、追加するパネルのタイプ (チャート、メディア、クエリパネルなど) を選択します。

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/add_single_panel.gif?s=c34aec2f223a84ed2788d7501e04ce64" alt="パネルを追加するデモ" width="3822" height="2842" data-path="products/wandb/_media/add_single_panel.gif" />
</Frame>

<h3 id="quick-panel-builder">
  クイックパネルビルダー
</h3>

**クイックパネルビルダー** を使用すると、選択したメトリクスキーのパネルを Workspace レベルまたはセクションレベルで自動的に作成できます。

<Note>
  自動 Workspace では、ログされたすべてのキーのパネルがすでに存在する場合、**クイックパネルビルダー** は表示されません。パネルを削除した場合は、**クイックパネルビルダー** を使用して再度追加できます。
</Note>

**クイックパネルビルダー** でパネルを作成する方法は 2 つあります。

| オプション | 説明 |
| - | - |
| **Single-key panels** | 特定のキーを選択します。W\&B はメトリクスキーごとに個別のパネルを作成し、表示中の run 間でそのメトリクスを比較します。 |
| **Multi-metric panels** | RE2 正規表現を入力します。W\&B は、正規表現に一致するすべてのメトリクスキーを含むパネルを 1 つ作成します。今後ログされるキーも、一致すればこのパネルに含まれます。 |

たとえば、Workspace に `train/loss` と `val/loss` のメトリクスキーがあるとします。**クイックパネルビルダー** では、次のいずれかの方法でパネルを作成できます。

* **Single-key panels**: `train/loss` 用と `val/loss` 用に、2 つのパネルが作成されます。
* **Multi-metric panels**: 正規表現 `.*\/loss` を使用すると、両方のメトリクスを含むパネルが 1 つ作成されます。

<h4 id="add-panels-to-the-workspace">
  Workspace にパネルを追加する
</h4>

1. プロジェクトの Workspace にアクセスします。
2. panel search フィールドの横にある **Add panels** を選択し、**クイックパネルビルダー** を選択します。
3. **Single-key panels** または **Multi-metric panels** を選択します。
4. 検索フィールドにメトリクスキーまたは正規表現を入力します。
5. 作成モードに応じて、次の操作を行います。
   * **Single-key panels**: メトリクスキーにカーソルを合わせ、**Add** を選択します。追加したいメトリクスキーごとに、この操作を繰り返します。
   * **Multi-metric panels**: 正規表現を指定すると、一致するメトリクスキーをまとめたパネルを作成できます。**Add panel** をクリックします。

<h4 id="add-panels-to-a-section-2">
  セクションにパネルを追加する
</h4>

1. プロジェクトの Workspace にアクセスします。
2. オプション: セクションを作成するには、Workspace の一番下までスクロールし、**Add section** を選択します。
3. セクション内で **Add panel** を選択し、次に **クイックパネルビルダー** を選択します。
4. **Single-key panels** または **Multi-metric panels** を選択します。
5. 検索フィールドにメトリクスキーまたは正規表現を入力します。
6. 作成モードに応じて、次の操作を行います。
   * **Single-key panels**: メトリクスキーにカーソルを合わせ、**Add** を選択します。追加するメトリクスキーごとに、この操作を繰り返します。
   * **Multi-metric panels**: 正規表現を指定すると、一致するメトリクスキーをまとめた 1 つのパネルが作成されます。**Add panel** をクリックします。

<Tip>
  ARIA にパネルの追加を依頼することもできます。

  <AriaChatBubbles prompt="train/ 接頭辞が付いたすべてのメトリクスについて、ラインプロットパネルを追加してください。" response="表示中の run でログされた train/ の各メトリクスについてラインプロットパネルを追加し、Workspace 内に整理します。" />
</Tip>

<br />

<h2 id="share-a-panel">
  パネルを共有する
</h2>

パネルを共有すると、Workspace 全体を開かなくても、特定の可視化に絞ったビューをコラボレーターに直接見せることができます。リンクでパネルを共有するには、次のいずれかの操作を行います。

* パネルを全画面モードで表示した状態で、ブラウザーの URL をコピーします。
* **action (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックし、**Copy panel URL** をクリックします。

コピーしたリンクをユーザーまたはチームと共有します。共有相手がリンクにアクセスすると、パネルが[全画面モード](#view-a-panel-in-full-screen-mode)で開きます。

全画面モードからパネルの Workspace に戻るには、ページ上部にある左向きの矢印をクリックします。

<h3 id="compose-a-panels-full-screen-link-programmatically">
  パネルの全画面リンクをプログラムで作成する
</h3>

[オートメーションを作成する](/ja/products/wandb/automations) 場合や、同様のワークフローを構築する場合は、パネルの全画面 URL を含めておくと便利です。パネルの全画面 URL の形式は次のとおりです。次の例の角括弧で囲まれた部分を、entity 名、project 名、パネル名、セクション名に置き換えてください。

```text theme={"system"}
https://wandb.ai/[ENTITY_NAME]/[PROJECT_NAME]?panelDisplayName=[PANEL_NAME]&panelSectionName=[SECTION_NAME]
```

同じセクション内に同じ名前のパネルが複数ある場合、この URL を開くと、その名前を持つ最初のパネルが表示されます。

<h3 id="embed-or-share-a-panel-on-social-media">
  パネルを埋め込む、またはソーシャルメディアで共有する
</h3>

パネルを Web サイトに埋め込んだりソーシャルメディアで共有したりするには、リンクを知っている全員がそのパネルを閲覧できる状態にする必要があります。project が非公開の場合、パネルを閲覧できるのはその project のメンバーのみです。project が公開されている場合は、リンクを知っている全員がパネルを閲覧できます。

パネルを埋め込むためのコード、またはソーシャルメディアで共有するためのコードを取得するには、次の手順を実行します。

1. Workspace でパネルにカーソルを合わせ、**action (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックします。
2. **Share** タブをクリックします。
3. **Only those who are invited have access** を **Anyone with the link can view** に変更します。この設定を変更しないと、次のステップの選択肢は使用できません。
4. **Share on Twitter**、**Share on Reddit**、**Share on LinkedIn**、**Copy embed link** のいずれかを選択します。

<h3 id="email-a-panel-report">
  パネルの report をメールで送信する
</h3>

1 つのパネルを単独の report としてメールで送信するには、次の手順を実行します。

1. パネルにカーソルを合わせ、パネルの **action (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックします。
2. **Share panel in report** をクリックします。
3. **Invite** タブを選択します。
4. メールアドレスまたはユーザー名を入力します。
5. オプション: **can view** を **can edit** に変更します。
6. **Invite** をクリックします。共有するパネルのみを含む report へのリンクが記載されたメールが、W\&B からユーザーに送信されます。

[パネルを共有する](#share-a-panel)場合とは異なり、受信者はこの report から Workspace にアクセスできません。

<h2 id="manage-panels">
  パネルを管理する
</h2>

Workspace にパネルを追加した後は、パネルの編集、移動、複製、削除を行って、可視化を整理し、常に最新の状態に保つことができます。

<h3 id="edit-a-panel">
  パネルを編集する
</h3>

パネルを編集するには、次の手順に従います。

1. パネルの鉛筆アイコンをクリックします。
2. パネルの設定を変更します。
3. オプション: パネルを別のタイプに変更するには、タイプを選択してから設定を行います。
4. **Apply** をクリックします。

<h3 id="move-a-panel">
  パネルを移動する
</h3>

パネルを別のセクションに移動するには、パネルのドラッグハンドルを使用します。一覧から移動先のセクションを選択する場合は、次の手順を実行します。

1. オプション: 最後のセクションの下にある **Add section** をクリックして、新しいセクションを作成します。
2. パネルの **action (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックします。
3. **Move** をクリックし、移動先のセクションを選択します。

ドラッグハンドルを使用して、セクション内でパネルを並べ替えることもできます。

<h3 id="duplicate-a-panel">
  パネルを複製する
</h3>

パネルを複製するには、次の手順に従います。

1. パネル上部にある **action (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックします。
2. **Duplicate** をクリックします。

必要に応じて、複製したパネルを[カスタマイズ](#edit-a-panel)したり、[移動](#move-a-panel)したりできます。

<h3 id="remove-panels">
  パネルを削除する
</h3>

パネルを削除するには、次の手順を実行します。

1. パネルにカーソルを合わせます。
2. **action (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックします。
3. **Delete** をクリックします。

手動 Workspace のパネルをすべて削除するには、その Workspace の **action (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックし、**Clear all panels** をクリックします。

自動 Workspace と手動 Workspace のどちらでも、[Workspace をリセット](#reset-a-workspace)すればパネルをすべて削除できます。デフォルトのパネルセットから始めるには **Automatic** を、パネルのない空の Workspace から始めるには **Manual** を選択します。

<h2 id="manage-sections">
  セクションを管理する
</h2>

セクションは関連するパネルをグループにまとめるため、大規模な Workspace でも目的のパネルを見つけやすくなります。デフォルトでは、Workspace 内のセクションはログしたキーの階層構造を反映します。ただし、手動の Workspace では、パネルを追加するまでセクションは表示されません。

<h3 id="add-a-section">
  セクションを追加する
</h3>

セクションを追加するには、最後のセクションの下にある **Add section** をクリックします。

既存のセクションの前後に新しいセクションを追加する場合は、代わりにそのセクションの **action (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックし、**New section below** または **New section above** をクリックします。

<Warning>
  セクションに「Section」という名前を付けないでください。既知の制限により、この名前のセクション内のパネルは、セクションをリネームするまでレンダリングされません。
</Warning>

<h3 id="manage-a-sections-panels">
  セクションのパネルを管理する
</h3>

セクション内では、パネルのサイズ変更、ページネーションの制御、個々のパネルの削除を行えます。パネル数が多いセクションは、デフォルトでページ分割されます。1 ページに表示されるパネルのデフォルト数は、パネルの設定とセクション内のパネルのサイズによって決まります。

パネルのサイズを変更するには、パネルにカーソルを合わせてドラッグハンドルをクリックし、ドラッグしてサイズを調整します。1 つのパネルのサイズを変更すると、セクション内のすべてのパネルのサイズが変更されます。

セクションがページ分割されている場合は、1 ページに表示するパネルの数をカスタマイズできます。

1. セクションの上部で、**1 to `[X]` of `[Y]`** をクリックします。`[X]` は表示されているパネルの数、`[Y]` はパネルの総数です。
2. 1 ページあたりに表示するパネルの数を選択します (最大 100) 。

セクションからパネルを削除するには、次の手順に従います。

1. パネルにカーソルを合わせ、**action (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックします。
2. **Delete** をクリックします。

Workspace を自動 Workspace にリセットすると、削除したパネルはすべて再表示されます。

<h3 id="rename-a-section">
  セクションをリネームする
</h3>

セクションをリネームするには、そのセクションの **action (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックし、**Rename section** をクリックします。

<Warning>
  セクション名を「Section」にしないでください。既知の制限により、この名前のセクション内のパネルは、セクションをリネームするまでレンダリングされません。
</Warning>

<h3 id="delete-a-section">
  セクションを削除する
</h3>

セクションを削除するには、**action (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックし、**Delete section** をクリックします。セクションと、その中のパネルが削除されます。


## Related topics

- [メディアパネル](/ja/products/wandb/app/features/panels/media.md)