Spaces:
Sleeping
Sleeping
File size: 6,265 Bytes
ef12530 |
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 |
#!/usr/bin/env python3
"""
Simple test to verify color visualization is working (no external dependencies)
"""
def test_color_html():
"""Test the HTML color generation without imports"""
print("🎨 Testing Color HTML Generation")
print("=" * 50)
# Simple test data
tokens = ["The", "quick", "brown", "fox"]
perplexities = [1.2, 5.8, 12.3, 2.1]
# Manual color generation test (similar to app logic)
max_perplexity = max(perplexities)
normalized_perps = [p / max_perplexity for p in perplexities]
print(f"Tokens: {tokens}")
print(f"Perplexities: {perplexities}")
print(f"Normalized: {[f'{n:.2f}' for n in normalized_perps]}")
# Test HTML generation
html_parts = ['<div>']
for i, (token, perp, norm_perp) in enumerate(zip(tokens, perplexities, normalized_perps)):
# Simple color mapping
if norm_perp < 0.3: # Green
red, green, blue = 46, 204, 113
elif norm_perp < 0.7: # Yellow
red, green, blue = 241, 196, 15
else: # Red
red, green, blue = 231, 76, 60
html_parts.append(
f'<span style="background-color: rgba({red}, {green}, {blue}, 0.7); '
f'padding: 2px 4px; margin: 1px; border-radius: 3px;" '
f'title="Perplexity: {perp}">{token}</span> '
)
html_parts.append('</div>')
html = ''.join(html_parts)
print(f"\nGenerated HTML:")
print(html)
# Basic checks
assert 'background-color' in html, "No background-color in HTML"
assert 'rgba(' in html, "No rgba colors in HTML"
assert 'title=' in html, "No tooltip in HTML"
print("\n✅ Basic HTML generation works!")
print("✅ Colors are included in the HTML!")
print("✅ Tooltips are included!")
return html
def create_test_html_file():
"""Create a test HTML file to visually verify colors"""
html_content = """
<!DOCTYPE html>
<html>
<head>
<title>Color Test</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.test-section { margin: 20px 0; padding: 15px; border: 1px solid #ccc; }
</style>
</head>
<body>
<h1>🎨 Perplexity Color Test</h1>
<div class="test-section">
<h2>Low Perplexity (Green - Confident)</h2>
<span style="background-color: rgba(46, 204, 113, 0.7); padding: 4px 8px; margin: 2px; border-radius: 3px;" title="Perplexity: 1.2">The</span>
<span style="background-color: rgba(46, 204, 113, 0.7); padding: 4px 8px; margin: 2px; border-radius: 3px;" title="Perplexity: 1.8">quick</span>
<span style="background-color: rgba(46, 204, 113, 0.7); padding: 4px 8px; margin: 2px; border-radius: 3px;" title="Perplexity: 2.1">brown</span>
</div>
<div class="test-section">
<h2>Medium Perplexity (Yellow - Uncertain)</h2>
<span style="background-color: rgba(241, 196, 15, 0.7); padding: 4px 8px; margin: 2px; border-radius: 3px;" title="Perplexity: 5.4">machine</span>
<span style="background-color: rgba(241, 196, 15, 0.7); padding: 4px 8px; margin: 2px; border-radius: 3px;" title="Perplexity: 7.2">learning</span>
<span style="background-color: rgba(241, 196, 15, 0.7); padding: 4px 8px; margin: 2px; border-radius: 3px;" title="Perplexity: 8.9">requires</span>
</div>
<div class="test-section">
<h2>High Perplexity (Red - Very Uncertain)</h2>
<span style="background-color: rgba(231, 76, 60, 0.7); padding: 4px 8px; margin: 2px; border-radius: 3px;" title="Perplexity: 15.7">quantum</span>
<span style="background-color: rgba(231, 76, 60, 0.7); padding: 4px 8px; margin: 2px; border-radius: 3px;" title="Perplexity: 23.4">entanglement</span>
<span style="background-color: rgba(231, 76, 60, 0.7); padding: 4px 8px; margin: 2px; border-radius: 3px;" title="Perplexity: 31.2">defies</span>
</div>
<div class="test-section">
<h2>Mixed Example Sentence</h2>
<span style="background-color: rgba(46, 204, 113, 0.7); padding: 4px 8px; margin: 2px; border-radius: 3px;" title="Perplexity: 1.2">The</span>
<span style="background-color: rgba(46, 204, 113, 0.7); padding: 4px 8px; margin: 2px; border-radius: 3px;" title="Perplexity: 2.3">capital</span>
<span style="background-color: rgba(46, 204, 113, 0.7); padding: 4px 8px; margin: 2px; border-radius: 3px;" title="Perplexity: 1.8">of</span>
<span style="background-color: rgba(46, 204, 113, 0.7); padding: 4px 8px; margin: 2px; border-radius: 3px;" title="Perplexity: 2.1">France</span>
<span style="background-color: rgba(46, 204, 113, 0.7); padding: 4px 8px; margin: 2px; border-radius: 3px;" title="Perplexity: 1.5">is</span>
<span style="background-color: rgba(46, 204, 113, 0.7); padding: 4px 8px; margin: 2px; border-radius: 3px;" title="Perplexity: 1.9">Paris</span>
</div>
<p><strong>Instructions:</strong> Hover over tokens to see perplexity values in tooltips!</p>
<p><strong>Color Legend:</strong></p>
<ul>
<li>🟢 <strong>Green:</strong> Low perplexity (model is confident)</li>
<li>🟡 <strong>Yellow:</strong> Medium perplexity (model is somewhat uncertain)</li>
<li>🔴 <strong>Red:</strong> High perplexity (model is very uncertain)</li>
</ul>
</body>
</html>
"""
with open("color_test.html", "w") as f:
f.write(html_content)
print("💾 Created 'color_test.html' - open this in your browser!")
print(" You should see colored text with different backgrounds")
def main():
"""Run the simple color test"""
try:
print("🎨 Simple Color Visualization Test")
print("=" * 60)
# Test HTML generation
html = test_color_html()
# Create visual test file
create_test_html_file()
print("\n" + "=" * 60)
print("🎉 Color test completed successfully!")
print("🌈 Open 'color_test.html' in your browser to see the colors")
print("💡 If colors show up there, they should work in the app too!")
print("=" * 60)
return True
except Exception as e:
print(f"❌ Test failed: {e}")
return False
if __name__ == "__main__":
success = main()
exit(0 if success else 1)
|