Add elemt_id for gr.Example to customize the css layout.

[HuangChiEn]

• [x] I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.
Since gr.Example needs the input, fn as required arguments and the component position is associated with the order of function definition. For now, it's almost impossible to let the gallery above to the other component, including gr.Image (input). It should have the option to allow the user to arrange the position for each components by setting the CSS file at least. Another flexible method in the component is also fine.

Describe the solution you'd like
I can control the CSS position for gr.Example. Moreover, we can control CSS position setup for each of gr components (such as submit button)

Additional context
To be honest, the best solution is the declaration of gr component should be decoupled with the position layout in web page. The following pseudo code snippet reveal the decoupling style. Although, it's not make sense to lead the submit button before the input image, i just attempt to show the flexibility we want to control the position of each component.

Besides, lead the gr.Example component before the input is an normal requirement for better UI/UX. Original

with blk.row( ):
    input = gr.Image(...)
    output = gr.Gallery(...)
with blk.col( ):
    submit_btn = fn(input, output)  # not correct, just pseudo code..
##########################
# Web layout
# Image, Gallery
#      Button

Decouple

input = gr.Image(...)
output = gr.Gallery(...)
submit_btn = fn(input, output)  # not correct, just pseudo code..

with blk.row( ):
    submit_btn.pos_anchor( )
    output.pos_anchor( )

input.pos_anchor( )

##########################
# Web layout
# Button, Gallery
#      Image

Any feedback and idea about this feature enhencement will be appreciated!!

[abidlabs]

Hi @HuangChiEn, the good news is that we actually do support this decoupling!

The way it works right now if you define any component outside of gr.Blocks, it is not immediately rendered. You can render it by using the .render() method. This allows you to place a gr.Examples above its inputs. Here's an example:

import gradio as gr

i = gr.Textbox()
o = gr.Textbox()

with gr.Blocks() as demo:
    gr.Examples(["hello", "hi"], i)
    with gr.Row():
        i.render()
        o.render()
    i.change(lambda x: x, i, o)

demo.launch()

which produces this:

Leaving this open as a reminder to document this feature here: https://gradio.app/controlling_layout/

[HuangChiEn]

Hi @HuangChiEn, the good news is that we actually do support this decoupling!

The way it works right now if you define any component outside of gr.Blocks, it is not immediately rendered. You can render it by using the .render() method. This allows you to place a gr.Examples above its inputs. Here's an example:

import gradio as gr

i = gr.Textbox()
o = gr.Textbox()

with gr.Blocks() as demo:
    gr.Examples(["hello", "hi"], i)
    with gr.Row():
        i.render()
        o.render()
    i.change(lambda x: x, i, o)

demo.launch()

which produces this:

Leaving this open as a reminder to document this feature here: https://gradio.app/controlling_layout/

Thanks for your rapidly reply, i will deep into doc for the details. Does the gradio==3.1.3 begin to support this feature ?

[HuangChiEn]

Leaving this open as a reminder to document this feature here: https://gradio.app/controlling_layout/

[HuangChiEn]

@abidlabs Good afternoon, thanks for your rapidly reply.

I still wonder that is it possible to pass the elemnt_id to gr.Example to set up the CSS ? ( because we also meet the issue that the font-size of gr.Example is too small.

Any feedback and idea about this feature enhancement will be appreciated!!

[abidlabs]

Sorry for the late reply @HuangChiEn. Yes, this feature should work on 3.1.3.

Good idea for gr.Examples to support an elem_id to be able to customize the underlying Datasets component. In the meantime, what you can do is to set an elem_id manually.

For example, you could do this:

examples = gr.Examples(...)
examples.dataset.elem_id = XXX

[HuangChiEn]

dataset

@abidlabs Oh.. it seems not work in gradio==3.1.4, although it's a good solution

What kind of version will have this feature ?

[abidlabs]

Can you try the latest? 3.1.6

On Sun, Aug 21, 2022 at 11:54 PM HuangChiEn @.***> wrote:

dataset

@abidlabs https://github.com/abidlabs Oh.. it seems not work in gradio==3.1.4, although it's a good solution [image: image] https://user-images.githubusercontent.com/52521165/185857510-23dec8bd-711d-47dd-b1ad-198afb95dc10.png [image: image] https://user-images.githubusercontent.com/52521165/185857556-3fc3801c-ca44-4319-851f-f2765528d575.png

What kind of version will have this feature ?

— Reply to this email directly, view it on GitHub https://github.com/gradio-app/gradio/issues/2028#issuecomment-1221927572, or unsubscribe https://github.com/notifications/unsubscribe-auth/AANSE6LUJPA3KT2ZCIQLNODV2MPZTANCNFSM56X42VUQ . You are receiving this because you were mentioned.Message ID: @.***>

[HuangChiEn]

Can you try the latest? 3.1.6 … On Sun, Aug 21, 2022 at 11:54 PM HuangChiEn @.> wrote: dataset @abidlabs https://github.com/abidlabs Oh.. it seems not work in gradio==3.1.4, although it's a good solution [image: image] https://user-images.githubusercontent.com/52521165/185857510-23dec8bd-711d-47dd-b1ad-198afb95dc10.png [image: image] https://user-images.githubusercontent.com/52521165/185857556-3fc3801c-ca44-4319-851f-f2765528d575.png What kind of version will have this feature ? — Reply to this email directly, view it on GitHub <#2028 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AANSE6LUJPA3KT2ZCIQLNODV2MPZTANCNFSM56X42VUQ . You are receiving this because you were mentioned.Message ID: @.>

@abidlabs Thanks for your rapidly reply, it's work in gradio==3.1.6 exactly !! feel free to close this issue ~

[freddyaboulton]

Thanks @HuangChiEn !