Change size and alignment of AnnotatedImage and Model3D widgets

I have developed a very simple 2-sided viewer with a 2D and 3D viewer. Both an AnnotatedImage and a Model3D widget have been placed side-by-side in a Row() layout.

I would like both widgets to be of equal, squared size, and centered in their respective location. I have placed each wiget in their own Box() layout, but it looks like I am unable to 1) change the alignment of where the widget is placed within the box and 2) I am unable to set height/width of the Model3D widget.

I have deployed the current version in the livermask hugging face space.

I am unable to see that this is possible to do, according to the documentations. Any suggestions? Current state can be seen below:

hi @andreped , I think there is a bug setting the style for the Model3D, thanks for open the issue.
Meanwhile you can do this

css="""
#model-out {
  height: 512px;
}
"""
with gr.Blocks(css=css) as demo:
    model3d_out = gr.Model3D(elem_id="model-out")
1 Like

Worked wonders, @radames! Cheers!

For those that wish to center Image/AnnotatedImage widgets, just add margin:auto to the css, for instance like so:

css="""
  #model-3d {
  height: 512px;
  }
  #model-2d {
  height: 512px;
  margin: auto;
  }
  """

Final result:

1 Like