Fix limited brush colors in image editor

[maggieNeedsZzz]

Description

Related to: #8102

Removes the hardcoded limit of 4 colors in the brush color swatch in the image editor. It now supports displaying all available colors which automatically wrap to new rows by using flex-wrap: wrap.

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Storybook	ready!	Storybook preview
🦄	Changes	detected!	Details

---

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/cc8631bf85dcebe9c1b197d0d9769d77c92709e1/gradio-4.44.1-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@cc8631bf85dcebe9c1b197d0d9769d77c92709e1#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/cc8631bf85dcebe9c1b197d0d9769d77c92709e1/gradio-client-1.5.2.tgz

Use Lite from this PR

<script type="module" src="https://gradio-lite-previews.s3.amazonaws.com/cc8631bf85dcebe9c1b197d0d9769d77c92709e1/dist/lite.js""></script>

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/imageeditor	minor
gradio	minor

• Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Fix limited brush colors in image editor

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

[pngwn]

I'm not sure about this. I understand the desire but don't know if this is the right UX. at the very least the CSS needs some tweaking to clean up the padding.

What do you think @hannahblair?

[maggieNeedsZzz]

Sorry, UX is not something I usually do. I can match the top margin to the bottom one. Is there anything else I should do?

[maggieNeedsZzz]

I know this is a small change, so I'll provide some context.

I was trying to use the image editor for drawing a semantic label image.
I have a model trained for semantic synthesis, a task which can be described as generating photorealistic images from semantic layouts. Typically, these layouts are user-drawn, similar to what can be seen in NVIDIA Canvas.

Popular datasets used to train models for this task like COCO-Stuff, Cityscapes, and ADE20K, make use of more than 4 labels in the semantic image, meaning more than 4 colors.

Therefore, the current limit on the number of brush colors makes using this component for this particular task very difficult.

I've looked for potential workarounds but couldn't find any. Apologies if I've missed something.

[pngwn]

Hey! Totally understand the use case and sorry it's taken us so long to get back to you! We've been a little busy planning the upcoming release. I think @hannahblair is gonna take a closer look at this as soon as possible!

Thanks again for submitting the PR and sorry for the delay!