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

> W&B レポートを Notion または HTML の iframe 要素に直接埋め込みます。

# レポートを埋め込む

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

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

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

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-run-filter-ui-updates/bpOEJrfC2p5HLQ8Q/images/reports/get_embed_url.gif?s=b6958a880c32498be170b2845ddc21fa" alt="埋め込みコードの取得" width="1425" height="721" data-path="images/reports/get_embed_url.gif" />
</Frame>

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

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

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-run-filter-ui-updates/bpOEJrfC2p5HLQ8Q/images/reports/embed_iframe_confluence.gif?s=d72e511c0b4345da4845c31edaff07d2" alt="Confluence への埋め込み" width="1425" height="721" data-path="images/reports/embed_iframe_confluence.gif" />
</Frame>

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

次のアニメーションは、Notion の埋め込みブロックとレポートの埋め込みコードを使って、Notion ドキュメントにレポートを埋め込む方法を示しています。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-run-filter-ui-updates/bpOEJrfC2p5HLQ8Q/images/reports/embed_iframe_notion.gif?s=2a7b541d2aa4b28c89e70394142c5d00" alt="Notion への埋め込み" width="1425" height="738" data-path="images/reports/embed_iframe_notion.gif" />
</Frame>

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

`gr.HTML` 要素を使用すると、W\&B Reports を Gradio Apps に埋め込み、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()
```

##