إنشاء تطبيق تلوين تفاعلي بسيط.

نظرة عامة على المشروع
- تطوير تطبيق يسمح للمستخدمين باختيار صورة وتلوين مناطق مميزة بشكل تفاعلي.

تصميم وتجربة المستخدم
- الشاشة الأولى:
  - عرض زر بارز مكتوب عليه 'اختر صورة'.
  - عند النقر، افتح متصفح الملفات ليسمح للمستخدم باختيار صورة أو التقاط واحدة في حالة الاستخدام على الهاتف.
- بعد اختيار الصورة:
  - عرض معاينة للصورة المختارة في منتصف الشاشة.
  - عرض زر مكتوب عليه 'ابدأ التلوين' تحت المعاينة.
- بعد النقر على 'ابدأ التلوين':
  - تحليل الصورة للكشف عن منطقتين مميزتين على الأقل للتلوين.
  - عرض الصورة بوضع ملء الشاشة مع الحدود المكتشفة في حال النجاح.

الوظائف الأساسية والمنطق
- تحليل الصورة:
  - استخدم الكشف التلقائي للتعرف على المناطق التي يمكن تلوينها في الصورة.
- تفاعل التلوين:
  - السماح للمستخدمين بالنقر داخل الحدود لملء المناطق باللون المحدد.
  - الحفاظ على إعداد اللون الافتراضي، مع دائرة حمراء كبيرة تشير إلى اللون الحالي.

أفضل الممارسات
- معالجة الأخطاء:
  - عرض رسالة خطأ إذا تم اكتشاف أقل من منطقتين للتلوين: 'عذرًا! لم نتمكن من العثور على مناطق للتلوين في هذه الصورة. يرجى تجربة صورة بحدود أوضح.'
- التنقل:
  - تنفيذ زر 'رجوع' في الزاوية العلوية اليسرى للعودة إلى الشاشة الأولى.
  - تضمين زر 'حفظ' لتنزيل الصورة الملونة.
- لوحة الألوان:
  - إنشاء لوحة ألوان بملء الشاشة تحتوي على 24 لونًا زاهيًا مرتبة في دوائر، بما في ذلك الأحمر والأخضر والأزرق والأصفر، إلخ.
  - السماح بإغلاق لوحة الألوان عند اختيار لون.

Create a simple interactive coloring application:

First screen:
- Display a prominent button labeled "Select Image" (select/take photo if on mobile).
- 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 first screen.
- "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 kind of images should the application support?
A: any kind of images

Q: Should the color palette have any specific colors or just vibrant ones?
A: Include red, green, blue, yellow, etc.