Spaces:
Running
Running
Commit
·
3ef3c58
1
Parent(s):
fa470f3
update
Browse files
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 =
|
| 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 |
|