ColourCrafter.github.io/index.html at main · YangYuqi317/ColourCrafter.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ColourCrafter</title>
  <style>
    /* ----- base & layout (unchanged except arrow containers) ----- */
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      line-height: 1.6;
      color: #222;
      background: linear-gradient(180deg, #f5f9fc 0%, #ffffff 60%);
    }
    .container {
      max-width: 960px;
      margin: 40px auto;
      padding: 48px 32px;
      background: #ffffff;
      border-radius: 14px;
      box-shadow: 0 10px 30px rgba(0, 40, 120, 0.06);
    }
    h1, h2, h3 { line-height: 1.3; margin-top: 1.6em; }
    h1 { font-size: 2.4em; margin-top: 0; }
    h2 { font-size: 1.8em; border-bottom: 1px solid #dde6ef; padding-bottom: 6px; }
    p { margin: 1em 0; text-align: justify; }
    .authors { font-size: 1.05em; margin: 12px 0; }
    .affiliation { color: #555; font-size: 0.95em; }
    .links { margin: 20px 0 30px 0; }
    .links a {
      display: inline-block; margin-right: 12px; padding: 9px 16px;
      border: 1px solid #cfd9e3; border-radius: 10px; text-decoration: none;
      color: #1a3a5a; font-size: 1.0em; font-weight: 500; background: #f2f7fb;
    }
    .links a:hover { background: #f5f5f5; }
    .figure { margin: 30px 0; text-align: center; }
    .figure img { max-width: 90%; border-radius: 6px; border: 0px solid #ddd; }
    .caption { font-size: 0.9em; color: #555; margin-top: 6px; }
    ul { margin-left: 1.2em; }
    pre { background: #f7f7f7; padding: 14px; overflow-x: auto; border-radius: 6px; font-size: 0.9em; }
    footer { margin-top: 60px; padding-top: 20px; border-top: 1px solid #e5e5e5; font-size: 0.9em; color: #666; text-align: center; }

    /* ----- colour editing module (unchanged) ----- */
    .figure-wrapper { display: flex; justify-content: center; position: relative; }
    .figure-comparison { display: flex; gap: 32px; align-items: center; margin: 40px auto; }
    .left-images { display: flex; flex-direction: column; gap: 14px; }
    .thumb { position: relative; width: 60px; cursor: pointer; }
    .thumb.no-click { cursor: default; }
    .figure-comparison img { width: 100%; border-radius: 12px; border: none; display: block; }
    .hover-preview {
      position: absolute; top: 0; left: 140px; width: 260px; opacity: 0;
      pointer-events: none; transition: opacity 0.2s ease; z-index: 10;
    }
    .hover-preview img { border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
    .thumb:hover .hover-preview { opacity: 1; }
    .thumb.active img { outline: 3px solid #4a90e2; outline-offset: -3px; }
    .right-image { width: 480px; }
    .right-image img { width: 100%; border-radius: 16px; }

    /* ========= 重构后的箭头样式 ========= */
    /* 统一箭头基础样式（不再使用重叠定位，而是由父容器独立放置） */
    .nav-arrow {
      /* 移除 absolute / transform 默认，下面按容器各自定义 */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      font-size: 28px;
      font-weight: 500;
      cursor: pointer;
      user-select: none;
      background: rgba(255,255,255,0.85);  /* 稍微加强一点不透明度避免透过文字 */
      backdrop-filter: blur(6px);
      color: #333;
      border-radius: 50%;
      border: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 6px 18px rgba(0,0,0,0.12);
      transition: all 0.25s ease;
      /* 防止文字挤压 */
      line-height: 1;
    }
    .nav-arrow:hover {
      background: rgba(255,255,255,1);
      transform: scale(1.12);
      box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    }

    /* ----- slider 外层容器改造：使用flex让箭头和slider并排，不再用absolute重叠 ----- */
    .slider-section {
      margin: 40px 0;
    }
    .slider-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;                /* 箭头与slider之间的间距 */
    }
    .slider-container {
      flex: 1;                  /* 占用剩余宽度，让箭头自然在旁边 */
      max-width: 720px;         /* 限制一下slider本身宽度 */
      overflow: hidden;         /* 核心：隐藏溢出 */
      border-radius: 16px;
    }
    .slider {
      display: flex;
      transition: transform 0.5s ease-in-out;
      width: 100%;
    }
    .slide {
      flex: 0 0 100%;
      box-sizing: border-box;
      text-align: center;
    }
    .slide img {
      width: 100%;
      height: auto;
      border-radius: 12px;
    }

    /* ----- colour-editing 区域改造：将箭头移到外部 flex 行，避免与图片重叠 ----- */
    .editing-section {
      margin: 40px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .editing-arrows-container {
      display: flex;
      align-items: center;
      gap: 24px;                 /* 箭头和中间内容的间距 */
      width: 100%;
      justify-content: center;
    }
    /* 中间的 figure-comparison 不再由wrapper包裹，让箭头在左右两边 */
    .editing-arrows-container .figure-comparison {
      margin: 0;                 /* 去掉原有外边距 */
      flex: 0 1 auto;
    }
    /* 移除 .figure-wrapper 的定位，用新的结构 */
    .figure-wrapper-old {
      /* 不再使用，保留空的占位符，但实际用新结构 */
      display: none;
    }

    /* 为了让布局更紧凑，微调箭头间距 */
    .editing-arrows-container .nav-arrow {
      flex-shrink: 0;            /* 防止箭头被压缩 */
    }

    /* 小屏适配 */
    @media (max-width: 720px) {
      .slider-wrapper {
        flex-wrap: wrap;
      }
      .editing-arrows-container {
        flex-wrap: wrap;
      }
    }
  </style>
</head>
<body>

<div class="container">

  <!-- 标题区 unchanged -->
  <div class="hero" style="text-align: center;">
    <h1>Recolour What Matters: Region-Aware Colour Editing via Token-Level Diffusion</h1>
    <div class="authors">
      Yuqi Yang<sup>1,2</sup>, Dongliang Chang<sup>1,2</sup>, Yijia Ling<sup>1,2</sup>,
      Ruoyi Du<sup>1</sup>, Zhanyu Ma<sup>1,2</sup>
    </div>
    <div class="affiliation"><sup>1</sup>Beijing University of Posts and Telecommunications</div>
    <div class="affiliation"><sup>2</sup>Beijing Key Laboratory of Multimodal Data Intelligent Perception and Governance</div>
    <div class="links">
      <a href="https://arxiv.org/abs/2603.18466">Paper📃</a> <a href="https://github.com/YangYuqi317/ColourCrafter">Code💻 (Coming Soon)</a> <a href="https://huggingface.co/datasets/Yuqi0317/ColourfulSet">Dataset🤗 (Coming Soon)</a> <a href="https://huggingface.co/Yuqi0317/ColourCrafter">Weights🤗 (Coming Soon)</a>
    </div>
  </div>

  <!-- Figure 1 unchanged -->
  <div class="figure">
    <img src="figures/Fig1.jpg" alt="Method Framework">
    <div class="caption"><strong>Figure 1.</strong> <strong>Editing results of ColourCrafter under varying reference colours.</strong>
      Each row shows the input image and its edited outputs conditioned on different RGB references.
      As the reference colours vary smoothly from left to right, ColourCrafter produces continuous and precise recolouring with consistent structure and texture.</div>
  </div>

  <!-- Abstract unchanged -->
  <h2>Abstract</h2>
  <p>Colour is one of the most perceptually salient yet least controllable attributes in image generation. Although recent diffusion models can modify object colours from user instructions, their results often deviate from the intended hue, especially for fine-grained and local edits.
    Early text-driven methods rely on discrete language descriptions that cannot accurately represent continuous chromatic variations.
    To overcome this limitation, we propose ColourCrafter, a unified diffusion framework that transforms colour editing from global tone transfer into a structured, region-aware generation process.
    Unlike traditional colour-driven methods, ColourCrafter performs token-level fusion of RGB colour tokens and image tokens in latent space, selectively propagating colour information to semantically relevant regions while preserving structural fidelity.
    A perceptual Lab-space Loss further enhances pixel-level precision by decoupling luminance and chrominance and constraining edits within masked areas.
    Additionally, we build ColourfulSet, a large-scale dataset of high-quality image pairs with continuous and diverse colour variations.
    Extensive experiments demonstrate that ColourCrafter achieves state-of-the-art colour accuracy, controllability and perceptual fidelity in fine-grained colour editing.</p>

  <!-- Dataset -->
  <h2>Colourful Dataset</h2>
  <div class="figure">
    <img src="figures/Fig_dataset_all_2.jpg" alt="dataset">
    <div class="caption"><strong>Figure 2.</strong> <strong>Examples from the ColourfulSet dataset.</strong>
      The edited images  are from different categories under various target colour references.</div>
  </div>


  <!-- Method unchanged -->
  <h2>Method Overview</h2>
  <div class="figure">
    <img src="figures/Fig_method.jpg" alt="Method Framework">
    <div class="caption"><strong>Figure3. Overview of the ColourCrafter pipeline.</strong>
      (1) Dataset construction:
      Using Flux.1-Kontext, we generate diverse image-colour pairs and employ a Vision-Language Model (VLM)
      to filter samples for consistency, fidelity, and realism.
      The corresponding RGB references are extracted to build the high-quality dataset
      ColourfulSet. (2) Training: The original image, target colour reference, and text
      prompt are jointly fed into the diffusion model, which is optimised with both
      Diffusion and Lab-space losses to enhance chromatic accuracy and perceptual consistency.
      (3) Inference: Given an input image, a RGB reference, and a prompt, ColourCrafter
      performs fine-grained, structure-preserving, and perceptually natural colour editing.</div>
  </div>

  <!-- ========= 重构 Experimental Results (slider) ========= -->
  <h2>Experimental Results</h2>

  <div class="slider-section">
    <!-- 使用 flex 布局将左右箭头放在slider外部两侧，完全避免重叠 -->
    <div class="slider-wrapper">
      <!-- 左箭头 -->
      <div class="nav-arrow" onclick="prevSlide()">‹</div>

      <!-- slider容器本身不再包裹箭头，箭头独立在外面 -->
      <div class="slider-container">
        <div class="slider">
          <div class="slide">
            <img src="figures/main_result_2.jpg" alt="result1">
            <div class="caption"><strong>Figure 4a. Comparison with other methods.</strong> The first column shows the reference
              colours and original images. The comparison demonstrates that our method achieves
              more precise and fine-grained colour editing while preserving structural integrity and
              background consistency.</div>
          </div>
          <div class="slide">
            <img src="figures/more_result_1.jpg" alt="result2">
            <div class="caption"><strong>Figure 4b. Comparison with other methods.</strong> The first column shows the reference
              colours and original images. The comparison demonstrates that our method achieves
              more precise and fine-grained colour editing while preserving structural integrity and
              background consistency.</div>
          </div>
          <div class="slide">
            <img src="figures/more_result_2.jpg" alt="result3">
            <div class="caption"><strong>Figure 4c. Comparison with other methods.</strong> The first column shows the reference
              colours and original images. The comparison demonstrates that our method achieves
              more precise and fine-grained colour editing while preserving structural integrity and
              background consistency.</div>
          </div>
        </div>
      </div>

      <!-- 右箭头 -->
      <div class="nav-arrow" onclick="nextSlide()">›</div>
    </div>
  </div>

  <!-- ========= 重构 颜色编辑展示 (group viewer) ========= -->
  <!-- 使用新结构：箭头在figure-comparison两侧，不再绝对定位重叠 -->
  <div class="editing-section">
    <div class="editing-arrows-container">
      <!-- 左箭头 -->
      <div class="nav-arrow" id="prev-group">‹</div>

      <!-- 原来的figure-comparison，去掉外层的figure-wrapper（避免双重定位） -->
      <div class="figure-comparison" id="groupComparison">
        <div class="left-images" id="left-images"></div>
        <div class="right-image">
          <img id="main-output" src="figures/output1_1.jpg" alt="output">
        </div>
      </div>

      <!-- 右箭头 -->
      <div class="nav-arrow" id="next-group">›</div>
    </div>
  </div>


  <h2>Citation</h2>
  <pre>
  @article{yang2026recolourmatters,
        title={Recolour What Matters: Region-Aware Colour Editing via Token-Level Diffusion},
        author={Yuqi Yang and Dongliang Chang and Yijia Ling and Ruoyi Du and Zhanyu Ma},
        journal={arXiv preprint arXiv:2603.18466}
        year={2026},
        url={https://arxiv.org/abs/2603.18466},
  }
  </pre>
  <footer>© 2025 Paper Authors.</footer>
</div>

<script>
/* ===== Slider 控制 (完全不变) ===== */
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');

function showSlide(index) {
  if (index >= slides.length) currentSlide = 0;
  else if (index < 0) currentSlide = slides.length - 1;
  else currentSlide = index;

  const slider = document.querySelector('.slider');
  slider.style.transform = `translateX(-${currentSlide * 100}%)`;
}

function nextSlide() { showSlide(currentSlide + 1); }
function prevSlide() { showSlide(currentSlide - 1); }

/* ===== Image Group 数据 ===== */
const imageGroups = [
  {
    original: "figures/original1.jpg",
    refs: [
      { thumb: "figures/color1_1.png", output: "figures/output1_1.jpg" },
      { thumb: "figures/color1_2.png", output: "figures/output1_2.jpg" },
      { thumb: "figures/color1_3.png", output: "figures/output1_3.jpg" },
      { thumb: "figures/color1_4.png", output: "figures/output1_4.jpg" },
      { thumb: "figures/color1_5.png", output: "figures/output1_5.jpg" }
    ]
  },
  {
    original: "figures/original2.jpg",
    refs: [
      { thumb: "figures/color2_1.png", output: "figures/output2_1.jpg" },
      { thumb: "figures/color2_2.png", output: "figures/output2_2.jpg" },
      { thumb: "figures/color2_3.png", output: "figures/output2_3.jpg" },
      { thumb: "figures/color2_4.png", output: "figures/output2_4.jpg" },
      { thumb: "figures/color2_5.png", output: "figures/output2_5.jpg" }
    ]
  },
  {
    original: "figures/original3.jpg",
    refs: [
      { thumb: "figures/color3_1.png", output: "figures/output3_1.jpg" },
      { thumb: "figures/color3_2.png", output: "figures/output3_2.jpg" },
      { thumb: "figures/color3_3.png", output: "figures/output3_3.jpg" },
      { thumb: "figures/color3_4.png", output: "figures/output3_4.jpg" },
      { thumb: "figures/color3_5.png", output: "figures/output3_5.jpg" }
    ]
  }
];

let currentGroupIndex = 0;

function renderGroup(index) {
  const group = imageGroups[index];
  const left = document.getElementById("left-images");
  const mainOutput = document.getElementById("main-output");

  left.innerHTML = "";

  // 原图
  const originalDiv = document.createElement("div");
  originalDiv.className = "thumb active";
  originalDiv.innerHTML = `<img src="${group.original}" alt="original">`;
  originalDiv.onclick = () => {
    document.querySelectorAll(".thumb").forEach(t => t.classList.remove("active"));
    originalDiv.classList.add("active");
    mainOutput.src = group.original;
  };
  left.appendChild(originalDiv);

  // references
  group.refs.forEach(ref => {
    const div = document.createElement("div");
    div.className = "thumb";
    div.innerHTML = `<img src="${ref.thumb}" alt="ref">`;
    div.onclick = () => {
      document.querySelectorAll(".thumb").forEach(t => t.classList.remove("active"));
      div.classList.add("active");
      mainOutput.src = ref.output;
    };
    left.appendChild(div);
  });

  mainOutput.src = group.original;
}

/* group 箭头事件 */
document.getElementById("prev-group").onclick = () => {
  currentGroupIndex = (currentGroupIndex - 1 + imageGroups.length) % imageGroups.length;
  renderGroup(currentGroupIndex);
};

document.getElementById("next-group").onclick = () => {
  currentGroupIndex = (currentGroupIndex + 1) % imageGroups.length;
  renderGroup(currentGroupIndex);
};

// 初始化
renderGroup(currentGroupIndex);
</script>

<!-- 确保没有遗漏: 删除旧的 .figure-wrapper 以防干扰，但已经在CSS中隐藏了旧wrapper类，不存在于结构中 -->
</body>
</html>