> ## Documentation Index
> Fetch the complete documentation index at: https://wb-21fd5541-dbrian-docs-serverless-training-quickstart.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> App UI を使用してインタラクティブに、または W&B SDK を使用してプログラムで report を編集します。

# report を編集する

<Note>
  W\&B Report and Workspace API は Public Preview です。
</Note>

このページでは、App UI を使用してインタラクティブに、または W\&B SDK を使用してプログラムで report を編集する方法を説明します。プロット、run set、コードブロック、Markdown、HTML 要素、リッチメディアの追加を扱います。また、run set のフィルタリングやグループ化、report レイアウトの整理、多次元の関係の可視化についても取り上げます。

report の本文は *ブロック* で構成されています。ブロックには、テキスト、画像、埋め込みビジュアライゼーション、Experiments と Runs のプロット、パネルグリッドを含めることができます。

*パネルグリッド* は、パネルと *run set* を保持する特定の種類のブロックです。run set は、W\&B の project にログされた Runs のコレクションです。パネルは、run set データを可視化したものです。

<Note>
  カスタマイズした保存済み Workspace ビューを作成するエンドツーエンドのチュートリアルについては、[Programmatic workspaces notebook](https://colab.research.google.com/github/wandb/wandb-workspaces/blob/Update-wandb-workspaces-tuturial/Workspace_tutorial.ipynb) を実行してください。
</Note>

<Note>
  プログラムで report を編集するには、W\&B Python SDK に加えて、W\&B Report and Workspace API (`wandb-workspaces`) をインストールしておく必要があります。

  ```bash theme={null}
  pip install wandb wandb-workspaces
  ```
</Note>

<div id="add-plots">
  ## プロットを追加
</div>

プロットを使用すると、レポート内で run のデータを可視化できます。各パネルグリッドには、一連の run set と一連のパネルがあります。パネルグリッド内の run set は、グリッド内の各パネルに表示されるデータを制御します。別の run set からデータを取得するグラフを追加したい場合は、新しいパネルグリッドを作成します。

<Tabs>
  <Tab title="App UI">
    レポート内でスラッシュ (`/`) を入力すると、ドロップダウンメニューが表示されます。**Add panel** を選択してパネルを追加します。折れ線グラフ、散布図、平行座標プロットなど、W\&B でサポートされている任意のパネルを追加できます。

    <Frame>
      <img src="https://mintcdn.com/wb-21fd5541-dbrian-docs-serverless-training-quickstart/eln_TwBvpkoezKWI/images/reports/demo_report_add_panel_grid.gif?s=aedac66752b5de5b1f7b19e81e5fde2e" alt="レポートにグラフを追加" width="1652" height="1498" data-path="images/reports/demo_report_add_panel_grid.gif" />
    </Frame>
  </Tab>

  <Tab title="Report and Workspace API">
    SDK を使用すると、プログラムからレポートにプロットを追加できます。1 つ以上のプロットまたはグラフオブジェクトのリストを、`PanelGrid` Public API Class の `panels` パラメーターに渡します。プロットまたはグラフオブジェクトは、対応する Python Class を使って作成します。

    以下の例は、折れ線グラフと散布図を作成する方法を示しています。

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

    report = wr.Report(
        project="report-editing",
        title="Report title",
        description="Report description.",
    )

    blocks = [
        wr.PanelGrid(
            panels=[
                wr.LinePlot(x="time", y="velocity"),
                wr.ScatterPlot(x="time", y="acceleration"),
            ]
        )
    ]

    report.blocks = blocks
    report.save()
    ```

    プログラムからレポートに追加できるプロットやグラフの詳細については、`wr.panels` を参照してください。
  </Tab>
</Tabs>

<div id="add-run-sets">
  ## run set を追加する
</div>

App UI または W\&B SDK を使用して、プロジェクトからインタラクティブに run set を追加します。

<Tabs>
  <Tab title="App UI">
    レポートでスラッシュ (`/`) を入力すると、ドロップダウンメニューが表示されます。ドロップダウンから **パネルグリッド** を選択します。W\&B は、レポートの作成元のプロジェクトから run set を自動的に import します。

    パネルをレポートに import すると、レポートはプロジェクトから run 名を引き継ぎます。レポートでは、必要に応じて [run の名前を変更](/ja/models/runs/#rename-a-run) し、閲覧者により多くのコンテキストを提供できます。名前の変更が適用されるのは、その個別のパネルだけです。同じレポート内でそのパネルを複製した場合、複製先のパネルにも新しい名前が反映されます。

    1. レポートで鉛筆アイコンをクリックして、レポートエディタを開きます。

    2. run set で、名前を変更する run を検索します。run 名にカーソルを合わせて **action (<Icon icon="ellipsis-vertical" iconType="solid" />)** メニューをクリックします。次のいずれかを選択し、フォームを送信します。

       * **プロジェクトの run 名を変更**: プロジェクト全体で run 名を変更します。新しいランダム名を生成するには、このフィールドを空欄のままにします。
       * **パネルグリッド の run 名を変更**: run 名をレポート内でのみ変更し、他のコンテキストでは既存の名前を保持します。このオプションでは、新しいランダム名を生成できません。

    3. **レポートを公開** をクリックします。
  </Tab>

  <Tab title="Report and Workspace API">
    `wr.Runset()` および `wr.PanelGrid` クラスを使用して、プロジェクトから run set を追加します。run set を追加するには、次の step に従ってください。

    1. `wr.Runset()` オブジェクトのインスタンスを作成します。project パラメーターには run set を含むプロジェクトの名を指定し、entity パラメーターにはそのプロジェクトを所有する entity を指定します。
    2. `wr.PanelGrid()` オブジェクトのインスタンスを作成します。1 つ以上の run set オブジェクトの list を `runsets` パラメーターに渡します。
    3. 1 つ以上の `wr.PanelGrid()` オブジェクトのインスタンスを list に格納します。
    4. レポートインスタンスの blocks 属性を、パネルグリッド インスタンスの list で更新します。

    次の例では、`[PROJECT-NAME]` をご自身のプロジェクト名に、`[ENTITY-NAME]` をご自身の W\&B entity 名に置き換えてください。

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

    report = wr.Report(
        project="report-editing",
        title="Report title",
        description="Report description.",
    )

    panel_grids = wr.PanelGrid(
        runsets=[wr.RunSet(project="[PROJECT-NAME]", entity="[ENTITY-NAME]")]
    )

    report.blocks = [panel_grids]
    report.save()
    ```

    必要に応じて、SDK への 1 回の call で runset とパネルを追加することもできます。

    ```python theme={null}
    import wandb

    report = wr.Report(
        project="report-editing",
        title="Report title",
        description="Report description.",
    )

    panel_grids = wr.PanelGrid(
        panels=[
            wr.LinePlot(
                title="line title",
                x="x",
                y=["y"],
                range_x=[0, 100],
                range_y=[0, 100],
                log_x=True,
                log_y=True,
                title_x="x axis title",
                title_y="y axis title",
                ignore_outliers=True,
                groupby="hyperparam1",
                groupby_aggfunc="mean",
                groupby_rangefunc="minmax",
                smoothing_factor=0.5,
                smoothing_type="gaussian",
                smoothing_show_original=True,
                max_runs_to_show=10,
                plot_type="stacked-area",
                font_size="large",
                legend_position="west",
            ),
            wr.ScatterPlot(
                title="scatter title",
                x="y",
                y="y",
                # z='x',
                range_x=[0, 0.0005],
                range_y=[0, 0.0005],
                # range_z=[0,1],
                log_x=False,
                log_y=False,
                # log_z=True,
                running_ymin=True,
                running_ymean=True,
                running_ymax=True,
                font_size="small",
                regression=True,
            ),
        ],
        runsets=[wr.RunSet(project="[PROJECT-NAME]", entity="[ENTITY-NAME]")],
    )


    report.blocks = [panel_grids]
    report.save()
    ```
  </Tab>
</Tabs>

<div id="freeze-a-run-set">
  ## run set を固定する
</div>

レポートでは、プロジェクトの最新データが表示されるよう、run set が自動的に更新されます。後から追加された run によってレポートの表示内容が変わらないよう、特定の時点におけるレポート内の run set の状態を保持するには、run set を固定します。

レポートの表示中に run set を固定するには、パネルグリッド内の **Filter** ボタンの近くにある雪の結晶アイコンをクリックします。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-dbrian-docs-serverless-training-quickstart/eln_TwBvpkoezKWI/images/reports/freeze_runset.png?fit=max&auto=format&n=eln_TwBvpkoezKWI&q=85&s=e97666a9cbd38a3b2dde94f3acd72336" alt="run set を固定するボタン" width="1799" height="552" data-path="images/reports/freeze_runset.png" />
</Frame>

<div id="group-a-run-set-programmatically">
  ## プログラムで run set をグループ化する
</div>

[Workspace and Reports API](/ja/models/ref/wandb_workspaces/reports) を使用して、run set 内の runs をプログラムでグループ化できます。グループ化により、関連する runs がパネル内でまとめて整理されるため、設定と結果を比較しやすくなります。

run set 内の runs は、設定値、run メタデータ、または サマリー メトリクスでグループ化できます。次の表は、利用可能なグループ化 method と、各 method で利用可能なキーを示しています。

| グループ化 method | 説明                        | 利用可能なキー                                     |
| ------------ | ------------------------- | ------------------------------------------- |
| 設定値          | 設定値で runs をグループ化する        | `wandb.init(config=)` の config パラメーターで指定した値 |
| Run メタデータ    | run メタデータで runs をグループ化する  | `State`, `Name`, `JobType`                  |
| サマリー メトリクス   | サマリー メトリクスで runs をグループ化する | `wandb.Run.log()` で run にログした値              |

<div id="group-runs-by-config-values">
  ### 設定値で run をグループ化する
</div>

類似した設定の run を比較するには、設定値で run をグループ化します。設定値は、run の設定 `(wandb.init(config=))` で指定するパラメーターです。設定値で run をグループ化するには、`config.[KEY]` 構文を使用します。ここで、`[KEY]` はグループ化に使う設定値の名です。

たとえば、次のコードスニペットでは、まず `group` の設定値を指定して run を初期化し、その後 `group` 設定値に基づいて report 内の run をグループ化します。`[ENTITY]` と `[PROJECT]` の値は、ご使用の W\&B entity 名およびプロジェクト名に置き換えてください。

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

entity = "[ENTITY]"
project = "[PROJECT]"

for group in ["control", "experiment_a", "experiment_b"]:
    for i in range(3):
        with wandb.init(entity=entity, project=project, group=group, config={"group": group, "run": i}, name=f"{group}_run_{i}") as run:
            # トレーニングをシミュレーションする
            for step in range(100):
                run.log({
                    "acc": 0.5 + (step / 100) * 0.3 + (i * 0.05),
                    "loss": 1.0 - (step / 100) * 0.5
                })
```

その後、Pythonスクリプトまたはノートブック内で、`config.group` の値で run をグループ化できます。

```python theme={null}
runset = wr.Runset(
  project=project,
  entity=entity,
  groupby=["config.group"]  # "group" 設定値でグループ化
)
```

前の例に続き、グループ化した run set を使ってレポートを作成できます。

```python theme={null}
report = wr.Report(
  entity=entity,
  project=project,
  title="Grouped Runs Example",
)

report.blocks = [
  wr.PanelGrid(
      runsets=[runset],
          )
      ]

report.save()
```

<div id="group-runs-by-run-metadata">
  ### run のメタデータで run をグループ化する
</div>

run は、ログされた値ではなく、run に固有のプロパティに基づいて整理するために、メタデータでグループ化できます。run は、run の名 (`Name`)、状態 (`State`)、またはジョブタイプ (`JobType`) でグループ化できます。

前の例に続いて、以下のコードを使うと、名で run をグループ化できます:

```python theme={null}
runset = wr.Runset(
  project=project,
  entity=entity,
  groupby=["Name"]  # run 名ごとにグループ化
)
```

<Note>
  run の名前は、`wandb.init(name=)` パラメーターで指定した名前です。名前を指定しない場合、W\&B が run にランダムな名前を生成します。

  run の名前は、W\&B App の run の **Overview** ページ、または `Api.runs().run.name` を使ってプログラムから確認できます。
</Note>

<div id="group-runs-by-summary-metrics">
  ### サマリー メトリクスで run をグループ化する
</div>

以下の例では、サマリー メトリクスで run をグループ化する方法を示します。サマリー メトリクスとは、`wandb.Run.log()` を使って run にログする値です。run をログした後、サマリー メトリクスの名は、W\&B App の run の **Overview** ページにある **Summary** セクションで確認できます。

サマリー メトリクスで run をグループ化する構文は `summary.[KEY]` です。ここで `[KEY]` は、グループ化に使用するサマリー メトリクスの名です。

たとえば、`acc` というサマリー メトリクスをログするとします。\[ENTITY] と \[PROJECT] は、ご使用の W\&B entity 名および project 名に置き換えてください:

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

entity = "[ENTITY]"
project = "[PROJECT]"

for group in ["control", "experiment_a", "experiment_b"]:
    for i in range(3):
        with wandb.init(entity=entity, project=project, group=group, config={"group": group, "run": i}, name=f"{group}_run_{i}") as run:
            # トレーニングをシミュレート
            for step in range(100):
                run.log({
                    "acc": 0.5 + (step / 100) * 0.3 + (i * 0.05),
                    "loss": 1.0 - (step / 100) * 0.5
                })

```

次に、`summary.acc` のサマリー メトリクスで run をグループ化できます:

```python theme={null}
runset = wr.Runset(
  project=project,
  entity=entity,
  groupby=["summary.acc"]  # サマリー値でグループ化
)
```

<div id="filter-a-run-set-programmatically">
  ## run set をプログラムでフィルタリングする
</div>

[Workspace and Reports API](/ja/models/ref/wandb_workspaces/reports) を使用すると、run set をプログラムでフィルタリングして report に追加できます。フィルタリングを行うと、設定値、メトリクス、tags、または run のプロパティに基づいて、表示したい特定の Runs のみに run set を絞り込めます。

フィルター式の一般的な構文は次のとおりです。

```text theme={null}
Filter('[KEY]') operation [VALUE]
```

この式では、`[KEY]` はフィルター名、`operation` は比較演算子 (たとえば `>`, `<`, `==`, `in`, `not in`, `or`, `and`) で、`[VALUE]` は比較対象の値です。`Filter` は、適用するフィルターのタイプを表すプレースホルダーです。次の表は、使用可能なフィルターとその説明を示しています。

| Filter                   | Description      | Available keys                                 |
| ------------------------ | ---------------- | ---------------------------------------------- |
| `Config('[KEY]')`        | 設定値でフィルター        | `wandb.init(config=)` の `config` パラメーターで指定した値。 |
| `SummaryMetric('[KEY]')` | サマリー メトリクスでフィルター | `wandb.Run.log()` を使用して run にログした値。            |
| `Tags('[KEY]')`          | タグでフィルター         | run に追加したタグの値 (プログラムから、または W\&B App で追加) 。     |
| `Metric('[KEY]')`        | run のプロパティでフィルター | `tags`, `state`, `displayName`, `jobType`      |

フィルターを定義したら、report を作成し、フィルターされた run set を `wr.PanelGrid(runsets=)` に渡せます。report に異なる要素をプログラムで追加する方法の詳細については、このページ内の **Report and Workspace API** タブを参照してください。

以下の例では、report 内で run set をフィルターする方法を示します。角かっこで囲まれた値 (たとえば `[ENTITY]` や `[PROJECT]`) は、ご自身の値に置き換えてください。

<div id="config-filters">
  ### 設定フィルター
</div>

1 つ以上の設定値を使って run set をフィルターします。設定値は、run の設定 (`wandb.init(config=)`) で指定するパラメーターです。

たとえば、次のコード例では、まず `learning_rate` と `batch_size` の設定値を指定して run を初期化し、その後 `learning_rate` の設定値に基づいてレポート内の run をフィルターします。

```python theme={null}
import wandb

config = {
    "learning_rate": 0.01,
    "batch_size": 32,
}

with wandb.init(project="[PROJECT]", entity="[ENTITY]", config=config) as run:
    # トレーニングコードをここに記述
    pass
```

Python script または notebook 内で、学習率が `0.01` を超える run をプログラムからフィルターできます。

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

runset = wr.Runset(
  entity="[ENTITY]",
  project="[PROJECT]",
  filters="Config('learning_rate') > 0.01"
)
```

`and` 演算子を使用して、複数の設定値で絞り込むこともできます：

```python theme={null}
runset = wr.Runset(
  entity="[ENTITY]",
  project="[PROJECT]",
  filters="Config('learning_rate') > 0.01 and Config('batch_size') == 32"
)
```

前の例に引き続き、フィルタリングしたrun setを使用して、次のようにレポートを作成できます。

```python theme={null}
report = wr.Report(
  entity="[ENTITY]",
  project="[PROJECT]",
  title="My Report"
)

report.blocks = [
  wr.PanelGrid(
      runsets=[runset],
      panels=[
          wr.LinePlot(
              x="Step",
              y=["accuracy"],
          )
      ]
  )
]

report.save()
```

<div id="metric-filters">
  ### メトリクスフィルター
</div>

run setを、run のタグ (`tags`)、run の状態 (`state`)、run 名 (`displayName`)、またはジョブ タイプ (`jobType`) に基づいてフィルターします。

<Note>
  `Metric` フィルターでは、ほかのフィルターとは異なる構文を使用します。値はリストとして渡す必要があります。

  ```text theme={null}
  Metric('[KEY]') operation [VALUE]
  ```
</Note>

たとえば、次の Python スニペットでは 3 つの run を作成し、それぞれに名前を付けます。

```python theme={null}
import wandb

with wandb.init(project="[PROJECT]", entity="[ENTITY]") as run:
    for i in range(3):
        run.name = f"run{i+1}"
        # トレーニングコードをここに記述
        pass
```

レポートの作成時に、表示名で run をフィルタリングできます。たとえば、表示名が `run1`、`run2`、`run3` の run をフィルタリングするには、次のコードを使用できます。

```python theme={null}
runset = wr.Runset(
  entity="[ENTITY]",
  project="[PROJECT]",
  filters="Metric('displayName') in ['run1', 'run2', 'run3']"
)
```

<Note>
  run の名前は、W\&B App の run の **Overview** ページ、または `Api.runs().run.name` を使ってプログラムから取得できます。
</Note>

次の例では、run の状態 (`finished`、`crashed`、または `running`) で run set をフィルターする方法を示します：

```python theme={null}
runset = wr.Runset(
  entity="[ENTITY]",
  project="[PROJECT]",
  filters="Metric('state') in ['finished']"
)
```

```python theme={null}
runset = wr.Runset(
  entity="[ENTITY]",
  project="[PROJECT]",
  filters="Metric('state') not in ['crashed']"
)
```

<div id="summarymetric-filters">
  ### SummaryMetric フィルター
</div>

サマリー メトリクスで run set をフィルターすると、accuracy や loss の値など、特定の結果のしきい値を満たす run に絞り込めます。サマリー メトリクスは、`wandb.Run.log()` を使って run にログする値です。run をログした後、サマリー メトリクスの名は、W\&B App の run の **Overview** ページにある **Summary** セクションで確認できます。

```python theme={null}
runset = wr.Runset(
  entity="[ENTITY]",
  project="[PROJECT]",
  filters="SummaryMetric('accuracy') > 0.9"
)
```

```python theme={null}
runset = wr.Runset(
  entity="[ENTITY]",
  project="[PROJECT]",
  filters="Metric('state') in ['finished'] and SummaryMetric('train/train_loss') < 0.5"
)
```

<div id="tags-filters">
  ### タグフィルター
</div>

タグで run set をフィルタリングすると、特定のタグを付けた runs のみを表示できます。タグは、run に追加する値です (プログラムから、または W\&B App を使って追加できます) 。

```python theme={null}
runset = wr.Runset(
  entity="[ENTITY]",
  project="[PROJECT]",
  filters="Tags('training') == 'training'"
)
```

<div id="add-code-blocks">
  ## コードブロックを追加する
</div>

設定、例、スニペットを結果とあわせて共有するために、コードブロックを追加できます。App UI でインタラクティブに追加することも、W\&B SDK を使用してプログラムから追加することもできます。

<Tabs>
  <Tab title="App UI">
    レポート内でスラッシュ (`/`) を入力すると、ドロップダウンメニューが表示されます。ドロップダウンから **Code** を選択します。

    コードブロックの右側にあるプログラミング言語名を選択すると、ドロップダウンが展開されます。ドロップダウンから使用するプログラミング言語の構文を選択します。JavaScript、Python、CSS、JSON、HTML、Markdown、YAML から選択できます。
  </Tab>

  <Tab title="Report and Workspace API">
    `wr.CodeBlock` クラスを使用して、プログラムからコードブロックを作成します。表示したい言語名とコードを、それぞれ language パラメーターと code パラメーターに指定します。

    次の例は YAML ファイル内のリストを示しています。

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

    report = wr.Report(project="report-editing")

    report.blocks = [
        wr.CodeBlock(
            code=["this:", "- is", "- a", "cool:", "- yaml", "- file"], language="yaml"
        )
    ]

    report.save()
    ```

    これにより、次のようなコードブロックが表示されます。

    ```yaml theme={null}
    this:
    - is
    - a
    cool:
    - yaml
    - file
    ```

    次の例は Python のコードブロックを示しています。

    ```python theme={null}
    report = wr.Report(project="report-editing")


    report.blocks = [wr.CodeBlock(code=["Hello, World!"], language="python")]

    report.save()
    ```

    これにより、次のようなコードブロックが表示されます。

    ```md theme={null}
    Hello, World!
    ```
  </Tab>
</Tabs>

<div id="add-markdown">
  ## Markdown を追加する
</div>

Markdown を追加すると、レポート内の説明文、見出し、インライン強調を整形できます。App UI または W\&B SDK を使用して、インタラクティブまたはプログラムから Markdown を追加できます。

<Tabs>
  <Tab title="App UI">
    レポート内でスラッシュ (`/`) を入力すると、ドロップダウンメニューが表示されます。ドロップダウンから **Markdown** を選択します。
  </Tab>

  <Tab title="Report and Workspace API">
    `wr.MarkdownBlock` クラスを使用して、プログラムから Markdown ブロックを作成します。`text` パラメーターに文字列を渡します。

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

    report = wr.Report(project="report-editing")

    report.blocks = [
        wr.MarkdownBlock(text="Markdown cell with *italics* and **bold** and $e=mc^2$")
    ]
    ```

    これにより、次のような Markdown ブロックが表示されます。

    <Frame>
      <img src="https://mintcdn.com/wb-21fd5541-dbrian-docs-serverless-training-quickstart/eln_TwBvpkoezKWI/images/reports/markdown.png?fit=max&auto=format&n=eln_TwBvpkoezKWI&q=85&s=4e85eb55571e29bb1479cacf6f644ce8" alt="表示された Markdown ブロック" width="1000" height="178" data-path="images/reports/markdown.png" />
    </Frame>
  </Tab>
</Tabs>

<div id="add-html-elements">
  ## HTML 要素を追加する
</div>

見出しやリストなどの HTML 要素を追加して、レポートを構造化します。これらは App UI を使用してインタラクティブに追加することも、W\&B SDK を使用してプログラムで追加することもできます。

<Tabs>
  <Tab title="App UI">
    レポート内でスラッシュ (`/`) を入力すると、ドロップダウンメニューが表示されます。ドロップダウンからテキストブロックのタイプを選択します。たとえば、H2 の見出しブロックを作成するには、`Heading 2` オプションを選択します。
  </Tab>

  <Tab title="Report and Workspace API">
    1 つ以上の HTML 要素を含むリストを、report の `blocks` 属性に渡します。次の例は、H1、H2、および順序なしリストを作成する方法を示しています。

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

    report = wr.Report(project="report-editing")

    report.blocks = [
        wr.H1(text="How Programmatic Reports work"),
        wr.H2(text="Heading 2"),
        wr.UnorderedList(items=["Bullet 1", "Bullet 2"]),
    ]

    report.save()
    ```

    これにより、HTML 要素が次のように表示されます。

    <Frame>
      <img src="https://mintcdn.com/wb-21fd5541-dbrian-docs-serverless-training-quickstart/eln_TwBvpkoezKWI/images/reports/render_html.png?fit=max&auto=format&n=eln_TwBvpkoezKWI&q=85&s=f8bccd55c245a371892250d27ceb9f43" alt="表示された HTML 要素" width="1410" height="426" data-path="images/reports/render_html.png" />
    </Frame>
  </Tab>
</Tabs>

<div id="embed-rich-media-links">
  ## リッチメディアのリンクを埋め込む
</div>

Tweet、動画、オーディオなどのリッチメディアを埋め込んで、外部のコンテキストを追加し、レポートをより充実させることができます。App UI または W\&B SDK を使用して、レポート内にリッチメディアを埋め込みます。

<Tabs>
  <Tab title="App UI">
    URL を Reports にコピー＆ペーストして、レポート内にリッチメディアを埋め込みます。以下のアニメーションは、Twitter、YouTube、SoundCloud から URL をコピー＆ペーストする方法を示しています。

    ### Twitter

    Tweet のリンク URL をレポートにコピー＆ペーストすると、その Tweet をレポート内に表示できます。

    <Frame>
      <img src="https://mintcdn.com/wb-21fd5541-dbrian-docs-serverless-training-quickstart/eln_TwBvpkoezKWI/images/reports/twitter.gif?s=93ff0e9f2a599177eb832bad1fb3580f" alt="Twitter コンテンツの埋め込み" width="810" height="760" data-path="images/reports/twitter.gif" />
    </Frame>

    ### YouTube

    YouTube の動画 URL リンクをコピー＆ペーストして、レポートに動画を埋め込みます。

    <Frame>
      <img src="https://mintcdn.com/wb-21fd5541-dbrian-docs-serverless-training-quickstart/eln_TwBvpkoezKWI/images/reports/youtube.gif?s=1ab4d892873aef5704a0638787db5cfa" alt="YouTube 動画の埋め込み" width="1434" height="780" data-path="images/reports/youtube.gif" />
    </Frame>

    ### SoundCloud

    SoundCloud のリンクをコピー＆ペーストして、オーディオファイルをレポートに埋め込みます。

    <Frame>
      <img src="https://mintcdn.com/wb-21fd5541-dbrian-docs-serverless-training-quickstart/eln_TwBvpkoezKWI/images/reports/soundcloud.gif?s=3b151fbe69a378deae4b3152b00d0e99" alt="SoundCloud オーディオの埋め込み" width="1018" height="684" data-path="images/reports/soundcloud.gif" />
    </Frame>
  </Tab>

  <Tab title="Report and Workspace API">
    1 つ以上の埋め込みメディア オブジェクトのリストを report の `blocks` 属性に渡します。次の例は、動画と Twitter メディアをレポートに埋め込む方法を示しています。

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

    report = wr.Report(project="report-editing")

    report.blocks = [
        wr.Video(url="https://www.youtube.com/embed/6riDJMI-Y8U"),
        wr.Twitter(
            embed_html='<blockquote class="twitter-tweet"><p lang="en" dir="ltr">The voice of an angel, truly. <a href="https://twitter.com/hashtag/MassEffect?src=hash&amp;ref_src=twsrc%5Etfw">#MassEffect</a> <a href="https://t.co/nMev97Uw7F">pic.twitter.com/nMev97Uw7F</a></p>&mdash; Mass Effect (@masseffect) <a href="https://twitter.com/masseffect/status/1428748886655569924?ref_src=twsrc%5Etfw">August 20, 2021</a></blockquote>\n'
        ),
    ]
    report.save()
    ```
  </Tab>
</Tabs>

<div id="duplicate-panel-grids">
  ## パネルグリッドを複製する
</div>

同じReportsまたは別のReportsでLayoutを再利用するには、パネルグリッドを複製します。パネルグリッドを選択してコピー＆ペーストすることで、同じReports内で複製したり、別のReportsに貼り付けたりできます。

右上のドラッグハンドルを選択すると、パネルグリッドのセクション全体を選択できます。クリックしてドラッグすると、パネルグリッド、テキスト、見出しなど、Reports内の領域を選択できます。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-dbrian-docs-serverless-training-quickstart/eln_TwBvpkoezKWI/images/reports/demo_copy_and_paste_a_panel_grid_section.gif?s=c519b16abb87019ed6dc86eba4c9e972" alt="パネルグリッドをコピーする" width="1684" height="1226" data-path="images/reports/demo_copy_and_paste_a_panel_grid_section.gif" />
</Frame>

<div id="delete-panel-grids">
  ## パネルグリッドを削除する
</div>

report内でレイアウトや内容が不要になった場合は、パネルグリッドを削除します。パネルグリッドを選択し、キーボードの`delete`キーを押すと、パネルグリッドを削除できます。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-dbrian-docs-serverless-training-quickstart/eln_TwBvpkoezKWI/images/reports/delete_panel_grid.gif?s=db688e014806371b1825d0e103904aba" alt="パネルグリッドを削除する" width="1425" height="670" data-path="images/reports/delete_panel_grid.gif" />
</Frame>

<div id="collapse-headers-to-organize-reports">
  ## ヘッダーを折りたたんでレポートを整理する
</div>

レポートでは、ヘッダーを折りたたむことでテキストブロック内のコンテンツを非表示にできます。レポートの読み込み時には、展開されているヘッダーのコンテンツのみが表示されます。レポート内でヘッダーを折りたたむと、コンテンツを整理しやすくなり、必要以上のデータを読み込まずに済みます。次のアニメーションは、この手順を示しています。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-dbrian-docs-serverless-training-quickstart/eln_TwBvpkoezKWI/images/reports/collapse_headers.gif?s=6b6769cac1d4c2b398d00579e1555725" alt="レポート内でヘッダーを折りたたむ" width="1425" height="670" data-path="images/reports/collapse_headers.gif" />
</Frame>

<div id="visualize-relationships-across-multiple-dimensions">
  ## 複数の次元間の関係を可視化する
</div>

1 つのチャートで 3 つ以上の変数間の関係を明らかにしたい場合、標準的な 2D plot では限界があります。2D plot で表示できる以上の変数を比較するには、追加の次元として色のグラデーションを使用できます。これにより視認性が高まり、パターンをより簡単に読み取れるようになります。

1. 色のグラデーションで表す変数を1つ選択します (例: penalty scores、learning rates など) 。これにより、トレーニング時間 (x-axis) に沿って、penalty (色) が reward または side effects (y-axis) とどのように関係するかを、より明確に把握できます。
2. 主要な傾向を強調表示します。特定の run グループにカーソルを合わせると、可視化内でそのグループが強調表示されます。