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

Split the section about embed=true parameter of embedded Streamlit apps #709

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

Split the section about embed=true parameter of embedded Streamlit apps #709

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0febb6d
Split the section about embed=true parameter of embedded Streamlit apps
whitphx Mar 14, 2023
44a1ba5
Update
whitphx Dec 6, 2023
c5ea317
Update docs/hub/spaces-sdks-streamlit.md
whitphx Dec 6, 2023
5f5ebea
Update docs/hub/spaces-sdks-streamlit.md
whitphx Dec 6, 2023
34b05ca
Merge branch 'main' into streamlit-embed-param
whitphx Dec 6, 2023
55a15cc
Replace NimaBoscarino/hotdog-streamlit with whitphx/hotdog-streamlit …
whitphx Dec 6, 2023
492bd0b
Add inner-page anchor link
whitphx Dec 6, 2023
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
35 changes: 28 additions & 7 deletions docs/hub/spaces-sdks-streamlit.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ To use Streamlit in a Space, select **Streamlit** as the SDK when you create a S

```yaml
sdk: streamlit
sdk_version: 1.25.0 # The latest supported version
sdk_version: 1.29.0 # The latest supported version
```

You can edit the `sdk_version`, but note that issues may occur when you use an unsupported Streamlit version. Not all Streamlit versions are supported, so please refer to the [reference section](./spaces-config-reference) to see which versions are available.
Expand All @@ -23,7 +23,7 @@ Only port 8501 is allowed for Streamlit Spaces (default port). As a result if yo

In the following sections, you'll learn the basics of creating a Space, configuring it, and deploying your code to it. We'll create a **Hot Dog Classifier** Space with Streamlit that'll be used to demo the [julien-c/hotdog-not-hotdog](https://huggingface.co/julien-c/hotdog-not-hotdog) model, which can detect whether a given picture contains a hot dog 🌭

You can find a completed version of this hosted at [NimaBoscarino/hotdog-streamlit](https://huggingface.co/spaces/NimaBoscarino/hotdog-streamlit).
You can find a completed version of this hosted at [whitphx/hotdog-streamlit](https://huggingface.co/spaces/whitphx/hotdog-streamlit).

## Create a new Streamlit Space

Expand Down Expand Up @@ -82,24 +82,45 @@ For example, the demo above can be embedded in these docs with the following tag

```
<iframe
src="https://NimaBoscarino-hotdog-streamlit.hf.space?embed=true"
src="https://whitphx-hotdog-streamlit.hf.space"
title="My awesome Streamlit Space"
Copy link
Member

Choose a reason for hiding this comment

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

Should we also include the height, as it is mentioned in your comment below? What about all the allow settings, are they required?

Copy link
Member Author

Choose a reason for hiding this comment

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

The height used below is an ad-hoc optimization, so I think leaving this sample code as-is without height would be ok as an example.

></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"
src="https://whitphx-hotdog-streamlit.hf.space"
frameborder="0"
height="364"
height="600"
title="Streamlit app"
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.
Please note that, for versions `< 1.19`, scrolling is disabled. You'll need to set the height of the iframe enough to fit the embedded Streamlit app's content, or use the auto-resizing technique [described below](#embed-streamlit-spaces-with-auto-resizing-iframes).

## Embed mode

You can use the `embed=true` query parameter in the URL to activate embed mode in the Streamlit app, which removes some spacers and the footer for slim embeddings.

```
<iframe
src="https://whitphx-hotdog-streamlit.hf.space?embed=true"
title="My awesome Streamlit Space"
height="364"
></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://whitphx-hotdog-streamlit.hf.space?embed=true"
frameborder="0"
height="364"
title="Streamlit app"
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>

## Embed Streamlit Spaces with auto-resizing IFrames

Expand Down
Loading