From 0febb6ddd55f277eda2b7f264359c4c2ab100feb Mon Sep 17 00:00:00 2001 From: "Yuichiro Tachibana (Tsuchiya)" Date: Wed, 15 Mar 2023 00:37:16 +0900 Subject: [PATCH 1/6] Split the section about embed=true parameter of embedded Streamlit apps --- docs/hub/spaces-sdks-streamlit.md | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/docs/hub/spaces-sdks-streamlit.md b/docs/hub/spaces-sdks-streamlit.md index 135424a11..443cdec98 100644 --- a/docs/hub/spaces-sdks-streamlit.md +++ b/docs/hub/spaces-sdks-streamlit.md @@ -76,10 +76,33 @@ You can use the HTML ` +``` + + + +## Embed mode + +You can use the `embed=true` query parameter in the URL to activate the embed mode of the Streamlit app, removing some spacers and the footer for slim embeds. +Please note that this parameter disables scrolling in the iframe, so you'll need to set the height of the iframe enough to fit the embedded Streamlit app's content. + ``` ``` @@ -94,8 +117,6 @@ For example, the demo above can be embedded in these docs with the following tag sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads" > -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. - ## Embed Streamlit Spaces with auto-resizing IFrames From 44a1ba5727e075e227e3ab1e9e9a9c104c5920c7 Mon Sep 17 00:00:00 2001 From: "Yuichiro Tachibana (Tsuchiya)" Date: Wed, 6 Dec 2023 19:03:20 +0100 Subject: [PATCH 2/6] Update --- docs/hub/spaces-sdks-streamlit.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/hub/spaces-sdks-streamlit.md b/docs/hub/spaces-sdks-streamlit.md index 443cdec98..060f8c0cb 100644 --- a/docs/hub/spaces-sdks-streamlit.md +++ b/docs/hub/spaces-sdks-streamlit.md @@ -93,10 +93,11 @@ For example, the demo above can be embedded in these docs with the following tag sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads" > +Please note that, for the versions <1.19, scrolling is disabled and 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 mode You can use the `embed=true` query parameter in the URL to activate the embed mode of the Streamlit app, removing some spacers and the footer for slim embeds. -Please note that this parameter disables scrolling in the iframe, so you'll need to set the height of the iframe enough to fit the embedded Streamlit app's content. ``` - ## 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. From c5ea317f7af0aeba070e64289ad93f2e30c0d725 Mon Sep 17 00:00:00 2001 From: "Yuichiro Tachibana (Tsuchiya)" Date: Wed, 6 Dec 2023 21:02:34 +0000 Subject: [PATCH 3/6] Update docs/hub/spaces-sdks-streamlit.md Co-authored-by: Pedro Cuenca --- docs/hub/spaces-sdks-streamlit.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/hub/spaces-sdks-streamlit.md b/docs/hub/spaces-sdks-streamlit.md index 060f8c0cb..c531da470 100644 --- a/docs/hub/spaces-sdks-streamlit.md +++ b/docs/hub/spaces-sdks-streamlit.md @@ -97,7 +97,7 @@ Please note that, for the versions <1.19, scrolling is disabled and you'll need ## Embed mode -You can use the `embed=true` query parameter in the URL to activate the embed mode of the Streamlit app, removing some spacers and the footer for slim embeds. +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. ``` -Please note that, for the versions <1.19, scrolling is disabled and 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. +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 mode From 55a15cc8593a684c8fc7f8e9d21dbe94641a15c2 Mon Sep 17 00:00:00 2001 From: "Yuichiro Tachibana (Tsuchiya)" Date: Wed, 6 Dec 2023 22:28:20 +0100 Subject: [PATCH 5/6] Replace NimaBoscarino/hotdog-streamlit with whitphx/hotdog-streamlit because it's not working --- docs/hub/spaces-sdks-streamlit.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/hub/spaces-sdks-streamlit.md b/docs/hub/spaces-sdks-streamlit.md index a6b248621..e38a89956 100644 --- a/docs/hub/spaces-sdks-streamlit.md +++ b/docs/hub/spaces-sdks-streamlit.md @@ -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. @@ -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 @@ -82,13 +82,13 @@ For example, the demo above can be embedded in these docs with the following tag ``` ``` @@ -113,7 +113,7 @@ You can use the `embed=true` query parameter in the URL to activate embed mode i -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. +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