Hugging Face's logo

Spaces:
ai4data
/
data-use-annotation
Runtime error

App Files Community
data-use-annotation
File size: 3,320 Bytes
a3025a6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
"use client";

import { useState, useEffect } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

const GUIDE_CONTENT = `
## Getting Started

1. **Sign in** with your HuggingFace account
2. Your assigned documents appear in the dropdown
3. Only accounts in the annotator config will see documents

---

## Interface Layout

| Panel | Purpose |
|-------|---------|
| **Left** | PDF viewer — original document page |
| **Right** | Markdown text with highlighted data mentions |

---

## Page Navigation

| Button | Action |
|--------|--------|
| **← Prev / Next →** | Move one page at a time |
| **⏮ / ⏭** | Jump to page with data mentions |
| **● green dot** | Current page has mentions |

---

## Data Mention Colors

| Color | Tag | Meaning |
|-------|-----|---------|
| 🟢 Green | **Named** | A specific, named dataset |
| 🟡 Amber | **Descriptive** | Described but not formally named |
| 🟣 Purple | **Vague** | Unclear or ambiguous reference |
| ⚪ Gray | **Non-Dataset** | Not actually a dataset |

---

## Validating Mentions

1. Click the **toggle (‹)** to open the side panel
2. For each mention:
   - ✅ **Correct** — real dataset mention
   - ❌ **Wrong** — false positive
   - **Edit tag** — click the tag badge to change it
   - **Delete** — remove false mentions (click twice to confirm)

---

## Adding New Annotations

1. **Select text** in the markdown preview (click & drag)
2. Click **✍️ Annotate Selection**
3. Choose a tag: Named, Descriptive, or Vague
4. Click **Save Annotation**

---

## Recommended Workflow

1. **Read** the markdown text, reference the PDF for context
2. **Review** each highlighted mention in the side panel
3. **Add** any mentions the AI missed via text selection
4. **Move** to the next page (warning if unvalidated mentions remain)

---

## Tips

- Use **⏮/⏭ jump buttons** to skip pages without mentions
- Pages without mentions may still have datasets the AI missed
- Select just the **dataset name**, not surrounding text
- The **PDF is the source of truth** — markdown may have formatting issues
`;

export default function HelpModal({ isOpen, onClose }) {
    useEffect(() => {
        const handleEsc = (e) => { if (e.key === 'Escape') onClose(); };
        if (isOpen) window.addEventListener('keydown', handleEsc);
        return () => window.removeEventListener('keydown', handleEsc);
    }, [isOpen, onClose]);

    if (!isOpen) return null;

    return (
        <div className="modal-overlay help-modal-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
            <div className="modal-content help-modal-content">
                <div className="modal-header">
                    <h3>📖 Annotator Guide</h3>
                    <button className="modal-close" onClick={onClose}>&times;</button>
                </div>
                <div className="modal-body help-modal-body">
                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
                        {GUIDE_CONTENT}
                    </ReactMarkdown>
                </div>
                <div className="modal-footer">
                    <button className="btn btn-primary" onClick={onClose}>Got it!</button>
                </div>
            </div>
        </div>
    );
}