Spaces:
Running
Running
Ryan Christian D. Deniega commited on
Commit ·
aef3106
1
Parent(s): 7097cb7
feat: add clickable example suggestion chips for text and url tabs
Browse files
frontend/src/pages/VerifyPage.jsx
CHANGED
|
@@ -436,6 +436,62 @@ export default function VerifyPage() {
|
|
| 436 |
<label htmlFor={inputId} className="sr-only">
|
| 437 |
{tab === 'url' ? 'Enter a URL to verify' : 'Enter text or headline to verify'}
|
| 438 |
</label>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 439 |
<textarea
|
| 440 |
id={inputId}
|
| 441 |
value={input}
|
|
@@ -467,7 +523,16 @@ export default function VerifyPage() {
|
|
| 467 |
</div>
|
| 468 |
) : (
|
| 469 |
/* Drag-and-drop file zone */
|
| 470 |
-
<div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 471 |
<label htmlFor={`file-${tab}`} className="sr-only">
|
| 472 |
Upload {tab === 'image' ? 'an image' : 'a video or audio file'}
|
| 473 |
</label>
|
|
|
|
| 436 |
<label htmlFor={inputId} className="sr-only">
|
| 437 |
{tab === 'url' ? 'Enter a URL to verify' : 'Enter text or headline to verify'}
|
| 438 |
</label>
|
| 439 |
+
{/* Per-tab example suggestions */}
|
| 440 |
+
{tab === 'text' && (
|
| 441 |
+
<div className="flex flex-wrap gap-1.5">
|
| 442 |
+
{[
|
| 443 |
+
'Marcos signs new law lowering rice prices',
|
| 444 |
+
'Leni Robredo arrested for treason',
|
| 445 |
+
'Duterte acquitted by ICC',
|
| 446 |
+
'DOH says COVID-19 vaccine causes cancer',
|
| 447 |
+
].map(example => (
|
| 448 |
+
<button
|
| 449 |
+
key={example}
|
| 450 |
+
type="button"
|
| 451 |
+
onClick={() => setInput(example)}
|
| 452 |
+
className="text-xs px-2.5 py-1 rounded-full transition-colors"
|
| 453 |
+
style={{
|
| 454 |
+
background: 'var(--bg-elevated)',
|
| 455 |
+
border: '1px solid var(--border)',
|
| 456 |
+
color: 'var(--text-secondary)',
|
| 457 |
+
fontFamily: 'var(--font-body)',
|
| 458 |
+
cursor: 'pointer',
|
| 459 |
+
}}
|
| 460 |
+
onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--accent-red)'; e.currentTarget.style.color = 'var(--accent-red)'; }}
|
| 461 |
+
onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.color = 'var(--text-secondary)'; }}
|
| 462 |
+
>
|
| 463 |
+
{example}
|
| 464 |
+
</button>
|
| 465 |
+
))}
|
| 466 |
+
</div>
|
| 467 |
+
)}
|
| 468 |
+
{tab === 'url' && (
|
| 469 |
+
<div className="flex flex-wrap gap-1.5">
|
| 470 |
+
{[
|
| 471 |
+
'https://rappler.com/nation/',
|
| 472 |
+
'https://mb.com.ph/news/',
|
| 473 |
+
'https://newsinfo.inquirer.net/',
|
| 474 |
+
].map(example => (
|
| 475 |
+
<button
|
| 476 |
+
key={example}
|
| 477 |
+
type="button"
|
| 478 |
+
onClick={() => setInput(example)}
|
| 479 |
+
className="text-xs px-2.5 py-1 rounded-full transition-colors"
|
| 480 |
+
style={{
|
| 481 |
+
background: 'var(--bg-elevated)',
|
| 482 |
+
border: '1px solid var(--border)',
|
| 483 |
+
color: 'var(--text-secondary)',
|
| 484 |
+
fontFamily: 'var(--font-mono, monospace)',
|
| 485 |
+
cursor: 'pointer',
|
| 486 |
+
}}
|
| 487 |
+
onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--accent-red)'; e.currentTarget.style.color = 'var(--accent-red)'; }}
|
| 488 |
+
onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.color = 'var(--text-secondary)'; }}
|
| 489 |
+
>
|
| 490 |
+
{example}
|
| 491 |
+
</button>
|
| 492 |
+
))}
|
| 493 |
+
</div>
|
| 494 |
+
)}
|
| 495 |
<textarea
|
| 496 |
id={inputId}
|
| 497 |
value={input}
|
|
|
|
| 523 |
</div>
|
| 524 |
) : (
|
| 525 |
/* Drag-and-drop file zone */
|
| 526 |
+
<div className="space-y-2">
|
| 527 |
+
{/* Per-tab hint */}
|
| 528 |
+
<p className="text-xs" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)', lineHeight: 1.5 }}>
|
| 529 |
+
{tab === 'image' && <>
|
| 530 |
+
Upload a screenshot of a news article, social media post, or image with text. <span style={{ color: 'var(--text-secondary)' }}>Supports JPG, PNG, WEBP.</span> Text is extracted via OCR.
|
| 531 |
+
</>}
|
| 532 |
+
{tab === 'video' && <>
|
| 533 |
+
Upload a video clip or audio recording. <span style={{ color: 'var(--text-secondary)' }}>Supports MP4, WEBM, MOV, MP3, WAV.</span> Speech is transcribed and on-screen text is extracted.
|
| 534 |
+
</>}
|
| 535 |
+
</p>
|
| 536 |
<label htmlFor={`file-${tab}`} className="sr-only">
|
| 537 |
Upload {tab === 'image' ? 'an image' : 'a video or audio file'}
|
| 538 |
</label>
|