-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
515 lines (484 loc) · 38.2 KB
/
Copy pathindex.html
File metadata and controls
515 lines (484 loc) · 38.2 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Z-Image - Efficient Image Generation with Single-Stream Diffusion</title>
<meta name="description" content="Z-Image: A powerful and efficient 6B-parameter image generation model with support for bilingual instructions and fast inference.">
<link rel="stylesheet" href="style.css">
<!-- Lightbox CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css">
<!-- Swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper@11/swiper-bundle.min.css" />
</head>
<body>
<!-- Hero Section -->
<section class="hero" style="background-image: url('images/title_background.jpg')">
<div class="container">
<h1>Z-Image</h1>
<p class="tagline">Efficient Image Generation Model with Single-Stream Diffusion Transformer</p>
<p class="tagline-zh">单流扩散Transformer高效图像生成模型</p>
<!-- === START: 新增链接区域 (图片图标版) === -->
<div class="hero-links">
<div class="hero-link-item">
<div class="left-part">
<span class="icon">
<!-- 使用图片图标 -->
<img src="images/icons/team.jpg" alt="Team Icon" class="no-invert">
</span>
<span class="text">Z-Image Team, Tongyi MAI, Alibaba Group</span>
</div>
</div>
<div class="hero-link-item space-between">
<div class="left-part">
<span class="icon">
<!-- 使用图片图标 -->
<img src="images/icons/arxiv.jpg" alt="Arxiv Icon" class="no-invert">
</span>
<span class="text">Arxiv</span>
</div>
<a href="https://www.arxiv.org/abs/2511.22699" target="_blank" rel="noopener noreferrer" class="url">https://www.arxiv.org/abs/2511.22699</a>
</div>
<div class="hero-link-item space-between">
<div class="left-part">
<span class="icon">
<!-- 使用图片图标 -->
<img src="images/icons/github.jpg" alt="GitHub Icon" class="no-invert">
</span>
<span class="text">GitHub</span>
</div>
<a href="https://github.com/Tongyi-MAI/Z-Image" target="_blank" rel="noopener noreferrer" class="url">https://github.com/Tongyi-MAI/Z-Image</a>
</div>
<div class="hero-link-item space-between">
<div class="left-part">
<span class="icon">
<!-- 使用图片图标 -->
<img src="images/icons/modelscope.jpg" alt="ModelScope Icon" class="no-invert">
</span>
<span class="text">ModelScope</span>
</div>
<a href="https://www.modelscope.cn/models/Tongyi-MAI/Z-Image-Turbo" target="_blank" rel="noopener noreferrer" class="url">https://www.modelscope.cn/models/Tongyi-MAI/Z-Image-Turbo</a>
</div>
<div class="hero-link-item space-between">
<div class="left-part">
<span class="icon">
<!-- 使用图片图标 -->
<img src="images/icons/huggingface.jpg" alt="HuggingFace Icon" class="no-invert">
</span>
<span class="text">HuggingFace</span>
</div>
<a href="https://huggingface.co/Tongyi-MAI/Z-Image-Turbo" target="_blank" rel="noopener noreferrer" class="url">https://huggingface.co/Tongyi-MAI/Z-Image-Turbo</a>
</div>
</div>
<!-- === END: 新增链接区域 === -->
</div>
</section>
<!-- Intro Section -->
<section class="intro">
<div class="container">
<div class="text-block">
<h2>Introduction</h2>
<p>Welcome to the official homepage for the Z-Image project! This is your central hub for everything related to the Z-Image model and its core technologies. We are pleased to introduce Z-Image, an efficient 6-billion-parameter foundation model for image generation. Through systematic optimization, it proves that top-tier performance is achievable without relying on enormous model sizes, delivering strong results in photorealistic generation and bilingual text rendering that are comparable to leading commercial models.</p>
<p>We are publicly releasing two specialized models on Z-Image: Z-Image-Turbo for generation and Z-Image-Edit for editing. The model code, weights, and an online demo are now publicly available to encourage community exploration and use. With this release, we aim to promote the development of generative models that are accessible, low-cost, and high-performance.</p>
<p class="zh">欢迎来到 Z-Image 项目的官方主页！我们很高兴地推出 Z-Image，一个高效的60亿参数图像生成基础模型。它通过系统性的优化证明了顶尖性能的实现无需依赖巨大规模，在照片级真实感图像生成和中英双语文本渲染方面效果突出，其品质可与顶级商业模型相媲美。</p>
<p class="zh">我们公开发布基于Z-Image的两个子模型：用于图像生成的Z-Image-Turbo和用于图像编辑的Z-Image-Edit。我们已将模型代码、权重及在线Demo公开发布，以鼓励社区的探索和使用。我们希望通过此次发布，推动开发兼具普惠性、低成本与高性能的生成模型。</p>
</div>
</section>
<!-- Features Showcase Section -->
<section class="features-showcase">
<div class="container">
<h2>Core Features</h2>
<p class="subtitle">A glance at the powerful capabilities of the Z-Image model.</p>
<div class="showcase-grid">
<!-- Item 1 -->
<div class="showcase-item item-wide" style="background-image: url('images/intro/1.jpg');">
<a href="images/intro/1.jpg" data-lightbox="features-gallery" data-title="Photorealistic" class="showcase-link"></a>
<div class="item-content">
<h3>Photorealistic</h3>
<p>Photography-level Realism</p>
</div>
</div>
<!-- Item 2 -->
<div class="showcase-item light-bg">
<div class="item-content">
<h3>1 Second</h3>
<p>Ultra-fast Inference Speed</p>
</div>
</div>
<!-- Item 3 -->
<div class="showcase-item light-bg">
<div class="item-content">
<h3>6B+</h3>
<p>Parameters</p>
</div>
</div>
<!-- Item 4 -->
<div class="showcase-item item-large" style="background-image: url('images/intro/2.jpg');">
<a href="images/intro/2.jpg" data-lightbox="features-gallery" data-title="Z-Image" class="showcase-link"></a>
<div class="item-content center-content">
<h2>Z-Image</h2>
<p>Single-Stream Diffusion</p>
</div>
</div>
<!-- Item 5 -->
<div class="showcase-item item-tall" style="background-image: url('images/intro/3.jpg');">
<a href="images/intro/3.jpg" data-lightbox="features-gallery" data-title="Bilingual Text" class="showcase-link"></a>
<div class="item-content">
<h3>Bilingual Text</h3>
<p>Accurate Text Rendering</p>
</div>
</div>
<!-- New Item: VRAM Usage -->
<div class="showcase-item light-bg">
<div class="item-content">
<h3>16 GB</h3>
<p>Efficient VRAM Usage</p>
</div>
</div>
<!-- Item 6 -->
<div class="showcase-item item-wide" style="background-image: url('images/intro/4.jpg');">
<a href="images/intro/4.jpg" data-lightbox="features-gallery" data-title="World Knowledge" class="showcase-link"></a>
<div class="item-content">
<h3>World Knowledge</h3>
<p>Deep Semantic Understanding</p>
</div>
</div>
<!-- Item 7 -->
<div class="showcase-item" style="background-image: url('images/intro/5.jpg');">
<a href="images/intro/5.jpg" data-lightbox="features-gallery" data-title="Image Editing" class="showcase-link"></a>
<div class="item-content">
<h3>Image Editing</h3>
<p>Creative Single-image Edits</p>
</div>
</div>
</div>
</div>
</section>
<!-- Models Section -->
<section class="models">
<div class="container">
<h2>Models</h2>
<p>At just 6 billion parameters, the model produces photorealistic images on par with those from models an order of magnitude larger. It can run smoothly on consumer-grade graphics cards with less than 16GB of VRAM, making advanced image generation technology accessible to a wider audience. </p>
<p>仅以60亿参数的规模，该模型能生成与参数量大一个数量级的模型相媲美的照片级真实感图像。能够在16GB显存的消费级显卡上流畅运行，让顶尖的图像生成技术惠及普通大众。</p>
<div class="model-grid">
<!-- Model 0: Z-Image-Omni-Base -->
<div class="model-card">
<div class="model-header">
<span class="emoji">🏛️</span>
<h3>Z-Image-Omni-Base</h3>
</div>
<div class="model-desc">
<p>A foundation model designed for easy fine-tuning, which unifies the core capabilities of image generation and editing to unlock the community's potential for custom development and innovative applications.</p>
<p class="zh">一个易于微调的全能基础模型，它统一了图像生成与编辑两大核心功能，旨在为社区的定制化开发与创新应用释放全部潜力。</p>
</div>
<div class="features">
<span class="feature-tag">Easy to finetune</span>
<span class="feature-tag">Unified T2I & I2I</span>
</div>
</div>
<!-- Model 1: Z-Image-Turbo -->
<div class="model-card">
<div class="model-header">
<span class="emoji">🚀</span>
<h3>Z-Image-Turbo</h3>
</div>
<div class="model-desc">
<p>A distilled version of Z-Image with strong capabilities in photorealistic image generation, accurate rendering of both Chinese and English text, and robust adherence to bilingual instructions. It achieves performance comparable to or exceeding leading competitors with only 8 steps.</p>
<p class="zh">Z-Image 的蒸馏版本，擅长生成逼真图像，能精准渲染中英文文本，并严格遵循双语指令。仅需 8步推理评估即可达到或超越主流竞品性能。</p>
</div>
<div class="features">
<span class="feature-tag">8 steps</span>
<span class="feature-tag">Fast Inference</span>
<span class="feature-tag">Photorealistic</span>
<span class="feature-tag">Bilingual Text</span>
</div>
</div>
<!-- Model 2: Z-Image-Edit -->
<div class="model-card">
<div class="model-header">
<span class="emoji">✍</span>
<h3>Z-Image-Edit</h3>
</div>
<div class="model-desc">
<p>A continued-training variant of Z-Image specialized for image editing. It excels at following complex instructions to perform a wide range of tasks, from precise local modifications to global style transformations, while maintaining high edit consistency.</p>
<p class="zh">Z-Image 的持续训练变体，专用于图像编辑。它精于遵循复杂指令，能够胜任从精准的局部修改到全局的风格变换等多种任务，并同时保持高度的编辑一致性。</p>
</div>
<div class="features">
<span class="feature-tag">Strong Instruction-Following</span>
<span class="feature-tag">Creative Editing</span>
</div>
</div>
</div>
</div>
</section>
<!-- NEW: Architecture Section -->
<section class="architecture">
<div class="container">
<div class="text-block">
<h2>Architecture</h2>
<p>The Z-Image model adopts a Single-Stream Diffusion Transformer architecture. This design unifies the processing of various conditional inputs (like text and image embeddings) with the noisy image latents into a single sequence, which is then fed into the Transformer backbone.</p>
<p class="zh">Z-Image 模型采用单流扩散 Transformer 架构。该设计将文本、图像嵌入等多种条件输入与带噪声的图像潜变量统一为单个序列，并送入 Transformer 主干网络进行处理。</p>
</div>
<div class="architecture-image">
<img src="images/architecture.png" alt="Z-Image Model Architecture">
</div>
</div>
</section>
<section class="arena">
<div class="container">
<div class="text-block">
<h2>Arena</h2>
<p>According to the Elo-based Human Preference Evaluation (on <em>Alibaba AI Arena</em>), Z-Image shows highly competitive performance against other leading models, while achieving state-of-the-art results among open-source models.</p>
<p class="zh">根据 Elo 人类偏好评估（在 <em>Alibaba AI Arena</em> 上），Z-Image 与其他领先模型相比表现出极强的竞争力，同时在开源模型中取得了最先进的结果。</p>
</div>
<div class="arena-image">
<img src="images/arena.jpg" alt="Z-Image Model Architecture">
</div>
</div>
</section>
<!-- Photorealistic Section -->
<section class="reality">
<div class="container">
<div class="text-block">
<h2>Efficient Photorealistic Quality 极致高效的照片级真实感</h2>
<p>Z-Image-Turbo excels at producing images with photography-level realism, demonstrating fine control over details, lighting, and textures. It balances high fidelity with strong aesthetic quality in composition and overall mood. The generated images are not only realistic but also visually appealing.</p>
<p class="zh">Z-Image-Turbo 擅长生成具有摄影级别真实感的图像，能够精细控制画面的细节、光影和纹理。它在保证高保真度的同时，兼顾了构图与整体氛围上的美学表现。这使其生成的图像不仅真实，还富有视觉吸引力。</p>
</div>
</div>
</section>
<!-- Gallery 1: Photorealism -->
<section class="gallery-carousel">
<div class="container">
<div class="swiper gallery-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"> <a href="images/reality/1.png" data-lightbox="gallery-photoreal" data-title="Photorealism 1"><img src="images/reality/1.png" alt="Realistic Image 1" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/reality/2.png" data-lightbox="gallery-photoreal" data-title="Photorealism 2"><img src="images/reality/2.png" alt="Realistic Image 2" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/reality/3.png" data-lightbox="gallery-photoreal" data-title="Photorealism 3"><img src="images/reality/3.png" alt="Realistic Image 3" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/reality/4.png" data-lightbox="gallery-photoreal" data-title="Photorealism 4"><img src="images/reality/4.png" alt="Realistic Image 4" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/reality/5.png" data-lightbox="gallery-photoreal" data-title="Photorealism 5"><img src="images/reality/5.png" alt="Realistic Image 5" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/reality/6.png" data-lightbox="gallery-photoreal" data-title="Photorealism 6"><img src="images/reality/6.png" alt="Realistic Image 6" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/reality/7.png" data-lightbox="gallery-photoreal" data-title="Photorealism 7"><img src="images/reality/7.png" alt="Realistic Image 7" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/reality/8.png" data-lightbox="gallery-photoreal" data-title="Photorealism 8"><img src="images/reality/8.png" alt="Realistic Image 8" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/reality/9.png" data-lightbox="gallery-photoreal" data-title="Photorealism 9"><img src="images/reality/9.png" alt="Realistic Image 9" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/reality/10.png" data-lightbox="gallery-photoreal" data-title="Photorealism 10"><img src="images/reality/10.png" alt="Realistic Image 10" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/reality/11.png" data-lightbox="gallery-photoreal" data-title="Photorealism 11"><img src="images/reality/11.png" alt="Realistic Image 11" loading="lazy"></a> </div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</section>
<!-- Bilingual Section -->
<section class="bilingual">
<div class="container">
<div class="text-block">
<h2>Excellent Bilingual Text Rendering 卓越的中英双语文本渲染能力</h2>
<p>Z-Image-Turbo can accurately render Chinese and English text while preserving facial realism and overall aesthetic composition, with results comparable to top-tier closed-source models. In poster design, it demonstrates strong compositional skills and a good sense of typography. It can render high-quality text even in challenging scenarios with small font sizes, delivering designs that are both textually precise and visually compelling.</p>
<p class="zh">Z-Image-Turbo 能准确渲染中英文文本，同时保持人脸真实性和画面美感，效果媲美顶尖闭源模型。在海报设计中，它展现了优秀的构图能力和良好的版式设计感。即使在小字号等高难度场景下，模型也能高质量地渲染文字，最终呈现出文本精准且富有视觉吸引力的设计。</p>
</div>
</div>
</section>
<!-- Gallery 2: Bilingual Text -->
<section class="gallery-carousel">
<div class="container">
<div class="swiper gallery-swiper">
<div class="swiper-wrapper">
<!-- 复制了一遍以满足 loop 条件 -->
<div class="swiper-slide"> <a href="images/bilingual/1.jpg" data-lightbox="gallery-bilingual" data-title="Bilingual Text 1"><img src="images/bilingual/1.jpg" alt="Bilingual Text Image 1" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/bilingual/2.jpg" data-lightbox="gallery-bilingual" data-title="Bilingual Text 2"><img src="images/bilingual/2.jpg" alt="Bilingual Text Image 2" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/bilingual/3.jpg" data-lightbox="gallery-bilingual" data-title="Bilingual Text 3"><img src="images/bilingual/3.jpg" alt="Bilingual Text Image 3" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/bilingual/4.jpg" data-lightbox="gallery-bilingual" data-title="Bilingual Text 4"><img src="images/bilingual/4.jpg" alt="Bilingual Text Image 4" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/bilingual/5.jpg" data-lightbox="gallery-bilingual" data-title="Bilingual Text 5"><img src="images/bilingual/5.jpg" alt="Bilingual Text Image 5" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/bilingual/6.jpg" data-lightbox="gallery-bilingual" data-title="Bilingual Text 6"><img src="images/bilingual/6.jpg" alt="Bilingual Text Image 6" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/bilingual/7.jpg" data-lightbox="gallery-bilingual" data-title="Bilingual Text 7"><img src="images/bilingual/7.jpg" alt="Bilingual Text Image 7" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/bilingual/8.jpg" data-lightbox="gallery-bilingual" data-title="Bilingual Text 8"><img src="images/bilingual/8.jpg" alt="Bilingual Text Image 8" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/bilingual/9.jpg" data-lightbox="gallery-bilingual" data-title="Bilingual Text 9"><img src="images/bilingual/9.jpg" alt="Bilingual Text Image 9" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/bilingual/10.jpg" data-lightbox="gallery-bilingual" data-title="Bilingual Text 10"><img src="images/bilingual/10.jpg" alt="Bilingual Text Image 10" loading="lazy"></a> </div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</section>
<!-- World Knowledge Section -->
<section class="world-knowledge">
<div class="container">
<div class="text-block">
<h2>Rich World Knowledge and Cultural Understanding 广博的知识与文化理解</h2>
<p>Z-Image possesses a vast understanding of world knowledge and diverse cultural concepts. This allows it to accurately generate a wide array of subjects, including famous landmarks, well-known characters, and specific real-world objects. </p>
<p class="zh">Z-Image 具备广博的世界知识与对多元文化的深刻理解。这使其能够精确生成各种主题，包括著名地标、知名人物和特定的现实世界物体。</p>
</div>
</div>
</section>
<!-- Gallery 3: World Knowledge -->
<section class="gallery-carousel">
<div class="container">
<div class="swiper gallery-swiper">
<div class="swiper-wrapper">
<!-- 复制了一遍以满足 loop 条件 -->
<div class="swiper-slide"> <a href="images/world-knowledge/1.png" data-lightbox="gallery-knowledge" data-title="World Knowledge 1"><img src="images/world-knowledge/1.png" alt="World Knowledge Image 1" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/world-knowledge/2.png" data-lightbox="gallery-knowledge" data-title="World Knowledge 2"><img src="images/world-knowledge/2.png" alt="World Knowledge Image 2" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/world-knowledge/3.png" data-lightbox="gallery-knowledge" data-title="World Knowledge 3"><img src="images/world-knowledge/3.png" alt="World Knowledge Image 3" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/world-knowledge/4.png" data-lightbox="gallery-knowledge" data-title="World Knowledge 4"><img src="images/world-knowledge/4.png" alt="World Knowledge Image 4" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/world-knowledge/5.png" data-lightbox="gallery-knowledge" data-title="World Knowledge 5"><img src="images/world-knowledge/5.png" alt="World Knowledge Image 5" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/world-knowledge/6.png" data-lightbox="gallery-knowledge" data-title="World Knowledge 6"><img src="images/world-knowledge/6.png" alt="World Knowledge Image 6" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/world-knowledge/7.png" data-lightbox="gallery-knowledge" data-title="World Knowledge 7"><img src="images/world-knowledge/7.png" alt="World Knowledge Image 7" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/world-knowledge/8.png" data-lightbox="gallery-knowledge" data-title="World Knowledge 8"><img src="images/world-knowledge/8.png" alt="World Knowledge Image 8" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/world-knowledge/9.png" data-lightbox="gallery-knowledge" data-title="World Knowledge 9"><img src="images/world-knowledge/9.png" alt="World Knowledge Image 9" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/world-knowledge/10.png" data-lightbox="gallery-knowledge" data-title="World Knowledge 10"><img src="images/world-knowledge/10.png" alt="World Knowledge Image 10" loading="lazy"></a> </div>
<div class="swiper-slide"> <a href="images/world-knowledge/11.png" data-lightbox="gallery-knowledge" data-title="World Knowledge 11"><img src="images/world-knowledge/11.png" alt="World Knowledge Image 11" loading="lazy"></a> </div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</section>
<!-- Instruction Following Section -->
<section class="instruction-following">
<div class="container">
<div class="text-block">
<h2>Deep Semantic Understanding with Priori Knowledge 引入先验知识的深度语义理解</h2>
<p>The powerful prompt enhancer (PE) uses a structured reasoning chain to inject logic and common sense, enabling the model to handle complex tasks like the "chicken-and-rabbit problem" or visualizing classical Chinese poetry. In editing tasks, even when faced with ambiguous user instructions, the model can apply its reasoning capabilities to infer the underlying intent and ensure a logically coherent result.</p>
<p class="zh">强大的提示词增强器（PE）通过结构化推理链注入逻辑与常识，使模型能处理诸如鸡兔同笼”或古诗可视化等复杂任务。在编辑任务中，即使用户指令模糊不清，模型也能运用其推理能力来推断用户的潜在意图，确保最终结果在逻辑上是连贯的。</p>
</div>
</div>
</section>
<!-- Gallery 4: Creative Editing -->
<section class="gallery-carousel">
<div class="container">
<div class="swiper gallery-swiper">
<div class="swiper-wrapper">
<!-- 复制了一遍以满足 loop 条件 -->
<div class="swiper-slide"> <a href="images/pe/1.jpg" data-lightbox="gallery-editing" data-title="Creative Editing 1"><img src="images/pe/1.jpg" alt="Creative Editing Image 1" loading="lazy"></a> <div class="slide-caption">Given that chickens and rabbits are in the same cage, there are a total of 35 heads and 94 feet. Find the number of chickens and rabbits.</div></div>
<div class="swiper-slide"> <a href="images/pe/2.jpg" data-lightbox="gallery-editing" data-title="Creative Editing 2"><img src="images/pe/2.jpg" alt="Creative Editing Image 2" loading="lazy"></a> <div class="slide-caption">帮我给《登科后》配图，最出名的两句</div></div>
<div class="swiper-slide"> <a href="images/pe/3.jpg" data-lightbox="gallery-editing" data-title="Creative Editing 3"><img src="images/pe/3.jpg" alt="Creative Editing Image 3" loading="lazy"></a> <div class="slide-caption">泡普洱茶的步骤都有哪些</div></div>
<div class="swiper-slide"> <a href="images/pe/4.jpg" data-lightbox="gallery-editing" data-title="Creative Editing 4"><img src="images/pe/4.jpg" alt="Creative Editing Image 4" loading="lazy"></a> <div class="slide-caption">Generate a photograph located at 30° 9'36"N, 120° 7' 12"E.</div></div>
<div class="swiper-slide"> <a href="images/pe/5.jpg" data-lightbox="gallery-editing" data-title="Creative Editing 5"><img src="images/pe/5.jpg" alt="Creative Editing Image 5" loading="lazy"></a> <div class="slide-caption">提高孩子成绩的五个关键习惯都有哪些</div></div>
<div class="swiper-slide"> <a href="images/pe/6.jpg" data-lightbox="gallery-editing" data-title="Creative Editing 6"><img src="images/pe/6.jpg" alt="Creative Editing Image 6" loading="lazy"></a> <div class="slide-caption">帮我规划一个杭州西湖的旅游计划，手帐</div></div>
<div class="swiper-slide"> <a href="images/pe/7.jpg" data-lightbox="gallery-editing" data-title="Creative Editing 7"><img src="images/pe/7.jpg" alt="Creative Editing Image 7" loading="lazy"></a> <div class="slide-caption">半夜睡不着，苏轼去找张怀民一起在承天寺院子里散步、聊天、赏月，对话气泡中苏轼在作诗</div></div>
<div class="swiper-slide"> <a href="images/pe/8.jpg" data-lightbox="gallery-editing" data-title="Creative Editing 8"><img src="images/pe/8.jpg" alt="Creative Editing Image 8" loading="lazy"></a> <div class="slide-caption">what is diffusion model?</div></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</section>
<!-- Image Editing Section -->
<section class="image-editing">
<div class="container">
<div class="text-block">
<h2>Strong Instruction-Following and Creative Editing 强大的指令遵循与创意编辑</h2>
<p>Z-Image-Edit can precisely execute complex instructions, such as simultaneously modifying a character's expression and pose while adding specified text. It maintains strong consistency even during such significant transformations, demonstrating fine-grained control over every image element.</p>
<p class="zh">Z-Image-Edit 可精准执行复合指令，如同时修改人物的表情、动作并添加指定文字。即便在如此大幅的图像变换中，它也能保持极高的一致性，体现了对画面每一处元素的精细控制。</p>
</div>
</div>
</section>
<!-- Gallery 4: Creative Editing -->
<section class="gallery-carousel">
<div class="container">
<div class="swiper gallery-swiper">
<div class="swiper-wrapper">
<!-- 复制了一遍以满足 loop 条件 -->
<div class="swiper-slide"> <a href="images/image-editing/1.jpg" data-lightbox="gallery-editing" data-title="Creative Editing 1"><img src="images/image-editing/1.jpg" alt="Creative Editing Image 1" loading="lazy"></a> <div class="slide-caption">表情变成开心的样子，眼睛从圆形变成弯曲的眯眯眼，嘴巴变成笑着的样子，增加气泡对话框，对话框内文字“是Z-Image，我们有救了”</div></div>
<div class="swiper-slide"> <a href="images/image-editing/2.jpg" data-lightbox="gallery-editing" data-title="Creative Editing 2"><img src="images/image-editing/2.jpg" alt="Creative Editing Image 2" loading="lazy"></a> <div class="slide-caption">变成雪天</div></div>
<div class="swiper-slide"> <a href="images/image-editing/3.jpg" data-lightbox="gallery-editing" data-title="Creative Editing 3"><img src="images/image-editing/3.jpg" alt="Creative Editing Image 3" loading="lazy"></a> <div class="slide-caption">变成烤玉米</div></div>
<div class="swiper-slide"> <a href="images/image-editing/4.jpg" data-lightbox="gallery-editing" data-title="Creative Editing 4"><img src="images/image-editing/4.jpg" alt="Creative Editing Image 4" loading="lazy"></a> <div class="slide-caption">让它跑起来</div></div>
<div class="swiper-slide"> <a href="images/image-editing/5.jpg" data-lightbox="gallery-editing" data-title="Creative Editing 5"><img src="images/image-editing/5.jpg" alt="Creative Editing Image 5" loading="lazy"></a> <div class="slide-caption">男生和女生头发变成粉红色，而且男生外套变成蓝色羽绒服，</div></div>
<div class="swiper-slide"> <a href="images/image-editing/6.jpg" data-lightbox="gallery-editing" data-title="Creative Editing 6"><img src="images/image-editing/6.jpg" alt="Creative Editing Image 6" loading="lazy"></a> <div class="slide-caption">把所有出现的“鹅”字改成“猫”</div></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</section>
<!-- Summary Section -->
<section class="summary">
<div class="container">
<div class="text-block">
<h2>Summary 总结</h2>
<p>In summary, we introduce Z-Image as an efficient, low-cost approach to image generation. It demonstrates that top-tier performance is not solely dependent on massive models and computational resources. This, in turn, lowers the technical and cost barriers for the broader community of researchers and developers, paving the way for more accessible and innovative applications.</p>
<p>We invite the community's active participation and feedback to help us build a generative AI ecosystem that is not only open and transparent but also more efficient, accessible, and sustainable.</p>
<p class="zh">总而言之，我们推出 Z-Image，为图像生成领域引入了一种高效、低成本的实现路径。它证明了顶尖性能并非只依赖于巨大的模型和计算资源。这反过来也为更广泛的研究者和开发者降低了技术与成本门槛，为更多普惠、创新的应用铺平了道路。</p>
<p class="zh">我们期待社区的积极参与和反馈，与我们共同构建一个不仅开放、透明，而且更加高效、普惠和可持续的生成式AI生态。</p>
</div>
</div>
</section>
<!-- Citation Section -->
<section class="citation">
<div class="container">
<div class="text-block">
<h2>Citation 引用</h2>
<p>Welcome to cite our work. 欢迎引用我们的工作</p>
<!-- Added BibTeX citation block -->
<pre><code>@misc{z-image-2025,
title={Z-Image: An Efficient Image Generation Foundation Model with Single-Stream Diffusion Transformer},
author={Tongyi Lab},
year={2025},
publisher={GitHub},
journal={GitHub repository},
howpublished={\url{https://github.com/Tongyi-MAI/Z-Image}}
}</code></pre>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<p>© 2025 Z-Image Project</p>
</div>
</footer>
<!-- 核心修改：引入 jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 引入 Swiper JS -->
<script src="https://unpkg.com/swiper@11/swiper-bundle.min.js"></script>
<!-- 引入 Lightbox JS (必须在 jQuery 之后) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"></script>
<!-- 初始化脚本 (无需修改) -->
<script>
// 初始化所有 Swiper 实例
document.querySelectorAll('.gallery-swiper').forEach(function(swiperContainer) {
new Swiper(swiperContainer, {
loop: true,
autoplay: {
delay: 4000,
disableOnInteraction: false,
pauseOnMouseEnter: true,
},
spaceBetween: 20,
slidesPerView: 1.3,
centeredSlides: true,
breakpoints: {
768: {
slidesPerView: 2,
centeredSlides: false,
},
1024: {
slidesPerView: 3,
centeredSlides: false,
},
},
pagination: {
el: swiperContainer.querySelector('.swiper-pagination'),
clickable: true,
},
navigation: {
nextEl: swiperContainer.querySelector('.swiper-button-next'),
prevEl: swiperContainer.querySelector('.swiper-button-prev'),
},
});
});
// 初始化 Lightbox
lightbox.option({
'resizeDuration': 200,
'wrapAround': true,
'disableScrolling': true,
'albumLabel': "Image %1 of %2"
});
</script>
</body>
</html>