{label} %{p}

{data?.aciklama && (

{data.aciklama}

)} Ağırlık %{weight}

); } const GUVEN_ACIKLAMA = 'Güven, bu değerlendirmenin ne kadar isabetli olabileceğini gösterir; fotoğrafın netliği, ışığı, çekim açısı ve kombinin ne kadarının net görünmesine bağlı olarak belirlenir. Yüksek güven, değerlendirmenin daha sağlam bir gözleme dayandığı anlamına gelir.'; function ConfidenceBadge({ guven }) { const [open, setOpen] = useState(false); if (!guven || !guven.seviye) return null; const level = String(guven.seviye).toLowerCase(); const tone = level === 'yüksek' ? C.success : level === 'orta' ? C.warning : C.accent; const tooltip = guven.neden ? `${GUVEN_ACIKLAMA} Bu değerlendirmede: ${guven.neden}` : GUVEN_ACIKLAMA; return (

Güven: {guven.seviye} {open && (

{tooltip}

)}

); } function SectionLabel({ children }) { return (

{children}

); } function AccessoryIdeaCard({ label, hint, Icon }) { return (

{label} {hint}

); } const DEFAULT_BLUR_CENTER_X = 0.5; const DEFAULT_BLUR_CENTER_Y = 0.16; const DEFAULT_BLUR_RADIUS = 0.18; const MIN_BLUR_RADIUS = 0.06; const MAX_BLUR_RADIUS = 0.5; // Anthropic anahtarı ve model adı, kaynak koduna gömülmek yerine index.html // tarafından önceden yüklenen config.js dosyasından okunur (bkz. config.example.js). const APP_CONFIG = (typeof window !== 'undefined' && window.APP_CONFIG) || {}; const ANTHROPIC_MODEL = APP_CONFIG.model || 'claude-sonnet-5'; export default function OutfitStylist() { const [rawImage, setRawImage] = useState(null); // never sent anywhere, kept only in this browser tab const [safeImage, setSafeImage] = useState(null); // face-blurred version, this is what gets uploaded const [faceBlurEnabled, setFaceBlurEnabled] = useState(true); const [blurCenterX, setBlurCenterX] = useState(DEFAULT_BLUR_CENTER_X); const [blurCenterY, setBlurCenterY] = useState(DEFAULT_BLUR_CENTER_Y); const [blurRadius, setBlurRadius] = useState(DEFAULT_BLUR_RADIUS); const [blurring, setBlurring] = useState(false); const [status, setStatus] = useState('idle'); const [result, setResult] = useState(null); const [errorMsg, setErrorMsg] = useState(''); const galleryRef = useRef(null); const cameraRef = useRef(null); const photoRef = useRef(null); const activeHandleRef = useRef(null); // 'move' | 'resize' | null const dragStartRef = useRef({ pointerX: 0, pointerY: 0, centerX: 0, centerY: 0 }); const blurCenterXRef = useRef(DEFAULT_BLUR_CENTER_X); const blurCenterYRef = useRef(DEFAULT_BLUR_CENTER_Y); const blurRadiusRef = useRef(DEFAULT_BLUR_RADIUS); useEffect(() => { blurCenterXRef.current = blurCenterX; }, [blurCenterX]); useEffect(() => { blurCenterYRef.current = blurCenterY; }, [blurCenterY]); useEffect(() => { blurRadiusRef.current = blurRadius; }, [blurRadius]); const loadFile = useCallback(async (file) => { if (!file || !file.type.startsWith('image/')) return; try { const img = await fileToImage(file); setRawImage(img); setBlurCenterX(DEFAULT_BLUR_CENTER_X); setBlurCenterY(DEFAULT_BLUR_CENTER_Y); setBlurRadius(DEFAULT_BLUR_RADIUS); setFaceBlurEnabled(true); setResult(null); setStatus('idle'); setErrorMsg(''); } catch { setErrorMsg('Fotoğraf yüklenemedi. Tekrar dener misin?'); } }, []); const onPick = useCallback((e) => { const file = e.target.files && e.target.files[0]; e.target.value = ''; loadFile(file); }, [loadFile]); // Sürükle-bırak: nested elemanlar arasında dragenter/dragleave sık tetiklendiği // için sayaç kullanıyoruz, aksi halde bölge çocuk elemana girer girmez // "dragging" durumu titreşerek kapanıp açılır. const dragDepthRef = useRef(0); const [isDragOver, setIsDragOver] = useState(false); const onZoneDragEnter = useCallback((e) => { e.preventDefault(); dragDepthRef.current += 1; setIsDragOver(true); }, []); const onZoneDragOver = useCallback((e) => { e.preventDefault(); }, []); const onZoneDragLeave = useCallback((e) => { e.preventDefault(); dragDepthRef.current = Math.max(0, dragDepthRef.current - 1); if (dragDepthRef.current === 0) setIsDragOver(false); }, []); const onZoneDrop = useCallback((e) => { e.preventDefault(); dragDepthRef.current = 0; setIsDragOver(false); const file = e.dataTransfer.files && e.dataTransfer.files[0]; loadFile(file); }, [loadFile]); useEffect(() => { if (!rawImage) { setSafeImage(null); return; } let cancelled = false; // Sürükleme sırasında blurCenterX/Y/blurRadius çok sık değişir; her // değişimde tam çözünürlükte canvas + blur + toDataURL çalıştırmak // yerine, sürükleme bittikten kısa süre sonra tek sefer hesaplıyoruz. // Dairenin kendisi zaten anlık hareket ediyor (aşağıdaki stil, state'e // doğrudan bağlı); sadece maliyetli görsel yeniden oluşturma işlemi // geciktiriliyor. const isDragging = !!activeHandleRef.current; setBlurring(true); const delay = isDragging ? 120 : 0; const timer = setTimeout(() => { applyFaceBlur( rawImage.dataUrl, rawImage.mediaType, blurCenterX, blurCenterY, faceBlurEnabled ? blurRadius : 0 ) .then((res) => { if (!cancelled) setSafeImage(res); }) .catch(() => { if (!cancelled) setErrorMsg('Fotoğraf işlenemedi. Tekrar dener misin?'); }) .finally(() => { if (!cancelled) setBlurring(false); }); }, delay); return () => { cancelled = true; clearTimeout(timer); }; }, [rawImage, faceBlurEnabled, blurCenterX, blurCenterY, blurRadius]); // Daire merkezden tutup taşınabilir ('move') veya kenarından tutup // yeniden boyutlandırılabilir ('resize'). Hangisinin sürüklendiği // activeHandleRef'te tutulur; taşımada sürüklemenin başındaki merkez // konumuna göre bir ofset uygulanır ki tutamaç aniden imlecin altına // zıplamasın. const updateHandleFromPointer = useCallback((clientX, clientY) => { const el = photoRef.current; const handle = activeHandleRef.current; if (!el || !handle) return; const rect = el.getBoundingClientRect(); const start = dragStartRef.current; if (handle === 'move') { const dx = (clientX - start.pointerX) / rect.width; const dy = (clientY - start.pointerY) / rect.height; setBlurCenterX(Math.max(0, Math.min(1, start.centerX + dx))); setBlurCenterY(Math.max(0, Math.min(1, start.centerY + dy))); } else { // Yarıçap genişliğin bir kesri olarak tanımlı (dairenin her iki eksende // de eşit görünmesini sağlayan CSS aspect-ratio hilesiyle tutarlı); bu // yüzden tutamacı yatayda ne kadar sürüklediğine bakıyoruz. const r = Math.abs((clientX - rect.left) / rect.width - blurCenterXRef.current); setBlurRadius(Math.max(MIN_BLUR_RADIUS, Math.min(MAX_BLUR_RADIUS, r))); } }, []); const onHandleDragStart = useCallback((handle) => (e) => { e.stopPropagation(); activeHandleRef.current = handle; const clientX = e.touches ? e.touches[0].clientX : e.clientX; const clientY = e.touches ? e.touches[0].clientY : e.clientY; dragStartRef.current = { pointerX: clientX, pointerY: clientY, centerX: blurCenterXRef.current, centerY: blurCenterYRef.current, }; updateHandleFromPointer(clientX, clientY); }, [updateHandleFromPointer]); const onHandleDragMove = useCallback((e) => { if (!activeHandleRef.current) return; const clientX = e.touches ? e.touches[0].clientX : e.clientX; const clientY = e.touches ? e.touches[0].clientY : e.clientY; updateHandleFromPointer(clientX, clientY); }, [updateHandleFromPointer]); const onHandleDragEnd = useCallback(() => { activeHandleRef.current = null; }, []); const analyze = useCallback(async () => { if (!safeImage) return; if (!APP_CONFIG.apiProxyUrl) { setErrorMsg('Proxy adresi ayarlanmamış. config.js dosyasını config.example.js şablonuna göre doldurun.'); setStatus('error'); return; } setStatus('loading'); setErrorMsg(''); try { // Anthropic API'ye doğrudan tarayıcıdan değil, anahtarı sunucu // tarafında (Cloudflare Worker) saklayan kendi proxy'mize istek // atıyoruz — bkz. proxy/worker.js. const response = await fetch(APP_CONFIG.apiProxyUrl, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ model: ANTHROPIC_MODEL, // 5 kriterin her biri için ayrı puan + gerekçe istediğimizden yanıt // uzun olabiliyor; 1600 bazen yetmeyip yarım/geçersiz JSON'a yol // açıyordu. Payı tekrar büyüttük. max_tokens: 2400, // Sabit talimat metni system'e taşındı ve cache_control ile // işaretlendi: aynı oturumda birden fazla kombin denendiğinde, // 5 dakika içindeki tekrar isteklerde bu metin tam fiyattan değil // ~1/10 fiyattan (cache hit) faturalandırılır. Görsel her seferinde // farklı olduğu için ayrı kalıyor ve cache'i bozmuyor. system: [ { type: 'text', text: PROMPT, cache_control: { type: 'ephemeral' } }, ], messages: [{ role: 'user', content: [ { type: 'image', source: { type: 'base64', media_type: safeImage.mediaType, data: safeImage.base64 } }, ], }], }), }); const data = await response.json(); if (data.error) throw new Error(data.error.message || 'API hatası'); const textBlock = (data.content || []).find((b) => b.type === 'text'); if (!textBlock) throw new Error('Boş yanıt'); if (data.stop_reason === 'max_tokens') { throw new Error('Yanıt yarıda kesildi (max_tokens sınırı)'); } const clean = textBlock.text.replace(/```json|```/g, '').trim(); let parsed; try { parsed = JSON.parse(clean); } catch { // Model bazen JSON'un öncesine/sonrasına küçük bir açıklama ekleyebilir; // en dıştaki { ... } bloğunu ayıklayıp tekrar dene. const match = clean.match(/\{[\s\S]*\}/); if (!match) throw new Error('JSON ayrıştırılamadı'); parsed = JSON.parse(match[0]); } setResult(parsed); setStatus('done'); } catch (err) { console.error('Kombin analizi hatası:', err); setErrorMsg(`Kombinini değerlendirirken bir sorun oldu: ${err.message}`); setStatus('error'); } }, [safeImage]); // Bölgenin dışına bırakılan bir dosya olursa tarayıcı sekmeyi o dosyayla // değiştirmeye çalışır; bunu tüm sayfada engelliyoruz. useEffect(() => { const prevent = (e) => e.preventDefault(); window.addEventListener('dragover', prevent); window.addEventListener('drop', prevent); return () => { window.removeEventListener('dragover', prevent); window.removeEventListener('drop', prevent); }; }, []); const reset = () => { setRawImage(null); setSafeImage(null); setResult(null); setStatus('idle'); setErrorMsg(''); }; return (

{STYLES}

{/* Header */}

Moda ve Stil Analizörü

Nasıl Olmuşum AI

Bir fotoğraf yükle; stil, renk uyumu ve mevsim uygunluğunu değerlendirip alternatif öneriler sunayım.

{/* Upload zone */} {!rawImage && (

galleryRef.current && galleryRef.current.click()} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); galleryRef.current && galleryRef.current.click(); } }} onDragEnter={onZoneDragEnter} onDragOver={onZoneDragOver} onDragLeave={onZoneDragLeave} onDrop={onZoneDrop} className="flex flex-col items-center justify-center text-center px-6 py-20 cursor-pointer rounded-3xl" style={{ background: C.bg, boxShadow: isDragOver ? SHADOW.raised : SHADOW.inset, border: `2px dashed ${isDragOver ? C.accent : C.line}`, transform: isDragOver ? 'scale(1.01)' : 'scale(1)', transition: 'box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s cubic-bezier(0.34,1.56,0.64,1)', }} >

{isDragOver ? 'Bırakın, yükleniyor…' : 'Fotoğrafı buraya sürükleyin'}

Kombinin net görünen, tam boy veya üst gövde fotoğrafı en iyi sonucu verir.

e.stopPropagation()}>

Yüzün otomatik olarak bulanıklaştırılır; orijinal fotoğraf hiçbir yere gönderilmez, sadece bulanıklaştırılmış hâli kıyafet analizi için paylaşılır.

)} {/* Fotoğraf + sonuçlar: geniş ekranda yan yana, dar ekranda alt alta */} {rawImage && (

{/* Photo card */}

Yüklenen kombin (yüz bulanıklaştırılmış önizleme)

{faceBlurEnabled && ( <> {/* Bulanıklaştırılan daireyi görünür kılan gölge — width % + aspect-ratio:1 + translate(-50%,-50%) ile fotoğrafın en/boy oranından bağımsız olarak her zaman tam daire. */}

{/* Merkez tutamacı — tutup taşımak için */}

{/* Kenar tutamacı — sürükleyip yarıçapı değiştirmek için */}

)}

setFaceBlurEnabled(e.target.checked)} style={{ accentColor: C.accent, width: 16, height: 16 }} /> Yüzümü bulanıklaştır (ortadan taşı, kenardan boyutlandır) {status !== 'done' && ( )} {status === 'error' && (

{errorMsg}

)} {/* Aksesuar fikirleri — değerlendirme bitmeden gösterilmesinin bir anlamı yok; sonuçla birlikte, sol sütunda sonuca eşlik ederek çıkar. */} {status === 'done' && result && (

Aksesuar Fikirleri

{ACCESSORY_IDEAS.map((a) => ( ))}

)}

{/* Results */} {status === 'done' && result && (

{result.genel_izlenim}

Puan Dağılımı

{CRITERIA.map((c) => ( ))}

Küçük Ayarlamalar

{(result.oneriler || []).map((o, i) => (

{i + 1}

{o}

))}

)}

); } const rootEl = document.getElementById('root'); createRoot(rootEl).render();