Skip to content

Commit 45beeb4

Browse files
easonbyteeasonbyte
committed
update
1 parent 2cf8b70 commit 45beeb4

16 files changed

Lines changed: 3373 additions & 46 deletions

‎README.md‎

Lines changed: 5 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,5 @@
1-
# DetailFlow🚀: 1D Coarse-to-Fine Autoregressive Image Generation via Next-Detail Prediction
2-
<div align="center">
3-
4-
[![DetailFlow](https://img.shields.io/badge/Paper-DetailFlow-2b9348.svg?logo=arXiv)](https://arxiv.org)&nbsp;
5-
[![huggingface weights](https://img.shields.io/badge/%F0%9F%A4%97%20Weights-DetailFlow-yellow)](https://huggingface.co/ByteFlow-AI)&nbsp;
6-
[![project page](https://img.shields.io/badge/Project_page-More_visualizations-green?logo=bytedance)](https://byteflow-ai.github.io/DetailFlow/)&nbsp;
7-
![Visitors](https://visitor-badge.laobi.icu/badge?page_id=ByteFlow-AI.DetailFlow)
8-
[![GitHub closed issues](https://img.shields.io/github/issues-closed/ByteFlow-AI/DetailFlow?color=blue&label=Issues)](https://github.com/ByteFlow-AI/DetailFlow/issues?q=is%3Aissue+is%3Aclosed)
9-
10-
11-
</div>
12-
13-
14-
## 🌿 Introduction
15-
16-
We present DetailFlow, a coarse-to-fine 1D autoregressive (AR) image generation method that models images through a novel next-detail prediction strategy. By learning a resolution-aware token sequence supervised with progressively degraded images, DetailFlow enables the generation process to start from the global structure and incrementally refine details.
17-
18-
19-
<div align='center'>
20-
<img src="./assets/demo.png" class="interpolation-image" alt="teasor." height="100%" width="100%" />
21-
</div>
22-
23-
DetailFlow encodes tokens with an inherent semantic ordering, where each subsequent token contributes additional high-resolution information. On the ImageNet 256×256 benchmark, our method achieves 2.96 gFID with 128 tokens, outperforming VAR (3.3 FID) and FlexVAR (3.05 FID), which both require 680 tokens in their AR models. Moreover, due to the significantly reduced token count and parallel inference mechanism, our method runs nearly 2× faster inference speed compared to VAR and FlexVAR.
24-
25-
<div align='center'>
26-
<img src="./assets/method.png" class="interpolation-image" alt="method." height="50%" width="50%" />
27-
</div>
28-
29-
## 📰 News
30-
31-
**2025.05.28**: 🎉🎉🎉 DetailFlow is released! 🎉🎉🎉 See our [project page](https://byteflow-ai.github.io/DetailFlow/) and [paper](https://arxiv.org) .
32-
33-
34-
## 📑 Open-source Plan
35-
36-
- [ ] Release the checkpoint of tokenizer and AR model
37-
- [ ] Release the training & inference code
38-
39-
40-
41-
## Acknowledgement
42-
43-
We thank the great work from [VAR](https://github.com/FoundationVision/VAR), [LlamaGen](https://github.com/FoundationVision/LlamaGen) and [LLaVA](https://github.com/haotian-liu/LLaVA).
44-
45-
## 🔥 Open positions
46-
We are hiring interns and full-time researchers at the ByteFlow Group, ByteDance, with a focus on multimodal understanding and generation (preferred base: Hangzhou, Beijing, and Shenzhen). If you are interested, please contact yolomemos@gmail.com.
1+
# Github page for DetailFlow: 1D Coarse-to-Fine Autoregressive Image Generation via Next-Detail Prediction
2+
## Acknowledgments
3+
This page was constructed from [Academic Project Page Template](https://github.com/eliahuhorwitz/Academic-project-page-template).
4+
## Website License
5+
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.

‎index.html‎

Lines changed: 314 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,314 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<!-- Meta tags for social media banners, these should be filled in appropriatly as they are your "business card" -->
6+
<!-- Replace the content tag with appropriate information -->
7+
<meta name="description" content="This work introduces DetailFlow, a coarse-to-fine 1D autoregressive (AR) image generation method that models images through a novel next-detail prediction strategy.">
8+
<meta property="og:title" content="DetailFlow: 1D Coarse-to-Fine Autoregressive Image Generation via Next-Detail Prediction"/>
9+
<meta property="og:description" content="This work introduces DetailFlow, a coarse-to-fine 1D autoregressive (AR) image generation method that models images through a novel next-detail prediction strategy."/>
10+
<meta property="og:url" content="https://byteflow-ai.github.io/DetailFlow/"/>
11+
<!-- Path to banner image, should be in the path listed below. Optimal dimenssions are 1200X630-->
12+
<meta property="og:image" content="static/images/demo.png" />
13+
<meta property="og:image:width" content="1200"/>
14+
<meta property="og:image:height" content="630"/>
15+
16+
17+
<meta name="twitter:title" content="DetailFlow: 1D Coarse-to-Fine Autoregressive Image Generation via Next-Detail Prediction">
18+
<meta name="twitter:description" content="This work introduces DetailFlow, a coarse-to-fine 1D autoregressive (AR) image generation method that models images through a novel next-detail prediction strategy.">
19+
<!-- Path to banner image, should be in the path listed below. Optimal dimenssions are 1200X600-->
20+
<meta name="twitter:image" content="static/images/demo.png">
21+
<meta name="twitter:card" content="summary_large_image">
22+
<!-- Keywords for your paper to be indexed by-->
23+
<meta name="keywords" content="coarse-to-fine, autoregressive image generation, 1D tokenizer">
24+
<meta name="viewport" content="width=device-width, initial-scale=1">
25+
26+
27+
<title>DetailFlow</title>
28+
<!-- <link rel="icon" type="image/x-icon" href="static/images/favicon.ico">-->
29+
<link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro"
30+
rel="stylesheet">
31+
32+
<link rel="stylesheet" href="static/css/bulma.min.css">
33+
<link rel="stylesheet" href="static/css/bulma-carousel.min.css">
34+
<link rel="stylesheet" href="static/css/bulma-slider.min.css">
35+
<link rel="stylesheet" href="static/css/fontawesome.all.min.css">
36+
<link rel="stylesheet"
37+
href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
38+
<link rel="stylesheet" href="static/css/index.css">
39+
40+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
41+
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
42+
<script defer src="static/js/fontawesome.all.min.js"></script>
43+
<script src="static/js/bulma-carousel.min.js"></script>
44+
<script src="static/js/bulma-slider.min.js"></script>
45+
<script src="static/js/index.js"></script>
46+
</head>
47+
<body>
48+
49+
50+
<section class="hero">
51+
<div class="hero-body">
52+
<div class="container is-max-desktop">
53+
<div class="columns is-centered">
54+
<div class="column has-text-centered">
55+
<h1 class="title is-1 publication-title">DetailFlow: 1D Coarse-to-Fine Autoregressive Image Generation via Next-Detail Prediction</h1>
56+
<div class="is-size-5 publication-authors">
57+
<!-- Paper authors -->
58+
<span class="author-block">
59+
<a href="https://yolomax.com/" target="_blank">Yiheng Liu</a><sup>*</sup>,</span>
60+
<span class="author-block">
61+
<a href="https://github.com/QuLiao1117" target="_blank">Liao Qu</a><sup>*</sup>,</span>
62+
<span class="author-block">
63+
<a href="mailto:muxizju@gmail.com" target="_blank">Huichao Zhang</a><sup></sup>,</span>
64+
<span class="author-block">Xu Wang<sup>&#8224</sup>,</span>
65+
<span class="author-block">
66+
<a href="https://enjoyyi.github.io/" target="_blank">Yi Jiang</a><sup></sup>,</span>
67+
<span class="author-block">
68+
<a href="https://scholar.google.com/citations?user=uRCc-McAAAAJ&hl=zh-TW" target="_blank">Yiming Gao</a><sup></sup>,</span>
69+
<span class="author-block">
70+
<a href="https://github.com/xiaohu2015" target="_blank">Hu Ye</a><sup></sup>,</span>
71+
<br>
72+
<span class="author-block">Xian Li<sup></sup>,</span>
73+
<span class="author-block">Shuai Wang<sup></sup>,</span>
74+
<span class="author-block">Daniel K. Du<sup></sup>,</span>
75+
<span class="author-block">Shu Chen<sup></sup>,</span>
76+
<span class="author-block">Zehuan Yuan<sup></sup>,</span>
77+
<span class="author-block">Xinglong Wu<sup></sup>
78+
79+
</div>
80+
81+
<div style="overflow: hidden; background-color: #fff;">
82+
<div class="logo" style="padding: 12px;">
83+
<a href="https://www.bytedance.com/en/" style="text-decoration: none; font-size: 16px;">
84+
<img src="static/images/ByteDance_logo_English.svg" alt="bytedance Logo" style="width: auto; height: 30px;">
85+
</a>
86+
</div>
87+
</div>
88+
89+
<div class="column has-text-centered">
90+
<div class="publication-links">
91+
<!-- Arxiv PDF link -->
92+
<span class="link-block">
93+
<a href="https://arxiv.org" target="_blank"
94+
class="external-link button is-normal is-rounded is-dark">
95+
<span class="icon">
96+
<i class="fas fa-file-pdf"></i>
97+
</span>
98+
<span>Paper</span>
99+
</a>
100+
</span>
101+
102+
<!-- Github link -->
103+
<span class="link-block">
104+
<a href="https://github.com/ByteFlow-AI/DetailFlow" target="_blank"
105+
class="external-link button is-normal is-rounded is-dark">
106+
<span class="icon">
107+
<i class="fab fa-github"></i>
108+
</span>
109+
<span>Code</span>
110+
</a>
111+
</span>
112+
113+
<span class="link-block">
114+
<a href="https://huggingface.co/ByteFlow-AI" target="_blank"
115+
class="external-link button is-normal is-rounded is-dark">
116+
<span class="icon">
117+
<span>&#129303;</span>
118+
</span>
119+
<span>Models</span>
120+
</a>
121+
</span>
122+
123+
<!-- ArXiv abstract Link -->
124+
<!-- <span class="link-block">
125+
<a href="TODO" target="_blank"
126+
class="external-link button is-normal is-rounded is-dark">
127+
<span class="icon">
128+
<i class="ai ai-arxiv"></i>
129+
</span>
130+
<span>arXiv</span>
131+
</a>
132+
</span> -->
133+
</div>
134+
</div>
135+
</div>
136+
</div>
137+
</div>
138+
</div>
139+
</section>
140+
141+
142+
<!-- Teaser video-->
143+
<section class="hero teaser">
144+
<div class="container" align="center">
145+
<div class="hero-body">
146+
<img src="static/images/demo.png" alt="MY ALT TEXT" style="width: 80%;"/>
147+
<!-- <h2 class="subtitle has-text-centered">
148+
Overview of the proposed layer-wise calibration procedure before fine-tuning.
149+
</h2> -->
150+
</div>
151+
</div>
152+
</section>
153+
<!-- End teaser video -->
154+
155+
<!-- Paper abstract -->
156+
<section class="section hero is-light">
157+
<div class="container is-max-desktop">
158+
<div class="columns is-centered has-text-centered">
159+
<div class="column is-four-fifths">
160+
<h2 class="title is-3">Abstract</h2>
161+
<div class="content has-text-justified">
162+
<p>
163+
We presents DetailFlow, a coarse-to-fine 1D autoregressive (AR) image generation method that models images through a novel next-detail prediction strategy. By learning a resolution-aware token sequence supervised with progressively degraded images, DetailFlow enables the generation process to start from the global structure and incrementally refine details. This coarse-to-fine 1D token sequence aligns well with the autoregressive inference mechanism, providing a more natural and efficient way for the AR model to generate complex visual content. Our compact 1D AR model achieves high-quality image synthesis with significantly fewer tokens than previous approaches, i.e. VAR/VQGAN. We further propose a parallel inference mechanism with self-correction that accelerates generation speed by approximately 8× while reducing accumulation sampling error inherent in teacher-forcing supervision. On the ImageNet 256x256 benchmark, our method achieves 2.96 gFID with 128 tokens, outperforming VAR (3.3 FID) and FlexVAR (3.05 FID), which both require 680 tokens in their AR models. Moreover, due to the significantly reduced token count and parallel inference mechanism, our method runs nearly 2× faster inference speed compared to VAR and FlexVAR. Extensive experimental results demonstrate DetailFlow's superior generation quality and efficiency compared to existing state-of-the-art methods.
164+
</p>
165+
</div>
166+
</div>
167+
</div>
168+
</div>
169+
</section>
170+
<!-- End paper abstract -->
171+
172+
<!-- Paper method -->
173+
<section class="section hero ">
174+
<div class="container">
175+
<div class="columns is-centered has-text-centered">
176+
<div class="column is-four-fifths">
177+
<h2 class="title is-3">Method</h2>
178+
<div class="content has-text-justified">
179+
<img src="static/images/method.png" alt="MY ALT TEXT" style="width: 100%;"/>
180+
181+
<p>
182+
Comparison of our DetailFlow approach with existing methods, showing that DetailFlow achieves better image quality with fewer tokens and times.
183+
</p>
184+
</div>
185+
186+
<!-- <div class="content has-text-justified">
187+
<img src="static/images/cluster.png" alt="MY ALT TEXT" style="width: 100%;"/>
188+
189+
<p>
190+
<b>TokenFlow can combine both semantic and low-level similarity (e.g. birds with different background can be mapped into two different index) and exhibits significantly smoother distribution compared to others.</b>
191+
</p>
192+
</div> -->
193+
194+
</div>
195+
</div>
196+
</div>
197+
</section>
198+
<!-- End paper method -->
199+
200+
201+
<!-- End image carousel -->
202+
203+
<!--&lt;!&ndash; Youtube video &ndash;&gt;-->
204+
<!--<section class="hero is-small is-light">-->
205+
<!-- <div class="hero-body">-->
206+
<!-- <div class="container">-->
207+
<!-- &lt;!&ndash; Paper video. &ndash;&gt;-->
208+
<!-- <h2 class="title is-3">Video Presentation</h2>-->
209+
<!-- <div class="columns is-centered has-text-centered">-->
210+
<!-- <div class="column is-four-fifths">-->
211+
<!-- -->
212+
<!-- <div class="publication-video">-->
213+
<!-- &lt;!&ndash; Youtube embed code here &ndash;&gt;-->
214+
<!-- <iframe src="https://www.youtube.com/embed/JkaxUblCGz0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>-->
215+
<!-- </div>-->
216+
<!-- </div>-->
217+
<!-- </div>-->
218+
<!-- </div>-->
219+
<!-- </div>-->
220+
<!--</section>-->
221+
<!--&lt;!&ndash; End youtube video &ndash;&gt;-->
222+
223+
224+
<!--&lt;!&ndash; Video carousel &ndash;&gt;-->
225+
<!--<section class="hero is-small">-->
226+
<!-- <div class="hero-body">-->
227+
<!-- <div class="container">-->
228+
<!-- <h2 class="title is-3">Another Carousel</h2>-->
229+
<!-- <div id="results-carousel" class="carousel results-carousel">-->
230+
<!-- <div class="item item-video1">-->
231+
<!-- <video poster="" id="video1" autoplay controls muted loop height="100%">-->
232+
<!-- &lt;!&ndash; Your video file here &ndash;&gt;-->
233+
<!-- <source src="static/videos/carousel1.mp4"-->
234+
<!-- type="video/mp4">-->
235+
<!-- </video>-->
236+
<!-- </div>-->
237+
<!-- <div class="item item-video2">-->
238+
<!-- <video poster="" id="video2" autoplay controls muted loop height="100%">-->
239+
<!-- &lt;!&ndash; Your video file here &ndash;&gt;-->
240+
<!-- <source src="static/videos/carousel2.mp4"-->
241+
<!-- type="video/mp4">-->
242+
<!-- </video>-->
243+
<!-- </div>-->
244+
<!-- <div class="item item-video3">-->
245+
<!-- <video poster="" id="video3" autoplay controls muted loop height="100%">\-->
246+
<!-- &lt;!&ndash; Your video file here &ndash;&gt;-->
247+
<!-- <source src="static/videos/carousel3.mp4"-->
248+
<!-- type="video/mp4">-->
249+
<!-- </video>-->
250+
<!-- </div>-->
251+
<!-- </div>-->
252+
<!-- </div>-->
253+
<!-- </div>-->
254+
<!--</section>-->
255+
<!--&lt;!&ndash; End video carousel &ndash;&gt;-->
256+
257+
258+
259+
<!--&lt;!&ndash; Paper poster &ndash;&gt;-->
260+
<!--<section class="hero is-small is-light">-->
261+
<!-- <div class="hero-body">-->
262+
<!-- <div class="container">-->
263+
<!-- <h2 class="title">Poster</h2>-->
264+
265+
<!-- <iframe src="static/pdfs/sample.pdf" width="100%" height="550">-->
266+
<!-- </iframe>-->
267+
<!-- -->
268+
<!-- </div>-->
269+
<!-- </div>-->
270+
<!-- </section>-->
271+
<!--&lt;!&ndash;End paper poster &ndash;&gt;-->
272+
273+
274+
<!--BibTex citation -->
275+
<section class="section" id="BibTeX">
276+
<div class="container is-max-desktop content">
277+
<h2 class="title">BibTeX</h2>
278+
<pre><code>
279+
arXiv preprint placeholder
280+
</code></pre>
281+
</div>
282+
</section>
283+
<!--End BibTex citation -->
284+
285+
<div style="width: 1000px; margin: 0 auto;">
286+
<script type="text/javascript" id="clustrmaps" src="//clustrmaps.com/map_v2.js?d=l_pwfGfOMZ5wqA1GXPSrcEzT_5bvBF9ZRm3tTlZpW8Q&cl=ffffff&w=a"></script>
287+
</div>
288+
289+
<footer class="footer">
290+
<div class="container">
291+
<div class="columns is-centered">
292+
<div class="column is-8">
293+
<div class="content">
294+
295+
<p>
296+
This page was built using the <a href="https://github.com/eliahuhorwitz/Academic-project-page-template" target="_blank">Academic Project Page Template</a> which was adopted from the <a href="https://nerfies.github.io" target="_blank">Nerfies</a> project page.
297+
You are free to borrow the of this website, we just ask that you link back to this page in the footer. <br> This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">Creative
298+
Commons Attribution-ShareAlike 4.0 International License</a>.
299+
</p>
300+
301+
</div>
302+
</div>
303+
</div>
304+
</div>
305+
</footer>
306+
307+
<!-- Statcounter tracking code -->
308+
309+
<!-- You can add a tracker to track page visits by creating an account at statcounter.com -->
310+
311+
<!-- End of Statcounter Code -->
312+
313+
</body>
314+
</html>

0 commit comments

Comments
 (0)