Spaces:
Sleeping
Sleeping
| <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> | |