Hugging Face and Gradio URL Paramiters

🔒 Gradio
1

I’m developing a project for a space on Hugging Face that uses Gradio. The project first sends the user to Twitter with an API request and after validating they are then retuned to my Hugging Face space with their oauth_verifier and oauth_token in the url header. When running Gradio locally on my machine I was able to use the below code to access the URL headers, however, after uploading the project to Hugging Face the function returns two empty strings (when the parameters are in the URL).

Does anyone know if there is a more reliable way of retrieving the current URL parameters when running on Hugging Face/ when using Gradio?

Any help would be appreciated,
Thanks

block = gr.Blocks()

def get_oath_headers():
    oauth_verifier = None
    oauth_token = None
    did_find = False
    if hasattr(block, "server"):
        for connection in block.server.server_state.connections:
            if connection.headers != None:
                for header in connection.headers:
                    header = header[1].decode()
                    if "oauth_verifier" in header:
                        oauth_verifier = re.search(r"oauth_verifier=(.+)", header).group(1)
                        oauth_token = re.search(r"oauth_token=(.+)&", header).group(1)
                        if oauth_token and oauth_verifier:
                            did_find = True
                            break
                if did_find:
                    break
    return oauth_verifier, oauth_token
2

hi @User1342

Currently if you’re deploying via Spaces and Gradio, we have one hack way to get the URL Params, it uses a hidden _js callback to interact with the UI before handling it to predict function. The idea is to grab the window.location.search and pass it to a hidden JSON state variable.

import gradio as gr

block = gr.Blocks()


def predict(text, url_params):
    print(url_params)
    return ["Hello " + text + "!!", url_params]


get_window_url_params = """
    function(text_input, url_params) {
        console.log(text_input, url_params);
        const params = new URLSearchParams(window.location.search);
        url_params = Object.fromEntries(params);
        return [text_input, url_params];
        }
    """
with block:
    url_params = gr.JSON({}, visible=True, label="URL Params")
    text_input = gr.Text(label="Input")
    text_output = gr.Text(label="Output")

    btn = gr.Button("Run")
    btn.click(fn=predict, inputs=[text_input, url_params],
              outputs=[text_output, url_params], _js=get_window_url_params)

block.launch(debug=True)

test: Gradio Url Params - a Hugging Face Space by radames

Another important issue, our Spaces are served under an iframe on huggingface.co, and currently the URL params are not passed to the child iframe (we have an open PR to fix it). So if you want to use the app you have to use via hf.space/embed see example bellow:

via huggingface.co: https://huggingface.co/spaces/radames/gradio-url-params/?test=%22dsds%22&value=23231 doesn’t work
via hf.space: https://hf.space/embed/radames/gradio-url-params/?test=%22dsds%22&value=23231 it works

3 Likes
3

Hi @radames! This helped so much, thanks for taking the time to respond and for the such detailed answer. Cheers!

1 Like