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

# レポートを埋め込む

> W&B レポートを直接 Notion に埋め込むか、HTML IFrame 要素を使用します。

## HTML iframe 要素

レポート内の右上にある **Share** ボタンを選択します。モーダルウィンドウが表示されます。このモーダルウィンドウ内で **Copy embed code** を選択します。コピーされたコードは、インラインフレーム (IFrame) HTML 要素内でレンダリングされます。コピーしたコードを任意の iframe HTML 要素に貼り付けます。

<Note>
  埋め込まれた場合、**公開** レポートのみが表示可能です。
</Note>

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-feat-cli-docs-generator/q3q0K5OxPbztyeVG/images/reports/get_embed_url.gif?s=66ec6481dc3396cb372fed6a8e43812e" width="1425" height="721" data-path="images/reports/get_embed_url.gif" />
</Frame>

## Confluence

次のアニメーションは、Confluence の IFrame セル内でレポートへの直接リンクを挿入する方法を示しています。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-feat-cli-docs-generator/q3q0K5OxPbztyeVG/images/reports/embed_iframe_confluence.gif?s=b1001fd267c010c7129d146da37ffbfc" width="1425" height="721" data-path="images/reports/embed_iframe_confluence.gif" />
</Frame>

## Notion

次のアニメーションは、Notion ドキュメント内で Embed ブロックを使ってレポートを挿入し、そのレポートの埋め込みコードを使用する方法を示しています。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-feat-cli-docs-generator/q3q0K5OxPbztyeVG/images/reports/embed_iframe_notion.gif?s=ea4008db82345aacd05d522c7491302e" width="1425" height="738" data-path="images/reports/embed_iframe_notion.gif" />
</Frame>

## Gradio

`gr.HTML` 要素を使用して、Gradio Apps 内で W\&B Reports を埋め込み、Hugging Face Spaces で利用することができます。

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

##