Jellyfish042 commited on
Commit
3ef3c58
·
1 Parent(s): fa470f3
Files changed (1) hide show
  1. visualization/html_generator.py +10 -7
visualization/html_generator.py CHANGED
@@ -663,7 +663,7 @@ def generate_comparison_html(
663
  </div>
664
  <div class="legend-item" style="margin-left: 20px;">
665
  <span style="color: #aaa;">Color Range:</span>
666
- <input type="range" id="color-range-slider" min="0" max="100" value="50" step="1" style="width: 200px; vertical-align: middle;">
667
  <span id="color-range-value" style="color: #fff; min-width: 45px; display: inline-block;">50%</span>
668
  </div>
669
  </div>
@@ -865,19 +865,19 @@ def generate_comparison_html(
865
  item.rank = rank; // rank 0 = largest deviation
866
  }});
867
 
868
- function tunedDeltaToColor(tunedDelta, maxAbsDelta) {{
869
  // Normalize to [-1, 1]
870
  const normalized = Math.max(-1, Math.min(1, tunedDelta / maxAbsDelta));
871
  let r, g, b;
872
  if (normalized < 0) {{
873
  // Green (RWKV better)
874
- const intensity = -normalized;
875
  r = Math.round(255 * (1 - intensity * 0.85));
876
  g = 255;
877
  b = Math.round(255 * (1 - intensity * 0.85));
878
  }} else {{
879
  // Red (RWKV worse)
880
- const intensity = normalized;
881
  r = 255;
882
  g = Math.round(255 * (1 - intensity * 0.85));
883
  b = Math.round(255 * (1 - intensity * 0.85));
@@ -889,6 +889,9 @@ def generate_comparison_html(
889
  // colorRangePercent: 0-100, represents the proportion of tokens to color
890
  const colorCount = Math.round(tokenData.length * colorRangePercent / 100);
891
 
 
 
 
892
  // Calculate max deviation within the colored range
893
  let maxAbsDeltaInRange = 1e-9;
894
  tokenData.forEach(item => {{
@@ -900,7 +903,7 @@ def generate_comparison_html(
900
  tokenData.forEach(item => {{
901
  if (item.rank < colorCount) {{
902
  // Use dynamic normalization based on colored range
903
- item.token.style.backgroundColor = tunedDeltaToColor(item.tunedDelta, maxAbsDeltaInRange);
904
  }} else {{
905
  // Outside color range, white
906
  item.token.style.backgroundColor = 'rgb(255, 255, 255)';
@@ -909,8 +912,8 @@ def generate_comparison_html(
909
  }}
910
 
911
  slider.addEventListener('input', (e) => {{
912
- const val = parseInt(e.target.value);
913
- rangeValue.textContent = val + '%';
914
  updateColors(val);
915
  }});
916
 
 
663
  </div>
664
  <div class="legend-item" style="margin-left: 20px;">
665
  <span style="color: #aaa;">Color Range:</span>
666
+ <input type="range" id="color-range-slider" min="0" max="100" value="50" step="0.1" style="width: 200px; vertical-align: middle;">
667
  <span id="color-range-value" style="color: #fff; min-width: 45px; display: inline-block;">50%</span>
668
  </div>
669
  </div>
 
865
  item.rank = rank; // rank 0 = largest deviation
866
  }});
867
 
868
+ function tunedDeltaToColor(tunedDelta, maxAbsDelta, exponent) {{
869
  // Normalize to [-1, 1]
870
  const normalized = Math.max(-1, Math.min(1, tunedDelta / maxAbsDelta));
871
  let r, g, b;
872
  if (normalized < 0) {{
873
  // Green (RWKV better)
874
+ const intensity = Math.pow(-normalized, exponent);
875
  r = Math.round(255 * (1 - intensity * 0.85));
876
  g = 255;
877
  b = Math.round(255 * (1 - intensity * 0.85));
878
  }} else {{
879
  // Red (RWKV worse)
880
+ const intensity = Math.pow(normalized, exponent);
881
  r = 255;
882
  g = Math.round(255 * (1 - intensity * 0.85));
883
  b = Math.round(255 * (1 - intensity * 0.85));
 
889
  // colorRangePercent: 0-100, represents the proportion of tokens to color
890
  const colorCount = Math.round(tokenData.length * colorRangePercent / 100);
891
 
892
+ // Calculate exponent: 100% -> 0.5, 0% -> 1.0
893
+ const exponent = 1 - (colorRangePercent / 100) * 0.5;
894
+
895
  // Calculate max deviation within the colored range
896
  let maxAbsDeltaInRange = 1e-9;
897
  tokenData.forEach(item => {{
 
903
  tokenData.forEach(item => {{
904
  if (item.rank < colorCount) {{
905
  // Use dynamic normalization based on colored range
906
+ item.token.style.backgroundColor = tunedDeltaToColor(item.tunedDelta, maxAbsDeltaInRange, exponent);
907
  }} else {{
908
  // Outside color range, white
909
  item.token.style.backgroundColor = 'rgb(255, 255, 255)';
 
912
  }}
913
 
914
  slider.addEventListener('input', (e) => {{
915
+ const val = parseFloat(e.target.value);
916
+ rangeValue.textContent = val.toFixed(1) + '%';
917
  updateColors(val);
918
  }});
919