SpacesでURLパラメータを処理する方法

URLクエリパラメータをデータ共有の仕組みとして使用できます。例えば、特定の状態でアプリにディープリンクを設定する場合などに利用できます。

Spaceページ（https://huggingface.co/spaces/<user>/<app>）では、実際のアプリケーションページ（https://*.hf.space/）がiframeに埋め込まれています。親ページURLに付与されたクエリ文字列とハッシュは、初期読み込み時に埋め込まれたアプリケーションに伝播されるため、埋め込まれたアプリケーションは特別な処理なしにこれらの値を読み取ることができます。

一方、埋め込みアプリから親ページURLのクエリ文字列とハッシュを更新する場合は、やや複雑になります。 Dockerまたは静的なSpaceでこれを行うには、queryStringおよび/またはhashキーを持つメッセージを親ページに送信する次のJSコードを追加する必要があります。

const queryString = "...";
const hash = "...";

window.parent.postMessage({
    queryString,
    hash,
}, "https://huggingface.co");

これはDockerまたは静的なSpacesのみを対象としています。

Streamlit アプリの場合、Spaces は URL パラメータを自動的に同期します。Gradio アプリは Spaces ページからクエリパラメータを読み取ることができますが、更新された URL パラメータを親ページと同期することはできません。

親ページのURLパラメータは、埋め込みアプリに最初の読み込み時のみ伝播されます。したがって、この方法で親URLのハッシュが更新されても、埋め込みアプリ内のlocation.hashは変更されません。

このメソッドの例は、この静的Space whitphx/static-url-param-sync-example で確認できます。