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

> インタラクティブな可視化で run データを探索するためのプレイグラウンド

# 実験結果を表示する

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>;
};

W\&B Workspace は、チャートをカスタマイズし、モデルの結果を探索するためのあなただけのサンドボックスです。W\&B Workspace は *Tables* と *Panel sections* で構成されています。

* **Tables**: プロジェクトにログされたすべての runs が、そのプロジェクトのテーブルに一覧表示されます。runs の表示／非表示を切り替えたり、色を変更したり、テーブルを展開して各 run のメモ、config、サマリー メトリクスを確認したりできます。
* **Panel sections**: 1 つ以上の [パネル](/ja/models/app/features/panels/) を含むセクションです。新しいパネルを作成して整理し、Workspace のスナップショットを保存するために Reports へエクスポートできます。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541/wKCrMJZKG3PxyJhv/images/app_ui/workspace_table_and_panels.png?fit=max&auto=format&n=wKCrMJZKG3PxyJhv&q=85&s=17bf8dd212245a470623048112bb46cb" alt="Workspace のテーブルとパネル" width="1393" height="1015" data-path="images/app_ui/workspace_table_and_panels.png" />
</Frame>

<div id="workspace-types">
  ## Workspace の種類
</div>

Workspace には大きく分けて **Personal workspaces** と **Saved views** の 2 つのカテゴリがあります。

* **Personal workspaces:**  モデルと Data Visualization を詳細に分析するためにカスタマイズ可能な Workspace です。Workspace の所有者だけが編集と変更の保存を行えます。チームメイトは Personal Workspace を閲覧できますが、他の人の Personal Workspace に変更を加えることはできません。
* **Saved views:** Saved views は Workspace の共同作業用スナップショットです。チーム内の誰でも、saved Workspace ビュー を閲覧、編集、および変更の保存ができます。Saved Workspace ビュー を使うと、experiments や runs などをレビューして議論できます。

次の画像は、Cécile-parker のチームメイトによって作成された複数の Personal workspaces を示しています。このプロジェクトには Saved views はありません。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541/4kbs1cW6PdjDOqU3/images/app_ui/Menu_No_views.jpg?fit=max&auto=format&n=4kbs1cW6PdjDOqU3&q=85&s=1316635fc5928388f7d85e5ab25c2ea8" alt="No saved views" width="1480" height="1480" data-path="images/app_ui/Menu_No_views.jpg" />
</Frame>

<div id="saved-workspace-views">
  ## 保存済み Workspace ビュー
</div>

ニーズに合わせた Workspace ビューで、チームでのコラボレーションを強化しましょう。Saved Views を作成して、好みのチャートやデータのレイアウトを整理しましょう。

<div id="create-a-new-saved-workspace-view">
  ### 新しい保存済み Workspace ビューを作成する
</div>

1. パーソナル Workspace または保存済みビューに移動します。
2. Workspace を編集します。
3. Workspace の右上にある **action (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックします。**Save as a new view** をクリックします。

ARIA に、現在の Workspace レイアウトを新しいビューとして保存するよう依頼することもできます。

<AriaChatBubbles prompt="この Workspace を LR comparison という名前の新しいビューとして保存してください。チームが learning-rate Experiments を確認できるようにしたいです。" response="現在の Workspace レイアウトを、表示中の Runs とパネルの配置を含めて、LR comparison という名前の新しい保存済みビューとして保存します。" />

新しく保存したビューは、Workspace のナビゲーション メニューに表示されます。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541/4kbs1cW6PdjDOqU3/images/app_ui/Menu_Views.jpg?fit=max&auto=format&n=4kbs1cW6PdjDOqU3&q=85&s=713dc752f8db5747c35e26be45da9945" alt="保存済みビューのメニュー" width="1480" height="1480" data-path="images/app_ui/Menu_Views.jpg" />
</Frame>

<div id="update-a-saved-workspace-view">
  ### 保存済み Workspace ビューを更新する
</div>

保存すると、保存済みビューの以前の状態は上書きされます。保存していない変更は保持されません。W\&B で保存済み Workspace ビューを更新するには、次の手順に従います。

1. 保存済みビューに移動します。
2. Workspace 内のチャートやデータに対して、必要な変更を行います。
3. **Save** ボタンをクリックして、変更を確定します。

<Note>
  Workspace ビューへの更新内容を保存すると、確認ダイアログが表示されます。今後このプロンプトを表示したくない場合は、保存を確定する前に **Do not show this modal next time** オプションを選択します。
</Note>

<div id="delete-a-saved-workspace-view">
  ### 保存済み Workspace ビューを削除する
</div>

不要になった保存済みビューを削除します。

1. 削除したい保存済みビューに移動します。
2. ビューの右上にある **メニュー (<Icon icon="bars" iconType="solid" />) ** ボタンを選択します。
3. **Delete view** を選択します。
4. 削除を確定して、そのビューをワークスペース メニューから削除します。

<div id="share-a-workspace-view">
  ### ワークスペースビューを共有する
</div>

カスタマイズしたワークスペースの URL をチームと直接共有してください。ワークスペースのプロジェクトにアクセス権を持つすべてのユーザーは、そのワークスペースに保存された Views を表示できます。

<div id="workspace-templates">
  ## Workspace テンプレート
</div>

<Note>
  この機能を利用するには [Enterprise](https://wandb.ai/site/pricing/) ライセンスが必要です。
</Note>

既存のワークスペースと同じ設定を使用してワークスペースを作成するには、[新しいワークスペースのデフォルト設定](#default-workspace-settings) の代わりに *Workspace templates* を使用します。

<div id="default-workspace-settings">
  ### デフォルトのワークスペース設定
</div>

W\&B では、ワークスペースには次のデフォルト設定が適用されます。

<div id="hide-empty-sections-during-search">
  #### 検索中に空のセクションを非表示にする
</div>

デフォルトでは、W\&B では Workspace に空のセクションは表示されません。この設定を変更すると、Workspace に空のセクションを表示できます。

<div id="sort-panels-alphabetically">
  #### パネルをアルファベット順に並べ替える
</div>

デフォルトでは、W\&B はプロットタイトルでパネルをアルファベット順に並べ替えません。設定を変更して、プロットタイトルに基づいてパネルをアルファベット順に並べ替えることができます。

<div id="section-organization">
  #### セクションの構成
</div>

デフォルトでは、W\&B はメトリクス名の先頭のプレフィックスに基づいてパネルをセクションにまとめます。たとえば、ワークスペースにメトリクス `a/b/c/d` と `a/e/f` が含まれている場合、W\&B はこれらのメトリクスを `a` というセクションにまとめます。ワークスペースにメトリクス `a/b/c/d` と `e/f/g` が含まれている場合、W\&B はこれらのメトリクスを `a` と `e` というセクションにまとめます。

セクションのデフォルトの構成方法を変更して、末尾のプレフィックスでグループ化することもできます。たとえば、ワークスペースにメトリクス `a/b/c/d` と `a/e/f` が含まれている場合、W\&B はこれらのメトリクスを `d` と `f` というセクションにまとめます。ワークスペースにメトリクス `a/b/c/d` と `e/f/g` が含まれている場合、W\&B はこれらのメトリクスを `d` と `g` というセクションにまとめます。

<div id="line-plot-settings">
  #### ラインプロットの設定
</div>

既定では、新しいワークスペースではラインプロットに対して次のデフォルト設定が使用されます:

| X axis    | Default |
| --------- | ------- |
| Value     | Step    |
| Log scale | false   |

| Y axis    | Default |
| --------- | ------- |
| Log scale | false   |

| Smoothing                     | Default         |
| ----------------------------- | --------------- |
| Type                          | Time weight EMA |
| Weight                        | 0               |
| Show original after smoothing | Off             |

| Max number of runs | Default |
| ------------------ | ------- |
| Max runs           | 10      |

| Data              | Default       |
| ----------------- | ------------- |
| Point aggregation | Full fidelity |

| Grouping               | Default |
| ---------------------- | ------- |
| Use grouping in charts | On      |
| Group aggregation      | Mean    |

| Display preferences       | Default |
| ------------------------- | ------- |
| Color run names           | On      |
| Display full run name     | Off     |
| Show X range in tooltip   | Off     |
| Tooltip runs              | Default |
| Sync zoom across charts   | Off     |
| Show highlighted run only | Off     |

<div id="configure-your-workspace-template">
  ### ワークスペース テンプレートを設定する
</div>

1. 任意のワークスペースを開くか、新しいワークスペースを作成します。
2. ワークスペースの右上にある **Settings** ボタンをクリックします。
3. パネルから **Workspace layout** を選択します。
4. 好みに合わせてワークスペースの設定を行います。

<div id="save-your-workspace-template">
  ### ワークスペース テンプレートを保存する
</div>

1. ワークスペースの上部で、**Undo** と **Redo** の矢印アイコンの近くにある **action (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックします。
2. **Save personal workspace template** をクリックします。
3. テンプレートの設定を確認し、**Save** をクリックします。

新しく作成するワークスペースでは、デフォルト設定ではなく、これらの設定が使用されます。

<div id="view-your-workspace-template">
  ### ワークスペーステンプレートを表示する
</div>

ワークスペーステンプレートの現在の設定を表示するには、次の手順を実行します。

1. 任意のページの右上にあるユーザーアイコンを選択します。ドロップダウンから **User Settings** を選択します。
2. **Personal workspace template** セクションに移動します。ワークスペーステンプレートを使用している場合は、その設定が表示されます。使用していない場合、このセクションには何も表示されません。

<div id="update-your-workspace-template">
  ### ワークスペース テンプレートを更新する
</div>

ワークスペース テンプレートを更新するには、次の手順に従います。

1. 任意のワークスペースを開きます。
2. ワークスペースの設定を変更します。たとえば、含める run の数を `11` に設定します。
3. 変更内容をテンプレートに保存するには、**Undo** と **Redo** の矢印アイコン付近にある **action (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックし、**Update personal workspace template** をクリックします。
4. 設定を確認し、**Update** をクリックします。テンプレートが更新され、それを使用しているすべてのワークスペースに再適用されます。

<div id="delete-your-workspace-template">
  ### ワークスペース テンプレートを削除する
</div>

ワークスペース テンプレートを削除してデフォルトの設定に戻すには、次の手順を実行します。

1. 任意のページの右上にある user アイコンを選択し、ドロップダウンから **User Settings** を選択します。
2. **Personal workspace template** セクションに移動します。ワークスペース テンプレートの設定が表示されます。
3. **Settings** の横にあるゴミ箱アイコンをクリックします。

<Note>
  Dedicated Cloud と Self-Managed では、v0.70 以降でワークスペース テンプレートの削除がサポートされています。より古い Server バージョンでは、代わりにワークスペース テンプレートが [default settings](#default-workspace-settings) を使用するように更新してください。
</Note>

<div id="programmatically-create-workspaces">
  ## ワークスペースをプログラムで作成する
</div>

<Tip>
  エンドツーエンドの例については、[Programmatic Workspaces](https://colab.research.google.com/github/wandb/wandb-workspaces/blob/Update-wandb-workspaces-tuturial/Workspace_tutorial.ipynb) ノートブックを参照してください。
</Tip>

[`wandb-workspaces`](https://github.com/wandb/wandb-workspaces/tree/main) は、[W\&B](https://wandb.ai/) ワークスペースとレポートをプログラムで操作するための Python ライブラリです。

[`wandb-workspaces`](https://github.com/wandb/wandb-workspaces/tree/main) を使って、ワークスペースをプログラムで定義できます。[`wandb-workspaces`](https://github.com/wandb/wandb-workspaces/tree/main) は、[W\&B](https://wandb.ai/) ワークスペースとレポートをプログラムで操作するための Python ライブラリです。

ワークスペースのプロパティとして、次のようなものを定義できます:

* パネルのレイアウト、色、セクション順序を設定する。
* 既定の x 軸、セクション順序、折りたたみ状態などのワークスペース設定を構成する。
* セクション内にパネルを追加およびカスタマイズして、ワークスペースビューを整理する。
* URL を使って既存のワークスペースを読み込み、変更する。
* 既存のワークスペースへの変更を保存する、または新しいビューとして保存する。
* シンプルな式を使って run をフィルタ、グループ化、ソートする。
* 色や公開範囲などの設定で run の見た目をカスタマイズする。
* あるワークスペースから別のワークスペースへビューをコピーして、インテグレーションや再利用に役立てる。

<div id="install-workspace-api">
  ### Workspace API をインストールする
</div>

`wandb` に加えて、`wandb-workspaces` もインストールしてあることを確認してください。

```bash theme={null}
pip install wandb wandb-workspaces
```

<div id="define-and-save-a-workspace-view-programmatically">
  ### Workspace ビューをプログラムから定義して保存する
</div>

```python theme={null}
import wandb_workspaces.reports.v2 as ws

workspace = ws.Workspace(entity="your-entity", project="your-project", views=[...])
workspace.save()
```

<div id="edit-an-existing-view">
  ### 既存のビューを編集する
</div>

```python theme={null}
existing_workspace = ws.Workspace.from_url("workspace-url")
existing_workspace.views[0] = ws.View(name="my-new-view", sections=[...])
existing_workspace.save()
```

<div id="copy-a-workspace-saved-view-to-another-workspace">
  ### Workspace の `saved view` を別の Workspace にコピーする
</div>

```python theme={null}
old_workspace = ws.Workspace.from_url("old-workspace-url")
old_workspace_view = old_workspace.views[0]
new_workspace = ws.Workspace(entity="new-entity", project="new-project", views=[old_workspace_view])

new_workspace.save()
```

ワークスペース API の包括的なサンプルについては、[`wandb-workspace examples`](https://github.com/wandb/wandb-workspaces/tree/main/examples/workspaces) を参照してください。