Update server

.gitignore

@@ -167,4 +167,5 @@ cython_debug/
 /*.jpg
 /*.ipynb
 
-GenAI-Arena-hf-logs/vote_log/*
+GenAI-Arena-hf-logs/vote_log/*
+ksort-logs/

serve/Ksort.py

@@ -1,10 +1,10 @@
 import gradio as gr
-from PIL import Image, ImageDraw, ImageFont
+from PIL import Image, ImageDraw, ImageFont, ImageOps
 import os
 from .constants import KSORT_IMAGE_DIR
 from .vote_utils import save_any_image
 from .utils import disable_btn, enable_btn, invisible_btn
-from .upload import create_remote_directory, upload_image, upload_informance
+from .upload import create_remote_directory, upload_image, upload_informance, upload_ssh_all
 import json
 
 def reset_level(Top_btn):
@@ -149,14 +149,15 @@ def vote_submit(states, rank, request: gr.Request):
 def vote_ssh_submit(states, rank):
     conv_id = states[0].conv_id
     output_dir = create_remote_directory(conv_id)
-    upload_image(states, output_dir)
+    # upload_image(states, output_dir)
 
     data = {
         "models_name": [x.model_name for x in states],
         "img_rank": [x for x in rank],
     }
     output_file = os.path.join(output_dir, "informance.json")
-    upload_informance(data, output_file)
+    # upload_informance(data, output_file)
+    upload_ssh_all(states, output_dir, data, output_file)
 
     from .update_skill import update_skill
     update_skill(rank)
@@ -217,32 +218,62 @@ def text_response_rank_igm(generate_ig0, generate_ig1, generate_ig2, generate_ig
         if rank_list[num] in ['1', '2', '3', '4']:
             base_image = Image.fromarray(generate_ig[num]).convert("RGBA")
             if rank_list[num] == '1':
-                txt_layer = Image.new('RGBA', base_image.size, (0, 255, 0, 64))
+                border_color = (49, 139, 190)  
             elif rank_list[num] == '2':
-                txt_layer = Image.new('RGBA', base_image.size, (0, 255, 255, 64))
+                border_color = (109, 116, 187)
             elif rank_list[num] == '3':
-                txt_layer = Image.new('RGBA', base_image.size, (255, 0, 255, 64))
+                border_color = (159, 84, 152)  
             elif rank_list[num] == '4':
-                txt_layer = Image.new('RGBA', base_image.size, (255, 0, 0, 64))
-            draw = ImageDraw.Draw(txt_layer)
+                border_color = (174, 68, 125) 
+            border_size = 10  # Size of the border
+            base_image = ImageOps.expand(base_image, border=border_size, fill=border_color)
+
+            draw = ImageDraw.Draw(base_image)
             font = ImageFont.truetype("./serve/Arial.ttf", 86)
-            text_position = (156, 212)
+            text_position = (300, 50)
             if rank_list[num] == '1':
-                text_color = (0, 255, 0, 200)  
+                text_color = (49, 139, 190, 255)  
                 draw.text(text_position, Top1_text, font=font, fill=text_color)
             elif rank_list[num] == '2':
-                text_color = (0, 255, 255, 200)  
+                text_color = (109, 116, 187, 255)  
                 draw.text(text_position, Top2_text, font=font, fill=text_color)
             elif rank_list[num] == '3':
-                text_color = (255, 0, 255, 200)  
+                text_color = (159, 84, 152, 255)  
                 draw.text(text_position, Top3_text, font=font, fill=text_color)
             elif rank_list[num] == '4':
-                text_color = (255, 0, 0, 200)  
+                text_color = (174, 68, 125, 255)  
                 draw.text(text_position, Top4_text, font=font, fill=text_color)
+            base_image = base_image.convert("RGB")
+            chatbot.append(base_image.copy())
+
+            # base_image = Image.fromarray(generate_ig[num]).convert("RGBA")
+            # if rank_list[num] == '1':
+            #     txt_layer = Image.new('RGBA', base_image.size, (0, 255, 0, 64))
+            # elif rank_list[num] == '2':
+            #     txt_layer = Image.new('RGBA', base_image.size, (0, 255, 255, 64))
+            # elif rank_list[num] == '3':
+            #     txt_layer = Image.new('RGBA', base_image.size, (255, 0, 255, 64))
+            # elif rank_list[num] == '4':
+            #     txt_layer = Image.new('RGBA', base_image.size, (255, 0, 0, 64))
+            # draw = ImageDraw.Draw(txt_layer)
+            # font = ImageFont.truetype("./serve/Arial.ttf", 86)
+            # text_position = (156, 212)
+            # if rank_list[num] == '1':
+            #     text_color = (0, 255, 0, 200)  
+            #     draw.text(text_position, Top1_text, font=font, fill=text_color)
+            # elif rank_list[num] == '2':
+            #     text_color = (0, 255, 255, 200)  
+            #     draw.text(text_position, Top2_text, font=font, fill=text_color)
+            # elif rank_list[num] == '3':
+            #     text_color = (255, 0, 255, 200)  
+            #     draw.text(text_position, Top3_text, font=font, fill=text_color)
+            # elif rank_list[num] == '4':
+            #     text_color = (255, 0, 0, 200)  
+            #     draw.text(text_position, Top4_text, font=font, fill=text_color)
 
-            combined = Image.alpha_composite(base_image, txt_layer)
-            combined = combined.convert("RGB")
-            chatbot.append(combined.copy())
+            # combined = Image.alpha_composite(base_image, txt_layer)
+            # combined = combined.convert("RGB")
+            # chatbot.append(combined.copy())
         else:
             return generate_ig + ["error rank"] + ["wrong"] + [rank]
     rank_str = ""
@@ -253,35 +284,72 @@ def text_response_rank_igm(generate_ig0, generate_ig1, generate_ig2, generate_ig
     
     return chatbot + [rank_str] + ["right"] + [rank]
 
+# def add_foreground(image, vote_level, Top1_text, Top2_text, Top3_text, Top4_text):
+#     base_image = Image.fromarray(image).convert("RGBA")
+#     if vote_level == 0:
+#         txt_layer = Image.new('RGBA', base_image.size, (0, 255, 0, 64))
+#     elif vote_level == 1:
+#         txt_layer = Image.new('RGBA', base_image.size, (0, 255, 255, 64))
+#     elif vote_level == 2:
+#         txt_layer = Image.new('RGBA', base_image.size, (255, 0, 255, 64))
+#     elif vote_level == 3:
+#         txt_layer = Image.new('RGBA', base_image.size, (255, 0, 0, 64))
+
+#     draw = ImageDraw.Draw(txt_layer)
+#     font = ImageFont.truetype("./serve/Arial.ttf", 86)
+    
+#     text_position = (156, 212)
+#     if vote_level == 0:
+#         text_color = (0, 255, 0, 200)  
+#         draw.text(text_position, Top1_text, font=font, fill=text_color)
+#     elif vote_level == 1:
+#         text_color = (0, 255, 255, 200)  
+#         draw.text(text_position, Top2_text, font=font, fill=text_color)
+#     elif vote_level == 2:
+#         text_color = (255, 0, 255, 200)  
+#         draw.text(text_position, Top3_text, font=font, fill=text_color)
+#     elif vote_level == 3:
+#         text_color = (255, 0, 0, 200)  
+#         draw.text(text_position, Top4_text, font=font, fill=text_color)
+
+#     combined = Image.alpha_composite(base_image, txt_layer)
+#     combined = combined.convert("RGB")
+#     return combined
 def add_foreground(image, vote_level, Top1_text, Top2_text, Top3_text, Top4_text):
     base_image = Image.fromarray(image).convert("RGBA")
     if vote_level == 0:
-        txt_layer = Image.new('RGBA', base_image.size, (0, 255, 0, 64))
+        border_color = (49, 139, 190)  
     elif vote_level == 1:
-        txt_layer = Image.new('RGBA', base_image.size, (0, 255, 255, 64))
+        border_color = (109, 116, 187)
     elif vote_level == 2:
-        txt_layer = Image.new('RGBA', base_image.size, (255, 0, 255, 64))
+        border_color = (159, 84, 152)  
     elif vote_level == 3:
-        txt_layer = Image.new('RGBA', base_image.size, (255, 0, 0, 64))
+        border_color = (174, 68, 125) 
+    border_size = 10  # Size of the border
+    base_image = ImageOps.expand(base_image, border=border_size, fill=border_color)
 
-    draw = ImageDraw.Draw(txt_layer)
+    draw = ImageDraw.Draw(base_image)
     font = ImageFont.truetype("./serve/Arial.ttf", 86)
     
-    text_position = (156, 212)
+    text_position = (300, 50)
     if vote_level == 0:
-        text_color = (0, 255, 0, 200)  
+        text_color = (49, 139, 190, 255)  
         draw.text(text_position, Top1_text, font=font, fill=text_color)
     elif vote_level == 1:
-        text_color = (0, 255, 255, 200)  
+        text_color = (109, 116, 187, 255)  
         draw.text(text_position, Top2_text, font=font, fill=text_color)
     elif vote_level == 2:
-        text_color = (255, 0, 255, 200)  
+        text_color = (159, 84, 152, 255)  
         draw.text(text_position, Top3_text, font=font, fill=text_color)
     elif vote_level == 3:
-        text_color = (255, 0, 0, 200)  
+        text_color = (174, 68, 125, 255)  
         draw.text(text_position, Top4_text, font=font, fill=text_color)
 
-    combined = Image.alpha_composite(base_image, txt_layer)
-    combined = combined.convert("RGB")
-    return combined
-
+    # combined = Image.alpha_composite(base_image, txt_layer)
+    base_image = base_image.convert("RGB")
+    return base_image
+def add_green_border(image):
+    border_color = (0, 255, 0)  # RGB for green
+    border_size = 10  # Size of the border
+    img_with_border = ImageOps.expand(image, border=border_size, fill=border_color)
+    return img_with_border

serve/button.css

@@ -0,0 +1,24 @@
+/* style.css */
+.custom-button {
+    background-color: greenyellow; /* 背景颜色 */
+    color: white;            /* 文字颜色 */
+    border: none;            /* 无边框 */
+    padding: 10px 20px;      /* 内边距 */
+    text-align: center;      /* 文本居中 */
+    text-decoration: none;   /* 无下划线 */
+    display: inline-block;   /* 行内块 */
+    font-size: 16px;         /* 字体大小 */
+    margin: 4px 2px;         /* 外边距 */
+    cursor: pointer;         /* 鼠标指针 */
+    border-radius: 5px;      /* 圆角边框 */
+}
+
+.custom-button:hover {
+    background-color: darkgreen; /* 悬停时的背景颜色 */
+}
+/* css = """
+#warning {background: red;} 
+
+.feedback {font-size: 24px !important;}
+.feedback textarea {font-size: 24px !important;}
+""" */

serve/gradio_web.py

@@ -33,7 +33,7 @@ from .Ksort import (
     text_response_rank_igm,
 )
 from functools import partial
-        
+
 def build_side_by_side_ui_anony(models):
     notice_markdown = """
 # ⚔️  Text2Image-Arena ⚔️
@@ -124,77 +124,77 @@ Find out who is the 🥇conditional image generation models! More models are goi
             )
             Submit_btn = gr.Button(value="🤝  Submit", visible=False, interactive=False)
         with gr.Row():
-            with gr.Blocks(): 
+            with gr.Blocks():
                 with gr.Row():
                     with gr.Column(scale=1, min_width=10):
                         A1_btn = gr.Button(
-                            value="1", visible=False, interactive=False
+                            value="1", visible=False, interactive=False, elem_id="btncolor1", elem_classes="custom-button"
                         )
                     with gr.Column(scale=1, min_width=10):
                         A2_btn = gr.Button(
-                            value="2", visible=False, interactive=False
+                            value="2", visible=False, interactive=False, elem_id="btncolor2", elem_classes="custom-button"
                         )
                     with gr.Column(scale=1, min_width=10):
                         A3_btn = gr.Button(
-                            value="3", visible=False, interactive=False
+                            value="3", visible=False, interactive=False, elem_id="btncolor3", elem_classes="custom-button"
                         )
                     with gr.Column(scale=1, min_width=10):
                         A4_btn = gr.Button(
-                            value="4", visible=False, interactive=False
+                            value="4", visible=False, interactive=False, elem_id="btncolor4", elem_classes="custom-button"
                         )
             with gr.Blocks(): 
                 with gr.Row():
                     with gr.Column(scale=1, min_width=10):
                         B1_btn = gr.Button(
-                            value="1", visible=False, interactive=False
+                            value="1", visible=False, interactive=False, elem_id="btncolor1", elem_classes="custom-button"
                         )
                     with gr.Column(scale=1, min_width=10):
                         B2_btn = gr.Button(
-                            value="2", visible=False, interactive=False
+                            value="2", visible=False, interactive=False, elem_id="btncolor2", elem_classes="custom-button"
                         )
                     with gr.Column(scale=1, min_width=10):
                         B3_btn = gr.Button(
-                            value="3", visible=False, interactive=False
+                            value="3", visible=False, interactive=False, elem_id="btncolor3", elem_classes="custom-button"
                         )
                     with gr.Column(scale=1, min_width=10):
                         B4_btn = gr.Button(
-                            value="4", visible=False, interactive=False
+                            value="4", visible=False, interactive=False, elem_id="btncolor4", elem_classes="custom-button"
                         )
             with gr.Blocks(): 
                 with gr.Row():
                     with gr.Column(scale=1, min_width=10):
                         C1_btn = gr.Button(
-                            value="1", visible=False, interactive=False
+                            value="1", visible=False, interactive=False, elem_id="btncolor1", elem_classes="custom-button"
                         )
                     with gr.Column(scale=1, min_width=10):
                         C2_btn = gr.Button(
-                            value="2", visible=False, interactive=False
+                            value="2", visible=False, interactive=False, elem_id="btncolor2", elem_classes="custom-button"
                         )
                     with gr.Column(scale=1, min_width=10):
                         C3_btn = gr.Button(
-                            value="3", visible=False, interactive=False
+                            value="3", visible=False, interactive=False, elem_id="btncolor3", elem_classes="custom-button"
                         )
                     with gr.Column(scale=1, min_width=10):
                         C4_btn = gr.Button(
-                            value="4", visible=False, interactive=False
+                            value="4", visible=False, interactive=False, elem_id="btncolor4", elem_classes="custom-button"
                         )
             with gr.Blocks(): 
                 with gr.Row():
                     with gr.Column(scale=1, min_width=10):
                         D1_btn = gr.Button(
-                            value="1", visible=False, interactive=False
+                            value="1", visible=False, interactive=False, elem_id="btncolor1", elem_classes="custom-button"
                         )
                     with gr.Column(scale=1, min_width=10):
                         D2_btn = gr.Button(
-                            value="2", visible=False, interactive=False
+                            value="2", visible=False, interactive=False, elem_id="btncolor2", elem_classes="custom-button"
                         )
                     with gr.Column(scale=1, min_width=10):
                         D3_btn = gr.Button(
-                            value="3", visible=False, interactive=False
+                            value="3", visible=False, interactive=False, elem_id="btncolor3", elem_classes="custom-button"
                         )
                     with gr.Column(scale=1, min_width=10):
                         D4_btn = gr.Button(
-                            value="4", visible=False, interactive=False
+                            value="4", visible=False, interactive=False, elem_id="btncolor4", elem_classes="custom-button"
                         )
 
     with gr.Row():

serve/upload.py

@@ -18,33 +18,35 @@ def get_image_from_url(image_url):
     response.raise_for_status()  # success
     return Image.open(io.BytesIO(response.content))
 
-def upload_image_via_sftp(ssh, image, remote_image_path):
-    if isinstance(image, str):
-        print("get url image")
-        image = get_image_from_url(image)
-    with ssh.open_sftp() as sftp:
-        with io.BytesIO() as image_byte_stream:
-            image.save(image_byte_stream, format='JPEG')
-            image_byte_stream.seek(0)  
-            sftp.putfo(image_byte_stream, remote_image_path)
-        print(f"Successfully uploaded image to {remote_image_path}")
+# def upload_image_via_sftp(ssh, image, remote_image_path):
+#     if isinstance(image, str):
+#         print("get url image")
+#         image = get_image_from_url(image)
+#     with ssh.open_sftp() as sftp:
+#         with io.BytesIO() as image_byte_stream:
+#             image.save(image_byte_stream, format='JPEG')
+#             image_byte_stream.seek(0)  
+#             sftp.putfo(image_byte_stream, remote_image_path)
+#         print(f"Successfully uploaded image to {remote_image_path}")
         
-def upload_json_via_sftp(ssh, data, remote_json_path):
-    json_data = json.dumps(data, indent=4)
-    with ssh.open_sftp() as sftp:
-        with io.BytesIO(json_data.encode('utf-8')) as json_byte_stream:
-            sftp.putfo(json_byte_stream, remote_json_path)
-        print(f"Successfully uploaded JSON data to {remote_json_path}")
+# def upload_json_via_sftp(ssh, data, remote_json_path):
+#     json_data = json.dumps(data, indent=4)
+#     with ssh.open_sftp() as sftp:
+#         with io.BytesIO(json_data.encode('utf-8')) as json_byte_stream:
+#             sftp.putfo(json_byte_stream, remote_json_path)
+#         print(f"Successfully uploaded JSON data to {remote_json_path}")
 
 def upload_image(states, output_dir):
-    ssh = create_ssh_client(SSH_SERVER, SSH_PORT, SSH_USER, SSH_PASSWORD)
-    for i in range(len(states)):
-        output_file = os.path.join(output_dir, f"{i}.jpg")
-        upload_image_via_sftp(ssh, states[i].output, output_file)
+    pass
+    # ssh = create_ssh_client(SSH_SERVER, SSH_PORT, SSH_USER, SSH_PASSWORD)
+    # for i in range(len(states)):
+    #     output_file = os.path.join(output_dir, f"{i}.jpg")
+    #     upload_image_via_sftp(ssh, states[i].output, output_file)
 
 def upload_informance(data, data_path):
-    ssh = create_ssh_client(SSH_SERVER, SSH_PORT, SSH_USER, SSH_PASSWORD)
-    upload_json_via_sftp(ssh, data, data_path)
+    pass
+    # ssh = create_ssh_client(SSH_SERVER, SSH_PORT, SSH_USER, SSH_PASSWORD)
+    # upload_json_via_sftp(ssh, data, data_path)
 
 def create_remote_directory(remote_directory):
     ssh = create_ssh_client(SSH_SERVER, SSH_PORT, SSH_USER, SSH_PASSWORD)
@@ -57,4 +59,27 @@ def create_remote_directory(remote_directory):
         print(f"Directory {remote_directory} created successfully.")
     # ssh.close()
     return f'{SSH_LOG}/{remote_directory}'
-    
+    
+def upload_ssh_all(states, output_dir, data, data_path):
+    ssh = create_ssh_client(SSH_SERVER, SSH_PORT, SSH_USER, SSH_PASSWORD)
+    output_file_list = []
+    image_list = []
+    for i in range(len(states)):
+        output_file = os.path.join(output_dir, f"{i}.jpg")
+        output_file_list.append(output_file)
+        image_list.append(states[i].output)
+
+    with ssh.open_sftp() as sftp:
+        for i in range(len(output_file_list)):
+            if isinstance(image_list[i], str):
+                print("get url image")
+                image_list[i] = get_image_from_url(image_list[i])
+            with io.BytesIO() as image_byte_stream:
+                image_list[i].save(image_byte_stream, format='JPEG')
+                image_byte_stream.seek(0)  
+                sftp.putfo(image_byte_stream, output_file_list[i])
+            print(f"Successfully uploaded image to {output_file_list[i]}")
+        json_data = json.dumps(data, indent=4)
+        with io.BytesIO(json_data.encode('utf-8')) as json_byte_stream:
+            sftp.putfo(json_byte_stream, data_path)
+        print(f"Successfully uploaded JSON data to {data_path}")

serve/utils.py

@@ -46,7 +46,7 @@ acknowledgment_md = """
     <p> Our codebase is built upon <a href="https://github.com/lm-sys/FastChat" target="_blank">FastChat</a>, <a href="https://github.com/TIGER-AI-Lab/ImagenHub" target="_blank">ImagenHub</a> and <a href="https://github.com/TIGER-AI-Lab/VideoGenHub" target="_blank">VideoGenHub</a>.</p>
 </div>
 """
-
+color = "rgb(49, 139, 190)"
 block_css = """
 #notice_markdown {
     font-size: 110%
@@ -96,8 +96,40 @@ footer {
     width: auto;
     max-width: 30%;}
 }
-"""
 
+.custom-button {
+    border-radius: 8px;
+}
+#btncolor1 {background: rgb(49, 139, 190);} 
+#btncolor2 {background: rgb(109, 116, 187);} 
+#btncolor3 {background: rgb(159, 84, 152);} 
+#btncolor4 {background: rgb(174, 68, 125);} 
+"""
+# .custom-button {
+#     padding: 10px 15px;
+#     text-align: center;
+#     text-decoration: none;
+#     display: inline-block;
+#     font-size: 16px;
+#     cursor: pointer;
+#     border-radius: 8px;
+# }
+# {
+# background-color: green; /* 背景颜色 */
+# color: white;            /* 文字颜色 */
+# border: none;            /* 无边框 */
+# padding: 10px 20px;      /* 内边距 */
+# text-align: center;      /* 文本居中 */
+# text-decoration: none;   /* 无下划线 */
+# display: inline-block;   /* 行内块 */
+# font-size: 16px;         /* 字体大小 */
+# margin: 4px 2px;         /* 外边距 */
+# cursor: pointer;         /* 鼠标指针 */
+# border-radius: 5px;      /* 圆角边框 */
+# }
+# .custom-button:hover {
+# background-color: darkgreen; /* 悬停时的背景颜色 */
+# }
 def enable_vote_buttons():
     return tuple(gr.update(visible=True, interactive=i<=4) for i in range(6))
 def disable_vote_buttons():