Handle gradio apps using state in the JS Client

[hannahblair]

Description

We were receiving a param error when a space was using state. This PR adds logic to send null for each state param in the API, allowing us to receive the expected data.

Closes: #5120

👻 Note, I haven't added a test for this because we still haven't got tests in place for submit and predict, which are TBD. I'm not sure where would be worth adding a test until we have those relevant tests.

🎯 PRs Should Target Issues

Before your create a PR, please check to see if there is an existing issue for this change. If not, please create an issue before you create this PR, unless the fix is very small.

Not adhering to this guideline will result in the PR being closed.

Tests

1. PRs will only be merged if tests pass on CI. To run the tests locally, please set up your Gradio environment locally and run the tests: bash scripts/run_all_tests.sh

2. You may need to run the linters: bash scripts/format_backend.sh and bash scripts/format_frontend.sh

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
🦄	Changes	detecting...

---

Install Gradio from this PR

pip install https://gradio-builds.s3.amazonaws.com/e575ab2b553567abf55d922993d4e01d9b0deeca/gradio-4.32.2-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@e575ab2b553567abf55d922993d4e01d9b0deeca#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-builds.s3.amazonaws.com/e575ab2b553567abf55d922993d4e01d9b0deeca/gradio-client-0.20.1.tgz

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/app	patch
@gradio/client	patch
@gradio/preview	patch
gradio	patch

• Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Handle gradio apps using state in the JS Client

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

[abidlabs]

Thanks @hannahblair! We should also make sure to remove any output values that correspond to a gr.State output component.

For example, here:

import gradio as gr

gr.ChatInterface(lambda x,y:x).launch()

The docs state that the .predict() function should take a single input and return a single output:

When I ran this code:

import { Client } from "@gradio/client";

const app = await Client.connect("http://127.0.0.1:7860/");
const result = await app.predict("/chat", {		
	message: "Hello!!",
});

console.log(result.data);

the function did indeed accept a single input, but it also returned a null value corresponding to the state output component that should not be there:

% node index.js
[ 'Hello!!', null ]

It should just return Hello!!

As a side note, I needed to do:

const app = await Client.connect("http://127.0.0.1:7860/");

not

const app = await Client.connect("http://localhost:7860/");

otherwise I see this error:

file:///Users/abidlabs/dev/gradio-repos/gradio-js-client/node_modules/@gradio/client/dist/index.js:1900
      throw Error(e);
            ^

Error: Error: TypeError: fetch failed
    at Client.init (file:///Users/abidlabs/dev/gradio-repos/gradio-js-client/node_modules/@gradio/client/dist/index.js:1900:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Client.connect (file:///Users/abidlabs/dev/gradio-repos/gradio-js-client/node_modules/@gradio/client/dist/index.js:1937:5)
    at async file:///Users/abidlabs/dev/gradio-repos/gradio-js-client/index.js:3:13

[pngwn]

Looks like the recent changes caused some failures. Will review again when they are passing.

[pngwn]

problems

1. While direct client use should strip state null values from the output, we need to keep them there for use in gradio directly because the server expects them as do frontend functions etc.
2. We need to be aware of whether or not null state values are present in the payload or not when adding them in.

solutions

1. I added input and output variants. Then we could be more granular about which 'phase' we were in. I also added an option to the client decide whether not to keep state values. in gradio we set this to true manually but we remove them by default (for raw client use)
2. we compare the resolved_payload length with the dep.inputs length. If they match state values are present and we don't need to add them.

[hannahblair]

🙌

[pngwn]

Thanks for taking this one on @hannahblair! If you are happy, I'm happy.

[hannahblair]

thanks so much @pngwn! interesting to know that we needed those values in internally. i've tested and all looks good