AI Image Search, Generation/Editing Editor

A web editor that precisely detects object contours in images to automatically generate cut lines and provides AI-based image generation capabilities.

Background

1. Image editing work in merchandise production is a time-consuming and labor-intensive process. Particularly for creating cut lines, client designers were manually doing this work. Additionally, inquiries from buyers seeking copyright-free high-resolution image sources were increasing.
2. To provide buyers with desired high-resolution images, reduce design work time, and minimize differences between requested designs and actual products, an editor utilizing generative AI was needed where buyers could complete designs themselves.
3. An intuitive interface was needed that not only designers but also general users could easily use, with AI technology automating image generation and processing to reduce user workload.
4. This project aimed to go beyond simple image editing tools to maximize interaction between users and generative AI to support creative work.

Project Description

1. Contour Detection Algorithm: Developed an algorithm that precisely detects object contours in images to automatically generate cut lines. Optimized to include all images even in complex forms like separated images or dotted images.
2. AI-Based Image Generation: Provided functionality where users enter keywords for desired images and AI generates 3 high-resolution image candidates to choose from.
3. Image Editing Tools: Provided intuitive editing tools enabling general users unfamiliar with design tools like Photoshop to freely modify and adjust images. Key features include color adjustment, text addition, background removal compositing, and resizing.
4. Product-Specific Options: Administrators can register various options by merchandise type (e.g., keyring hole size/position, stand length/position) in the editor, allowing users to directly edit options.
5. Collaboration and Workflow Integration: Designed APIs to facilitate collaboration with external development companies building the shopping mall.

Key Achievements

• Buyers can complete edits themselves, reducing internal designer resource allocation
• General users can create professional-level edits without specialized knowledge of tools like Photoshop
• Customer inquiries about copyright and image provision decreased with generative AI assistance
• Time from design to final confirmation significantly reduced
• Actual buyer surveys and reviews showed high satisfaction with editor quality, speed, and AI image feature convenience

Development Process

1. Step 1: Service Requirements Definition
   • Researched various image editing tools
   • Established detailed requirements based on client customer inquiries
2. Step 2: User Scenario Confirmation
   • Prioritized features by examining actual design samples sent to print shops
   • Confirmed user editor usage flow
3. Step 3: User Interface and Editor UX Design
   • Designed intuitive interface for general users unfamiliar with design
   • Designed UX not deviating significantly from popular editing tool conventions
4. Step 4: Contour Detection and Cut Line Generation Algorithm Design
   • Designed to detect contours without missing any in images with 2+ parts or dotted patterns
   • Designed adjustable distance between contours and cut lines
5. Step 5: Editor Feature Development
   • Developed basic editor features: photo upload, text insertion/editing, image rotation
   • Developed using JavaScript, Vue.js, TypeScript
6. Step 6: Testing and Tester Feedback Collection
   • Compared files completed by buyers vs. files processed by designers
   • Analyzed user editor usage behavior and conducted interviews
7. Step 7: Feedback-Based Updates and Commercialization
   • Modified UI/UX based on collected feedback
   • Reduced cut line generation time
   • Improved cut line generation algorithm logic

Our Strengths

• Development company with 10+ years of experience
• Data/algorithm experts (Seoul National University ECE Bachelor's/Master's graduates)
• Proprietary solution for cut line generation through contour detection
• Image and text editor development and operation experience
• Shopping mall development experience with strong collaboration and communication capabilities