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 thelivermaskhugging 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:Screenshot 2023-05-29 at 13.23.213082×1124 108 KB
2023-06-01T23:01:49Z
hi@andreped, I think there is a bug setting the style for the Model3D, thanks for open the issue.Meanwhile you can do thiscss="""
#model-out {
  height: 512px;
}
"""
with gr.Blocks(css=css) as demo:
    model3d_out = gr.Model3D(elem_id="model-out")
2023-06-02T07:25:00Z
Worked wonders,@radames! Cheers!For those that wish to center Image/AnnotatedImage widgets, just addmargin:autoto the css, for instance like so:css="""
  #model-3d {
  height: 512px;
  }
  #model-2d {
  height: 512px;
  margin: auto;
  }
  """Final result:Screenshot 2023-06-02 at 09.15.481544×791 138 KB