update html

app.py

@@ -8,11 +8,12 @@ from skimage.exposure  import match_histograms
 from gradio_utils import save_image 
 from color_utils import simple_white_balance,apply_tone_curve,curve_midtones,create_left_half_mask,create_top_half_mask,create_compare_image ,mirror
 
-def color_match(base_image,cropped_image):
-    reference = np.array(base_image)
-    target =np.array(cropped_image)
+def color_match(base_image,cropped_image,color_match_format="RGB"):
+    reference = np.array(base_image.convert(color_match_format))
+    target =np.array(cropped_image.convert(color_match_format))
     matched = match_histograms(target, reference,channel_axis=-1)
-    return Image.fromarray(matched)
+
+    return Image.fromarray(matched,mode=color_match_format)
 
 
 
@@ -51,7 +52,8 @@ def create_enhanced_image(reference_image,brightness=1.0,color=1.0,contrast=1.0,
 
 
 
-def process_images(reference_image_dict,target_image_dict,mirror_target=False,middle_tone_value=0.75):
+def process_images(reference_image_dict,target_image_dict,mirror_target=False,middle_tone_value=0.75,color_match_format="RGB",progress=gr.Progress(track_tqdm=True)):
+    progress(0, desc="Start color matching")
     if reference_image_dict == None:
         raise gr.Error("Need reference_image")
 
@@ -75,18 +77,21 @@ def process_images(reference_image_dict,target_image_dict,mirror_target=False,mi
     left_mask = create_left_half_mask(reference_image)
     top_mask = create_top_half_mask(reference_image)
 
-    color_matched = color_match(reference_image,target_image)
+    color_matched = color_match(reference_image,target_image,color_match_format)
     color_matched_resized = color_matched.resize(reference_image.size)
     matched_path = save_image(color_matched.convert("RGB"))
     images.append((matched_path,"color matched"))
-    
+    progress(0.2)
+
     reference_mix_left,reference_mix_right = create_compare_image(reference_image,color_matched_resized,left_mask)
     images.append((save_image(reference_mix_left.convert("RGB"),extension="webp"),"mixed_left"))
     images.append((save_image(reference_mix_right.convert("RGB"),extension="webp"),"mixed_right"))
+    progress(0.4)
 
     reference_mix_top,reference_mix_bottom = create_compare_image(reference_image,color_matched_resized,top_mask)
     images.append((save_image(reference_mix_top.convert("RGB"),extension="webp"),"mixed_top"))
     images.append((save_image(reference_mix_bottom.convert("RGB"),extension="webp"),"mixed_bottom"))
+    progress(0.6)
 
     color_matched_tone = apply_tone_curve(color_matched.convert("RGB"),curve_midtones,middle_tone_value)
     color_matched_tone_resized = color_matched_tone.resize(reference_image.size)
@@ -95,11 +100,12 @@ def process_images(reference_image_dict,target_image_dict,mirror_target=False,mi
     reference_mix_left,reference_mix_right = create_compare_image(reference_image,color_matched_tone_resized,left_mask)
     images.append((save_image(reference_mix_left.convert("RGB"),extension="webp"),"mixed_left"))
     images.append((save_image(reference_mix_right.convert("RGB"),extension="webp"),"mixed_right"))
-
+    progress(0.8)
+    
     reference_mix_top,reference_mix_bottom = create_compare_image(reference_image,color_matched_tone_resized,top_mask)
     images.append((save_image(reference_mix_top.convert("RGB"),extension="webp"),"mixed_top"))
     images.append((save_image(reference_mix_bottom.convert("RGB"),extension="webp"),"mixed_bottom"))
-
+    progress(1.0)
 
     return images
 
@@ -188,6 +194,7 @@ with gr.Blocks(css=css, elem_id="demo-container") as demo:
                             maximum=2.0,
                             step=0.01,
                             value=0.75)
+                            color_match_format = gr.Dropdown(label="Format",choices=["RGB","CMYK","YCbCr","HSV","LAB"],value="RGB",info="RGB and CMYK seems same,others are broken")
                         
                 with gr.Column():
                     image_out = gr.Gallery(height=800,label="Output", elem_id="output-img",format="webp", preview=True)
@@ -199,7 +206,7 @@ with gr.Blocks(css=css, elem_id="demo-container") as demo:
     
     gr.on(
         [btn1.click],
-        fn=process_images, inputs=[reference_image,target_image,mirror_target,middle_tone_value], outputs =[image_out], api_name='infer'
+        fn=process_images, inputs=[reference_image,target_image,mirror_target,middle_tone_value,color_match_format], outputs =[image_out], api_name='infer'
     )
     gr.Examples(
                 examples =[

demo_header.html

@@ -1,13 +1,18 @@
 <div style="text-align: center;">
     <h1>
-        Histgram Color Matching
+        Histgram Color Matching(scikit-image)
     </h1>
     <div  class="grid-container">
+        <img src="https://akjava.github.io/AIDiagramChatWithVoice-FaceCharacter/webp/128/00533245.webp" alt="Mediapipe Face Detection" class="image">
+       
+        <p class="text">
         Body-to-body image color matching will never work; try face-to-face.keep eyes and hair color same<br>
         Usually default is best.To similar lighting angle,mirror(flip horizental) is important<br>
         Adding color paint(pink or green) can change hue(but not recommend to add target image)<br>
         modify tone-curve adjust brightness.However most of the case  it's the lighting's issue, so there's not much we can do <br>
+        This is scikit-image version,maybe using another lib get another result I've never tried yet.
         </p>
     </div>
+
     
 </div>

demo_tools.html

@@ -1,4 +1,10 @@
 <div style="text-align: center;">
-    <p><a href="https://huggingface.co/spaces/Akjava/mediapipe-face-detect">Mediapipe Face detector</a></p>
+    <p>
+        <a href="https://huggingface.co/spaces/Akjava/mediapipe-face-detect">Mediapipe Face detector</a> | 
+        <a href="https://huggingface.co/spaces/Akjava/mediapipe-face-crop-and-replace">Face Crop and Replace</a>  | 
+        <a href="https://huggingface.co/spaces/Akjava/mediapipe-68-points-facial-landmark">68 points landmark</a> | 
+        <a href="https://huggingface.co/spaces/Akjava/mediapipe-68-points-facial-mask">Create 68 points Parts Mask</a> | 
+        <a href="https://huggingface.co/spaces/Akjava/histgram-color-matching">Histgram Color Matching</a>
+    </p>
     <p></p> 
 </div>