इंटरएक्टिव रंगीन ऐप

सारांश

एक सरल इंटरएक्टिव ऐप जो इमेज चुनकर, रंग भरकर और सेव करने की सुविधा देता है।

प्रॉम्प्ट

अंग्रेजी में एक सरल इंटरएक्टिव रंगीन ऐप बनाएं।

अवलोकन
- विशेष इमेज से थंबनेल का चयन दिखाएं।
- उपयोगकर्ताओं को इमेज चुनने, रंग भरने और अपना काम सेव करने की अनुमति दें।

पहली स्क्रीन
- इन इमेजों के छोटे, आसानी से नेविगेट किए जाने वाले थंबनेल दिखाएँ:
  1. URL 1
  2. URL 2
  3. URL 3
  4. URL 4
  5. URL 5
  6. URL 6
  7. URL 7
  8. URL 8
- सुनिश्चित करें कि थंबनेल स्पष्ट और पहचाने जाने योग्य हों।

इमेज इंटरैक्शन
- थंबनेल चुनने पर, PNG डाउनलोड करें और रंग भरने की क्षमता के लिए पार्स करें।
- इमेज को वर्टिकल फुल-स्क्रीन पर दिखाएं।

टॉप-लेफ्ट कॉर्नर
- बैक बटन:
  - इमेज चयन स्क्रीन पर लौटने से पहले पुष्टि डायलॉग दिखाएं।
  - संदेश: 'Do you want to return to the image selection?'
- सेव बटन:
  - उपयोगकर्ताओं को रंगे हुए इमेज को सीधे डाउनलोड करने की अनुमति दें।

टॉप-राइट कॉर्नर
- डिफ़ॉल्ट रंग (चमकीला नीला) के रूप में एक बड़ा लाल सर्कल दिखाएं।
- फुल-स्क्रीन कलर पैलेट खोलने के लिए क्लिक करें।

रंग चयन
- फुल-स्क्रीन पैलेट में 24 जीवंत रंग छोटे सर्कल के रूप में दिखाएं।
- एक रंग चुनें और पैलेट बंद करें।

रंग भरने वाली इंटरैक्शन
- इमेज की सीमाओं के भीतर के क्षेत्रों का पता लगाएं।
- क्लिक/टैप करने पर चुने गए रंग से क्षेत्र को भरने दें।

पैलेट फ़ंक्शन
- स्क्रीन के केंद्र में लॉन्च होता है।
- रंग चयन के बाद स्वचालित रूप से बंद हो जाता है।

मूल प्रॉम्प्ट

Create a simple interactive coloring application:

First screen:
- Display thumbnails of the provided images (take exactly that images):
  1. https://img.freepik.com/free-vector/hand-drawn-zoo-animals-illustration_23-2151199715.jpg
  2. https://img.freepik.com/free-vector/hand-drawn-zoo-animals-illustration_23-2151199718.jpg
  3. https://img.freepik.com/premium-vector/lion-giraffe-hand-drawn_185029-508.jpg
  4. https://img.freepik.com/free-vector/hand-drawn-owl-outline-illustration_23-2149277379.jpg
  5. https://img.freepik.com/free-vector/hand-drawn-fox-outline-illustration_23-2149272718.jpg
  6. https://img.freepik.com/free-vector/hand-drawn-lion-outline-illustration_23-2149285355.jpg
  7. https://img.freepik.com/free-vector/hand-drawn-penguin-outline-illustration_23-2150582038.jpg
  8. https://img.freepik.com/free-vector/animal-doodle-outline-cute-giraffe_1308-81895.jpg

- Thumbnails should be small and easy to navigate.

After selecting an image:
- Download and use the selected PNG to allow drawing on it, parsing contours if needed.
- Display the chosen image full-screen vertically.
- Top-left corner:
  - "Back" button: returns to image selection after confirmation dialog.
  - "Save" button: downloads the colored image.
- Top-right corner:
  - Large red circle indicating the current selected color (default is bright blue).
  - On clicking the circle, display a fullscreen palette with 24 vibrant color options arranged as small circles. After selecting a color, close the palette.

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

Q: What specific functionalities should the confirmation dialog include when clicking the 'Back' button?
A: A simple message asking if they want to return to the image selection.

Q: How should the color selection palette be displayed and dismissed?
A: On the center of screen.

जनरेशन लागत का सारांश

मॉडल नाम: claude-3-7-sonnet-latest

प्रतिक्रिया समय: 69.85 sec.

परिणाम टोकन: 6,015

लागत: $0.09262200