Hugging Face's logo

Spaces:
Anonymous-EmpathyAI
/
Empathy-Label
Running

App Files Community
Empathy-Label
File size: 4,172 Bytes
a73045d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Annotator — ESConv Annotation</title>
  <link rel="preconnect" href="https://fonts.googleapis.com"/>
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
  <link rel="stylesheet" href="/static/style.css"/>
  <link rel="stylesheet" href="/static/admin.css"/>
</head>
<body>
  <header class="header">
    <div class="header-inner">
      <div class="header-logo">
        <div class="logo-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
        </div>
        <div>
          <h1>My Assignments</h1>
          <p>Review LLM annotations</p>
        </div>
      </div>
      <div class="header-controls">
        <span class="user-badge" id="userBadge">annotator</span>
        <button class="logout-btn" id="logoutBtn">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/>
          </svg>
          Logout
        </button>
      </div>
    </div>
  </header>

  <main class="admin-main">
    <div class="section-header">
      <h2>Assigned Files</h2>
    </div>
    <div class="card-grid" id="assignmentCards"></div>
    <div class="empty-state" id="emptyState" style="display:none">
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="opacity:.3;margin-bottom:12px">
        <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
      </svg>
      <p>No files assigned to you yet.</p>
      <p style="font-size:.8rem;color:var(--text-muted)">Contact admin to get files assigned.</p>
    </div>
  </main>

  <script>
    // Fetch user info
    fetch('/api/me').then(r=>r.json()).then(u=>{
      document.getElementById('userBadge').textContent = u.username;
    });

    // Logout
    document.getElementById('logoutBtn').addEventListener('click', async()=>{
      await fetch('/api/logout',{method:'POST'});
      window.location.href = '/login';
    });

    // Load assignments
    async function loadAssignments() {
      const res = await fetch('/api/my-assignments');
      const data = await res.json();
      const grid = document.getElementById('assignmentCards');
      const empty = document.getElementById('emptyState');

      if (data.length === 0) { empty.style.display='block'; grid.innerHTML=''; return; }
      empty.style.display='none';

      grid.innerHTML = data.map(a => {
        const pct = a.progress || 0;
        const barColor = pct >= 100 ? '#34d399' : pct > 50 ? '#fbbf24' : '#60a5fa';
        return `
          <div class="file-card" onclick="window.location.href='/review/${a.id}'">
            <div class="file-card-header">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:var(--accent)">
                <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                <polyline points="14 2 14 8 20 8"/>
              </svg>
              <span class="file-card-name">${a.filename}</span>
            </div>
            <div class="file-card-stats">
              <span>${a.reviewed_count} / ${a.total_samples} reviewed</span>
              <span style="color:${barColor};font-weight:700">${pct}%</span>
            </div>
            <div class="progress-bar">
              <div class="progress-fill" style="width:${pct}%;background:${barColor}"></div>
            </div>
            ${pct >= 100 ? '<div class="completed-badge">✓ Completed</div>' : '<div class="continue-badge">Continue Review →</div>'}
          </div>`;
      }).join('');
    }
    loadAssignments();
  </script>
</body>
</html>