قم بإنشاء تطبيق تلويني تفاعلي بسيط مع الميزات التالية:

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

تصميم وتجربة المستخدم (UI/UX) والتدفق
1. الشاشة الأولى: عرض زر بارز بعنوان 'اختر الصورة'. عند النقر، يفتح مستعرض الملفات لاختيار صورة.
2. بعد اختيار الصورة: عرض معاينة الصورة المختارة في الوسط. توفير زر 'ابدأ التلوين' تحت الصورة.
3. شاشة التلوين: بعد النقر على 'ابدأ التلوين'، يتم تحليل الصورة لاكتشاف الحدود التي يمكن تلوينها. استخدام تخطيط عمودي كامل الشاشة مع عناصر تحكم:
   - الزاوية العلوية اليسرى: زر 'عودة' للعودة إلى الشاشة الأولى وزر 'حفظ' لتحميل الصورة الملونة.
   - الزاوية العلوية اليمنى: دائرة كبيرة تدل على اللون المحدد حالياً، والافتراضي هو الأزرق الفاتح. عند النقر على الدائرة، يتم فتح لوحة ألوان كاملة الشاشة تحتوي على 24 لوناً زاهياً.

الوظائف الأساسية والمنطق
- الكشف عن منطقتين متميزتين على الأقل في الصورة مناسبة للتلوين.
- آلية التعبئة: ينقر المستخدم داخل الحدود لملئها باللون المختار.
- يدعم التطبيق صيغ ملفات مثل JPEG وPNG وغيرها.

معالجة الأخطاء
- إذا وجد تحليل الصورة أقل من منطقتين للتلوين، يتم عرض الخطأ: "عفواً! لم نجد مناطق للتلوين في هذه الصورة. يرجى تجربة صورة أخرى ذات حدود أوضح." 
- إذا فشل الكشف عن الحدود، يتم طلب اختيار صورة أخرى.

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

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 image formats should be supported for selection?
A: JPEG, PNG, and other.

Q: What should happen if the user selects an image but the boundary detection fails?
A: Return to the image selection with a prompt to try another image.