forked from junjiehe96/UniPortrait-Page
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·378 lines (313 loc) · 14.1 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description"
content="Offcial website of 'UniPortrait: A Unified Framework for Identity-Preserving Single- and Multi-Human Image Personalization'">
<meta name="keywords" content="UniPortrait, Identity-Preserving, Human Image Personalization">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>UniPortrait</title>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-MRQC0YFE17');
</script>
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://unpkg.com/interactjs/dist/interact.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./static/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="./static/slick/slick-theme.css" />
<link rel="stylesheet" href="./static/css/bulma.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 defer src="./static/js/fontawesome.all.min.js"></script>
<script src="./static/js/bulma-slider.min.js"></script>
<script src="./static/js/index.js"></script>
</head>
<body>
<style>
.container {
max-width: 1280px;
margin: 0 auto;
}
</style>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start" style="flex-grow: 1; justify-content: center;">
<a class="navbar-item" href="https://atchen.com">
<span class="icon">
<i class="fas fa-home"></i>
</span>
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More Research
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="https://aigcdesigngroup.github.io/replace-anything/">
ReplaceAnything
</a>
<a class="navbar-item" href="https://aigcdesigngroup.github.io/transfer-anything/">
TransferAnything
</a>
<a class="navbar-item" href="https://aigcdesigngroup.github.io/homepage_anytext/">
AnyText
</a>
<a class="navbar-item" href="https://aigcdesigngroup.github.io/wordart.home/">
WordArt
</a>
</div>
</div>
</div>
</div>
</nav>
<section class="hero">
<div class="hero-body">
<div class="container">
<div class="container has-text-centered">
<h1 class="title is-1 publication-title">
UniPortrait: A Unified Framework for Identity-Preserving Single- and Multi-Human Image Personalization
</h1>
<div class="is-size-5 publication-authors">
<div class="author-block">
<a href="https://github.com/junjiehe96">Junjie He</a>,
</div>
Yifeng Geng,
<a href="https://scholar.google.com/citations?user=FJwtMf0AAAAJ&hl=zh-CN">Liefeng Bo</a>
</div>
<div class="is-size-5 publication-authors">
<span class="author-block">Institute for Intelligent Computing，Alibaba Group</span>
</div>
<div class="column has-text-centered">
<div class="publication-links">
<!-- PDF Link. -->
<span class="link-block">
<a href="https://arxiv.org/pdf/2408.05939" 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>
<span class="link-block">
<a href="https://github.com/junjiehe96/UniPortrait"
class="external-link button is-normal is-rounded is-dark">
<span class="icon">
<i class="fab fa-github"></i>
</span>
<span>GitHub</span>
</a>
</span>
<span class="link-block">
<a href="https://huggingface.co/spaces/Junjie96/UniPortrait"
class="external-link button is-normal is-rounded is-dark">
<span class="icon">
<i class="fa fa-smile"></i>
</span>
<span>Demo</span>
</a>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="hero teaser">
<div class="hero-body">
<div class="container is-max-desktop">
<img src="./static/documents/highlight.png" alt="Teaser Image" height="100%">
<h2 class="subtitle has-text-centered">
</br>
Our method customizes single- and multi-ID images in a unified manner, providing high-fidelity identity preservation, extensive facial editability, free-form text description, and no requirement for a predetermined layout.
</h2>
</div>
</div>
</section>
<section class="section">
<div class="container is-max-desktop">
<!-- Abstract. -->
<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>
This paper presents UniPortrait, an innovative human image personalization framework that unifies single- and multi-ID customization with high face fidelity, extensive facial editability, free-form input description, and diverse layout generation. UniPortrait consists of only two plug-and-play modules: an ID embedding module and an ID routing module. The ID embedding module extracts versatile editable facial features with a decoupling strategy for each ID and embeds them into the context space of diffusion models. The ID routing module then combines and distributes these embeddings adaptively to their respective regions within the synthesized image, achieving the customization of single and multiple IDs. With a carefully designed two-stage training scheme, UniPortrait achieves superior performance in both single- and multi-ID customization. Quantitative and qualitative experiments demonstrate the advantages of our method over existing approaches as well as its good scalability, e.g., the universal compatibility with existing generative control tools.
</p>
</div>
</div>
</div>
<!--/ Abstract. -->
</div>
</section>
<section class="method">
<div class="container is-max-desktop">
<!-- Abstract. -->
<div class="columns is-centered has-text-centered">
<div class="column is-four-fifths">
<h2 class="title is-3">Method</h2>
<div class="content has-text-justified">
<p>
Our proposed UniPortrait consists of two plug-and-play modules: an ID embedding module and an ID routing module. The ID embedding module extracts versatile editable facial features with a decoupling strategy for each ID, and the ID routing module combines and distributes these embeddings to their respective locations adaptively without the intervention for prompts and layouts. The entire training process of the framework is curated into two stages, i.e., the single-ID training stage and the multi-ID fine-tuning stage.
</p>
</div>
<div class="container is-max-desktop">
<img src="./static/documents/framework.png" alt="Image0" height="100%">
</div>
</div>
</div>
<!--/ Abstract. -->
</div>
</section>
<section class="section">
<div class="container">
<h3 class="title has-text-centered">Text-to-Single-ID Personalization Examples</h3>
<div id="results-carousel-a" class="carousel results-carousel carousel-control-prev carousel-inner" data-ride="carousel">
<div>
<div class="results-item is-max-desktop">
<img src="./static/documents/single-id-a.png", height="100%">
</div>
</div>
<div>
<div class="results-item is-max-desktop">
<img src="./static/documents/single-id-b.png" alt="Image0" height="100%">
</div>
</div>
</div>
<div class="content has-text-centered">
<p align="center">
Scroll for more examples.
</p>
</div>
</div>
</section>
<section class="section">
<div class="container">
<h3 class="title has-text-centered">Text-to-Multi-ID Personalization Examples</h3>
<div id="results-carousel-b" class="carousel results-carousel carousel-control-prev carousel-inner" data-ride="carousel">
<div>
<div class="results-item is-max-desktop">
<img src="./static/documents/multi-id-a.png", height="100%">
</div>
</div>
<div>
<div class="results-item is-max-desktop">
<img src="./static/documents/multi-id-b.png" alt="Image0" height="100%">
</div>
</div>
</div>
<div class="content has-text-centered">
<p align="center">
Scroll for more examples.
</p>
</div>
</div>
</section>
<section class="section">
<div class="container is-max-desktop">
<!-- Abstract. -->
<div class="columns is-centered has-text-centered">
<div class="column is-four-fifths">
<h2 class="title is-3">Comparison with Previous Works</h2>
<div class="container is-max-desktop">
<img src="./static/documents/compare-a.png" alt="Image0" height="100%">
</div>
<div class="content has-text-justified">
<p align="center">
Qualitative comparison of different methods on single-ID image customization.
</p>
</div>
<div class="container is-max-desktop">
<img src="./static/documents/compare-b.png" alt="Image0" height="100%">
</div>
<div class="content has-text-centered">
<p align="center">
Qualitative comparison of different methods on multi-ID image customization. For compatibility with FastComposer, numerical plural expressions (e.g., “two men”) are converted into singular phrases linked by “and” (e.g., “a man and a man”).
</p>
</div>
<div class="container is-max-desktop">
<img src="./static/documents/compare-c.png" alt="Image0" width="60%">
</div>
<div class="content has-text-justified">
<p align="center">
Additional examples of multi-ID customization. UniPortrait is capable of customizing multi-ID images using free-form prompts and generating diverse layouts.
</p>
</div>
</div>
</div>
<!--/ Abstract. -->
</div>
</section>
<section class="section">
<div class="container is-max-desktop">
<!-- Abstract. -->
<div class="columns is-centered has-text-centered">
<div class="column is-four-fifths">
<h2 class="title is-3">Diverse Applications</h2>
<div class="container is-max-desktop">
<img src="./static/documents/application.png" alt="Image0" height="100%">
</div>
<div class="content has-text-centered">
<p align="center">
The superior performance of UniPortrait in aligning IDs, maintaining prompt consistency, as well as enhancing the diversity and quality of generated images, paves the way for a plethora of potential downstream applications.
</p>
</div>
</div>
</div>
<!--/ Abstract. -->
</div>
</section>
<section class="section">
<div class="container is-max-desktop">
<!-- Abstract. -->
<div class="columns is-centered has-text-centered">
<div class="column is-four-fifths">
<h2 class="title is-3">Acknowledgements</h2>
<div class="content has-text-centered">
<p align="center">
Most of the face images used in our experiments come from the Pexels, Unsplash, Pixabay, and Wikipedia websites. We thank the owners of these images for sharing their valuable assets. We also thank the StyleGAN2 authors for sharing their high-quality synthesized face images, which constitute another important part of the ID images we used.
</p>
</div>
</div>
</div>
<!--/ Abstract. -->
</div>
</section>
<section class="section" id="BibTeX">
<div class="container content is-max-desktop">
<h2 class="title">BibTeX</h2>
<pre><code>
@article{he2024uniportrait,
title={UniPortrait: A Unified Framework for Identity-Preserving Single-and Multi-Human Image Personalization},
author={He, Junjie and Geng, Yifeng and Bo, Liefeng},
journal={arXiv preprint arXiv:2408.05939},
year={2024}
}
</code></pre>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p align="center">
The website template is borrowed from HyperNeRF.
</p>
</div>
</div>
</footer>
<script type="text/javascript" src="./static/slick/slick.js"></script>
</body>
</html>