RawHtml Component for Arbitrary HTML Content #286
Comments
|
Thanks for your question. Is there any reason why this feature would be needed over the existing https://docs.pydantic.dev/fastui/api/python_components/#fastui.components.Iframe |
|
@sydney-runkle can you explain how the FastUI I'm wanting to create reusable components for FastUI in python, but I can't see any way to get at the actual HTML. I want to do simple stuff like creating a table where elements are images, but I can't seem to figure that out. |
|
@sydney-runkle I sort of got that to work but...
|
|
Here is an example I created for wrapping raw html in an fastui GitHere: https://gist.github.com/jimkring/d2c30fda78e031b285070c07797b0148 from typing import Union
from fastui.components import Iframe
def iframe_from_html_raw(
raw_html: str,
width: Union[str, int, None] = None,
height: Union[str, int, None] = None,
) -> Iframe:
"""Returns a fastui Iframe component that displays raw HTML content."""
return Iframe(
srcdoc=raw_html,
# todo: ideally `fastui` should make src not required if srcdoc is provided
src="http://required.input.ignored.when.srcdoc.is.valid",
width=width,
height=height,
)Side note: when wrapping an image I had to add some padding to get the horizontal scrollbars to go away. import io
import base64
from PIL import Image # requires `pillow` package
from fastui.components import Iframe
def iframe_from_image_base64(image_base64: str) -> Iframe:
"""Returns a fastui Iframe component that displays a base64 encoded image."""
width, height = get_size_of_base_64_image(image_base64)
# padding is required to make the iframe scrollbars disappear
pad_horizontal = 4
pad_vertical = 10
return iframe_from_html_raw(
html_raw=f'<img src="data:image/png;base64,{image_base64}" width="{width}" height="{height}">',
width=width + 2 * pad_horizontal,
height=height + 2 * pad_vertical,
)
def get_size_of_base_64_image(image_base64: str):
"""Returns the width and height of a base64 encoded image."""
imgdata = base64.b64decode(image_base64)
im = Image.open(io.BytesIO(imgdata))
width, height = im.size
return width, height |
|
Ah nice, thanks for looking into this further. Yep, I think as an intermediate step we could make Thanks for posting your example, I'm sure it'll be of help to others in the meantime! |
|
Using IFrame seems confusing to me I would prefer just having a RawHTML Component |
|
@shroominic yes, the iframe is just the only available work-around right now. In some ways, it's good for the evolution of fastui to not have a raw html component, because it forces everyone to try to find/design a more declarative way (with fastui features/components) to address the use cases. |
Could you consider adding a
RawHtmlcomponent?I see a gap in the ability to insert arbitrary HTML like
<svg>. This would help for direct HTML integrations necessary for some designs and functionalities.The text was updated successfully, but these errors were encountered: