Elinden geldigince detayli olmaya calis. Diyelimki fotografi taniyacak ve onu yorumlayacak bir app yaptiracaksin. Ornegin, ChatGPT'ye su sekilde bir komut verirsen (tamamen uydurdum bu arada, bunu kullanip da app yapma kendine):
Aklimda bir proje var. Bir kullanici websitesine girdiginde yukleyecegi bir fotografin yapay zeka servislerini kullanarak yorumlamasini istiyorum. Fotograf bir veritabaninda saklanmayacak ve gecici olarak hafizada tutulacak, sayfa yenilendiginde hersey sifirdan baslayacak. Bu sistemin tum browserlar tarafindan desteklenmesini, native OS arabirimini kullanarak dosyayi yuklemelerini bekliylorum. Simdi bir yazilim ve UI uzmani olarak dusunmeni, ayrica fotografci bakis acisindan dusunerek bana bu yapmak istedigim proje ile ilgili VSCode, Cline ve Claude Sonnet 4.5 alt yapisi kullanmak uzere detayli bir prompt (readme.md) dosyasi hazirlamani istiyorum. Bu bir webapp olacagindan React veya buna benzer framework kullanarak, tailwind ile etkileyici gorsel bir arabirime sahip, kullanimi ve gelistirmesi kolay, turkce dilinde bir app hazirlamam icin prompt'u verebilir misin?
su sekilde bir cikti alirsin:
# Fotoğraf Yorumlayan AI Web Uygulaması (TR) - Cline + Claude Sonnet 4.5 için Uygulama Promptu
Bu doküman, VSCode içinde Cline kullanarak Claude Sonnet 4.5 ile geliştirilecek bir web uygulamasını sıfırdan üretmek için hazırlanmış kapsamlı bir uygulama promptudur. Uygulama, kullanıcının tarayıcıdan seçtiği fotoğrafı (veritabanına kaydetmeden) yapay zeka servisleriyle yorumlar. Sayfa yenilenince her şey sıfırlanır.
---
## 1) Rol ve Beklenti
Sen kıdemli bir Full Stack Web geliştiricisisin. Aynı zamanda güçlü bir UI/UX uzmanısın ve fotoğrafçı bakış açısıyla fotoğrafları teknik ve estetik açıdan analiz edebiliyorsun.
Hedefin:
- Türkçe arayüzlü, modern görünümlü, hızlı, erişilebilir ve tüm güncel tarayıcılarda çalışan bir webapp geliştirmek.
- Fotoğraf dosyası hiçbir kalıcı depolamaya yazılmayacak (DB yok, disk yok). Yalnızca RAM içinde ve yalnızca kullanıcı oturumu boyunca.
- Kullanıcı native işletim sistemi dosya seçicisi ile yükleme yapacak (input type="file"). Sürükle-bırak ek özellik olabilir ama ana yol native seçici olmalı.
- AI yorumlama bir backend API üzerinden yapılmalı (API anahtarları istemciye sızmamalı).
- Varsayılan olarak gizlilik odaklı: loglarda görsel içeriği, base64, prompt, yanıt saklama yok.
---
## 2) Ürün Tanımı (Kullanıcı Hikayeleri)
### Ana akış
1. Kullanıcı siteyi açar.
2. Fotoğrafını "Dosya Seç" butonu ile OS dosya seçiciden seçer.
3. Seçilen fotoğraf anında sayfa içinde önizlenir (RAM’de tutulur).
4. Kullanıcı "Yorumla" der.
5. Uygulama fotoğrafı backend’e geçici olarak gönderir, AI servisinden sonuç alır.
6. Sonuçlar Türkçe, anlaşılır, bölümlenmiş kartlar halinde gösterilir.
7. Kullanıcı "Sıfırla" derse tüm state temizlenir.
8. Sayfa yenilenirse otomatik olarak her şey sıfırlanmış olur.
### Fotoğrafçı odaklı yorum başlıkları
- Teknik analiz: pozlama, dinamik aralık, gürültü, keskinlik, odak, renk doğruluğu, beyaz ayarı
- Kompozisyon: kadraj, ufuk, denge, üçüncü kural, negatif alan, konu ayrımı
- Işık: ışık yönü, sertlik-yumuşaklık, gölgeler, highlights, altın saat etkisi
- Hikaye ve duygu: fotoğrafın verdiği mesaj, dikkat noktası
- İyileştirme önerileri: çekim anı önerileri + düzenleme (edit) önerileri
- Varsa meta: EXIF özet (kamera, lens, enstantane, ISO, diyafram) ve bunun yoruma etkisi
Not: EXIF her görselde olmayabilir. EXIF yoksa bunu nazikçe belirt.
---
## 3) Teknik Kısıtlar ve Gizlilik
Kesin kurallar:
- Fotoğraf veritabanına kaydedilmeyecek.
- Fotoğraf dosyası sunucuda diske yazılmayacak.
- Sunucu tarafında request body ya da base64 kesinlikle loglanmayacak.
- Uygulama yenilendiğinde state sıfırlanacak (kalıcı state yok, localStorage yok).
- Analiz sonucu da kalıcı depolanmayacak (opsiyonel kopyala butonu olabilir).
- Maksimum dosya boyutu sınırı koy: örn 8 MB.
- Kabul edilen formatlar: JPEG, PNG, WEBP (HEIC için opsiyonel açıklama: bazı tarayıcılarda destek sınırlı olabilir).
---
## 4) Önerilen Teknoloji Yığını
Aşağıdaki stack ile ilerle:
- Frontend: React + TypeScript
- Framework: Next.js (App Router) tercih et
- Stil: Tailwind CSS
- UI bileşen yaklaşımı: Headless UI (isteğe bağlı) + kendi bileşenlerin
- Form doğrulama: Zod
- İstek: fetch (yerleşik)
- Test: Vitest + React Testing Library (en azından temel), opsiyonel Playwright e2e
- Lint/format: ESLint + Prettier
- Deploy: Vercel uyumlu yapı (disk yazma yok)
AI tarafı:
- Claude Sonnet 4.5 API (server-side)
- Görsel gönderimi: multipart/form-data veya base64 data URL (multipart tercih et)
- Yanıt formatı: JSON şeması ile güvenilir parse edilebilir çıktı
---
## 5) Proje Kurulumu ve Komutlar
İstenen proje adı:
fotograf-yorumlayici
Kurulum adımları:
1. Next.js + TS projesi oluştur
2. Tailwind’i kur ve yapılandır
3. UI bileşenlerini ekle
4. API route yaz
5. Analiz ekranını tamamla
6. Test ve lint kur
Komutlar:
npm run devnpm run buildnpm run lintnpm run test (temel)
---
## 6) Klasör Yapısı (Öneri)
/app
/api
/analyze
route.ts
layout.tsx
page.tsx
/components
UploadCard.tsx
ImagePreview.tsx
AnalysisPanel.tsx
PrivacyNote.tsx
Header.tsx
/lib
ai
claude.ts
image
validate.ts
schema
analysis.ts
/styles
globals.css
---
## 7) UI/UX Tasarım Şartnamesi (Tailwind)
Genel görünüm:
- Modern, fotoğraf odaklı, sade ama premium his
- Koyu tema varsayılan olabilir (fotoğraf değerlendirmede iyi durur), ama açık tema opsiyonel
- Responsive: mobilde tek kolon, desktopta 2 kolon (sol: yükleme + önizleme, sağ: analiz)
Bileşenler:
1. Header
- Uygulama adı
- Kısa açıklama
2. UploadCard
- Büyük bir drop area görünebilir ama ana aksiyon buton: "Dosya Seç"
- Desteklenen formatlar ve boyut limiti küçük metin
- Dosya seçilince dosya adı, boyut
3. ImagePreview
- Seçilen fotoğrafı güvenli şekilde göster
- "Fotoğrafı Değiştir" ve "Sıfırla"
4. AnalysisPanel
- Sekmeler veya akordeon: "Özet", "Teknik", "Kompozisyon", "Işık", "Öneriler", "EXIF"
- Loading state: skeleton + "Analiz ediliyor" mesajı
- Error state: kullanıcı dostu hata ve tekrar dene
- Sonuçlar kopyalanabilir (clipboard)
5. PrivacyNote
- Kısa ve net: "Fotoğrafınız kaydedilmez. Sayfa yenilenince silinir." gibi
Erişilebilirlik:
- Klavye ile tam kullanım
- Butonların aria-label’ları
- Kontrast ve okunabilirlik
- Görsel önizlemede alt metin
---
## 8) Uygulama Mantığı (State Yönetimi)
Kurallar:
- Fotoğraf state’i yalnızca memory: React state veya useRef
- Yenilemede sıfırlanması zaten otomatik
- localStorage, indexedDB, service worker cache kullanma
- Analiz sonucunu da yalnızca state’te tut
Örnek state alanları:
file: File | nullpreviewUrl: string | null (URL.createObjectURL ile)analysis: AnalysisResult | nullloading: booleanerror: string | null
Güvenlik:
- previewUrl her değişimde revoke edilmeli:
URL.revokeObjectURL
---
## 9) Backend API (Next.js Route Handler)
Endpoint:
POST /api/analyze- Content-Type: multipart/form-data
- Alanlar:
-
image: File
-
mode: string (ör: "teknik", "yaratici", "egitici")
-
detailLevel: string (ör: "kisa", "orta", "detayli")
Doğrulama:
- MIME type kontrolü
- Boyut kontrolü
- Hata mesajları Türkçe ve anlaşılır
AI çağrısı:
- Sunucu tarafında Claude Sonnet 4.5 API kullan
- API anahtarı
.env.local içinde
- Yanıtı JSON şemasına uydur
- Model çıktısı metin ise, güvenilir JSON üretimi için modelden doğrudan JSON dönmesini iste ve parse et
- Parse hatasında kullanıcıya "Analiz sonucu beklenmedik formatta geldi" gibi mesaj ver
Loglama:
- İstek body’si, base64, prompt, model yanıtı loglanmayacak
- Sadece anonim hata kodu ve zaman gibi minimal bilgi
---
## 10) AI Prompt Tasarımı (Fotoğrafçı Bakış Açısı)
Sistem yönergesi gibi davran:
- Kullanıcıya Türkçe yanıt
- Yargılayıcı değil, yapıcı dil
- Belirsizlik varsa bunu belirt
- EXIF yoksa varsayım yapma, "görüntüye göre" de
Modelden istenecek çıktı formatı:
- Tamamen JSON
- Şema örneği:
```json
{
"summary": {
"oneLiner": "Tek cümlelik genel yorum",
"strengths": ["..."],
"risks": ["..."]
},
"technical": {
"exposure": "...",
"sharpness": "...",
"noise": "...",
"whiteBalance": "...",
"dynamicRange": "...",
"focus": "..."
},
"composition": {
"framing": "...",
"subjectSeparation": "...",
"balance": "...",
"horizon": "...",
"suggestions": ["..."]
},
"light": {
"quality": "...",
"direction": "...",
"highlightsShadows": "...",
"suggestions": ["..."]
},
"editingTips": {
"global": ["..."],
"local": ["..."],
"color": ["..."]
},
"shootingTips": ["..."],
"exif": {
"hasExif": false,
"camera": null,
"lens": null,
"iso": null,
"aperture
