Spaces:

timqian

/

like-history

like 48

Running

lol was about to request the same feature, are you reading my mind @clem ? cc @osanseviero

( @timqian IIRC you get the URL query params and hash params progagated from the Space "chrome" to the iframe inside of it. Let us know if we can help in implementing though!)

@timqian Hi, this is really a great work!
Let me just drop some comment about implementing this feature.

As @julien-c wrote, the app is embedded in an iframe on the Space page and the query and the hash attached to the parent page URL (https://huggingface.co/spaces/timqian/like-history?query=...#hash=...) are passed to the embedded page at the initial load.

Contrarily, updating the parent page URL's query string from the embedded app reflecting the search state is not straightforward,
but HF Spaces provides a way to do it as below, sending a specific message.

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

Here is an example: https://huggingface.co/spaces/whitphx/static-url-param-sync-example

Thanks!

super cool example @whitphx – you should link to it from Spaces' documentation IMO

@whitphx Thank you for the tip! I can set the hash using the way you advised.

Another question is how I can get the hash from the parent?

I am able to make it work locally this way: https://huggingface.co/spaces/timqian/like-history/blob/main/src/App.js#L29 but it does not work in space.

And also I tried this way and seems not working as well: https://huggingface.co/spaces/timqian/like-history/blob/main/src/App.js#L149

@timqian Good to know it worked!

Unfortunately hash (and query) updates after the initial load are not propagated to the embedded app.
So, please read location.hash only at the initial load, then manage the state in JS variables/state objects instead of reading location.hash in the following operations.

Also I updated the sample code snippet above a bit, changing the target origin from "*" to "https://huggingface.co" for better security.

@whitphx Awesome! It works now~

Also, I find deleting projects is necessary after introducing this feature, so it is added as well

cc @clem @julien-c

This is awesome!

Also linking to doc improvement PR from @whitphx in case you want to take a glance at it the https://github.com/huggingface/hub-docs/pull/1160