-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1234 lines (1163 loc) · 73.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Meta tags for social media banners, these should be filled in appropriatly as they are your "business card" -->
<!-- Replace the content tag with appropriate information -->
<meta name="description" content="ACE++">
<meta property="og:title" content="ACE++"/>
<meta property="og:description" content="ACE++: Instruction-Based Image Creation and Editing via Context-Aware Content Filling"/>
<meta property="og:url" content="URL OF THE WEBSITE"/>
<!-- Path to banner image, should be in the path listed below. Optimal dimenssions are 1200X630-->
<meta property="og:image" content="static/images/icon.png" />
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<!-- <meta name="twitter:title" content="TWITTER BANNER TITLE META TAG">-->
<!-- <meta name="twitter:description" content="TWITTER BANNER DESCRIPTION META TAG">-->
<!-- <!– Path to banner image, should be in the path listed below. Optimal dimenssions are 1200X600–>-->
<!-- <meta name="twitter:image" content="static/images/your_twitter_banner_image.jpg">-->
<!-- <meta name="twitter:card" content="summary_large_image">-->
<!-- Keywords for your paper to be indexed by-->
<meta name="keywords" content="ACE++">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ACE++: Instruction-Based Image Creation and Editing via Context-Aware Content Filling</title>
<link rel="icon" type="image/x-icon" href="static/images/icon.png">
<link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro"
rel="stylesheet">
<link rel="stylesheet" href="static/css/bulma.min.css">
<link rel="stylesheet" href="static/css/bulma-carousel.min.css">
<link rel="stylesheet" href="static/css/bulma-slider.min.css">
<link rel="stylesheet" href="static/css/fontawesome.all.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
<link rel="stylesheet" href="static/css/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script defer src="static/js/fontawesome.all.min.js"></script>
<script src="static/js/bulma-carousel.min.js"></script>
<script src="static/js/bulma-slider.min.js"></script>
<script src="static/js/index.js"></script>
</head>
<body>
<section class="hero">
<div class="hero-body">
<div class="container is-max-desktop">
<div class="columns is-centered">
<div class="column has-text-centered">
<h1 class="title is-2 publication-title">
<img src="static/images/icon.png" class="title_icon">++: Instruction-Based Image Creation and Editing via Context-Aware Content Filling</h1>
<div class="is-size-5 publication-authors">
<!-- Paper authors -->
<span class="author-block">
<a href="" target="_blank">Chaojie Mao</a>,</span>
<span class="author-block">
<a href="" target="_blank">Jingfeng Zhang</a>,</span>
<span class="author-block">
<a href="" target="_blank">Yulin Pan</a>,</span>
<span class="author-block">
<a href="" target="_blank">Zeyinzi Jiang</a>,</span>
<span class="author-block">
<a href="" target="_blank">Zhen Han</a>,</span>
</div>
<div class="is-size-5 publication-authors">
<span class="author-block">
<a href="" target="_blank">Yu Liu</a>,</span>
<span class="author-block">
<a href="" target="_blank">Jingren Zhou</a></span>
</div>
<!-- <div class="is-size-5 publication-authors">-->
<!-- <span class="author-block">Tongyi Lab</span>-->
<!-- <span class="eql-cntrb"><small><br><sup>*</sup>Indicates Equal Contribution-->
<!-- <sup>†</sup> Project leader.</small></span>-->
<!-- </div>-->
<!-- <div class="column has-text-centered">-->
<!-- <div class="publication-links">-->
<!-- <!– Arxiv PDF link –>-->
<!-- <span class="link-block">-->
<!-- <a href="https://arxiv.org/pdf/<ARXIV PAPER ID>.pdf" target="_blank"-->
<!-- class="external-link button is-normal is-rounded is-dark">-->
<!-- <span class="icon">-->
<!-- <i class="fas fa-file-pdf"></i>-->
<!-- </span>-->
<!-- <span>Paper</span>-->
<!-- </a>-->
<!-- </span>-->
<!-- ArXiv abstract Link -->
<span class="link-block">
<a href="https://arxiv.org/abs/2501.02487" target="_blank"
class="external-link button is-normal is-rounded is-dark">
<span class="icon">
<i class="ai ai-arxiv"></i>
</span>
<span>arXiv</span>
</a>
</span>
<!-- Github link -->
<span class="link-block">
<a href="https://github.com/ali-vilab/ACE_plus" target="_blank"
class="external-link button is-normal is-rounded is-dark">
<span class="icon">
<i class="fab fa-github"></i>
</span>
<span>Code</span>
</a>
</span>
<!-- Supplementary model link -->
<span class="link-block">
<a href="https://huggingface.co/ali-vilab/ACE_Plus/tree/main" target="_blank"
class="external-link button is-normal is-rounded is-dark">
<span class="icon">
<i class="fas fa-link"></i>
</span>
<span>Model(HF)</span>
</a>
</span>
<!-- Supplementary model link -->
<span class="link-block">
<a href="https://www.modelscope.cn/models/iic/ACE_Plus/summary" target="_blank"
class="external-link button is-normal is-rounded is-dark">
<span class="icon">
<i class="fas fa-link"></i>
</span>
<span>Model(MS)</span>
</a>
</span>
<!-- Supplementary model link -->
<span class="link-block">
<a href="https://huggingface.co/spaces/scepter-studio/ACE-Plus" target="_blank"
class="external-link button is-normal is-rounded is-dark">
<span class="icon">
<i class="fas fa-link"></i>
</span>
<span>Demo(HF)</span>
</a>
</span>
<span class="link-block">
<a href="https://www.modelscope.cn/studios/iic/ACE-Plus/summary" target="_blank"
class="external-link button is-normal is-rounded is-dark">
<span class="icon">
<i class="fas fa-link"></i>
</span>
<span>Demo(MS)</span>
</a>
</span>
</div>
</div>
<div class="button-container">
<button class="button-simple" onclick="scrollToSection('subject_section')">Subject-Driven</button>
<button class="button-simple" onclick="scrollToSection('portrait_section')">Portrait-Consistency</button>
<button class="button-simple" onclick="scrollToSection('general_section')">Flexible ins./des.</button>
<button class="button-simple" onclick="scrollToSection('local_section')">Local Editing</button>
<button class="button-simple" onclick="scrollToSection('local_reference_section')">Local Reference Editing</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Demo -->
<section class="hero teaser">
<div class="container is-max-desktop">
<div class="hero-body">
<video width="720" height="540" controls autoplay loop muted>
<source src="static/videos/ace++.webm" type="video/webm">
</video>
</div>
</div>
</section>
<!-- End Demo -->
<!-- Paper abstract -->
<section class="section hero">
<div class="container is-max-desktop">
<div class="columns is-centered has-text-centered">
<div class="column is-four-fifths">
<h2 class="title is-3">Abstract</h2>
<div class="content has-text-justified">
<p>
We report ACE++, an instruction-based diffusion framework that tackles various image generation and editing tasks.
Inspired by the input format for the inpainting task proposed by FLUX.1-Fill-dev, we improve the Long-context Condition Unit (LCU)
introduced in ACE and extend this input paradigm to any editing and
generation tasks. To take full advantage of image generative priors, we develop
a two-stage training scheme to minimize the efforts of finetuning powerful text-to-image diffusion models like FLUX.1-dev.
In the first stage, we pre-train the
model using task data with the 0-ref tasks from the text-to-image model. There
are many models in the community based on the post-training of text-to-image
foundational models that meet this training paradigm of the first stage. For example, FLUX.1-Fill-dev deals primarily with painting tasks and can be used as
an initialization to accelerate the training process. In the second stage, we finetune the above model to support the general instructions using all tasks defined
in ACE. To promote the widespread application of ACE++ in different scenarios, we provide a comprehensive set of models that cover both full finetuning and
lightweight finetuning, while considering general applicability and applicability in
vertical scenarios. The qualitative analysis showcases the superiority of ACE++
in terms of generating image quality and prompt following ability
</p>
</div>
</div>
</div>
</div>
</section>
<!-- End paper abstract -->
<!-- Method -->
<section class="hero teaser">
<div class="container is-max-desktop">
<div class="hero-body">
<img src="static/images/method++.png" alt="method"/>
</div>
</div>
</section>
<!-- End Method -->
<!-- Subject Editing -->
<section id="subject_section" class="hero is-small is-light">
<div class="hero-body">
<div class="container">
<!-- Paper video. -->
<h2 class="title is-3">Subject-Driven Generation</h2>
<div id="subject-carousel" class="carousel results-carousel">
<div class="item">
<div class="grid_container">
<div class="grid_item">
<img src="static/images/subject/input/test_cartoon_1.jpg" alt="Character 1">
</div>
<div class="grid_item">
<img src="static/images/subject/output/cartoon_1.jpg" alt="Character 2">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
The duck is walking on the road with many shops on both sides, anime style.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/output/cartoon_2.jpg" alt="Character 3">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
The duck sit on beach chairs drinking drinks, with coconut trees and the sea behind, anime style.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/output/cartoon_3.jpg" alt="Character 4">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
The duck sits on the sofa in the living room with many indoor decorations.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/output/cartoon_4.jpg" alt="Character 5">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
The duck is riding a skateboard in a skate park filled with colorful graffiti, anime style.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/input/17160902d2nl.jpg" alt="Character 1">
</div>
<div class="grid_item">
<img src="static/images/subject/output/logo_1.jpg" alt="Character 2">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Show the logo printed elegantly on the front of a premium product box, nestled among natural elements like leaves and wood to reflect an eco-friendly brand.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/output/logo_2.jpg" alt="Character 3">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Incorporate the logo into a stylish name badge hanging from a lanyard, worn by participants at a professional conference with a bright and enaging background.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/output/logo_3.jpg" alt="Character 4">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Render the logo in dynamic animation on a digital billboard, showcasing it in a colorful urban landscape as commuters pass by during evening rush hour.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/output/logo_4.jpg" alt="Character 5">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Display the logo in a minimalist style printed in white on a matte black ceramic coffee mug, alongside a steaming cup of coffee on a cozy cafe table.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/input/test_ip_2.jpg" alt="Character 1">
</div>
<div class="grid_item">
<img src="static/images/subject/output/ip_1.jpg" alt="Character 2">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
The girl's pattern is printed on the computer screen and the packing box on the table, with rich anime elements.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/output/ip_2.jpg" alt="Character 3">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
The girl’s style acrylic standing plaque is placed in front of the computer on the desk.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/output/ip_3.jpg" alt="Character 4">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Print the girl's design on a handsome off-road vehicle, with the streets of the city behind it.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/output/ip_4.jpg" alt="Character 5">
<h4 style="font-size: 8px;" class="subtitle has-text-centered">
The casing of a desktop computer from ASUS features a design of this cartoon girl. The main unit is placed on the desk, with a close-up
showcasing the design details of the case. The girl's pattern blends seamlessly with the exterior of the unit. The transparent case
design allows the internal hardware to be clearly visible, with blinking LED lights highlighting the details of the graphics card, motherboard, and other components.
</h4>
</div>
</div>
</div>
<div class="item">
<div class="grid_container">
<div class="grid_item">
<img src="static/images/subject/input/test_icon_1.jpg" alt="Character 1">
</div>
<div class="grid_item">
<img src="static/images/subject/output/icon_4.jpg" alt="Character 2">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Attach this icon to the top right corner of a pair of jeans, product image.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/output/icon_1.jpg" alt="Character 3">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Place this icon in the center of a sleek black leather wallet on a wooden table.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/output/icon_2.jpg" alt="Character 4">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Stick this icon to the right sleeve of a stylish red sports jacket hanging in a vibrant urban alley.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/output/icon_3.jpg" alt="Character 5">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Stick this icon on the tag hanging on the fashionable red jacket.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/input/test_toy_1.jpg" alt="Character 1">
</div>
<div class="grid_item">
<img src="static/images/subject/output/toy_4.jpg" alt="Character 2">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
the furry duck toy wears a blue sweater, is placed on a bookshelf nearby a television.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/output/toy_1.jpg" alt="Character 3">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Plush ducks are placed on Spider Man's head and shuttle through the city with him.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/output/toy_3.jpg" alt="Character 4">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Plush ducks are drifting on the sea surface in a small boat.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/output/toy_2.jpg" alt="Character 5">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Plush duck toy wearing sunglasses, placed next to vinyl record, rock style.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/input/test_creative_1.jpg" alt="Character 1">
</div>
<div class="grid_item">
<img src="static/images/subject/output/creative_1.jpg" alt="Character 2">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
The fox is standing with Snow White in front of a cartoon castle gate.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/output/creative_2.jpg" alt="Character 3">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Make this fox become a twin fox. They are in the office, with one fox looking at his watch.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/output/creative_3.jpg" alt="Character 4">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
There is a fox on the pedestrian street of the city, surrounded by people coming and going.
</h4>
</div>
<div class="grid_item">
<img src="static/images/subject/output/creative_4.jpg" alt="Character 5">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
The fox pendant is hanging next to the backpack, with a close-up of the fox pendant and a blurred background.
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Subject Editing -->
<!-- Portrait Editing -->
<section id="portrait_section" class="hero is-small">
<div class="hero-body">
<div class="container">
<!-- Paper video. -->
<h2 class="title is-3">Portrait-Consistency Generation</h2>
<div id="subject-carousel" class="carousel results-carousel">
<div class="item">
<div class="grid_container">
<div class="grid_item">
<img src="static/images/face/input/human_1.jpg" alt="Character 1">
</div>
<div class="grid_item">
<img src="static/images/face/output/human_1_1.jpg" alt="Character 2">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Dress the character in the image with elf ears and a wizard's robe, transforming them into a mage character from a fantasy world.
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/output/human_1_2.jpg" alt="Character 3">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Make the character in the image embody the goddess Artemis, adorned in ancient Greek-style clothing, showcasing elegance and strength.
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/output/human_1_3.jpg" alt="Character 4">
<h4 style="font-size: 9px;" class="subtitle has-text-centered">
(Seed: xxx) Maintain the facial features, A girl is wearing a neat police uniform with "HOPPS" labeled on it and sporting a badge with a cute Disney cartoon style like Officer Judy Hopps from "Zootopia". She has large, bright purple eyes, smiling with a friendly and confident demeanor. She stands in front of a microphone, seemingly giving a speech or presentation, with lively gestures that convey positive emotions. The background is blurred, featuring a cartoon logo of "Police Department".
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/output/human_1_4.jpg" alt="Character 5">
<h4 style="font-size: 9px;" class="subtitle has-text-centered">
(Seed: yyy) Maintain the facial features, A girl is wearing a neat police uniform with "HOPPS" labeled on it and sporting a badge with a cute Disney cartoon style like Officer Judy Hopps from "Zootopia". She has large, bright purple eyes, smiling with a friendly and confident demeanor. She stands in front of a microphone, seemingly giving a speech or presentation, with lively gestures that convey positive emotions. The background is blurred, featuring a cartoon logo of "Police Department".
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/input/human_2.jpg" alt="Character 1">
</div>
<div class="grid_item">
<img src="static/images/face/output/human_2_1.jpg" alt="Character 2">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Keep the characters in the picture unchanged and switch the background to Chinese architecture.
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/output/human_2_2.jpg" alt="Character 3">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Transform the character into a modern athlete, wearing shiny sportswear.
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/output/human_2_3.jpg" alt="Character 4">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Replace the character's clothing with a Chinese traditional clothing, with an ancient teahouse in the background.
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/output/human_2_4.jpg" alt="Character 5">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Insert the character into Grant Wood’s "American Gothic" scene, filled with a rural atmosphere.
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/input/human_3.jpg" alt="Character 1">
</div>
<div class="grid_item">
<img src="static/images/face/output/human_3_1.jpg" alt="Character 2">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Replace the character's outfit with an Indian sari and place her in a colorful market.
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/output/human_3_2.jpg" alt="Character 3">
<h4 style="font-size: 8px;" class="subtitle has-text-centered">
the man like muscular superhero character standing confidently in an underwater setting. He is dressed in a striking
metallic costume featuring green and gold hues, designed with intricate patterns that evoke a sense of aquatic origins. The
character holds a powerful trident in one hand and a shield in the other, emphasizing his role as a protector of the seas. Water splashes around him, enhancing the dynamic and heroic
atmosphere of the scene. His flowing hair adds to the dramatic effect, highlighting his fierce demeanor as he prepares for action in the depths of the ocean.
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/output/human_3_3.jpg" alt="Character 4">
<h4 style="font-size: 8px;" class="subtitle has-text-centered">
the person seated at a chessboard, holding a knight piece in their hand. The chess setup includes a mix of wooden and lightcolored
pieces, creating a contrast against a polished wooden table. Surrounding the chessboard are various small bottles, likely containing different liquids, suggesting an assortment of
beverages or condiments. The person is dressed in a simple black shirt with a white collar, exuding a vintage or classic aesthetic, and has short, styled hair. The backdrop is a muted gray.
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/output/human_3_4.jpg" alt="Character 5">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Replace the character's clothing with classic Western cowboy attire, holding a guitar by the campfire.
</h4>
</div>
</div>
</div>
<div class="item">
<div class="grid_container">
<div class="grid_item">
<img src="static/images/face/input/human_4.jpg" alt="Character 1">
</div>
<div class="grid_item">
<img src="static/images/face/output/human_4_1.jpg" alt="Character 2">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Dress the character in the image with elf ears and a wizard's robe, transforming them into a mage character from a fantasy world.
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/output/human_4_2.jpg" alt="Character 3">
<h4 style="font-size: 8px;" class="subtitle has-text-centered">
The man, with his white hair billowing in the gentle breeze, glides down the sunlit street on his sleek white electric scooter, a picture
of carefree joy. He’s dressed in a light blue shirt and comfortable jeans, exuding a relaxed charm as he makes his way to the local
market to pick up groceries. The pleasant weather adds to his contentment, with birds chirping and the sun casting a warm glow. Behind him, a colorful roadside vendor displays vibrant
fruits and fresh flowers, creating a lively scene. The man smiles at the vendor, appreciating the community spirit around him, as he feels the excitement of a simple errand that brightens his day.
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/output/human_4_3.jpg" alt="Character 4">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Dress the character in old-fashioned pirate attire, standing inside a ship's cabin.
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/output/human_4_4.jpg" alt="Character 5">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Dress the character in the image in Harry Potter's wizarding robes, holding a wand as if casting a spell.
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/input/human_5.jpg" alt="Character 1">
</div>
<div class="grid_item">
<img src="static/images/face/output/human_5_1.jpg" alt="Character 2">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Transform the character in the image into Superman, wearing a blue jumpsuit, a red cape, and featuring the Superman logo on the chest.
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/output/human_5_2.jpg" alt="Character 3">
<h4 style="font-size: 8px;" class="subtitle has-text-centered">
the man dressed in traditional attire inspired by historical Asian clothing. He has a decorative hair accessory. Her outfit consists of layered garments featuring vibrant colors, notably orange and
blue, complemented by a patterned sash around his waist. He carries a long, ornate sword with a decorative hilt, resting against her arm. Additionally, he has a straw backpack slung over one
shoulder and various pouches attached to her belt, suggesting readiness for travel or adventure. The backdrop is a lush, green landscape, enhancing the adventurous theme of the image.
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/output/human_5_3.jpg" alt="Character 4">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Dress the character in medieval knight armor, standing in front of a castle.
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/output/human_5_4.jpg" alt="Character 5">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Make the character in the image resemble Peter Pan, dressed in a green outfit and evoking a sense of flying.
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/input/human_6.jpg" alt="Character 1">
</div>
<div class="grid_item">
<img src="static/images/face/output/human_6_1.jpg" alt="Character 2">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Dress the character in the image in the combat gear of Desert Fox, displaying a brave and adventurous demeanor.
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/output/human_6_2.jpg" alt="Character 3">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Dress the character in the image with elf ears and a wizard's robe, transforming them into a mage character from a fantasy world.
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/output/human_6_3.jpg" alt="Character 4">
<h4 style="font-size: 8px;" class="subtitle has-text-centered">
the man standing confidently in traditional Middle Eastern attire. He is wearing a light, flowing thobe with intricate golden detailing
along the neckline. A white dishdasha is worn underneath, complementing the overall elegant look. The attire is completed
with a black agal and a white ghutrah draped gracefully. The background is plain, emphasizing the cultural significance of the garment. The background is a magnificent palace.
</h4>
</div>
<div class="grid_item">
<img src="static/images/face/output/human_6_4.jpg" alt="Character 5">
<h4 style="font-size: 12px;" class="subtitle has-text-centered">
Change the character's attire to traditional Russian lace headscarf and long skirt, with a winter snow landscape around her.
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Portrait Editing -->
<!-- General Editing -->
<section id="general_section" class="hero is-small is-light">
<div class="hero-body">
<div class="container">
<h2 class="title is-3">Flexible instruction or descriptions</h2>
<div id="results-carousel" class="carousel results-carousel">
<div class="item">
<!-- Your image here -->
<div style="display: flex; flex-wrap: wrap; gap: 20px;">
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 200px; justify-content: center; border: 1px solid #ccc;">
<img src="static/images/general/general_1_1.jpg" alt="Image 1A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/general/general_1_2.jpg" alt="Image 1B" style="height: 100%; width: auto;">
</div>
<h4 style="font-size: 16px;" class="subtitle has-text-centered">A man in a blue jacket is standing on a street, facing the camera.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 200px; justify-content: center; border: 1px solid #ccc;">
<img src="static/images/general/general_2_1.jpg" alt="Image 2A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/general/general_2_2.jpg" alt="Image 2B" style="height: 100%; width: auto;">
</div>
<h4 style="font-size: 16px;" class="subtitle has-text-centered">Move the location to a desert.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 200px; justify-content: center; border: 1px solid #ccc;">
<img src="static/images/general/general_3_1.jpg" alt="Image 3A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/general/general_3_2.jpg" alt="Image 3B" style="height: 100%; width: auto;">
</div>
<h4 style="font-size: 16px;" class="subtitle has-text-centered">Let this car in {image} drive on Mars, dust kicked up.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 200px; justify-content: center; border: 1px solid #ccc;">
<img src="static/images/general/general_4_1.jpg" alt="Image 4A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/general/general_4_2.jpg" alt="Image 4B" style="height: 100%; width: auto;">
</div>
<h4 style="font-size: 16px;" class="subtitle has-text-centered">A stuffed bunny is holding an apple and standing on the table.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 200px; justify-content: center; border: 1px solid #ccc;">
<img src="static/images/general/general_5_1.jpg" alt="Image 3A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/general/general_5_2.jpg" alt="Image 3B" style="height: 100%; width: auto;">
</div>
<h4 style="font-size: 16px;" class="subtitle has-text-centered">a couple getting their picture taken in front of the skyscraper.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 200px; justify-content: center; border: 1px solid #ccc;">
<img src="static/images/general/general_6_1.jpg" alt="Image 4A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/general/general_6_2.jpg" alt="Image 4B" style="height: 100%; width: auto;">
</div>
<h4 style="font-size: 16px;" class="subtitle has-text-centered">Please let her sitting on a wooden boat.</h4>
</div>
</div>
<!-- Additional div blocks for more pairs of images can be added here -->
</div>
</div>
<div class="item">
<!-- Your image here -->
<div style="display: flex; flex-wrap: wrap; gap: 20px;">
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 200px; justify-content: center; border: 1px solid #ccc;">
<img src="static/images/general/general_7_1.jpg" alt="Image 1A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/general/general_7_2.jpg" alt="Image 1B" style="height: 100%; width: auto;">
</div>
<h4 style="font-size: 16px;" class="subtitle has-text-centered">Make the man standing on road and holding a skateboard.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 200px; justify-content: center; border: 1px solid #ccc;">
<img src="static/images/general/general_8_1.jpg" alt="Image 2A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/general/general_8_2.jpg" alt="Image 2B" style="height: 100%; width: auto;">
</div>
<h4 style="font-size: 16px;" class="subtitle has-text-centered">Let the robot dance.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 200px; justify-content: center; border: 1px solid #ccc;">
<img src="static/images/general/general_9_1.jpg" alt="Image 3A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/general/general_9_2.jpg" alt="Image 3B" style="height: 100%; width: auto;">
</div>
<h4 style="font-size: 16px;" class="subtitle has-text-centered">Change the cloth color from orange to pink.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 200px; justify-content: center; border: 1px solid #ccc;">
<img src="static/images/general/general_10_1.jpg" alt="Image 4A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/general/general_10_2.jpg" alt="Image 4B" style="height: 100%; width: auto;">
</div>
<h4 style="font-size: 14px;" class="subtitle has-text-centered">A photo of a park bench. The bench is made of wood and painted orange and dark green. Behind the bench is a row of green shrubs. There is a husky lying on a bench.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 200px; justify-content: center; border: 1px solid #ccc;">
<img src="static/images/general/general_11_1.jpg" alt="Image 3A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/general/general_11_2.jpg" alt="Image 3B" style="height: 100%; width: auto;">
</div>
<h4 style="font-size: 14px;" class="subtitle has-text-centered">A young woman with long red hair and fair skin stands in what appears to be a warehouse. She is wearing a simple red long-sleeved t-shirt and carrying a dark blue tote bag.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 200px; justify-content: center; border: 1px solid #ccc;">
<img src="static/images/general/general_12_1.jpg" alt="Image 4A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/general/general_12_2.jpg" alt="Image 4B" style="height: 100%; width: auto;">
</div>
<h4 style="font-size: 14px;" class="subtitle has-text-centered">A photo of a small boat moored on calm water, with a black cormorant standing on the stern, spreading its wings. The boat is white, with a Yamaha outboard motor on the stern. The port side of the boat reads 'ME 14XSR'. A man sitting on the boat.</h4>
</div>
</div>
<!-- Additional div blocks for more pairs of images can be added here -->
</div>
</div>
<div class="item">
<!-- Your image here -->
<div style="display: flex; flex-wrap: wrap; gap: 20px;">
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 200px; justify-content: center; border: 1px solid #ccc;">
<img src="static/images/general/general_13_1.jpg" alt="Image 1A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/general/general_13_2.jpg" alt="Image 1B" style="height: 100%; width: auto;">
</div>
<h4 style="font-size: 16px;" class="subtitle has-text-centered">Add a Santa Claus to the sky in {image}.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 200px; justify-content: center; border: 1px solid #ccc;">
<img src="static/images/general/general_14_1.jpg" alt="Image 2A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/general/general_14_2.jpg" alt="Image 2B" style="height: 100%; width: auto;">
</div>
<h4 style="font-size: 14px;" class="subtitle has-text-centered">A vintage car parked on a forest path, the car is dark green, the hood
covere with a blu satin, looks mysterious and elegant. The car is surrounded by fallen leaves, flanked by towering trees, the light through the leaves sprinkled down, creating a quiet, retro atmosphere.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 200px; justify-content: center; border: 1px solid #ccc;">
<img src="static/images/general/general_15_1.jpg" alt="Image 3A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/general/general_15_2.jpg" alt="Image 3B" style="height: 100%; width: auto;">
</div>
<h4 style="font-size: 16px;" class="subtitle has-text-centered">Let the boat run in the Arctic.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 200px; justify-content: center; border: 1px solid #ccc;">
<img src="static/images/general/general_16_1.jpg" alt="Image 4A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/general/general_16_2.jpg" alt="Image 4B" style="height: 100%; width: auto;">
</div>
<h4 style="font-size: 16px;" class="subtitle has-text-centered">Let her touch her hair.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 200px; justify-content: center; border: 1px solid #ccc;">
<img src="static/images/general/general_17_1.jpg" alt="Image 3A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/general/general_17_2.jpg" alt="Image 3B" style="height: 100%; width: auto;">
</div>
<h4 style="font-size: 16px;" class="subtitle has-text-centered">The ocean wave gets stronger and the man is closer.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 200px; justify-content: center; border: 1px solid #ccc;">
<img src="static/images/general/general_18_1.jpg" alt="Image 4A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/general/general_18_2.jpg" alt="Image 4B" style="height: 100%; width: auto;">
</div>
<h4 style="font-size: 16px;" class="subtitle has-text-centered">Create a futuristic cityscape with a neon-lit monkey in a cybernetic suit, sitting on a skyscraper at sunset.</h4>
</div>
</div>
<!-- Additional div blocks for more pairs of images can be added here -->
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End General Editing -->
<!--Local Editing-->
<section id="local_section" class="hero is-small">
<div class="hero-body">
<div class="container">
<h2 class="title is-3">Local Editing</h2>
<div id="results-carousel" class="carousel results-carousel">
<div class="item">
<!-- Your image here -->
<div style="display: flex; flex-wrap: wrap; gap: 20px;">
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 160px; justify-content: center; border: 1px solid #ccc;">
<div class="mask_container">
<img src="static/images/local/local_1_1.jpg" alt="Image 1A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/local/local_1_m.jpg" alt="图片2" class="image1">
<img src="static/images/local/local_1_2.jpg" alt="Image 1B" style="height: 100%; width: auto;">
</div>
</div>
<h4 style="font-size: 9px;" class="subtitle has-text-centered">
Two nearly identical dark-colored vases with light blue designs sit on a light gray surface. Each vase features a light blue female figure in a flowing gown, positioned slightly differently on each vase. The necks and bases of the vases have decorative light blue bands with intricate patterns. The background behind the vases is a lighter gray than the surface they rest on. A subtle shadow is cast by each vase onto the surface.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 160px; justify-content: center; border: 1px solid #ccc;">
<div class="mask_container">
<img src="static/images/local/local_2_1.jpg" alt="Image 1A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/local/local_2_m.jpg" alt="图片2" class="image1">
<img src="static/images/local/local_2_2.jpg" alt="Image 1B" style="height: 100%; width: auto;">
</div>
</div>
<h4 style="font-size: 9px;" class="subtitle has-text-centered">
A driver's perspective from inside a car traveling on a highway. A green highway sign indicates Comerica Park, Ford Field, and exit 46. A speed limit sign of 55 mph is visible on the right side of the highway. Construction barrels and traffic cones suggest ongoing roadwork in the median. An overpass crosses above the highway in the background.
</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 160px; justify-content: center; border: 1px solid #ccc;">
<div class="mask_container">
<img src="static/images/local/local_3_1.jpg" alt="Image 1A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/local/local_3_m.jpg" alt="图片2" class="image1">
<img src="static/images/local/local_3_2.jpg" alt="Image 1B" style="height: 100%; width: auto;">
</div>
</div>
<h4 style="font-size: 9px;" class="subtitle has-text-centered">
A chestnut-colored horse with a prominent white blaze on its face stands in the foreground of the image. It looks directly at the camera, and its ears are perked forward. A small, dark brown miniature horse or donkey is visible in the background to the left of the larger horse. A red barn is partially visible behind the small equine. The background consists of a grassy field and a line of trees.
</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 160px; justify-content: center; border: 1px solid #ccc;">
<div class="mask_container">
<img src="static/images/local/local_4_1.jpg" alt="Image 1A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/local/local_4_m.jpg" alt="图片2" class="image1">
<img src="static/images/local/local_4_2.jpg" alt="Image 1B" style="height: 100%; width: auto;">
</div>
</div>
<h4 style="font-size: 12px;" class="subtitle has-text-centered">By referencing the mask, restore a partial image from the doodle {image} that aligns with the textual explanation: "1 white old owl".</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 160px; justify-content: center; border: 1px solid #ccc;">
<div class="mask_container">
<img src="static/images/local/local_5_1.jpg" alt="Image 1A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/local/local_5_m.jpg" alt="图片2" class="image1">
<img src="static/images/local/local_5_2.jpg" alt="Image 1B" style="height: 100%; width: auto;">
</div>
</div>
<h4 style="font-size: 12px;" class="subtitle has-text-centered">In line with the details in "A small teddy bear tucked in to the pocket of a suit case", restore the high-quality definition of the mask part of the {image}.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 160px; justify-content: center; border: 1px solid #ccc;">
<div class="mask_container">
<img src="static/images/local/local_6_1.jpg" alt="Image 1A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/local/local_6_m.jpg" alt="图片2" class="image1">
<img src="static/images/local/local_6_2.jpg" alt="Image 1B" style="height: 100%; width: auto;">
</div>
</div>
<h4 style="font-size: 12px;" class="subtitle has-text-centered">Generate the {image} mask region to real image: A plate is full of broccoli and some type of meat.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 160px; justify-content: center; border: 1px solid #ccc;">
<div class="mask_container">
<img src="static/images/local/local_7_1.jpg" alt="Image 1A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/local/local_7_m.jpg" alt="图片2" class="image1">
<img src="static/images/local/local_7_2.jpg" alt="Image 1B" style="height: 100%; width: auto;">
</div>
</div>
<h4 style="font-size: 12px;" class="subtitle has-text-centered">Please colorize the selected area mask in {image} without changing anything else.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 160px; justify-content: center; border: 1px solid #ccc;">
<div class="mask_container">
<img src="static/images/local/local_8_1.jpg" alt="Image 1A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/local/local_8_m.jpg" alt="图片2" class="image1">
<img src="static/images/local/local_8_2.jpg" alt="Image 1B" style="height: 100%; width: auto;">
</div>
</div>
<h4 style="font-size: 12px;" class="subtitle has-text-centered">Restore the real image using {image}, mask and description: "A bus is driving down a road with cars behind it."</h4>
</div>
</div>
<!-- Additional div blocks for more pairs of images can be added here -->
</div>
</div>
<div class="item">
<!-- Your image here -->
<div style="display: flex; flex-wrap: wrap; gap: 20px;">
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 260px; justify-content: center; border: 1px solid #ccc;">
<div class="mask_container">
<img src="static/images/local/local_9_1.jpg" alt="Image 1A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/local/local_9_m.jpg" alt="图片2" class="image1">
<img src="static/images/local/local_9_2.jpg" alt="Image 1B" style="height: 100%; width: auto;">
</div>
</div>
<h4 style="font-size: 16px;" class="subtitle has-text-centered">Add a bench is in front brick wall in mask of {image}.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 260px; justify-content: center; border: 1px solid #ccc;">
<div class="mask_container">
<img src="static/images/local/local_10_1.jpg" alt="Image 1A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/local/local_10_m.jpg" alt="图片2" class="image1">
<img src="static/images/local/local_10_2.jpg" alt="Image 1B" style="height: 100%; width: auto;">
</div>
</div>
<h4 style="font-size: 14px;" class="subtitle has-text-centered">Add a dog following her into {image} within the mask.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 200px; justify-content: center; border: 1px solid #ccc;">
<div class="mask_container">
<img src="static/images/local/local_11_1.jpg" alt="Image 1A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/local/local_11_m.jpg" alt="图片2" class="image1">
<img src="static/images/local/local_11_2.jpg" alt="Image 1B" style="height: 100%; width: auto;">
</div>
</div>
<h4 style="font-size: 14px;" class="subtitle has-text-centered">I need penknife removed from {image}, according to the mask derived from mask.</h4>
</div>
</div>
<div style="flex: 1 1 calc(50% - 20px);">
<div style="display: flex; flex-direction: column;">
<div style="display: flex; height: 200px; justify-content: center; border: 1px solid #ccc;">
<div class="mask_container">
<img src="static/images/local/local_12_1.jpg" alt="Image 1A" style="height: 100%; width: auto; margin-right: 10px;">
<img src="static/images/local/local_12_m.jpg" alt="图片2" class="image1">
<img src="static/images/local/local_12_2.jpg" alt="Image 1B" style="height: 100%; width: auto;">
</div>
</div>
<h4 style="font-size: 14px;" class="subtitle has-text-centered">
Remove the apple in {image} mask.
</h4>
</div>
</div>