Hanil Automatic Door AI Simulator Development

Hanil Automatic Door AI Simulator Development

https://ai.vild.kr/simulator

1. Project Overview

The Hanil Automatic Door AI Simulator integrates an AI-powered door visualization tool with the brand’s landing experience, allowing visitors to upload or use sample photos of their house exterior to simulate garage, gate, or entrance doors — and connect seamlessly to a consultation process. 
IT7 handled the entire project as a single integrated team, covering initial planning, UX design, frontend and backend development, AI model integration, admin tool creation, QA, and training.

2. Business Value

• Customers can compare and select door designs on their own before consultation, reducing preparation time and the need for multiple on-site visits.
• The sales team can manage background and door design assets centrally through the simulator’s admin console, enabling faster product updates and promotional operations.
• AI-based automatic detection and download functions allow users to easily share generated visuals with family members or architects, improving virality and revisit rates.

3. Core User Features

• Door Simulator: From sample or uploaded images, users go through a 4-step process (Type → Category → Color → Design) to generate real-time composites, place multiple doors, adjust corner points via drag, and compare or download results.
• AI Auto Detection: Uses a YOLOv8-based model to extract door regions and continuously improve detection accuracy by learning from user editing data.
• Responsive Design: Maintains a consistent experience across all devices through a 3-panel desktop layout and bottom-sheet UI on mobile.
• Image Asset Management: Strengthens personalization with upload history, deletion, repositioning, and door design favorites.
• Brand Landing Page: Built with a storytelling flow of Hero → Introduction → How It Works → Trust → CTA, including KPI counter animations and project links to drive conversions.

4. Admin & Internal Operations

• Content Management: CRUD, drag-and-drop, and bulk upload for door types, categories, colors, and designs — with automatic thumbnail generation and order control.
• Background Image Editor: Polygon drawing and coordinate editing to correct AI detection errors, with visualization of confidence levels based on detection history.
• Access Control & Authentication: Implements JWT-based authentication, role-based menu visibility, and audit logs to meet security and compliance requirements.
• Caching & Optimization: Provides door/background data via cache API to reduce initial load time and synchronize order updates with the server.

5. Technical Architecture

• Frontend: Next.js 15, React 19, TypeScript, Tailwind CSS
• Backend: FastAPI
• Database: PostgreSQL
• AI: Custom YOLOv8 model built on PyTorch
• Infrastructure: On-premise deployment using Docker Compose for frontend, backend, and DB containerization

6. Achievements & Scalability

• Verified improvements include faster design replacement based on sales feedback, new consultation inflows through the download-sharing feature, and higher composition accuracy via AI detection.
• Unified management of design and background assets in the admin panel shortened content update lead time.
• The system was designed with a flexible module and data structure for future expansions such as quotation API integration, AR visualization, and POS linkage.