Spaces에서 URL 파라미터 다루기

URL 쿼리 파라미터를 데이터 공유 수단으로 사용할 수 있어요. 예를 들어 특정 상태를 가진 앱으로 딥링크(deep-link)를 걸 때 아주 유용하죠.

출처: 문서

본문

Space 페이지(https://huggingface.co/spaces/<user>/<app>)에서는 실제 애플리케이션 페이지(https://*.hf.space/)가 iframe 안에 임베드돼 있어요. 부모 페이지 URL에 붙은 쿼리 문자열과 해시는 초기 로드 시 임베드된 앱으로 전달되므로, 임베드된 앱은 별다른 처리 없이 이 값들을 읽을 수 있어요.

반면에 임베드된 앱에서 부모 페이지 URL의 쿼리 문자열과 해시를 업데이트하는 것은 조금 더 복잡해요. Docker 또는 static Space에서 이 작업을 하려면, queryString 및/또는 hash 키를 가진 메시지를 부모 페이지로 보내는 다음 JS 코드를 추가해야 해요.

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

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

이 방법은 Docker 또는 static Spaces에서만 적용돼요.

Streamlit 앱에서는 Spaces가 URL 파라미터를 자동으로 동기화해 줘요. Gradio 앱은 Spaces 페이지에서 쿼리 파라미터를 읽을 수는 있지만, 업데이트된 URL 파라미터를 부모 페이지와 동기화하지는 않아요.

부모 페이지의 URL 파라미터는 초기 로드 시에만 임베드된 앱으로 전달된다는 점을 유의하세요. 그래서 이 방법으로 부모 URL 해시를 업데이트해도 임베드된 앱 안의 location.hash는 바뀌지 않아요.

이 방법의 예시는 static Space인 whitphx/static-url-param-sync-example에서 확인할 수 있어요.

더 알아보기 (Learn more)

초기 로드 시 부모 URL의 쿼리·해시가 iframe 앱으로 자동 전달된다는 점과, 반대로 앱에서 부모 URL을 바꾸려면 postMessage로 queryString/hash를 보내야 한다는 점이 핵심이에요. Streamlit은 자동 동기화되지만 Gradio는 그렇지 않다는 차이도 꼭 기억하세요.