تطبيق تلوين تفاعلي
تفاصيل
ملخص
تطبيق تفاعلي لاختيار الصور وتلوين المناطق المميزة.
سؤال
إنشاء تطبيق تفاعلي بسيط للتلوين بالمميزات التالية: ### نظرة عامة على المشروع - تطبيق يتيح للمستخدمين اختيار الصور وتلوين المناطق المميزة. - دعم صيغ الصور الشائعة مثل JPEG و PNG. ### تصميم الواجهة وتجربة المستخدم - **الشاشة الأولى**: - عرض زر بارز مع تسمية "اختر صورة من الكمبيوتر". - عند الضغط على الزر، يتم فتح مستعرض الملفات لاختيار صورة. - **بعد اختيار الصورة**: - عرض معاينة مُتمركزة للصورة المختارة. - عرض زر تحتها مع تسمية "ابدأ التلوين". - **شاشة بدء التلوين**: - تحليل الصورة لاكتشاف ما لا يقل عن منطقتين قابلتين للتلوين، مع عرض الصورة بالشاشة الكاملة وحدود الكشف. - **الزاوية العلوية اليسرى**: - زر "عودة": يرجع إلى اختيار الصورة مع تأكيد. - زر "حفظ": يقوم بتحميل الصورة المُلوّنة. - **الزاوية العلوية اليمنى**: - دائرة حمراء كبيرة تُظهر اللون المحدد حالياً، والافتراضي أزرق ساطع. - عند الضغط، يتم فتح لوحة ألوان كاملة العرض تحتوي على 24 لوناً زاهياً مرتبة بشكل دائري؛ تُغلق اللوحة عند اختيار اللون. ### الوظائف الأساسية والمنطق - تنفيذ كشف الحدود لتحديد المناطق القابلة للتلوين. - السماح بالتعبئة بالنقر أو اللمس للتلوين داخل الحدود باللون المحدد. - ضمان دعم صيغ الصور مثل JPEG و PNG لتحليل التلوين بشكل موثوق. ### أفضل الممارسات - معالجة الأخطاء بعرض رسالة "عفواً! لم نتمكن من إيجاد مناطق للتلوين في هذه الصورة. يرجى المحاولة بصورة أخرى ذات ملامح أوضح" إذا تم الكشف عن أقل من منطقتين. - ضمان تنقل سهل مع تأكيد الإجراءات مثل العودة. - الحفاظ على تصميم تفاعلي واستجابة مع انتقالات سلسة بين الشاشات.
السؤال الأصلي
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
ملخص تكلفة التوليد
اسم النموذج: claude-3-7-sonnet-latest
وقت الاستجابة: 67.00 sec.
رموز النتيجة: 5,770
التكلفة: $0.08902500