AI Image Upscaler
Improve resolution, clarity, and sharpness.
);
}
function ColorEnhancerPanel({ onProcess }) {
const [activePreset, setActivePreset] = useState('auto');
const [controls, setControls] = useState({
temperature: 50, tint: 50, saturation: 50, vibrance: 50, contrast: 50, highlights: 50, shadows: 50
});
const presets = ['Auto Color', 'Natural', 'Warm', 'Cool', 'Vibrant', 'Portrait', 'Professional'];
const handleSlider = (key, val) => {
setControls(prev => ({ ...prev, [key]: val }));
setActivePreset('manual');
// We can auto-apply or let user press apply. Let's let user press apply for performance.
};
return (
AI Color Enhancer
{presets.map(p => {
const id = p.toLowerCase().replace(' ', '-');
return (
setActivePreset(id)}
style={{
padding: '5px 12px', fontSize: '0.85rem', borderRadius: '20px', cursor: 'pointer',
background: activePreset === id ? 'var(--navy)' : '#f8fafc',
color: activePreset === id ? 'white' : 'var(--navy)',
border: '1px solid var(--line)'
}}>
{p}
);
})}
{Object.entries(controls).map(([key, val]) => (
))}
);
}
function RestorationPanel({ onProcess }) {
return (
Old Photo Restoration
Automatically detects and repairs scratches, dust, noise, fading, and low contrast.
Note: We preserve original identity and do not invent major facial features. Missing information is intelligently estimated, not perfectly recovered.
);
}
function ColorizerPanel({ onProcess }) {
return (
Photo Colorizer
Add realistic colors to black and white photos instantly.
Disclaimer: Generated colors are AI-estimated based on historical data and lighting contexts, rather than historically guaranteed.
);
}
function DocumentPhotoPanel({ type, onProcess, originalUrl }) {
const [step, setStep] = useState(1);
const [copies, setCopies] = useState(8);
const [orientation, setOrientation] = useState('portrait');
const [bg, setBg] = useState('white');
const isPassport = type === 'passport-photo';
const title = isPassport ? 'Passport Photo Maker' : 'CNIC Photo Maker';
const dimensions = isPassport ? '1.35x1.85"' : '1.5x2.0"';
const generateSheet = async (format) => {
onProcess('document-sheet', { type, copies, orientation, bg, format });
};
return (
{title}
Create perfect {dimensions} print sheets.
= 1 ? 'var(--navy)' : 'var(--line)' }}>
= 2 ? 'var(--navy)' : 'var(--line)' }}>
= 3 ? 'var(--navy)' : 'var(--line)' }}>
{step === 1 && (
Step 1: AI Enhancement
We apply natural exposure and brightness correction. No beauty filters or identity modifications are applied.
)}
{step === 2 && (
Step 2: Background
)}
{step === 3 && (
Step 3: Print Layout (4x6")
Important: Verify the current photo requirements of the relevant authority before submission.
)}
);
}
// ---- MAIN APP ---- //
function AIStudioApp() {
const [file, setFile] = useState(null);
const [appState, setAppState] = useState('landing'); // landing, uploading, processing, editor
const [originalUrl, setOriginalUrl] = useState(null);
const [enhancedUrl, setEnhancedUrl] = useState(null);
const [activeToolId, setActiveToolId] = useState(window.location.hash.replace('#', '') || '');
const [errorMsg, setErrorMsg] = useState(null);
useEffect(() => {
const handleHash = () => {
setActiveToolId(window.location.hash.replace('#', ''));
};
window.addEventListener('hashchange', handleHash);
return () => window.removeEventListener('hashchange', handleHash);
}, []);
const activeTool = getAiToolById(activeToolId) || AI_TOOLS[0];
const handleFileUpload = (e) => {
const f = e.target.files[0];
if (f) {
if (f.size > 20 * 1024 * 1024) {
setErrorMsg("File too large. Max 20MB allowed.");
return;
}
setFile(f);
const url = URL.createObjectURL(f);
setOriginalUrl(url);
setEnhancedUrl(url); // Initial state
setAppState('editor');
}
};
const handleProcess = (actionType, config) => {
setAppState('processing');
setErrorMsg(null);
setTimeout(() => {
try {
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
if (actionType === 'upscale') {
const scale = config.scale || 2;
canvas.width = img.width * scale;
canvas.height = img.height * scale;
// High quality smoothing for basic interpolation upscale
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}
else if (actionType === 'color') {
canvas.width = img.width;
canvas.height = img.height;
const { controls, activePreset } = config;
let filterString = '';
if (activePreset !== 'manual' && activePreset !== 'auto') {
// Apply preset
if (activePreset === 'natural') filterString = 'contrast(105%) saturate(110%)';
else if (activePreset === 'warm') filterString = 'sepia(30%) contrast(110%) saturate(120%)';
else if (activePreset === 'cool') filterString = 'hue-rotate(10deg) saturate(110%)';
else if (activePreset === 'vibrant') filterString = 'contrast(120%) saturate(150%)';
else if (activePreset === 'portrait') filterString = 'brightness(105%) contrast(105%) blur(0.5px)';
else if (activePreset === 'professional') filterString = 'contrast(115%) saturate(105%) brightness(95%)';
} else {
// Apply manual sliders (mapping 0-100 to CSS filters)
// Defaults are 50.
const contrast = (controls.contrast / 50) * 100;
const saturate = (controls.saturation / 50) * 100;
const brightness = ((controls.highlights / 50) * 100 + (controls.shadows / 50) * 100) / 2; // rough mapping
const hue = (controls.temperature - 50) * 0.5; // -25deg to 25deg
const sepia = controls.temperature > 50 ? (controls.temperature - 50) : 0;
filterString = `contrast(${contrast}%) saturate(${saturate}%) brightness(${brightness}%) hue-rotate(${hue}deg) sepia(${sepia}%)`;
}
if (filterString) ctx.filter = filterString;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}
else {
// Document Photos or Mock flows
canvas.width = img.width;
canvas.height = img.height;
if (actionType === 'colorize' || actionType === 'photo-colorizer') {
ctx.filter = 'saturate(150%) sepia(20%)';
} else if (actionType === 'restore' || actionType === 'photo-restoration') {
ctx.filter = 'contrast(120%) brightness(110%) blur(0.2px)';
} else if (actionType === 'ai-enhancer') {
ctx.filter = 'contrast(115%) saturate(120%) brightness(105%)'; // Auto enhance look
} else if (actionType === 'document-enhance') {
ctx.filter = 'contrast(105%) brightness(105%)'; // Very mild, natural
} else if (actionType === 'document-bg') {
// Simulate background replacement by drawing a solid rect and then blending image
ctx.fillStyle = config.bg === 'blue' ? '#3b82f6' : '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'luminosity'; // mock extraction look
} else if (actionType === 'document-sheet') {
// Actual Print Sheet Generation logic
const PPI = 300;
const isPassport = config.type === 'passport-photo';
const wInches = isPassport ? 1.35 : 1.5;
const hInches = isPassport ? 1.85 : 2.0;
const imgW = wInches * PPI;
const imgH = hInches * PPI;
const sheetW = (config.orientation === 'portrait' ? 4 : 6) * PPI;
const sheetH = (config.orientation === 'portrait' ? 6 : 4) * PPI;
canvas.width = sheetW;
canvas.height = sheetH;
ctx.fillStyle = '#ffffff';
ctx.fillRect(0,0, sheetW, sheetH);
const padding = 0.2 * PPI;
const cols = Math.floor((sheetW - padding) / (imgW + padding));
const rows = Math.floor((sheetH - padding) / (imgH + padding));
let count = 0;
for(let r=0; r