Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lite: Capture stdout and stderr from the main thread #9984

Merged
merged 12 commits into from
Dec 23, 2024
Merged

Conversation

whitphx
Copy link
Member

@whitphx whitphx commented Nov 18, 2024

Description

Makes it possible to capture the stdout and stderr in the Pyodide env from the main thread WorkerProxy like https://github.com/gradio-app/gradio/pull/9984/files#diff-b8397e16be06799abe4aad0399bc152c2b4e62c7294845513ed1c72e4950f3c3R91-R98

		controller.addEventListener("stdout", (event) => {
			const message = (event as CustomEvent).detail as string;
			// ...
		});
		controller.addEventListener("stderr", (event) => {
			const message = (event as CustomEvent).detail as string;
			// ...
		});

Closes: #6108

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
@gradio-pr-bot
Copy link
Collaborator

gradio-pr-bot commented Nov 18, 2024

🪼 branch checks and previews

Name Status URL
Spaces ready! Spaces preview
Website ready! Website preview
Storybook ready! Storybook preview
🦄 Changes detected! Details

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/3808a905f22d52f9009aa5af37da20eca63a2d44/gradio-5.9.1-py3-none-any.whl

Install Gradio Python Client from this PR

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

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/3808a905f22d52f9009aa5af37da20eca63a2d44/gradio-client-1.8.0.tgz

Use Lite from this PR

<script type="module" src="https://gradio-lite-previews.s3.amazonaws.com/3808a905f22d52f9009aa5af37da20eca63a2d44/dist/lite.js""></script>

@gradio-pr-bot
Copy link
Collaborator

gradio-pr-bot commented Nov 18, 2024

🦄 change detected

This Pull Request includes changes to the following packages.

Package Version
@gradio/lite minor
@gradio/wasm minor
gradio minor
  • Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Lite: Capture stdout and stderr from the main thread

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.

Sorry, something went wrong.

@whitphx whitphx changed the title Add stdout and stderr events Lite: Capture stdout and stderr from the main thread Dec 16, 2024
@whitphx whitphx marked this pull request as ready for review December 16, 2024 04:28
@aliabd
Copy link
Collaborator

aliabd commented Dec 17, 2024

@whitphx Interesting, build errors are not showing up in stderr. Basically any error before the demo is built. like this for example:

import gradio as gr

1/0

def fn(x):
    return x

demo = gr.Interface(
    fn=fn,
    inputs=gr.Textbox(),
    outputs=gr.Textbox(),
)

demo.launch()
Screenshot 2024-12-16 at 4 22 53 PM

is this by design?

@whitphx
Copy link
Member Author

whitphx commented Dec 17, 2024

Looks like those different types of errors are thrown from different places, one of which already has an error handler but another doesn't, and errors not caught are printed in stderr.

  • I will investigate where the handler should be added.
  • At the same time, I think we should keep this stdout/stderr mechanism as a general fallback.

@whitphx
Copy link
Member Author

whitphx commented Dec 17, 2024

@aliabd I added a new event to capture such errors. wdyt about this?

@aliabd
Copy link
Collaborator

aliabd commented Dec 18, 2024

@whitphx that makes sense but for some reason the new event isn't capturing correctly for me. Can you show me with the example I shared?

I added an event listener for python-error similar to stdout and stderr in the App.svelte but it didn't show up

@whitphx
Copy link
Member Author

whitphx commented Dec 18, 2024

Looks like the error capturing itself is working in my env , though I found the <ErrorDisplay />'s style is broken in the embedded mode which I should fix. (Updated: I fixed the error display as the attached image)

CleanShot 2024-12-18 at 17 54 05@2x

<!doctype html>
<!-- A demo HTML file to test the bundled JS and CSS files -->
<html>
	<head>
		<meta charset="utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1"
		/>

		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link
			rel="preconnect"
			href="https://fonts.gstatic.com"
			crossorigin="anonymous"
		/>
		<script type="module" crossorigin src="./dist/lite.js"></script>
		<link rel="stylesheet" href="./dist/lite.css" />
	</head>

	<body style="padding: 10px; height: 100%; width: 100%">
		<h2>Dedicated Worker</h2>
		<gradio-lite>
import gradio as gr

1/0

def fn(x):
    return x

demo = gr.Interface(
    fn=fn,
    inputs=gr.Textbox(),
    outputs=gr.Textbox(),
)

demo.launch()
		</gradio-lite>

		<h2>Shared Worker</h2>
		<gradio-lite shared-worker>
import gradio as gr

1/0

def fn(x):
    return x

demo = gr.Interface(
    fn=fn,
    inputs=gr.Textbox(),
    outputs=gr.Textbox(),
)

demo.launch()
		</gradio-lite>
	</body>
</html>

@aliabd
Copy link
Collaborator

aliabd commented Dec 18, 2024

Sorry @whitphx what i meant to say was that i'm not sure how to use the python-error event. I added an event listener like you did for stdout and stderr but it doesn't seem like the event is triggering.

@whitphx
Copy link
Member Author

whitphx commented Dec 19, 2024

@aliabd Ahh, my bad.
That error occurred here: https://github.com/gradio-app/gradio/pull/9984/files#diff-e807a6ad56ed34cac3ca1753bd3ab2dad9e2042d80c2fb21e55834d417f42f7aR118-R120 that was not caught,
so I added init-code-run-error event dispatcher there.
Now you can capture the event like this:

controller.addEventListener("init-code-run-error", (e) => {
	console.log("init-code-run-error", e);
});

The event structure is getting complicated so maybe we should redesign it..

Copy link
Collaborator

@aliabd aliabd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice @whitphx this worked for what I wanted, I merged it into my branch for the playground error fixing, and it worked as intended.

Like you said some of the errors on stderr aren't as specific and the event listeners are getting a bit bloated but this is enough for now so let's just revisit in the future.

@whitphx whitphx merged commit 45df1b1 into main Dec 23, 2024
22 of 23 checks passed
@whitphx whitphx deleted the lite-stdout-stderr branch December 23, 2024 05:46
freddyaboulton pushed a commit that referenced this pull request Dec 23, 2024
* Add stdout and stderr events

* add changeset

* Refactoring

* Format App.tsx

* add changeset

* Add python-error event to capture Python errors occurring in the running event loop after the initial app launch

* Fix <ErrorDisplay />'s close button

* Fix <ErrorDisplay />

* Propagate python-error and initialization-error events to the controller

* Add init-code|file-run-error events

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
freddyaboulton added a commit that referenced this pull request Dec 23, 2024
* update code

* modify imports

* fix

* update notebook

* gr.load_chat: Allow loading any openai-compatible server immediately as a ChatInterface (#10222)

* changes

* add changeset

* add changeset

* Update gradio/external.py

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* changes

* changes

* Update guides/05_chatbots/01_creating-a-chatbot-fast.md

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* changes

---------

Co-authored-by: Ali Abid <aliabid94@gmail.com>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Allow editing chatbot messages (#10203)

* changes

* add changeset

* changes

* changes

* changes

* changes

* changes

* changes

* changes

* Update gradio/events.py

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update gradio/components/chatbot.py

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* changes

---------

Co-authored-by: Ali Abid <aliabid94@gmail.com>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update Guides related to deploying Gradio chatbots to Discord, Slack, and website widgets (#10221)

* changes

* changes

* update

* chat history

* add changeset

* changes

* add changeset

* changes

* guide

* changes

* changes

* changes

* guide

* add images

* slack guide

* changes

* format

* add changeset

* finish up slack

* changes

* improve js guide

* update

* changes

* script

* changes

* changes

* add changeset

* Update guides/05_chatbots/01_creating-a-chatbot-fast.md

Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com>

* Update guides/05_chatbots/01_creating-a-chatbot-fast.md

Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com>

* Update guides/05_chatbots/06_creating-a-discord-bot-from-a-gradio-app.md

Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com>

* Update guides/05_chatbots/08_creating-a-website-widget-from-a-gradio-chatbot.md

Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com>

* Update guides/05_chatbots/08_creating-a-website-widget-from-a-gradio-chatbot.md

Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com>

* gradio

* cta

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com>

* Allow editable ChatInterface (#10229)

* changes

* add changeset

* changes

* changes

* changes

---------

Co-authored-by: Ali Abid <aliabid94@gmail.com>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

* Fix typing for components in `gr.Interface` and docstring in `image.py` (#10235)

* changes

* add changeset

* changes

* changes

* change

* add changeset

* image.py

* revert msg

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

* Lite: Capture stdout and stderr from the main thread (#9984)

* Add stdout and stderr events

* add changeset

* Refactoring

* Format App.tsx

* add changeset

* Add python-error event to capture Python errors occurring in the running event loop after the initial app launch

* Fix <ErrorDisplay />'s close button

* Fix <ErrorDisplay />

* Propagate python-error and initialization-error events to the controller

* Add init-code|file-run-error events

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

* use chat interface

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: aliabid94 <aabid94@gmail.com>
Co-authored-by: Ali Abid <aliabid94@gmail.com>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com>
Co-authored-by: Yuichiro Tachibana (Tsuchiya) <t.yic.yt@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Lite: Capture Python's stdout and stderr and send them to the main thread
3 participants