Share button

[aliabid94]

Creates shareable button attached to Image, Gallery, Chatbot, Audio, Video.
Automatically set to True on Spaces. See example code below.

To test locally:

1. replace https://huggingface.co/uploads with https://radames-temp-proxy.hf.space/https://huggingface.co/uploads in utils.ts (to avoid CORS error)
2. no dev mode, need to pnpm run build to avoid CORS error
3. replace kitchen_sink/run.py with code below (to use example files)

Should also test on spaces using built package for gradio version (can be found in requirements.txt of https://huggingface.co/spaces/gradio-pr-deploys/pr-4651-all-demos)

import gradio as gr
import os
os.environ['SYSTEM'] = "spaces"
os.environ['SPACE_ID'] = "aliabid94/audiotest100"


with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column():
            text = gr.Textbox()
            num = gr.Slider()
            radio = gr.Radio(["a", "b", "c"], value="a")
            file = gr.File()
            btn = gr.Button("Run")
        with gr.Column():
            img = gr.Image()
            audio = gr.Audio()
            video = gr.Video()
            gallery = gr.Gallery()
            chatbot = gr.Chatbot()

    btn.click(
        lambda *args: [
            "files/lion.jpg",
            "files/cantina.wav",
            "files/world.mp4",
            ["files/lion.jpg", "files/tower.jpg"],
            [["Hey", "I'm bot"], ["I'm human", "Ok"]],
        ],
        [text, num, radio, file],
        [img, audio, video, gallery, chatbot],
    )

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

Closes: #2749

[gradio-pr-bot]

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

[gradio-pr-bot]

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

[abidlabs]

Btw I noticed that when images or audio are shared, they preview nicely in the discussion post. However, video does not because the <video> html tags are not included

[abidlabs]

It would be good to add a note in this section https://gradio.app/sharing-your-app/#hosting-on-hf-spaces about changes that automatically apply when apps are deployed to Spaces -- so that if users are wondering how to enable/disable the button, they can find it in the docs easily

[pngwn]

I'm not a fan of this feature in its current form for a few reasons:

1. I think it clutters the UI. If we to add this then I think we should use the standard share arrow and lose the text. We don't have text labels for any other icons the smileys everywhere look very pushy. I also think we should position it somewhere else, not where out normal UI icons go but in another corner.
2. I don't think this is really very maintainable, every component has its own share icon. It is similar to the StatusTracker issue, updating it is a nightmare. This also impacts custom components, is every custom component expected to implement a share icon in order to get that functionality? I think this needs rethinking.
3. I don't think that sharing individual outputs makes sense in a lot of cases, a lot of the time those outputs are bound together and it makes sense to share them together. We could expand the API for this but then having the button on a specific component doesn't make much sense.
4. No ability for other kinds of sharing and no API to implement a custom share function (to share on twitter for example)

If we are ok with 3 & 4 then thats fine, it isn't a hill i'll die on. I do feel more strongly about 1 & 2 though.

[aliabid94]

@pngwn @freddyaboulton @radames @gary149 @apolinario @abidlabs
To consolidate the feedback across Slack (thread 1 and 2) and here, here's I think a compromise of the remaining requests:

1. Some folks have been asking to make the button more prominent and others less prominent, so I will remove the label "Share" from the share button, but otherwise keep the colored icon that matches the Community icon.
2. Will make the shared post only create the body of the post from the shared component. No automatically generated title.
3. In a future PR, will add a .share listener that can create a completely customizable share action. This will allow messages with completely customizable titles and descriptions. When this is implemented, then in non-Space environments, the share button will use the standard share arrow. Will probably look like this in the future:

with gr.Blocks() as demo:
  input_img = gr.Image()
  edit_command = gr.Textbox()
  output_image = gr.Image()

  def share(img, cmd, out):
    return f"Edit with {cmd}", f"""
      Input image: {img}, 
      Command: {cmd}
      Output image: {out} 
    """
  output_image.share(share, [input_img, edit_command, output_image])

[aliabid94]

Should've addressed everything, except a global show_share_button=False. We don't have a concept of accessing Blocks level configuration from within a component yet - if users complain about this we can consider it then.,

Can I get a re-review @abidlabs

[abidlabs]

All of my comments seem to have been addressed, thanks @aliabid94!

Just noticed a few other small issues when testing it out:

1. When sharing the audio from the audio_debugger tab in the deployed PR, nothing happens when I click the share button

2. When sharing the gallery from the fake_gan demo, I get this error even though it was working before:

3. Video works now!

4. When trying sharing locally, I get a pretty cryptic error message. It would be better to say that sharing is only supported if you host your demo on Spaces (and link to https://hf.space if possible from the modal)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
gradio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 6, 2023 0:44am

[abidlabs]

LGTM @aliabid94! Thanks for addressing all of the feedback. One tiny thing is that the Gallery sometimes takes a while to upload for me, but that might just because it has to upload all of the images in series. Something we can try to optimize later on, but this PR is great

[aliabid94]

One tiny thing is that the Gallery sometimes takes a while to upload for me, but that might just because it has to upload all of the images in series

Can't really parallelize download / uploads, network bandwidth is a fixed bottleneck. The reason the Gallery uploads take a while in the fake_gan scenario is that these are URLs for some large images, and we need to download each file, convert to a blob, and re-upload the file to hf.co/uploads. hf.co/uploads can't take a direct URL so we need to do this extra step.

[catboxanon]

Could there be a way to opt-out of this somehow? This causes a pretty large performance hit on the stable-diffusion-webui during initial page load for users who have a lot of models, which creates a bunch of Gradio components which are then iterated through. I left some more details on the commit where the Gradio version was bumped. AUTOMATIC1111/stable-diffusion-webui@362789a#commitcomment-123587924

[freddyaboulton]

It's probably the same problem as #4841

[catboxanon]

Ah, I didn't catch that, you're right -- thanks!

[pngwn]

@catboxanon Yeah this introduced some nasty performance issues for large apps. I'll be fixing this this week.