Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update streamlit iframe to working hf space #1364

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Update streamlit iframe to working hf space #1364

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ea97a12
fix: update iframe to point to working streamlit space
lappemic Aug 7, 2024
fda3d3b
docs: delete outdated comment about embed=true
lappemic Aug 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 10 additions & 14 deletions docs/hub/spaces-sdks-streamlit.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,31 +76,27 @@ This Python script uses a [🤗 Transformers pipeline](https://huggingface.co/do

## Embed Streamlit Spaces on other webpages

You can use the HTML `<iframe>` tag to embed a Streamlit Space as an inline frame on other webpages. Simply include the URL of your Space, ending with the `.hf.space` suffix. To find the URL of your Space, you can use the "Embed this Space" button from the Spaces options.

For example, the demo above can be embedded in these docs with the following tag:
You can use the HTML `<iframe>` tag to embed a Streamlit Space as an inline frame on other webpages. Simply include the URL of your Space, ending with the `.hf.space` suffix. To find the URL of your Space, you can use the "Embed this Space" button from the Spaces options. Then you get the following code snippet which you directly can use in your homepage:

```
<iframe
src="https://NimaBoscarino-hotdog-streamlit.hf.space?embed=true"
title="My awesome Streamlit Space"
src="https://kornia-kornia-augmentations-tester.hf.space"
frameborder="0"
width="850"
height="450"
></iframe>
```

<!-- The height of this iframe has been calculated as 236 + 64 * 2. 236 is the inner content height measured with Chrome 108. 64 is padding-top of its container element. -->
<iframe
src="https://NimaBoscarino-hotdog-streamlit.hf.space?embed=true"
frameborder="0"
height="364"
title="Streamlit app"
class="container p-0 flex-grow space-iframe"
src="https://kornia-kornia-augmentations-tester.hf.space"
frameborder="0"
width="850"
height="450"
class="container p-0 flex-grow space-iframe"
allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"
></iframe>

Please note that we have added `?embed=true` to the URL, which activates the embed mode of the Streamlit app, removing some spacers and the footer for slim embeds.

Comment on lines -101 to -102
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this not relevant anymore? (im not sure)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not when when i updated the hf spaces in kornias docs as e.g. here (it is live): https://github.com/kornia/kornia/pull/2964/files#diff-bec16dbe99a3892599bb805746d7f3e56135fe05df0166f4fc2d86cf9ab22b5e

Also checked here: https://huggingface.co/docs/hub/spaces-embed#embedding-with-iframes where it also does not seem to be necessary.


## Embed Streamlit Spaces with auto-resizing IFrames

Streamlit has supported automatic iframe resizing since [1.17.0](https://docs.streamlit.io/library/changelog#version-1170) so that the size of the parent iframe is automatically adjusted to fit the content volume of the embedded Streamlit application.
Expand Down