mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-03-31 12:20:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

add example component for color picker (#1779)

Browse Source
This commit is contained in:
pngwn 2022-07-13 16:35:43 +01:00 committed by GitHub
parent 260fbb3564
commit c323aac274
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
demo/color_picker/lion.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

16
demo/color_picker/run.py
View File

@ -1,12 +1,11 @@
import gradio as gr
import numpy as np
import os
from PIL import Image, ImageColor
def change_color(icon, color):
"""
Function that given an icon in .png format changes its color
Args:
@ -19,24 +18,27 @@ def change_color(icon, color):
img = img.convert("RGBA")
image_np = np.array(icon)
_, _, _, alpha = image_np.T
mask = (alpha > 0)
mask = alpha > 0
image_np[..., :-1][mask.T] = ImageColor.getcolor(color, "RGB")
edited_image = Image.fromarray(image_np)
return edited_image
inputs = [
gr.Image(label="icon", type="pil", image_mode="RGBA"),
gr.ColorPicker(label="color")
]
gr.Image(label="icon", type="pil", image_mode="RGBA"),
gr.ColorPicker(label="color"),
]
outputs = gr.Image(label="colored icon")
demo = gr.Interface(
fn=change_color,
inputs=inputs,
outputs=outputs,
examples=[
[os.path.join(os.path.dirname(__file__), "lion.jpg"), "#ff0000"],
[os.path.join(os.path.dirname(__file__), "lion.jpg"), "#0000FF"],
],
)
if __name__ == "__main__":
demo.launch()

8
ui/packages/app/src/components/Dataset/ExampleComponents/ColorPicker.svelte Normal file
View File

@ -0,0 +1,8 @@
<script lang="ts">
export let value: string;
</script>
<div
class="w-10 h-10 border dark:border-slate-300"
style="background-color: {value}"
/>

4
ui/packages/app/src/components/Dataset/directory.ts
View File

@ -11,6 +11,7 @@ import ExampleVideo from "./ExampleComponents/Video.svelte";
import ExampleFile from "./ExampleComponents/File.svelte";
import ExampleDataframe from "./ExampleComponents/Dataframe.svelte";
import ExampleModel3D from "./ExampleComponents/Model3D.svelte";
import ExampleColorPicker from "./ExampleComponents/ColorPicker.svelte";
export const component_map = {
dropdown: ExampleDropdown,
@ -25,5 +26,6 @@ export const component_map = {
video: ExampleVideo,
file: ExampleFile,
dataframe: ExampleDataframe,
model3d: ExampleModel3D
model3d: ExampleModel3D,
colorpicker: ExampleColorPicker
};