Add card design functionality to app.py

app.py

@@ -3,6 +3,7 @@ from PIL import Image as PIL_Image # Renaming to avoid conflict with Image from
 from io import BytesIO
 import json
 import os
+import glob
 
 import src.constants as constants
 
@@ -21,6 +22,13 @@ with open(f'src/display_message_{language}.json', 'r', encoding='utf-8') as f:
     model_type_dict = display_message_dict['model_type_dict']
     color_dict = display_message_dict['color_dict']
 
+default_card_design_image_dict = {value: PIL_Image.open(constants.back_card_img_dict[key]).convert('RGB') for (key, value) in model_type_dict.items()}
+def update_card_image(card_design_upload, card_design_dropdown, update_type):
+    if update_type == 'Upload':
+        return card_design_upload['background']
+    else:
+        return default_card_design_image_dict[card_design_dropdown]
+
 def create_3dmodel(model_no, title, color, mark, historic_site_type, difficulty, description, is_thick, image):
 
     img_bytearray = BytesIO()
@@ -83,6 +91,18 @@ with gr.Blocks() as demo:
             with gr.Column():
                 title = gr.Textbox(label=display_message_dict['label_title'], placeholder=display_message_dict['placeholder_title'])
                 model_type = gr.Radio([(model_type_dict[key], key) for key in model_type_dict], value='2', label=display_message_dict['label_card_type'])
+                
+                with gr.Row():
+                    with gr.Column():
+                            card_design_dropdown = gr.Dropdown(list(default_card_design_image_dict.keys()), label=display_message_dict['label_card_design_sample'])
+                            card_design_upload = gr.ImageEditor(image_mode='RGB', sources="upload", type="pil", crop_size="868:1213", label=display_message_dict['label_card_design_upload'])                                                            
+                    with gr.Column():                        
+                        card_design_preview = gr.Image(label=display_message_dict['label_card_design_preview'], type="pil")
+                    card_design_upload.change(fn=lambda card_design_upload, card_design_dropdown: update_card_image(card_design_upload, card_design_dropdown, 'Upload'), 
+                                              inputs=[card_design_upload, card_design_dropdown], outputs=card_design_preview)
+                    card_design_dropdown.change(fn=lambda card_design_upload, card_design_dropdown: update_card_image(card_design_upload, card_design_dropdown, 'Drop'), 
+                                                inputs=[card_design_upload, card_design_dropdown], outputs=card_design_preview)
+
             with gr.Column():
                 description = gr.Textbox(lines=2, label=display_message_dict['label_description'], placeholder=display_message_dict['placeholder_description'])
                 is_thick = gr.Checkbox(label=display_message_dict['label_is_thick'], value=False, info=display_message_dict['info_is_thick'])

src/display_message_en.json

@@ -11,6 +11,9 @@
         "3": "Fossil",
         "4": "Cat"
     },
+    "label_card_design_upload": "Card Design (Upload)",
+    "label_card_design_sample": "Card Design (Sample)",
+    "label_card_design_preview": "Card Design Preview",
     "label_description": "Description",
     "placeholder_description": "Please provide a brief description, up to about 90 characters.",
     "label_is_thick": "Thickness",

src/display_message_ja.json

@@ -11,6 +11,9 @@
         "3": "化石",
         "4": "猫"
     },
+    "label_card_design_upload": "カードデザイン (アップロード)",
+    "label_card_design_sample": "カードデザイン (サンプル)",
+    "label_card_design_preview": "カードデザインプレビュー",
     "label_description": "説明文",
     "placeholder_description": "全角50字程度までの簡単な説明を記載して下さい。",
     "label_is_thick": "厚み",