add tracked files

.gitattributes

@@ -33,3 +33,10 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+example_images/example_style filter=lfs diff=lfs merge=lfs -text
+example_images/gallery filter=lfs diff=lfs merge=lfs -text
+example_images/templates filter=lfs diff=lfs merge=lfs -text
+example_images/banner.png filter=lfs diff=lfs merge=lfs -text
+example_images/banner2.png filter=lfs diff=lfs merge=lfs -text
+example_images filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,25 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+src/__pycache__/
+
+# C extensions
+*.so
+
+# Distribution / packaging
+bin/
+build/
+develop-eggs/
+dist/
+eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+*.egg-info/
+.installed.cfg
+*.egg
+
+.DS_Store
+workdir/

app.py

@@ -0,0 +1,273 @@
+'''
+AnyText: Multilingual Visual Text Generation And Editing
+Paper: https://arxiv.org/abs/2311.03054
+Code: https://github.com/tyxsspa/AnyText
+Copyright (c) Alibaba, Inc. and its affiliates.
+'''
+import os
+import time
+import uuid
+import cv2
+import gradio as gr
+import re
+import json
+import argparse
+import random
+from src.generation import call_generation
+from src.util import upload_np_2_oss
+
+def count_lines(prompt):
+    prompt = prompt.replace('“', '"')
+    prompt = prompt.replace('”', '"')
+    p = '"(.*?)"'
+    strs = re.findall(p, prompt)
+    if len(strs) == 0:
+        strs = [' ']
+    return len(strs)
+
+
+def process(mode, prompt, texts, texts2, layout_radio, sort_radio, revise_pos, base_model_path, lora_path_ratio, show_debug, img_count, ddim_steps, w, h, strength, cfg_scale, seed, eta, a_prompt, n_prompt):
+    texts = '"' + texts + '"'
+    n_lines = count_lines(texts)
+    if texts2 != "":
+        texts2 = '"' + texts2 + '"'
+        n_lines += count_lines(texts2)
+        texts += texts2
+
+    layout_dict = {"top": "example_images/templates/top_512_512.png",
+                   "down": "example_images/templates/bottom_512_512.png",
+                   "left": "example_images/templates/left_512_512.png",
+                   "right": "example_images/templates/right_512_512.png",
+                   "top two": "example_images/templates/top2_512_512.png",
+                   "down two": "example_images/templates/bottom2_512_512.png",
+                   "left and right": "example_images/templates/left_right_512_512.png",
+                   "top and down": "example_images/templates/top_bottom_512_512.png"}
+
+
+    temp_path = layout_dict[layout_radio]
+
+    pos_imgs = cv2.imread(temp_path)
+    pos_imgs = cv2.resize(pos_imgs, (w, h), interpolation=cv2.INTER_NEAREST)
+
+    pos_imgs_url = upload_np_2_oss(pos_imgs, 'pos_imgs.png')
+
+    print(pos_imgs_url)
+    
+    
+    results = call_generation(prompt + texts, pos_imgs_url, lora_path_ratio, w, h, img_count)
+
+    return results
+
+
+
+is_t2i = 'true'
+block = gr.Blocks(css='css/style.css', theme=gr.themes.Soft()).queue()
+
+with open('javascript/bboxHint.js', 'r') as file:
+    value = file.read()
+escaped_value = json.dumps(value)
+
+with block:
+    block.load(fn=None,
+               _js=f"""() => {{
+               const script = document.createElement("script");
+               const text =  document.createTextNode({escaped_value});
+               script.appendChild(text);
+               document.head.appendChild(script);
+               }}""")
+    gr.HTML('<div style="text-align: center; margin: 20px auto;"> \
+            <img id="banner" src="https://modelscope.cn/api/v1/studio/iic/mememaster/repo?Revision=master&FilePath=example_images/banner2.png" alt="anytext_meme"> <br>  \
+            [<a href="https://arxiv.org/abs/2311.03054" style="color:blue; font-size:18px;">arXiv</a>] \
+            [<a href="https://github.com/tyxsspa/AnyText" style="color:blue; font-size:18px;">Code</a>] \
+            [<a href="https://modelscope.cn/models/damo/cv_anytext_text_generation_editing/summary" style="color:blue; font-size:18px;">ModelScope</a>]\
+            [<a href="https://huggingface.co/spaces/modelscope/AnyText" style="color:blue; font-size:18px;">HuggingFace</a>]\
+            version: 0.1.0 </div>')
+    with gr.Row(variant='compact'):
+        with gr.Accordion('🕹Instructions', open=True,):
+                with gr.Tabs():
+                    gr.Markdown('<span style="color:black;font-size:16px">Step1: Choose meme style</span>')
+                    gr.Markdown('<span style="color:black;font-size:16px">Step2: Write texts (support 1-2 lines/Chinese and English)</span>')
+                    gr.Markdown('<span style="color:black;font-size:16px">Step3: Choose texts layout</span>')
+                    gr.Markdown('<span style="color:black;font-size:16px">Step4: Generate meme</span>')             
+    
+    
+    with gr.Tab("🖼Meme Gallery"):
+        gallery = gr.Gallery(
+            label="Generated images", value = [os.path.join('example_images/gallery/',path) for path in os.listdir('example_images/gallery/')],show_label=False, elem_id="gallery"
+                , columns=[4], rows=[1], object_fit="contain", height="auto")     
+    
+    with gr.Tab("🔧Meme Generation"):
+        with gr.Row(variant='compact'):
+            with gr.Column() as left_part:
+                pass
+            with gr.Column():
+                result_gallery = gr.Gallery(label='results', show_label=True, preview=True, columns=2, allow_preview=True, height=600)
+                # result_info = gr.Markdown('', visible=False)
+            with left_part:
+                with gr.Accordion('🛠Parameters', open=False):
+                    # with gr.Row(variant='compact'):
+                    prompt = gr.Textbox(label="Prompt", elem_id='t2i_prompt', value='Cute Chinese Dragon, (Best quality: 1.1), (Realistic: 1.1), (Photography: 1.1), (highly details: 1.1) with the words ', visible=False)
+                    with gr.Row(variant='compact'):
+                        img_count = gr.Slider(label="image number", minimum=1, maximum=4, value=4, step=1)
+                        ddim_steps = gr.Slider(label="steps", minimum=1, maximum=100, value=20, step=1, visible=False)
+                    with gr.Row(variant='compact'):
+                        image_width = gr.Slider(label="width", minimum=256, maximum=768, value=512, step=64)
+                        image_height = gr.Slider(label="height", minimum=256, maximum=768, value=512, step=64)
+                        strength = gr.Slider(label="Strength", minimum=0.0, maximum=2.0, value=1.0, step=0.01, visible=False)
+                        cfg_scale = gr.Slider(label="CFG scale", minimum=0.1, maximum=30.0, value=9.0, step=0.1, visible=False)
+                        seed = gr.Slider(label="seed", minimum=-1, maximum=99999999, step=1, randomize=False, value=-1, visible=False)
+                        eta = gr.Number(label="eta (DDIM)", value=0.0, visible=False)
+                        show_debug = gr.Checkbox(label='debug', value=False, visible=False)
+                    a_prompt = gr.Textbox(label="Added Prompt", value='best quality, extremely detailed,4k, HD, supper legible text,  clear text edges,  clear strokes, neat writing, no watermarks', visible=False)
+                    n_prompt = gr.Textbox(label="Negative Prompt", value='low-res, bad anatomy, extra digit, fewer digits, cropped, worst quality, low quality, watermark, unreadable text, messy words, distorted text, disorganized writing, advertising picture', visible=False)
+                base_model_path = gr.Textbox(label='Base Model Path', visible=False, value='./')
+                lora_path_ratio = gr.Textbox(label='LoRA Path and Ratio', visible=False, value='9 0.5')
+                
+                with gr.Column():
+                    with gr.Row(variant='compact'):
+                        style_radio = gr.Radio(["Q版3D小龙(3D dragon)", "红火财神爷(Red wealthgod)", "2D手绘小龙(2D dragon)","黄金财神爷(Gold wealthgod)","喜庆灯笼(Lantern)","可爱贴纸(Sticker)","可爱喷绘(Splash)","卡通门神(Doorgod)","可爱盲盒(Blindbox)","蜡笔女孩(Crayon)","肥龙在天(Fat dragon)"], value='Q版3D小龙(3D dragon)', label="Meme Style", visible=True)
+                        example_style1 = gr.Image(value='example_images/example_style/3dcute_dragon.jpg',visible=True, label="Q版3D小龙(3D dragon)", info="效果预览", height=320, width=320, elem_id="example_style1")
+                        example_style2 = gr.Image(value='example_images/example_style/caishenye1.jpg',visible=False, label="红火财神爷(Red wealthgod)", info="效果预览", height=320, width=320, elem_id="example_style2")
+                        example_style3 = gr.Image(value='example_images/example_style/2dcartoon_dragon.jpg',visible=False, label="2D手绘小龙(2D dragon)", info="效果预览", height=320, width=320, elem_id="example_style3")
+                        example_style4 = gr.Image(value='example_images/example_style/caishenye2.jpg',visible=False, label="黄金财神爷(Gold wealthgod)", info="效果预览", height=320, width=320, elem_id="example_style4")
+                        example_style5 = gr.Image(value='example_images/example_style/cute_lantern_girl.jpg',visible=False, label="喜庆灯笼(Lantern)", info="效果预览", height=320, width=320, elem_id="example_style5")
+                        example_style6 = gr.Image(value='example_images/example_style/cute_baby_girl.jpg',visible=False, label="可爱贴纸(Sticker)", info="效果预览", height=320, width=320, elem_id="example_style6")
+                        example_style7 = gr.Image(value='example_images/example_style/cutegirl1.jpg',visible=False, label="可爱喷绘(Splash)", info="效果预览", height=320, width=320, elem_id="example_style7")
+                        example_style8 = gr.Image(value='example_images/example_style/cartoon_doorgod.jpg',visible=False, label="卡通门神(Doorgod)", info="效果预览", height=320, width=320, elem_id="example_style8")
+                        example_style9 = gr.Image(value='example_images/example_style/blindbox.jpg',visible=False, label="可爱盲盒(Blindbox)", info="效果预览", height=320, width=320, elem_id="example_style9")
+                        example_style10 = gr.Image(value='example_images/example_style/crayon.jpg',visible=False, label="蜡笔女孩(Crayon)", info="效果预览", height=320, width=320, elem_id="example_style10")
+                        example_style11 = gr.Image(value='example_images/example_style/fatdragon.jpg',visible=False, label="肥龙在天(Fat dragon)", info="效果预览", height=320, width=320, elem_id="example_style11")
+          
+
+                def change_options2(selected_option):
+                    if selected_option == 'Q版3D小龙(3D dragon)':
+                        _text = 'Cute Chinese Dragon, (Best quality: 1.1), (Realistic: 1.1), (Photography: 1.1), (highly details: 1.1), with a sign written '
+                        _lora = '9 0.5'
+                    elif selected_option == '红火财神爷(Red wealthgod)':
+                        _text = '1boy,chinese clothes,facial hair,solo,full body,red_background,chibi, with a sign written '
+                        _lora = '13 1.0'
+                    elif selected_option == '2D手绘小龙(2D dragon)':
+                        _text = 'Cute Chinese Dragon, no humans,white background,solo,full body,looking at viewer,blush stickers,claws, (Best quality: 1.1), (Realistic: 1.1), (Photography: 1.1), (highly details: 1.1), written, with a sign written '
+                        _lora = '9 0.5'
+                    elif selected_option == '黄金财神爷(Gold wealthgod)':
+                        _text = 'dafengcaishen,solo,blush,simple background,long sleeves,1boy,hat,white background,standing,full body,Smiling eyes,male focus,wide sleeves,chibi,facial hair,chinese clothes,crown,facing viewer,mustache, on the sign reads, with a sign written '
+                        _lora = '10 0.8'
+                    elif selected_option == '可爱贴纸(Sticker)':
+                        _text = 'masterpiece,cartoon, best quality,high quality, sticker, 1girl, chinese new year, happy, smiling, with a sign written '
+                        _lora = '1 0.8'
+                    elif selected_option == '喜庆灯笼(Lantern)':
+                        _text = "children's animation, masterpiece,best quality,chinese new year, cartoon drawing,  1girl, cute face, fish, red Chinese dress, half-body,  lantern, fireworks, cartoon style, 2d-drawing, with a sign written "
+                        _lora = '3 0.65'
+                    elif selected_option == '可爱喷绘(Splash)':
+                        _text = 'masterpiece,best quality,chinese new year,1girl,close-up portrait, solo, joyful festive expression, cute face, looking at viewer, golden chinese dragon,short hair,blue hair,red background,dress,chinese clothes,red dress,china dress,simple background,cnd style,pose, cndstyle, on the wall that reads, with a sign written '
+                        _lora = '15 0.8'
+                    elif selected_option == '卡通门神(Doorgod)':
+                        _text = 'chinese door gods, a painting of god with a sword and armor, full body, 1boy, male focus, solo, drawing, with a sign written '
+                        _lora = '2 0.5'
+                    elif selected_option == '可爱盲盒(Blindbox)':
+                        _text = 'chinese new year, (masterpiece),(best quality),(ultra-detailed), (full body:1.2),1girl,chibi,cute, smile, open mouth,flower, outdoors, beret, jacket, blush, tree, :3, shirt, short hair, cherry blossoms, red headwear, blurry, brown hair, blush stickers, long sleeves, bangs, headphones, black hair, pink flower,(beautiful detailed face), (beautiful detailed eyes), with a sign written '
+                        _lora = '6 0.8'
+                    elif selected_option == '蜡笔女孩(Crayon)':
+                        _text = 'masterpiece,cartoon, best quality,high quality, 1girl, chinese new year, happy, smiling, with a sign written '
+                        _lora = '8 0.8'
+                    elif selected_option == '肥龙在天(Fat dragon)':
+                        _text = 'Cute yellow fat Dragon, flying in the cloud, simple background, 2D cartoon, 2D sticker, with a sign written '
+                        _lora = '9 0.5'
+                        
+                    return [
+                            gr.Textbox(value=_text),
+                            gr.Textbox(value=_lora),
+                            gr.Image(visible=selected_option == 'Q版3D小龙(3D dragon)'),
+                            gr.Image(visible=selected_option == '红火财神爷(Red wealthgod)'),
+                            gr.Image(visible=selected_option == '2D手绘小龙(2D dragon)'),
+                            gr.Image(visible=selected_option == '黄金财神爷(Gold wealthgod)'),
+                            gr.Image(visible=selected_option == '喜庆灯笼(Lantern)'),
+                            gr.Image(visible=selected_option == '可爱贴纸(Sticker)'),
+                            gr.Image(visible=selected_option == '可爱喷绘(Splash)'),
+                            gr.Image(visible=selected_option == '卡通门神(Doorgod)'),
+                            gr.Image(visible=selected_option == '可爱盲盒(Blindbox)'),
+                            gr.Image(visible=selected_option == '蜡笔女孩(Crayon)'),
+                            gr.Image(visible=selected_option == '肥龙在天(Fat dragon)'),
+                            ]
+                style_radio.change(change_options2, style_radio, [prompt, lora_path_ratio, example_style1, example_style2, example_style3,example_style4,example_style5,example_style6,example_style7,example_style8,example_style9, example_style10, example_style11], show_progress=False, queue=False)
+
+
+
+
+                def change_buttons(selected_option):
+                    if selected_option == 'Add a line':
+                        return [gr.Button(value="Delete a line", scale=0.3, elem_classes='add_row'),
+                                gr.Textbox(value='恭喜发财', visible=True),
+                                gr.Radio(["top two","down two","left and right","top and down"], value='left right')]
+                    elif selected_option == 'Delete a line':
+                        return [gr.Button(value="Add a line", scale=0.3, elem_classes='add_row'),
+                                gr.Textbox(value="", visible=False),
+                                gr.Radio(["top","down","left","right"], value='down')]
+
+
+
+
+                texts = gr.Textbox(label="Input Texts(first line)", value='新春快乐')
+                texts2 = gr.Textbox(label="Input Texts(second line)", value='', visible=False)
+                layout_radio = gr.Radio(["top","down","left","right"], value='down', label="text layout", visible=True)
+                
+                def text_change(in_texts):
+                    if len(in_texts)> 10:
+                        gr.Warning("The text length is too long, please input a shorter text for better quality.")
+                    
+                    return
+
+
+                texts.change(fn=text_change, inputs=texts, outputs=None)
+                texts2.change(fn=text_change, inputs=texts2, outputs=None)
+
+                with gr.Row():
+                    gr.Markdown("")
+                    add_row_bt = gr.Button(value="Add a line", scale=0.3, elem_classes='add_row')
+                    gr.Markdown("")
+                
+                add_row_bt.click(change_buttons, add_row_bt, [add_row_bt,texts2,layout_radio], show_progress=False, queue=False)
+
+                layout_radio.change(fn=None, inputs=layout_radio, outputs=layout_radio, show_progress=False, queue=False)
+
+
+                def exp_gen_click():
+                    return [gr.Slider(value=512), gr.Slider(value=512)]  # all examples are 512x512, refresh draw_img
+                with gr.Tab("Examples"):
+                            with gr.Row(variant='compact'):
+                                exp_gen_en = gr.Examples(
+                                    [
+                                        ['新年快乐'],
+                                        ['Happy New Year'],
+                                        ['恭贺新年'],
+                                        ['新春快乐'],
+                                        ['龙年吉祥'],
+                                        ['万事如意'],
+                                        ['大吉大利'],
+                                        ['恭贺新禧'],
+                                        ['初五迎财神'],
+                                        ['恭喜发财']                             
+                                    ],
+                                    [texts],
+                                    examples_per_page=15,
+                                    label=''
+                                )
+                                exp_gen_en.dataset.click(exp_gen_click, None, [image_width, image_height])
+                
+
+                with gr.Row():
+                    sort_radio = gr.Radio(["↕", "↔"], value='↕', label="Sort Position", info="position sorting priority", visible=False)
+                    revise_pos = gr.Checkbox(label='Revise Position', value=False, visible=False)
+
+                with gr.Row():
+                    gr.Markdown("")
+                    run_gen = gr.Button(value="Generate meme!", scale=0.3, elem_classes='run')
+                    gr.Markdown("")
+                            
+
+  
+
+    ips = [prompt, texts, texts2, layout_radio, sort_radio, revise_pos, base_model_path, lora_path_ratio, show_debug,img_count, ddim_steps, image_width, image_height, strength, cfg_scale, seed, eta, a_prompt, n_prompt]
+    run_gen.click(fn=process, inputs=[gr.State('gen')] + ips, outputs=[result_gallery])
+
+block.launch(server_name='0.0.0.0',share=False, server_port=7687)

css/style.css

@@ -0,0 +1,32 @@
+#banner {
+    max-width: 400px;
+    margin: auto;
+    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5) !important;
+    border-radius: 20px;
+}
+
+.run {
+    background-color: #624AFF !important;
+    color: #FFFFFF !important;
+    border-radius: 2px !important;
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5) !important;
+}
+.run:active {
+    background-color: #d96565 !important; 
+}
+.run:hover {
+    background-color: #a079f5 !important; 
+}
+/* tab button style */
+button.svelte-kqij2n {
+    margin-bottom: -1px;
+    border: 1px solid transparent;
+    border-color: transparent;
+    border-bottom: none;
+    color: #9CA3AF !important;
+    font-size: 16px;
+}
+button.selected.svelte-kqij2n {
+    background: #ddd8f9 !important;
+    color: rgb(62, 7, 240) !important;
+}

css/style2.css

@@ -0,0 +1,71 @@
+
+.baselayout {
+    background: url('https://img.alicdn.com/imgextra/i1/O1CN016hd0V91ilWY5Xr24B_!!6000000004453-2-tps-2882-256.png') no-repeat;
+}
+
+#btn {
+    background-color: #336699;
+    color: white;
+}
+
+#recBut {
+    background-color: #bb5252;
+    color: white;
+    width: 30%;
+    margin: auto;
+}
+
+#btnSEG {
+    background-color: #D5F3F4;
+    color: black;
+}
+
+#btnCHAT {
+    background-color: #B6DBF2;
+    color: black;
+}
+
+#accordion {
+    background-color: transparent;
+}
+
+#accordion1 {
+    background-color: #ecedee;
+}
+
+.feedback button.selected {
+    background-color: #6699CC;
+    color: white !important;
+}
+
+.feedback1 button.selected {
+    background-color: #839ab2;
+    color: white !important;
+}
+
+.Tab button.selected {
+    color: red;
+    font-weight: bold;
+}
+
+#Image {
+    width: 80%;
+    margin: auto;
+}
+
+#ShowCase {
+    width: 30%;
+    flex: none !important;
+}
+
+#Input {
+    border-style: solid;
+    border-width: 1px;
+    border-color: #000000
+}
+
+#Seg {
+    min-width: min(100px, 100%) !important;
+    width: 100%;
+    margin: auto;
+}

javascript/bboxHint.js

@@ -0,0 +1,554 @@
+/*
+Part of the implementation is borrowed and modified from multidiffusion-upscaler-for-automatic1111,
+publicly available at https://github.com/pkuliyi2015/multidiffusion-upscaler-for-automatic1111
+*/
+
+const BBOX_MAX_NUM = 16;
+const BBOX_WARNING_SIZE = 1280;
+const DEFAULT_X = 0.4;
+const DEFAULT_Y = 0.4;
+const DEFAULT_H = 0.2;
+const DEFAULT_W = 0.2;
+
+// ref: https://html-color.codes/
+const COLOR_MAP = [
+    ['#ff0000', 'rgba(255, 0, 0, 0.3)'],          // red
+    ['#ff9900', 'rgba(255, 153, 0, 0.3)'],        // orange
+    ['#ffff00', 'rgba(255, 255, 0, 0.3)'],        // yellow
+    ['#33cc33', 'rgba(51, 204, 51, 0.3)'],        // green
+    ['#33cccc', 'rgba(51, 204, 204, 0.3)'],       // indigo
+    ['#0066ff', 'rgba(0, 102, 255, 0.3)'],        // blue
+    ['#6600ff', 'rgba(102, 0, 255, 0.3)'],        // purple
+    ['#cc00cc', 'rgba(204, 0, 204, 0.3)'],        // dark pink
+    ['#ff6666', 'rgba(255, 102, 102, 0.3)'],      // light red
+    ['#ffcc66', 'rgba(255, 204, 102, 0.3)'],      // light orange
+    ['#99cc00', 'rgba(153, 204, 0, 0.3)'],        // lime green
+    ['#00cc99', 'rgba(0, 204, 153, 0.3)'],        // teal
+    ['#0099cc', 'rgba(0, 153, 204, 0.3)'],        // steel blue
+    ['#9933cc', 'rgba(153, 51, 204, 0.3)'],       // lavender
+    ['#ff3399', 'rgba(255, 51, 153, 0.3)'],       // hot pink
+    ['#996633', 'rgba(153, 102, 51, 0.3)'],       // brown
+];
+
+const RESIZE_BORDER = 5;
+const MOVE_BORDER = 5;
+
+const t2i_bboxes = new Array(BBOX_MAX_NUM).fill(null);
+const i2i_bboxes = new Array(BBOX_MAX_NUM).fill(null);
+
+function gradioApp() {
+    const elems = document.getElementsByTagName('gradio-app')
+    const gradioShadowRoot = elems.length == 0 ? null : elems[0].shadowRoot
+    return !!gradioShadowRoot ? gradioShadowRoot : document;
+}
+
+// ↓↓↓ called from gradio ↓↓↓
+
+function onCreateT2IRefClick(overwrite) {
+    let width, height;
+    if (overwrite) {
+        const overwriteInputs = gradioApp().querySelectorAll('#MD-overwrite-width-t2i input, #MD-overwrite-height-t2i input');
+        width  = parseInt(overwriteInputs[0].value);
+        height = parseInt(overwriteInputs[2].value);
+    } else {
+        const sizeInputs = gradioApp().querySelectorAll('#txt2img_width input, #txt2img_height input');
+        width  = parseInt(sizeInputs[0].value);
+        height = parseInt(sizeInputs[2].value);
+    }
+
+    if (isNaN(width))  width  = 512;
+    if (isNaN(height)) height = 512;
+
+    // Concat it to string to bypass the gradio bug
+    // 向黑恶势力低头
+    return width.toString() + 'x' + height.toString();
+}
+
+function onCreateI2IRefClick() {
+    const canvas = gradioApp().querySelector('#img2img_image img');
+    return canvas.src;
+}
+
+function onBoxEnableClick(is_t2i, idx, enable) {
+    let canvas = null;
+    let bboxes = null;
+    let locator = null;
+    if (is_t2i) {
+        // locator = () => gradioApp().querySelector('#MD-bbox-ref-t2i');
+        locator = () => gradioApp().querySelector('#MD-bbox-rect-t2i');
+        bboxes = t2i_bboxes;
+        
+    } else {
+        locator = () => gradioApp().querySelector('#MD-bbox-ref-i2i');
+        bboxes = i2i_bboxes;
+    }
+    ref_div = locator();
+    canvas = ref_div.querySelector('img');
+    if (!canvas) { return false; }
+
+    if (enable) {
+        // Check if the bounding box already exists
+        if (!bboxes[idx]) {
+            // Initialize bounding box
+            const bbox = [DEFAULT_X, DEFAULT_Y, DEFAULT_W, DEFAULT_H];
+            const colorMap = COLOR_MAP[idx % COLOR_MAP.length];
+            const div = document.createElement('div');
+            div.id = 'MD-bbox-' + (is_t2i ? 't2i-' : 'i2i-') + idx;
+            div.style.left       = '0px';
+            div.style.top        = '0px';
+            div.style.width      = '0px';
+            div.style.height     = '0px';
+            div.style.position   = 'absolute';
+            div.style.border     = '2px solid ' + colorMap[0];
+            div.style.background = colorMap[1];
+            div.style.zIndex     = '900';
+            div.style.display    = 'none';
+            // A text tip to warn the user if bbox is too large
+            const tip = document.createElement('span');
+            tip.id = 'MD-tip-' + (is_t2i ? 't2i-' : 'i2i-') + idx;
+            tip.style.left       = '50%';
+            tip.style.top        = '50%';
+            tip.style.position   = 'absolute';
+            tip.style.transform  = 'translate(-50%, -50%)';
+            tip.style.fontSize   = '12px';
+            tip.style.fontWeight = 'bold';
+            tip.style.textAlign  = 'center';
+            tip.style.color      = colorMap[0];
+            tip.style.zIndex     = '901';
+            tip.style.display    = 'none';
+            tip.innerHTML        = 'Warning: Region very large!<br>Take care of VRAM usage!';
+            div.appendChild(tip);
+            div.addEventListener('mousedown', function (e) {
+                if (e.button === 0) { onBoxMouseDown(e, is_t2i, idx); }
+            });
+            div.addEventListener('mousemove', function (e) {
+                updateCursorStyle(e, is_t2i, idx);
+            });
+
+            const shower = function() { // insert to DOM if necessary
+                if (!gradioApp().querySelector('#' + div.id)) {
+                    locator().appendChild(div);
+                }
+            }
+            bboxes[idx] = [div, bbox, shower];
+        }
+
+        // Show the bounding box
+        displayBox(canvas, is_t2i, bboxes[idx]);
+        return true;
+    } else {
+        if (!bboxes[idx]) { return false; }
+        const [div, bbox, shower] = bboxes[idx];
+        div.style.display = 'none';
+    }
+    return false;
+}
+
+function onBoxChange(is_t2i, idx, what, v) {
+    // This function handles all the changes of the bounding box
+    // Including the rendering and python slider update
+    let bboxes = null;
+    let canvas = null;
+    if (is_t2i) {
+        bboxes = t2i_bboxes;
+        canvas = gradioApp().querySelector('#MD-bbox-rect-t2i img');
+    } else {
+        bboxes = i2i_bboxes;
+        canvas = gradioApp().querySelector('#MD-bbox-ref-i2i img');
+    }
+    if (!bboxes[idx] || !canvas) {
+        switch (what) {
+            case 'x': return DEFAULT_X;
+            case 'y': return DEFAULT_Y;
+            case 'w': return DEFAULT_W;
+            case 'h': return DEFAULT_H;
+        }
+    }
+    const [div, bbox, shower] = bboxes[idx];
+    if (div.style.display === 'none') { return v; }
+
+    // parse trigger
+    switch (what) {
+        case 'x': bbox[0] = v; break;
+        case 'y': bbox[1] = v; break;
+        case 'w': bbox[2] = v; break;
+        case 'h': bbox[3] = v; break;
+    }
+    displayBox(canvas, is_t2i, bboxes[idx]);
+    return v;
+}
+
+// ↓↓↓ called from js ↓↓↓
+
+function getSeedInfo(is_t2i, id, current_seed) {
+    const info_id = is_t2i ? '#html_info_txt2img' : '#html_info_img2img';
+    const info_div = gradioApp().querySelector(info_id);
+    try{
+        current_seed = parseInt(current_seed);
+    } catch(e) {
+        current_seed = -1;
+    }
+    if (!info_div) return current_seed;
+    let info = info_div.innerHTML;
+    if (!info) return current_seed;
+    // remove all html tags
+    info = info.replace(/<[^>]*>/g, '');
+    // Find a json string 'region control:' in the info
+    // get its index
+    idx = info.indexOf('Region control');
+    if (idx == -1) return current_seed;
+    // get the json string (detect the bracket)
+    // find the first '{'
+    let start_idx = info.indexOf('{', idx);
+    let bracket = 1;
+    let end_idx = start_idx + 1;
+    while (bracket > 0 && end_idx < info.length) {
+        if (info[end_idx] == '{') bracket++;
+        if (info[end_idx] == '}') bracket--;
+        end_idx++;
+    }
+    if (bracket > 0) {
+        return current_seed;
+    }
+    // get the json string
+    let json_str = info.substring(start_idx, end_idx);
+    // replace the single quote to double quote
+    json_str = json_str.replace(/'/g, '"');
+    // replace python True to javascript true, False to false
+    json_str = json_str.replace(/True/g, 'true');
+    // parse the json string
+    let json = JSON.parse(json_str);
+    // get the seed if the region id is in the json
+    const region_id = 'Region ' + id.toString();
+    if (!(region_id in json)) return current_seed;
+    const region = json[region_id];
+    if (!('seed' in region)) return current_seed;
+    let seed = region['seed'];
+    try{
+        seed = parseInt(seed);
+    } catch(e) {
+        return current_seed;
+    }
+    return seed;
+}
+
+function displayBox(canvas, is_t2i, bbox_info) {
+    // check null input
+    const [div, bbox, shower] = bbox_info;
+    const [x, y, w, h] = bbox;
+    if (!canvas || !div || x == null || y == null || w == null || h == null) { return; }
+
+    // client: canvas widget display size
+    // natural: content image real size
+    let vpScale = Math.min(canvas.clientWidth / canvas.naturalWidth, canvas.clientHeight / canvas.naturalHeight);
+    let canvasCenterX = canvas.clientWidth  / 2;
+    let canvasCenterY = canvas.clientHeight / 2;
+    let scaledX = canvas.naturalWidth  * vpScale;
+    let scaledY = canvas.naturalHeight * vpScale;
+    let viewRectLeft  = canvasCenterX - scaledX / 2;
+    let viewRectRight = canvasCenterX + scaledX / 2;
+    let viewRectTop   = canvasCenterY - scaledY / 2;
+    let viewRectDown  = canvasCenterY + scaledY / 2;
+
+    let xDiv = viewRectLeft + scaledX * x;
+    let yDiv = viewRectTop  + scaledY * y;
+    let wDiv = Math.min(scaledX * w, viewRectRight - xDiv);
+    let hDiv = Math.min(scaledY * h, viewRectDown - yDiv);
+
+    // Calculate warning bbox size
+    let upscalerFactor = 1.0;
+    if (!is_t2i) {
+        const upscalerInput = parseFloat(gradioApp().querySelector('#MD-i2i-upscaler-factor input').value);
+        if (!isNaN(upscalerInput)) upscalerFactor = upscalerInput;
+    }
+    let maxSize = BBOX_WARNING_SIZE / upscalerFactor * vpScale;
+    let maxW = maxSize / scaledX;
+    let maxH = maxSize / scaledY;
+    if (w > maxW || h > maxH) {
+        div.querySelector('span').style.display = 'block';
+    } else {
+        div.querySelector('span').style.display = 'none';
+    }
+
+    // update <div> when not equal
+    div.style.left    = xDiv + 'px';
+    div.style.top     = yDiv + 'px';
+    div.style.width   = wDiv + 'px';
+    div.style.height  = hDiv + 'px';
+    div.style.display = 'block';
+
+    // insert it to DOM if not appear
+    shower();
+}
+
+function onBoxMouseDown(e, is_t2i, idx) {
+    let bboxes = null;
+    let canvas = null;
+    if (is_t2i) {
+        bboxes = t2i_bboxes;
+        canvas = gradioApp().querySelector('#MD-bbox-rect-t2i img');
+    } else {
+        bboxes = i2i_bboxes;
+        canvas = gradioApp().querySelector('#MD-bbox-ref-i2i img');
+    }
+    // Get the bounding box
+    if (!canvas || !bboxes[idx]) { return; }
+    const [div, bbox, shower] = bboxes[idx];
+
+    // Check if the click is inside the bounding box
+    const boxRect = div.getBoundingClientRect();
+    let mouseX = e.clientX;
+    let mouseY = e.clientY;
+
+    const resizeLeft   = mouseX >= boxRect.left && mouseX <= boxRect.left + RESIZE_BORDER;
+    const resizeRight  = mouseX >= boxRect.right - RESIZE_BORDER && mouseX <= boxRect.right;
+    const resizeTop    = mouseY >= boxRect.top && mouseY <= boxRect.top + RESIZE_BORDER;
+    const resizeBottom = mouseY >= boxRect.bottom - RESIZE_BORDER && mouseY <= boxRect.bottom;
+
+    const moveHorizontal = mouseX >= boxRect.left + MOVE_BORDER && mouseX <= boxRect.right  - MOVE_BORDER;
+    const moveVertical   = mouseY >= boxRect.top  + MOVE_BORDER && mouseY <= boxRect.bottom - MOVE_BORDER;
+
+    if (!resizeLeft && !resizeRight && !resizeTop && !resizeBottom && !moveHorizontal && !moveVertical) { return; }
+
+    const horizontalPivot = resizeLeft ? bbox[0] + bbox[2] : bbox[0];
+    const verticalPivot   = resizeTop  ? bbox[1] + bbox[3] : bbox[1];
+
+    // Canvas can be regarded as invariant during the drag operation
+    // Calculate in advance to reduce overhead
+
+    // Calculate viewport scale based on the current canvas size and the natural image size
+    let vpScale = Math.min(canvas.clientWidth / canvas.naturalWidth, canvas.clientHeight / canvas.naturalHeight);
+    let vpOffset = canvas.getBoundingClientRect();
+
+    // Calculate scaled dimensions of the canvas
+    let scaledX = canvas.naturalWidth * vpScale;
+    let scaledY = canvas.naturalHeight * vpScale;
+
+    // Calculate the canvas center and view rectangle coordinates
+    let canvasCenterX = (vpOffset.left + window.scrollX) + canvas.clientWidth  / 2;
+    let canvasCenterY = (vpOffset.top  + window.scrollY) + canvas.clientHeight / 2;
+    let viewRectLeft  = canvasCenterX - scaledX / 2 - window.scrollX;
+    let viewRectRight = canvasCenterX + scaledX / 2 - window.scrollX;
+    let viewRectTop   = canvasCenterY - scaledY / 2 - window.scrollY;
+    let viewRectDown  = canvasCenterY + scaledY / 2 - window.scrollY;
+
+    mouseX = Math.min(Math.max(mouseX, viewRectLeft), viewRectRight);
+    mouseY = Math.min(Math.max(mouseY, viewRectTop),  viewRectDown);
+    
+    //const accordion = gradioApp().querySelector(`#MD-accordion-${is_t2i ? 't2i' : 'i2i'}-${idx}`);
+    const accordion = gradioApp().querySelector('#MD-tab-t2i');
+
+    // Move or resize the bounding box on mousemove
+    function onMouseMove(e) {
+        // Prevent selecting anything irrelevant
+        e.preventDefault();
+
+        // Get the new mouse position
+        let newMouseX = e.clientX;
+        let newMouseY = e.clientY;
+
+        // clamp the mouse position to the view rectangle
+        newMouseX = Math.min(Math.max(newMouseX, viewRectLeft), viewRectRight);
+        newMouseY = Math.min(Math.max(newMouseY, viewRectTop),  viewRectDown);
+
+        // Calculate the mouse movement delta
+        const dx = (newMouseX - mouseX) / scaledX;
+        const dy = (newMouseY - mouseY) / scaledY;
+
+        // Update the mouse position
+        mouseX = newMouseX;
+        mouseY = newMouseY;
+
+        // if no move just return
+        if (dx === 0 && dy === 0) { return; }
+
+        // Update the mouse position
+        let [x, y, w, h] = bbox;
+        if (moveHorizontal && moveVertical) {
+            // If moving the bounding box
+            x = Math.min(Math.max(x + dx, 0), 1 - w);
+            y = Math.min(Math.max(y + dy, 0), 1 - h);
+        } else {
+            // If resizing the bounding box
+            if (resizeLeft || resizeRight) {
+                if (x < horizontalPivot) {
+                    if (dx <= w) {
+                        // If still within the left side of the pivot
+                        x = x + dx;
+                        w = w - dx;
+                    } else {
+                        // If crossing the pivot
+                        w = dx - w;
+                        x = horizontalPivot;
+                    }
+                } else {
+                    if (w + dx < 0) {
+                        // If still within the right side of the pivot
+                        x = horizontalPivot + w + dx;
+                        w = - dx - w;
+                    } else {
+                        // If crossing the pivot
+                        x = horizontalPivot;
+                        w = w + dx;
+                    }
+                }
+
+                // Clamp the bounding box to the image
+                if (x < 0) {
+                    w = w + x;
+                    x = 0;
+                } else if (x + w > 1) {
+                    w = 1 - x;
+                }
+            }
+            // Same as above, but for the vertical axis
+            if (resizeTop || resizeBottom) {
+                if (y < verticalPivot) {
+                    if (dy <= h) {
+                        y = y + dy;
+                        h = h - dy;
+                    } else {
+                        h = dy - h;
+                        y = verticalPivot;
+                    }
+                } else {
+                    if (h + dy < 0) {
+                        y = verticalPivot + h + dy;
+                        h = - dy - h;
+                    } else {
+                        y = verticalPivot;
+                        h = h + dy;
+                    }
+                }
+                if (y < 0) {
+                    h = h + y;
+                    y = 0;
+                } else if (y + h > 1) {
+                    h = 1 - y;
+                }
+            }
+        }
+        const [div, old_bbox, _] = bboxes[idx];
+
+        // If all the values are the same, just return
+        if (old_bbox[0] === x && old_bbox[1] === y && old_bbox[2] === w && old_bbox[3] === h) { return; }
+        // else update the bbox
+        const event = new Event('input');
+        const coords = [x, y, w, h];
+        // <del>The querySelector is not very efficient, so we query it once and reuse it</del>
+        // caching will result gradio bugs that stucks bbox and cannot move & drag
+        const sliderIds = ['x', 'y', 'w', 'h'];
+        // We try to select the input sliders
+        const sliderSelectors = sliderIds.map(id => `#MD-${is_t2i ? 't2i' : 'i2i'}-${idx}-${id} input`).join(', ');
+        let sliderInputs = accordion.querySelectorAll(sliderSelectors);
+        // alert(sliderInputs.length)
+        if (sliderInputs.length == 0) { 
+            // If we failed, the accordion is probably closed and sliders are removed in the dom, so we open it
+            accordion.querySelector('.label-wrap').click();
+            // and try again
+            sliderInputs = accordion.querySelectorAll(sliderSelectors);
+            // If we still failed, we just return
+            if (sliderInputs.length == 0) { return; }
+        }
+        for (let i = 0; i < 4; i++) {
+            if (old_bbox[i] !== coords[i]) {
+                sliderInputs[2*i].value = coords[i];
+                sliderInputs[2*i].dispatchEvent(event);
+            }
+        }
+    }
+
+    // Remove the mousemove and mouseup event listeners
+    function onMouseUp() {
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup',   onMouseUp);
+    }
+
+    // Add the event listeners
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup',   onMouseUp);
+}
+
+function updateCursorStyle(e, is_t2i, idx) {
+    // This function changes the cursor style when hovering over the bounding box
+    const bboxes = is_t2i ? t2i_bboxes : i2i_bboxes;
+    if (!bboxes[idx]) return;
+
+    const div = bboxes[idx][0];
+    const boxRect = div.getBoundingClientRect();
+    const mouseX = e.clientX;
+    const mouseY = e.clientY;
+
+    const resizeLeft   = mouseX >= boxRect.left && mouseX <= boxRect.left + RESIZE_BORDER;
+    const resizeRight  = mouseX >= boxRect.right - RESIZE_BORDER && mouseX <= boxRect.right;
+    const resizeTop    = mouseY >= boxRect.top && mouseY <= boxRect.top + RESIZE_BORDER;
+    const resizeBottom = mouseY >= boxRect.bottom - RESIZE_BORDER && mouseY <= boxRect.bottom;
+
+    if ((resizeLeft && resizeTop) || (resizeRight && resizeBottom)) {
+        div.style.cursor = 'nwse-resize';
+    } else if ((resizeLeft && resizeBottom) || (resizeRight && resizeTop)) {
+        div.style.cursor = 'nesw-resize';
+    } else if (resizeLeft || resizeRight) {
+        div.style.cursor = 'ew-resize';
+    } else if (resizeTop || resizeBottom) {
+        div.style.cursor = 'ns-resize';
+    } else {
+        div.style.cursor = 'move';
+    }
+}
+
+// ↓↓↓ auto called event listeners ↓↓↓
+
+function updateBoxes(is_t2i) {
+    // This function redraw all bounding boxes
+    let bboxes = null;
+    let canvas = null;
+    if (is_t2i) {
+        bboxes = t2i_bboxes;
+        canvas = gradioApp().querySelector('#MD-bbox-rect-t2i img');
+    } else {
+        bboxes = i2i_bboxes;
+        canvas = gradioApp().querySelector('#MD-bbox-ref-i2i img');
+    }
+    if (!canvas) return;
+
+    for (let idx = 0; idx < bboxes.length; idx++) {
+        if (!bboxes[idx]) continue;
+        const [div, bbox, shower] = bboxes[idx];
+        if (div.style.display === 'none') { return; }
+
+        displayBox(canvas, is_t2i, bboxes[idx]);
+    }
+}
+
+window.addEventListener('resize', _ => {
+    updateBoxes(true);
+    updateBoxes(false);
+});
+
+// ======== Gradio Bug Fix ========
+// For Gradio versions > 3.16.0 and < 3.29.0, the accordion DOM will be deleted when it is closed.
+// We need to judge the versions and listen to the accordion open event, rerender the bbox at that time.
+// This silly bug fix is only for compatibility, we recommend to update the gradio version to 3.29.0 or higher.
+try {
+    const GRADIO_VERSIONS = window.gradio_config["version"].split(".");
+    const gradio_major_version = parseInt(GRADIO_VERSIONS[0]);
+    const gradio_minor_version = parseInt(GRADIO_VERSIONS[1]);
+    if (gradio_major_version == 3 && gradio_minor_version > 16 && gradio_minor_version < 29) {
+        let listener = e => {
+            if (!e) { return; }
+            if (!e.target) { return; }
+            if (!e.target.classList) { return; }
+            if (!e.target.classList.contains('label-wrap')) { return; }
+            for (let tab of ['t2i', 'i2i']) {
+                const div = gradioApp().querySelector('#MD-bbox-control-' + tab +' div.label-wrap');
+                if (!div) { continue; }
+                updateBoxes(tab === 't2i');
+            }
+        };
+        window.addEventListener('DOMNodeInserted', listener);
+    }
+} catch (ignored) {
+    // If the above code failed, the gradio version shouldn't be in the range of 3.16.0 to 3.29.0, so we just return.
+}
+// ======== Gradio Bug Fix ========

requirements.txt

@@ -0,0 +1,3 @@
+dashscope
+modelscope[cv] -f https://modelscope.oss-cn-beijing.aliyuncs.com/releases/repo.html
+tensorflow-gpu==2.11.0

src/generation.py

@@ -0,0 +1,91 @@
+import json
+import os
+import time
+
+import gradio as gr
+import requests
+
+from src.log import logger
+from src.util import download_images
+
+
+def call_generation(prompt, mask_image_url,lora_path_ratio="0 1.0", image_width=512, image_height=512, BATCH_SIZE=1):
+    API_KEY = os.getenv("API_KEY_GENERATION")
+    headers = {
+        "Content-Type": "application/json",
+        "Accept": "application/json",
+        "Authorization": f"Bearer {API_KEY}",
+        "X-DashScope-Async": "enable",
+    }
+    data = {
+        "model": "jinshu-emoji",
+        "input": {
+            "prompt": prompt,
+            "mask_image_url": mask_image_url,
+            "lora_path_ratio": lora_path_ratio,
+            "base_model_path": 0,
+            
+        },
+            "parameters": {
+            "n": BATCH_SIZE,
+            "image_width": image_width,
+            "image_height": image_height,
+            "text_position_revise": True,
+        }
+    }
+    url_create_task = 'https://dashscope.aliyuncs.com/api/v1/services/aigc/anytext/generation'
+
+    all_res_ = []
+    REPEAT = 1
+    for _ in range(REPEAT):
+        res_ = requests.post(url_create_task, data=json.dumps(data), headers=headers)
+        all_res_.append(res_)
+
+    all_image_data = []
+    for res_ in all_res_:
+        respose_code = res_.status_code
+        if 200 == respose_code:
+            res = json.loads(res_.content.decode())
+            request_id = res['request_id']
+            task_id = res['output']['task_id']
+            logger.info(f"task_id: {task_id}: Create Poster Imitation request success. Params: {data}")
+
+            # 异步查询
+            is_running = True
+            while is_running:
+                url_query = f'https://dashscope.aliyuncs.com/api/v1/tasks/{task_id}'
+                res_ = requests.post(url_query, headers=headers)
+                respose_code = res_.status_code
+                if 200 == respose_code:
+                    res = json.loads(res_.content.decode())
+                    if "SUCCEEDED" == res['output']['task_status']:
+                        logger.info(f"task_id: {task_id}: Generation task query success.")
+                        results = res['output']
+                        img_urls = results['result_url']
+                        logger.info(f"task_id: {task_id}: {res}")
+                        break
+                    elif "FAILED" != res['output']['task_status']:
+                        logger.debug(f"task_id: {task_id}: query result...")
+                        time.sleep(1)
+                    else:
+                        raise gr.Error('Fail to get results from Generation task.')
+
+                else:
+                    logger.error(f'task_id: {task_id}: Fail to query task result: {res_.content}')
+                    raise gr.Error("Fail to query task result.")
+
+            logger.info(f"task_id: {task_id}: download generated images.")
+            img_data = download_images(img_urls, BATCH_SIZE)
+            logger.info(f"task_id: {task_id}: Generate done.")
+            all_image_data += img_data
+        else:
+            logger.error(f'Fail to create Generation task: {res_.content}')
+            raise gr.Error("Fail to create Generation task.")
+
+    if len(all_image_data) != REPEAT * BATCH_SIZE:
+        raise gr.Error("Fail to Generation.")
+    return all_image_data
+
+
+if __name__ == "__main__":
+    call_generation()

src/log.py

@@ -0,0 +1,18 @@
+import logging
+import os
+from logging.handlers import RotatingFileHandler
+
+log_file_name = "workdir/log_mememaster.log"
+os.makedirs(os.path.dirname(log_file_name), exist_ok=True)
+
+format = '[%(levelname)s] %(asctime)s "%(filename)s", line %(lineno)d, %(message)s'
+logging.basicConfig(
+    format=format,
+    datefmt="%Y-%m-%d %H:%M:%S",
+    level=logging.INFO)
+logger = logging.getLogger(name="WordArt_Studio")
+
+fh = RotatingFileHandler(log_file_name, maxBytes=20000000, backupCount=3)
+formatter = logging.Formatter(format, datefmt="%Y-%m-%d %H:%M:%S")
+fh.setFormatter(formatter)
+logger.addHandler(fh)

src/util.py

@@ -0,0 +1,64 @@
+import concurrent.futures
+import io
+import os
+
+import numpy as np
+import oss2
+import requests
+from PIL import Image, ImageDraw, ImageFont
+
+from .log import logger
+
+# oss
+access_key_id = os.getenv("ACCESS_KEY_ID")
+access_key_secret = os.getenv("ACCESS_KEY_SECRET")
+bucket_name = os.getenv("BUCKET_NAME")
+endpoint = os.getenv("ENDPOINT")
+
+oss_path = "wangmeng.xwm/MemeMaster"
+oss_path_img_gallery = "wangmeng.xwm/MemeMaster_img_gallery"
+
+bucket = oss2.Bucket(oss2.Auth(access_key_id, access_key_secret), endpoint, bucket_name)
+
+def download_img_pil(index, img_url):
+    # print(img_url)
+    r = requests.get(img_url, stream=True)
+    if r.status_code == 200:
+        img = Image.open(io.BytesIO(r.content))
+        return (index, img)
+    else:
+        logger.error(f"Fail to download: {img_url}")
+
+
+def download_images(img_urls, batch_size):
+    imgs_pil = [None] * batch_size
+    # worker_results = []
+    with concurrent.futures.ThreadPoolExecutor(max_workers=4) as executor:
+        to_do = []
+        for i, url in enumerate(img_urls):
+            future = executor.submit(download_img_pil, i, url)
+            to_do.append(future)
+
+        for future in concurrent.futures.as_completed(to_do):
+            ret = future.result()
+            # worker_results.append(ret)
+            index, img_pil = ret
+            imgs_pil[index] = img_pil  # 按顺序排列url，后续下载关联的图片或者svg需要使用
+
+    return imgs_pil
+
+
+def upload_np_2_oss(input_image, name="cache.png", gallery=False):
+    imgByteArr = io.BytesIO()
+    Image.fromarray(input_image).save(imgByteArr, format="PNG")
+    imgByteArr = imgByteArr.getvalue()
+
+    if gallery:
+        path = oss_path_img_gallery
+    else:
+        path = oss_path
+
+    bucket.put_object(path + "/" + name, imgByteArr)  # data为数据，可以是图片
+    ret = bucket.sign_url('GET', path + "/" + name, 60 * 60 * 24)  # 返回值为链接，参数依次为，方法/oss上文件路径/过期时间(s)
+    del imgByteArr
+    return ret