diff --git a/CHANGELOG.md b/CHANGELOG.md index aa98e2b054..4ccb2344da 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,7 @@ No changes to highlight. No changes to highlight. ## Documentation Changes: -No changes to highlight. +* Changes to W&B guide by [@scottire](https://github.com/scottire) in [PR 3153](https://github.com/gradio-app/gradio/pull/3153) ## Testing and Infrastructure Changes: No changes to highlight. diff --git a/guides/04_integrating-other-frameworks/Gradio-and-Wandb-Integration.md b/guides/04_integrating-other-frameworks/Gradio-and-Wandb-Integration.md index e90b311ca2..c7acdd6bc9 100644 --- a/guides/04_integrating-other-frameworks/Gradio-and-Wandb-Integration.md +++ b/guides/04_integrating-other-frameworks/Gradio-and-Wandb-Integration.md @@ -255,6 +255,29 @@ Let's get started! <gradio-app space="akhaliq/JoJoGAN"> <gradio-app> ``` + +7. (Optional) Embed W&B plots in your Gradio App + + It's also possible to embed W&B plots within Gradio apps. To do so, you can create a W&B Report of your plots and + embed them within your Gradio app within a `gr.HTML` block. + + The Report will need to be public and you will need to wrap the URL within an iFrame like this: + ```python + + 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_url = 'https://wandb.ai/_scott/pytorch-sweeps-demo/reports/loss-22-10-07-16-00-17---VmlldzoyNzU2NzAx' + report = wandb_report(report_url) + + demo.launch(share=True) + ``` + + ## Conclusion We hope you enjoyed this brief demo of embedding a Gradio demo to a W&B report! Thanks for making it to the end. To recap: