Add download button to model3d output

[dawoodkhan82]

Description

Add download button to model3d output

Please include:

• relevant motivation
• a summary of the change
• which issue is fixed.
• any additional dependencies that are required for this change.

Closes: #3001

Checklist:

• I have performed a self-review of my own code
• I have added a short summary of my change to the CHANGELOG.md
• My code follows the style guidelines of this project
• I have commented my code in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

A note about the CHANGELOG

Hello 👋 and thank you for contributing to Gradio!

All pull requests must update the change log located in CHANGELOG.md, unless the pull request is labeled with the "no-changelog-update" label.

Please add a brief summary of the change to the Upcoming Release > Full Changelog section of the CHANGELOG.md file and include
a link to the PR (formatted in markdown) and a link to your github profile (if you like). For example, "* Added a cool new feature by [@myusername](link-to-your-github-profile) in [PR 11111](https://github.com/gradio-app/gradio/pull/11111)".

If you would like to elaborate on your change further, feel free to include a longer explanation in the other sections.
If you would like an image/gif/video showcasing your feature, it may be best to edit the CHANGELOG file using the
GitHub web UI since that lets you upload files directly via drag-and-drop.

[gradio-pr-bot]

All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-3014-all-demos

[gradio-pr-bot]

🎉 The demo notebooks match the run.py files! 🎉

[freddyaboulton]

Works great @dawoodkhan82 !

Just wondering if we should consolidate the download utils between File and model3d

[freddyaboulton]

Seems to be the same code as in file/src/utils.ts - should we consolidate?

[dawoodkhan82]

Works great @dawoodkhan82 !

Just wondering if we should consolidate the download utils between File and model3d

Yup will def do that and add it to this PR. Was also thinking of adding a download button to other components (video, audio etc.)

[abidlabs]

Nice @dawoodkhan82! Nit: the alignment with the top left label is off. What do think about making it the same level as the "3D Model" label on the top left, i.e. have the button be stuck on the top right corner? Similar to the copy button in the JSON component:

[dawoodkhan82]

Nice @dawoodkhan82! Nit: the alignment with the top left label is off. What do think about making it the same level as the "3D Model" label on the top left, i.e. have the button be stuck on the top right corner? Similar to the copy button in the JSON component:

I could do that, but I was actually mimicking the position of the 'x' button used to clear an input.

[abidlabs]

Got it, that makes sense too. Nvm my suggestion then

[abidlabs]

In that case, maybe we should change "copy to clipboard" in JSON component to be a copy icon in the same size/position as these other ones (at some point, not urgent)

[dawoodkhan82]

Does this look right? @freddyaboulton @abidlabs

[abidlabs]

Hmm seems a little crowded. I thought clicking on the filename already allowed you to download the file?

[dawoodkhan82]

Hmm seems a little crowded. I thought clicking on the filename already allowed you to download the file?

There was text labeled Download that in place of the icon. I'll leave the FilePreview component as is for now. And we can decide on a style outside of this PR.

[abidlabs]

Oh sorry yeah I think we can do that outside of this PR

[dawoodkhan82]

@freddyaboulton not sure why the notebook check is failing...

[freddyaboulton]

@dawoodkhan82 One of the demo files got changed but the notebook was not updated in this PR. I think the generate_notebook.py script should fix it ?