Something went wrong. Try again.
add or update alt text on your media forked from psingletary.com/verifier
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107import React, { useState } from 'react';
export default function AltifierImageCard({ image, postText, onApprove, onReject, isApplying, geminiEnabled,}) { const [altText, setAltText] = useState(image.currentAlt || ''); const [generatedAlt, setGeneratedAlt] = useState(null); const [isGenerating, setIsGenerating] = useState(false); const [generateError, setGenerateError] = useState(null);
const handleGenerate = async () => { if (!image.cdnUrl) return; setIsGenerating(true); setGenerateError(null);
try { const { generateAltText } = await import('../../utils/altGenerator'); const result = await generateAltText(image.cdnUrl, postText); setGeneratedAlt(result); setAltText(result); } catch (err) { setGenerateError(err.message || 'Generation failed'); } finally { setIsGenerating(false); } };
const handleApprove = () => { if (!altText.trim()) return; onApprove(image.index, altText.trim()); };
return ( <div className={`altifier-image-card ${image.hasAlt ? 'has-alt' : 'missing-alt'}`}> {image.cdnUrl && ( <img src={image.cdnUrl} alt={image.currentAlt || `Image ${image.index + 1}`} className="altifier-image-card-img" loading="lazy" /> )} {image.kind === 'video' && !image.cdnUrl && ( <div className="altifier-video-placeholder">Video</div> )}
<div className="altifier-image-card-body"> <div className="altifier-image-card-status"> {image.hasAlt ? `Current alt text: "${image.currentAlt.substring(0, 80)}${image.currentAlt.length > 80 ? '...' : ''}"` : 'Missing alt text'} </div>
<div className="altifier-image-card-actions"> {!image.hasAlt && image.kind !== 'video' && geminiEnabled && ( <button onClick={handleGenerate} disabled={isGenerating} className="altifier-generate-button" > {isGenerating ? 'Generating...' : generatedAlt ? 'Regenerate' : 'Generate Alt Text'} </button> )} </div>
{generateError && ( <div className="altifier-image-card-error">{generateError}</div> )}
<textarea className="altifier-alt-textarea" value={altText} onChange={(e) => setAltText(e.target.value)} placeholder={`Enter alt text for this ${image.kind === 'video' ? 'video' : 'image'}...`} rows={3} maxLength={1000} /> <div className="altifier-char-count"> {altText.length}/1000 </div>
<div className="altifier-image-card-buttons"> <button onClick={handleApprove} disabled={!altText.trim() || isApplying} className="altifier-approve-button" > {isApplying ? 'Applying...' : 'Approve'} </button> <button onClick={() => onReject(image.index)} disabled={isApplying} className="altifier-reject-button" > Skip </button> </div> </div> </div> );}