Hugging Face's logo

Spaces:
UMCU
/
PerplexityViewer
Sleeping

App Files Community
PerplexityViewer
File size: 3,406 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
 

<!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>