Skip to content

feat: image_compare #4216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

Haleshot
Copy link
Contributor

📝 Summary

Add mo.image_compare component for side-by-side image comparison with interactive slider.

Fixes #1524

🔍 Description of Changes

Still WIP (to work on certain attributes of the component not working as intended).

  • Implemented a new stateless component mo.image_compare to allow side-by-side comparison of images
  • The component uses the img-comparison-slider web component
  • Added support for both horizontal and vertical comparison
  • Created a demo file in examples/image_comparison_demo.py -> needs to be moved to an appropriate folder in examples/

📋 Checklist

  • I have read the contributor guidelines.
  • For large changes, or changes that affect the public API: this change was discussed or approved through an issue, on Discord, or the community discussions (Please provide a link if applicable).
  • I have added tests for the changes made.
  • I have run the code and verified that it works as expected.

📜 Reviewers

@akshayka OR @mscolnick

Copy link

vercel bot commented Mar 23, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
marimo-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 23, 2025 9:12am
marimo-storybook ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 23, 2025 9:12am

Comment on lines +108 to +109
{f'<div slot="{first_slot}-label" class="label">{before_label}</div>' if show_labels else ""}
{f'<div slot="{second_slot}-label" class="label">{after_label}</div>' if show_labels else ""}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The labels feature isn't working correctly yet (doesn't seem to show up at all).


# Create HTML content
html_content = f"""
<script defer src="https://unpkg.com/img-comparison-slider@7/dist/index.js"></script>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this can be a library in our package.json so that this plugin can work offline.

we can create a stateless plugin ImageComparison. you can see how we do this with JsonOutputPlugin or AccordionPlugin.

since img-comparison-slider also may not be common. we should lazy-load the library. you can look at SliderPlugin to VegaPlugin for some exampels

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure; will look into this. Thanks for the feedback.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

image comparison slider widget
2 participants