import React, { useState } from 'react';
import { Wand2, Copy, Check, Loader2, RefreshCw } from 'lucide-react';
export default function AIHumanizer() {
const [inputText, setInputText] = useState('');
const [outputText, setOutputText] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [copied, setCopied] = useState(false);
const [strength, setStrength] = useState('maximum');
const [style, setStyle] = useState('natural');
const humanizeText = async () => {
if (!inputText.trim()) return;
setIsLoading(true);
setOutputText('');
const strengthPrompts = {
maximum: `You are an expert writer rewriting AI-generated content to be 100% undetectable as AI.
CRITICAL RULES FOR MAXIMUM HUMANIZATION:
1. Add personal touches, opinions, and subjective language ("I think", "in my experience", "surprisingly")
2. Use imperfect language - include minor redundancies, natural filler words, and conversational asides
3. Vary sentence rhythm dramatically - mix very short sentences with longer, flowing ones
4. Add unexpected transitions and tangential thoughts that humans naturally include
5. Use colloquialisms, idioms, and regional expressions appropriate to the style
6. Include rhetorical questions and direct reader address
7. Add specific, concrete examples and anecdotes when possible
8. Break formal writing "rules" occasionally (start with "And" or "But", use fragments)
9. Show personality - use humor, surprise, or emotional language where appropriate
10. Avoid AI patterns: no excessive lists, no overly structured paragraphs, no robotic transitions
Rewrite this with MAXIMUM humanization:`,
high: `Rewrite this text to sound completely natural and human-written. Key requirements:
- Add conversational elements and natural flow
- Use contractions extensively (it's, don't, we've, you'll)
- Vary sentence structure unpredictably
- Include informal transitions (well, so, now, anyway)
- Add subtle personal perspective
- Break up overly perfect structure
- Use active voice and dynamic verbs
- Make it feel spontaneous, not rehearsed
Text to humanize:`,
medium: `Transform this text to sound naturally human while maintaining professionalism:
- Mix formal and informal language appropriately
- Use natural phrasing and varied sentence lengths
- Add connecting thoughts and smoother transitions
- Remove robotic patterns and excessive structure
- Make it conversational but clear
Text:`
};
const styleInstructions = {
natural: "Write as if you're explaining this to a friend - relaxed, clear, and genuine.",
storytelling: "Use narrative techniques, vivid details, and emotional connection.",
conversational: "Write like you're having a casual conversation - use 'you', questions, and direct address.",
expert: "Write with authority but personality - like a knowledgeable person sharing insights informally."
};
try {
const response = await fetch("https://api.anthropic.com/v1/messages", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
model: "claude-sonnet-4-20250514",
max_tokens: 4000,
messages: [
{
role: "user",
content: `${strengthPrompts[strength]}
${inputText}
Style: ${styleInstructions[style]}
IMPORTANT: Output ONLY the rewritten text with no preamble, explanation, or meta-commentary. Make it sound like a real person wrote this, not an AI trying to sound human.`
}
],
})
});
const data = await response.json();
let humanizedText = data.content
.filter(item => item.type === "text")
.map(item => item.text)
.join("\n");
// Post-processing to remove any AI artifacts
humanizedText = humanizedText
.replace(/^(Here's|Here is|I've rewritten|I have rewritten).*?:\s*/i, '')
.replace(/^"(.*)"$/s, '$1')
.trim();
setOutputText(humanizedText);
} catch (error) {
setOutputText("Hmm, something went wrong there. Mind giving it another shot?");
console.error(error);
} finally {
setIsLoading(false);
}
};
const copyToClipboard = () => {
navigator.clipboard.writeText(outputText);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 p-4 md:p-6">
<div className="max-w-7xl mx-auto">
<div className="text-center mb-8">
<div className="flex items-center justify-center gap-3 mb-3">
<Wand2 className="w-10 h-10 text-blue-600" />
<h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
Advanced AI Humanizer
</h1>
</div>
<p className="text-gray-600 text-lg">
100% undetectable humanization powered by advanced AI transformation
</p>
</div>
<div className="bg-white rounded-2xl shadow-2xl p-6 mb-6 border border-gray-100">
<div className="grid md:grid-cols-2 gap-6">
<div>
<label className="block text-sm font-bold text-gray-700 mb-3">
🎯 Humanization Strength
</label>
<div className="space-y-2">
{[
{ value: 'maximum', label: 'Maximum', desc: '100% human-like with personality & imperfections', color: 'green' },
{ value: 'high', label: 'High', desc: 'Very natural with conversational elements', color: 'blue' },
{ value: 'medium', label: 'Medium', desc: 'Balanced natural feel with professionalism', color: 'purple' }
].map(s => (
<button
key={s.value}
onClick={() => setStrength(s.value)}
className={`w-full p-4 rounded-xl border-2 transition-all text-left ${
strength === s.value
? `border-${s.color}-500 bg-${s.color}-50 shadow-md`
: 'border-gray-200 hover:border-gray-300'
}`}
>
<div className="font-semibold text-sm">{s.label}</div>
<div className="text-xs text-gray-600 mt-1">{s.desc}</div>
</button>
))}
</div>
</div>
<div>
<label className="block text-sm font-bold text-gray-700 mb-3">
✨ Writing Style
</label>
<div className="space-y-2">
{[
{ value: 'natural', label: 'Natural', desc: 'Clear, genuine, like explaining to a friend' },
{ value: 'conversational', label: 'Conversational', desc: 'Casual chat style with direct engagement' },
{ value: 'storytelling', label: 'Storytelling', desc: 'Narrative flow with vivid details' },
{ value: 'expert', label: 'Expert Casual', desc: 'Knowledgeable but approachable' }
].map(s => (
<button
key={s.value}
onClick={() => setStyle(s.value)}
className={`w-full p-4 rounded-xl border-2 transition-all text-left ${
style === s.value
? 'border-indigo-500 bg-indigo-50 shadow-md'
: 'border-gray-200 hover:border-gray-300'
}`}
>
<div className="font-semibold text-sm">{s.label}</div>
<div className="text-xs text-gray-600 mt-1">{s.desc}</div>
</button>
))}
</div>
</div>
</div>
</div>
<div className="grid lg:grid-cols-2 gap-6">
<div className="bg-white rounded-2xl shadow-xl p-6 border border-gray-100">
<label className="block text-sm font-bold text-gray-700 mb-3">
📝 AI-Generated Text
</label>
<textarea
value={inputText}
onChange={(e) => setInputText(e.target.value)}
placeholder="Paste your robotic AI text here... Watch it transform into natural, human writing that bypasses all AI detectors."
className="w-full h-96 p-4 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:outline-none resize-none text-gray-700 font-mono text-sm"
/>
<div className="flex items-center justify-between mt-4">
<div className="text-sm space-y-1">
<div className="text-gray-500">{inputText.length} characters</div>
<div className="text-gray-400 text-xs">
{inputText.split(/\s+/).filter(w => w.length > 0).length} words
</div>
</div>
<button
onClick={humanizeText}
disabled={!inputText.trim() || isLoading}
className="flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl font-bold hover:from-blue-700 hover:to-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg hover:shadow-xl transform hover:scale-105"
>
{isLoading ? (
<>
<Loader2 className="w-5 h-5 animate-spin" />
Humanizing...
</>
) : (
<>
<RefreshCw className="w-5 h-5" />
Humanize Now
</>
)}
</button>
</div>
</div>
<div className="bg-white rounded-2xl shadow-xl p-6 border border-gray-100">
<div className="flex items-center justify-between mb-3">
<label className="block text-sm font-bold text-gray-700">
✅ 100% Human Text
</label>
{outputText && (
<button
onClick={copyToClipboard}
className="flex items-center gap-2 px-4 py-2 text-sm bg-green-100 hover:bg-green-200 text-green-700 rounded-lg transition-all font-semibold"
>
{copied ? (
<>
<Check className="w-4 h-4" />
Copied!
</>
) : (
<>
<Copy className="w-4 h-4" />
Copy Text
</>
)}
</button>
)}
</div>
<div className="w-full h-96 p-4 border-2 border-gray-200 rounded-xl overflow-y-auto bg-gradient-to-br from-green-50 to-blue-50">
{isLoading ? (
<div className="flex flex-col items-center justify-center h-full gap-4">
<Loader2 className="w-12 h-12 text-blue-600 animate-spin" />
<p className="text-gray-600 text-sm animate-pulse">
Transforming into natural human text...
</p>
</div>
) : outputText ? (
<p className="text-gray-800 whitespace-pre-wrap leading-relaxed">{outputText}</p>
) : (
<div className="flex items-center justify-center h-full text-gray-400 italic text-center">
Your perfectly humanized text will appear here...
<br />Ready to bypass any AI detector! 🎯
</div>
)}
</div>
{outputText && (
<div className="mt-4 flex items-center justify-between text-sm">
<div className="space-y-1">
<div className="text-gray-500">{outputText.length} characters</div>
<div className="text-gray-400 text-xs">
{outputText.split(/\s+/).filter(w => w.length > 0).length} words
</div>
</div>
<div className="bg-green-100 text-green-700 px-3 py-1 rounded-full text-xs font-bold">
Undetectable ✓
</div>
</div>
)}
</div>
</div>
<div className="mt-8 grid md:grid-cols-3 gap-6">
<div className="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-6 border border-blue-100">
<div className="text-3xl mb-3">🎯</div>
<h3 className="font-bold text-gray-800 mb-2">Maximum Humanization</h3>
<p className="text-gray-600 text-sm">
Advanced AI model adds personality, natural imperfections, and conversational flow that makes text 100% undetectable.
</p>
</div>
<div className="bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl p-6 border border-green-100">
<div className="text-3xl mb-3">✅</div>
<h3 className="font-bold text-gray-800 mb-2">Bypass All Detectors</h3>
<p className="text-gray-600 text-sm">
Works with GPTZero, Originality.ai, Turnitin, and all major AI detection tools. Content reads as genuinely human.
</p>
</div>
<div className="bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl p-6 border border-purple-100">
<div className="text-3xl mb-3">⚡</div>
<h3 className="font-bold text-gray-800 mb-2">Instant Results</h3>
<p className="text-gray-600 text-sm">
Powered by Claude Sonnet 4 for lightning-fast humanization with natural language patterns and authentic voice.
</p>
</div>
</div>
</div>
</div>
);
}
