VSCode Diff 2 Images

[ghostsquad]

It would be cool if there was a way to combine the solara functionality with a "diff" functionality, 2 columns, show the image and metadata of each, with a diff between the metadata.

Consequently, is there a way to show the image (not just the filename) as well as the metadata when using ui.solara.MetadataViewer() ?

[Chaoses-Ib]

If you look into the source code of MetadataViewer, its UI part is actually very simple, especially if you know React/Vue:

@solara.component
def MetadataViewer(comfyui_api: str = None):
    script, set_script = solara.use_state('')
    script_source, set_script_source = solara.use_state('')

    def on_file(file_info: solara.file_drop.FileInfo):
        set_script(...)
    
    solara.FileDrop("Drop an image here\n(In VS Code, one need to hold Shift before drag the image, otherwise the file will be opened in VS Code)", on_file=on_file)
    # TODO: https://github.com/widgetti/solara/issues/446
    solara.Markdown(f'''```python
{script}```''')
    if script_source != '':
        solara.Markdown(f'''```python
{script_source}```''')

And Solara has Image and Columns component (and you can also use the ones from ipywidgets), so it would be simple to show images and add columns.

The difficult part is, Solara's syntax highlight still doesn't work in VS Code (widgetti/solara#446). So you can't display the diff in an very readable way, unless creating your own syntax highlither that works in VS Code (either renders in JS or Python).

[ghostsquad]

I don't know React/Vue very well. I followed the link trail from widgetti/solara#446 and it seems the issues have all been resolved (or at least closed).

[Chaoses-Ib]

It's only resolved for math and Mermaid, as the PR titled. I've tested its latest version with the latest VS Code, syntax highlighing still doesn't work.

[ghostsquad]

ok, thanks for checking in