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

> W&B report を Notion または HTML の `iframe` 要素に直接埋め込みます。

# report を埋め込む

W\&B report を外部のページやツールに埋め込むと、チームは他のドキュメントと並べて最新の実験結果を確認できます。このページでは、report から埋め込みコードを生成し、それを HTML、Confluence、Notion、または Gradio で使用する方法について説明します。

<div id="html-iframe-element">
  ## HTML `iframe` 要素
</div>

HTML `iframe` 要素を使用すると、カスタム HTML を使用できる任意の Web ページに report を埋め込めます。W\&B には、report から直接コピーできる埋め込みコードがあらかじめ用意されています。

report の右上で **Share** ボタンを選択してダイアログを開き、**Copy embed code** を選択します。コピーされたスニペットは `iframe` HTML 要素で、カスタム HTML を使用できる任意のページに貼り付けることができます。

<Note>
  埋め込み時に表示できるのは *public* report のみです。
</Note>

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-sdk-testing-latest/H06KgVKW2CsyczDM/images/reports/get_embed_url.gif?s=27d4ca8eab089081c2d802d8e48e48f8" alt="埋め込みコードの取得" width="1425" height="721" data-path="images/reports/get_embed_url.gif" />
</Frame>

<div id="confluence">
  ## Confluence
</div>

Confluence は、組み込みの `iframe` マクロによる report の埋め込みをサポートしています。以下のアニメーションは、Confluence の `iframe` セルに report への直接リンクを挿入する方法を示しています。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-sdk-testing-latest/H06KgVKW2CsyczDM/images/reports/embed_iframe_confluence.gif?s=bf6a5c6e20c32fe62f9672a24006974d" alt="Confluence への埋め込み" width="1425" height="721" data-path="images/reports/embed_iframe_confluence.gif" />
</Frame>

<div id="notion">
  ## Notion
</div>

Notion の **Embed** ブロックでは、W\&B が提供するものと同じ埋め込みコードを使用できます。次のアニメーションは、Notion の **Embed** ブロックと report の埋め込みコードを使って、Notion ドキュメントに report を埋め込む方法を示しています。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-sdk-testing-latest/H06KgVKW2CsyczDM/images/reports/embed_iframe_notion.gif?s=a6c57bb9180b44d8c54d8564235b82ec" alt="Notion への埋め込み" width="1425" height="738" data-path="images/reports/embed_iframe_notion.gif" />
</Frame>

<div id="gradio">
  ## Gradio
</div>

Hugging Face Spaces で hosted されているアプリを含む Gradio アプリに W\&B report を埋め込むには、Gradio の `gr.HTML` 要素を使用して、report URL を指す `iframe` をレンダリングします。

```python theme={null}
import gradio as gr


def wandb_report(url):
    iframe = f'<iframe src={url} style="border:none;height:1024px;width:100%">'
    return gr.HTML(iframe)


with gr.Blocks() as demo:
    report = wandb_report(
        "https://wandb.ai/_scott/pytorch-sweeps-demo/reports/loss-22-10-07-16-00-17---VmlldzoyNzU2NzAx"
    )
demo.launch()
```