> ## Documentation Index
> Fetch the complete documentation index at: https://wb-21fd5541-dependabot-npm-and-yarn-scripts-css-minify-npm.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 で使用する方法について説明します。

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

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

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

<Note>
  埋め込んで表示できるのは、public project の report、または [view-only links](/ja/models/reports/cross-project-reports#view-only-report-links) を使用して共有した report のみです (リンクのアクセストークンは URL の一部です) 。
</Note>

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-dependabot-npm-and-yarn-scripts-css-minify-npm/gptJeQjQfljzunPR/images/reports/get_embed_url.gif?s=176d564ae6e13ab1bf49d148c6735630" alt="埋め込みコードの取得" width="1425" height="721" data-path="images/reports/get_embed_url.gif" />
</Frame>

<h2 id="confluence">
  Confluence
</h2>

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

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-dependabot-npm-and-yarn-scripts-css-minify-npm/gptJeQjQfljzunPR/images/reports/embed_iframe_confluence.gif?s=fb1408faf568fd53724e251fe3a44d91" alt="Confluence への埋め込み" width="1425" height="721" data-path="images/reports/embed_iframe_confluence.gif" />
</Frame>

<h2 id="notion">
  Notion
</h2>

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

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-dependabot-npm-and-yarn-scripts-css-minify-npm/gptJeQjQfljzunPR/images/reports/embed_iframe_notion.gif?s=193ab7f0511359d1a6137191be8799e5" alt="Notion への埋め込み" width="1425" height="738" data-path="images/reports/embed_iframe_notion.gif" />
</Frame>

<h2 id="gradio">
  Gradio
</h2>

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()
```