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에서 확인할 수 있습니다.