Etkileşimli Renklendirme

özet

Resim seçip belirli alanları renklendiren etkileşimli bir uygulama.

komut istemi

Basit bir etkileşimli renklendirme uygulaması oluşturun, aşağıdaki özelliklere sahip:

### Proje Genel Bakış
- Kullanıcıların resim seçip belirli alanları renklendirebildiği bir uygulama.
- JPEG ve PNG gibi yaygın resim formatlarını destekler.

### UI/UX Tasarım ve Akış
- **İlk Ekran**:
  - "Bilgisayardan Resim Seç" etiketiyle öne çıkan bir buton gösterin.
  - Butona tıklandığında, dosya tarayıcısı açılarak resim seçilmesini sağlayın.
- **Resim Seçiminden Sonra**:
  - Seçilen resmin ekranın ortasında ön izlemesini gösterin.
  - Altında "Renklendirmeye Başla" etiketiyle bir buton gösterin.
- **Renklendirmeye Başlama Ekranı**:
  - Resmi analiz ederek en az iki renklendirilebilir alanı tespit edin ve tespit edilen sınırlarla resmi tam ekran gösterin.
  - **Sol Üst Köşe**:
    - "Geri" butonu: Onayla resim seçim ekranına geri döner.
    - "Kaydet" butonu: Renklendirilmiş resmi indirir.
  - **Sağ Üst Köşe**:
    - Varsayılanı parlak mavi olan, mevcut seçili rengi gösteren büyük kırmızı bir daire.
    - Tıklanırsa, dairesel olarak düzenlenmiş 24 canlı renkten oluşan tam ekran paleti açılır; renk seçimi sonrası palet kapanır.

### Temel İşlevsellik ve Mantık
- Renklendirilebilir alanları belirlemek için sınır tespiti yapın.
- Seçili renk ile sınırlar içinde dokunma/klik ile doldurma işlemi gerçekleştirin.
- JPEG ve PNG gibi resim formatlarını destekleyerek güvenilir renklendirme analizi yapın.

### En İyi Uygulamalar
- Eğer iki veya daha az renklendirilebilir alan tespit edilirse, "Eyvah! Bu resimde renklendirecek alanlar bulunamadı. Lütfen daha net çizgilere sahip başka bir resim deneyin." mesajını gösterin.
- Geri dönüş gibi işlemler için onay içeren sezgisel gezinme sağlayın.
- Ekranlar arasında pürüzsüz geçişler sunan etkileşimli ve duyarlı bir tasarım koruyun.

orijinal komut istemi

Create a simple interactive coloring application:

First screen:
- Display a prominent button labeled "Select Image from Computer."
- Upon clicking, open file browser to let the user select an image.

After selecting an image:
- Show a preview of the chosen image centered on the screen.
- Below the preview, display a button labeled "Start Coloring."

After clicking "Start Coloring":
- Attempt to parse the image to detect at least two distinct areas suitable for coloring.
- If successful, display the image fullscreen vertically with detected boundaries.

Top-left corner:
- "Back" button: returns to image selection after confirmation.
- "Save" button: downloads the colored image.

Top-right corner:
- Large red circle indicating the current selected color (default bright blue).
- On click, open fullscreen palette with 24 vibrant colors arranged in circles. Close palette upon selection.

Coloring interaction:
- Detect boundaries automatically.
- On tap/click within boundaries, fill the area with the selected color.

Error handling:
- If fewer than two colorable areas are detected, display an error message:
  "Oops! We couldn't find areas to color in this image. Please try another image with clearer outlines."

Q: What types of images should the application support for coloring?
A: JPEG, PNG, etc.

Q: Do you have a specific design in mind for the layout of the color palette?
A: Circular layout with vibrant colors

oluşturma maliyeti özeti

model adı: claude-3-7-sonnet-latest

yanıt süresi: 67.00 sec.

sonuç belirteçleri: 5,770

maliyet: $0.08902500