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

# レポートを埋め込む

> W&B Reports を直接 Notion に埋め込んだり、HTML の IFrame 要素を使用して埋め込んだりすることができます。

## HTML iframe 要素

Reports の右上にある **Share** ボタンを選択してください。モーダルウィンドウが表示されます。モーダルウィンドウ内で **Copy embed code** を選択します。コピーされたコードは、インラインフレーム（IFrame）HTML 要素内でレンダリングされます。コピーしたコードを、お好みの iframe HTML 要素に貼り付けてください。

<Note>
  埋め込み時に表示可能なのは、 **public** （公開）設定の Reports のみです。
</Note>

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-serverless-sft-revamp/YFBmc2YVhUbeVCGI/images/reports/get_embed_url.gif?s=be47a0272088c139fcc782940c06bbbc" alt="Getting embed code" width="1425" height="721" data-path="images/reports/get_embed_url.gif" />
</Frame>

## Confluence

以下の操作デモは、Confluence の IFrame セル内に Reports へのダイレクトリンクを挿入する方法を示しています。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-serverless-sft-revamp/YFBmc2YVhUbeVCGI/images/reports/embed_iframe_confluence.gif?s=c3ffe6e53b1276d525608b1dd3286576" alt="Embedding in Confluence" width="1425" height="721" data-path="images/reports/embed_iframe_confluence.gif" />
</Frame>

## Notion

以下の操作デモは、Notion の埋め込み（Embed）ブロックと Reports の埋め込み用コードを使用して、Notion ドキュメントにレポートを挿入する方法を示しています。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-serverless-sft-revamp/YFBmc2YVhUbeVCGI/images/reports/embed_iframe_notion.gif?s=2d6a00a76d3e11a0e36f3adb8c7cbf20" alt="Embedding in Notion" width="1425" height="738" data-path="images/reports/embed_iframe_notion.gif" />
</Frame>

## Gradio

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

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


def wandb_report(url):
    # iframe要素を作成
    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()
```

##