Lite: Wasm-compatible Model3D

[whitphx]

Description

Closes: #7235

During the work, I also add some non-Wasm-related modifications as well.

• c824be8 and f0564ee: Making Model3D.svelte and Model3DUpload Wasm-compatible, with minimum code changes.
• bee71ae: Kind of a drastic refactoring, creating a new Canvas3D.svelte component and move the Babylon code to it.
  • With this change,
    • All Babylon-related code are encapsulated into Canvas3D.
    • The engine variable's lifecycle became more natural, which matches the Svelte component Canvas3D.
    • Code duplications in Model3D.svelte and Model3DUpload.svelte are removed.
  • The way of reloading a model URL was changed to keep scene, remove the existing meshes, and load a new model file, instead of disposing of the old scene. The reason is it's easier to make scene's lifecycle sync to the component's one, but it can be changed if desired.

Sample

import gradio as gr


def identity(input):
    return input


demo = gr.Interface(
	fn=identity,
	inputs=gr.Model3D(),
	outputs=gr.Model3D(),
)


if __name__ == "__main__":
    demo.queue().launch()

[gradio-pr-bot]

🪼 branch checks and previews

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

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/model3d	minor
gradio	minor

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

With the following changelog entry.

Lite: Wasm-compatible Model3D

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.

[whitphx]

A better design would be to create a new Svelte component like BabylonCanvas.svelte which only contains the canvas element and Babylon code and to make Model3D.svelte and Model3DUpload.svelte share it. With this design,

• resolve_wasm_src is only called in one place.
• Some duplicated code around engine and scene in Model3D.svelte and Model3DUpload.svelte are removed.
• add_new_model is refactored. Its current impl has some unnatural code such as recreation of engine every time. Also, the variable engine is bound to canvas, so its lifecycle should be managed only in a component, without such a helper function.

Will work on it, so still keep this PR as draft a while.

[whitphx]

Also bug fixed.
With the current code, if the path contains more than one dot, the plugin name is not properly inferred.

[abidlabs]

Great PR @whitphx! Very nice to have Model3D component working in Gradio/Lite and I've tested both regular Gradio and Gradio/Lite. Let me tag @dawoodkhan82 or @hannahblair who can confirm the refactor

[hannahblair]

Just did a quick test and everything looks good! Nice work @whitphx 😁

[abidlabs]

Nice! Thanks @whitphx and @hannahblair!