File size: 4,463 Bytes
171eb01 4113b5b 171eb01 | 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 | import React from 'react';
import { saveAs } from 'file-saver';
// ... (in handleDownload)
import { motion } from 'framer-motion';
const Results = ({ result, onReset }) => {
if (!result) return null;
// Mock score: 0 = Human, 100 = AI
const score = result.score || 0;
const isAI = score > 50;
const handleDownload = async () => {
try {
// Need to pass the original text here.
// Since result doesn't contain the original text by default (optimized away),
// we should ideally have it.
// For now, let's assume `result.text` is available or we pass input props.
// Wait, result only has score/label/ppl.
// We need to pass the text from App.jsx or store it in result.
// Let's assume App.jsx will now pass text in `result` (Need to update App.jsx too if not present)
// Actually, simpler: Let's assume we pass `text` as a prop to Results component for now?
// Or update backend to echo back the text?
// Let's update App.jsx to attach `originalText` to the result object.
const response = await fetch('/api/report/', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
text: result.originalText || "Content not available",
score: score,
label: isAI ? "AI Generated" : "Human Written"
})
});
if (!response.ok) throw new Error("Report generation failed");
const blob = await response.blob();
saveAs(blob, "DetectAI_Report.pdf");
} catch (e) {
alert("Failed to download report: " + e.message);
}
};
return (
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
className="w-full max-w-3xl glass-panel p-8 mt-6 flex flex-col items-center"
>
<h2 className="text-2xl font-bold text-white mb-8">Detection Result</h2>
<div className="relative w-64 h-32 overflow-hidden mb-6">
{/* Gauge Body */}
<div className="absolute top-0 left-0 w-full h-64 rounded-full border-[12px] border-[rgba(255,255,255,0.1)] border-b-transparent rotate-0 box-border pointer-events-none"></div>
{/* Gauge Fill */}
<motion.div
initial={{ rotate: -180 }}
animate={{ rotate: -180 + (score / 100) * 180 }}
transition={{ duration: 1.5, ease: "circOut" }}
className="absolute top-0 left-0 w-full h-64 rounded-full border-[12px] border-b-transparent box-border"
style={{
borderColor: `transparent ${isAI ? '#ef4444' : '#22c55e'} ${isAI ? '#ef4444' : '#22c55e'} transparent`,
transformOrigin: '50% 50%'
}}
></motion.div>
<div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 mb-4 text-center">
<span className="text-4xl font-bold text-white block">{score.toFixed(1)}%</span>
<span className={`text-sm font-uppercase tracking-wider ${isAI ? 'text-red-400' : 'text-green-400'}`}>
{isAI ? 'AI GENERATED' : 'HUMAN WRITTEN'}
</span>
</div>
</div>
<p className="text-secondary text-center max-w-md mb-8">
Our DeBERTa model is <strong>{score.toFixed(1)}%</strong> confident that this content was {isAI ? 'generated by AI' : 'written by a human'}.
</p>
<div className="flex gap-4">
<button
onClick={onReset}
className="px-6 py-2 border border-[rgba(255,255,255,0.2)] rounded-full text-white hover:bg-[rgba(255,255,255,0.05)] transition-colors"
>
Analyze Another
</button>
<button
onClick={handleDownload}
className="px-6 py-2 bg-blue-600 rounded-full text-white hover:bg-blue-500 transition-colors shadow-lg"
>
Download PDF Report
</button>
</div>
</motion.div>
);
};
export default Results;
|