(null);
+ const extractionId = useRef(0);
+ const { toast } = useToast();
+
+ const extractMetadata = useCallback(async (file: File) => {
+ const currentExtractionId = ++extractionId.current;
+ setIsExtracting(true);
+ setError(null);
+ setMetadata(null);
+ setC2paManifest(null);
+ setC2paError(null);
+ setHasProcessed(false);
+
+ try {
+ const [result, pngText, c2paResult] = await Promise.all([
+ parse(file, true),
+ extractPngTextMetadata(file),
+ readC2paManifest(file)
+ .then(manifest => ({ manifest }))
+ .catch(cause => ({
+ error:
+ cause instanceof Error
+ ? cause.message
+ : "Unknown C2PA verification error",
+ })),
+ ]);
+ if (currentExtractionId !== extractionId.current) return;
+
+ const manifest = "manifest" in c2paResult ? c2paResult.manifest : null;
+ setC2paManifest(manifest);
+ setC2paError("error" in c2paResult ? c2paResult.error : null);
+ setMetadata(
+ Object.assign(
+ {},
+ result && typeof result === "object"
+ ? Object.fromEntries(Object.entries(result))
+ : {},
+ pngText,
+ manifest ? { C2PA: manifest } : {}
+ )
+ );
+ setHasProcessed(true);
+ } catch (cause) {
+ if (currentExtractionId !== extractionId.current) return;
+ setError(
+ cause instanceof Error
+ ? `Could not read this image: ${cause.message}`
+ : "Could not read this image. The format may not be supported or the file may be invalid."
+ );
+ } finally {
+ if (currentExtractionId === extractionId.current) {
+ setIsExtracting(false);
+ }
+ }
+ }, []);
+
+ useEffect(() => {
+ if (autoProcess && imageFile) {
+ void extractMetadata(imageFile);
+ }
+ }, [autoProcess, extractMetadata, imageFile]);
+
+ useEffect(
+ () => () => {
+ extractionId.current += 1;
+ },
+ []
+ );
+
+ const handleFile = (file: File | undefined) => {
+ if (!file) return;
+ extractionId.current += 1;
+ setIsExtracting(false);
+ setError(null);
+ setMetadata(null);
+ setC2paManifest(null);
+ setC2paError(null);
+ setHasProcessed(false);
+ setImageFile(file);
+ };
+
+ const handleClear = () => {
+ extractionId.current += 1;
+ setImageFile(null);
+ setMetadata(null);
+ setC2paManifest(null);
+ setC2paError(null);
+ setHasProcessed(false);
+ setIsExtracting(false);
+ setError(null);
+ if (fileInputRef.current) fileInputRef.current.value = "";
+ };
+
+ const copyMetadata = async () => {
+ if (!metadata) return;
+ try {
+ await navigator.clipboard.writeText(stringifyMetadata(metadata));
+ toast({
+ title: "Metadata copied",
+ description: "Image metadata copied to the clipboard.",
+ });
+ } catch (cause) {
+ console.error("Failed to copy image metadata:", cause);
+ toast({
+ title: "Copy failed",
+ description: "Could not copy metadata to the clipboard.",
+ variant: "destructive",
+ });
+ }
+ };
+
+ const metadataText = metadata ? stringifyMetadata(metadata) : "";
+ const hasMetadata = metadata !== null && Object.keys(metadata).length > 0;
+ const aiIndicators = metadata ? findImageAiIndicators(metadata) : [];
+ const c2paSourceTypes = c2paManifest
+ ? findC2paDigitalSourceTypes(c2paManifest)
+ : [];
+ const aiSourceTypes = c2paSourceTypes.filter(sourceType =>
+ /(?:trainedAlgorithmicMedia|compositeWithTrainedAlgorithmicMedia|algorithmicallyEnhanced)$/i.test(
+ sourceType
+ )
+ );
+
+ const renderMetadataContent = () => {
+ if (isExtracting) {
+ return (
+
+ Reading image metadata locally...
+
+ );
+ }
+ if (hasMetadata) {
+ return (
+
+ {metadataText}
+
+ );
+ }
+ return (
+
+ No embedded metadata was found in this image.
+
+ );
+ };
+
+ const renderOriginIndicators = () => {
+ if (isExtracting) {
+ return (
+
+ Checking embedded metadata...
+
+ );
+ }
+ if (aiIndicators.length > 0) {
+ return (
+
+
+ AI-generation indicators were found in this file's metadata.
+
+
+ {aiIndicators.map((indicator, index) => (
+
+ {indicator.field} :{" "}
+ {indicator.evidence}
+
+ ))}
+
+
+ No common AI-generation indicators were found in the metadata. This does
+ not prove the image was not AI-generated; metadata can be missing,
+ edited, or removed.
+
+ );
+ };
+
+ const renderC2paContent = () => {
+ if (isExtracting) {
+ return (
+
+ Checking for C2PA Content Credentials...
+
+ );
+ }
+ if (c2paError) {
+ return (
+
+ Could not inspect C2PA credentials locally: {c2paError}
+
+ );
+ }
+ if (!c2paManifest) {
+ return (
+
+ No embedded C2PA Content Credentials were found.
+
+ );
+ }
+
+ return (
+
+
+ C2PA manifest found. Validation state:{" "}
+ {c2paManifest.validation_state ?? "not reported"} .
+
+ {aiSourceTypes.length > 0 ? (
+
+ The manifest asserts AI-generated or AI-edited content:
+
+ {aiSourceTypes.map(sourceType => (
+
+ {sourceType}
+
+ ))}
+
+
+ ) : (
+
+ The manifest contains no recognized AI-source type. That does not
+ establish that the image was not AI-generated.
+
+ )}
+ {c2paManifest.validation_status?.length ? (
+
+ {c2paManifest.validation_status.map((status, index) => (
+
+ {status.code}
+ {status.explanation ? `: ${status.explanation}` : ""}
+
+ ))}
+
+ ) : null}
+
+ Validation was performed locally. Remote manifest and
+ certificate-status lookups are disabled.
+
+
+
+
+ Image Metadata
+ {tool?.shortcut ?
+
+
+ Read EXIF, GPS, camera, and other embedded image details
+
+
+
+
+
+
+ Your image stays on this device. Metadata can include private
+ information such as GPS coordinates. SynthID watermark detection is not
+ available in this offline tool.
+
+
+ {error ? (
+
+
+ {error}
+
+
+ ) : null}
+
+
+
+ imageFile && void extractMetadata(imageFile)}
+ disabled={!imageFile || isExtracting}
+ data-testid="extract-metadata"
+ >
+
+
+
+ Auto Process
+
+
+
+
+
+
+
+
+
+ Choose an image
+
+
+ event.preventDefault()}
+ onDrop={event => {
+ event.preventDefault();
+ handleFile(event.dataTransfer.files[0]);
+ }}
+ className="flex min-h-36 cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-slate-300 p-6 text-center transition-colors hover:border-primary dark:border-slate-700"
+ >
+
+ {imageFile ? "Choose a different image" : "Choose an image"}
+
+
+ or drag and drop an image here
+
+
+
+ {imageFile ? (
+
+
+ {imageFile.name}
+
+ {formatBytes(imageFile.size)}
+ {imageFile.type ? {imageFile.type} : null}
+
+ ) : null}
+
+
+
+ {hasProcessed || isExtracting ? (
+
+
+ C2PA Content Credentials
+
+ {renderC2paContent()}
+
+ ) : null}
+
+ {hasProcessed || isExtracting ? (
+
+
+ Image Origin Indicators
+
+ {renderOriginIndicators()}
+
+ ) : null}
+
+ {hasProcessed || isExtracting ? (
+
+
+ Extracted Metadata
+ {hasMetadata ? (
+ void copyMetadata()}
+ data-testid="copy-metadata"
+ >
+
+ ) : null}
+
+ {renderMetadataContent()}
+
+ ) : null}
+
+
+