Spaces:
Sleeping
Sleeping
| #!/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) | |