지능형 영숫자 탐지 및 인식 시스템 개요
본 프로젝트는 최신 객체 탐지 기술과 현대적인 웹 개발 프레임워크를 통합한 지능형 영숫자 인식 시스템을 구현합니다. 시스템의 핵심은 YOLO 시리즈의 최신 고성능 버전(YOLOv8, YOLOv10, YOLOv11, YOLOv12 포함)을 활용하여, 이미지, 비디오 스트림 및 실시간 카메라 피드에서 총 36가지 종류의 영문자(A-Z)와 숫자(0-9)를 빠르고 정확하게 식별하는 견고한 다중 문자 인식 모델을 구축하는 데 있습니다.
사용자 친화적이고 효율적이며 완벽한 상호 작용 플랫폼을 제공하기 위해 시스템은 프론트엔드-백엔드 분리 아키텍처를 채택합니다. 백엔드는 Spring Boot 프레임워크를 기반으로 모델 추론, 비즈니스 로직 처리 및 데이터 영속성을 담당하며, 사용자 정보, 탐지 기록 및 결과를 체계적으로 저장하기 위해 MySQL 데이터베이스를 사용합니다. 프론트엔드는 현대적인 웹 기술 스택으로 반응형 인터페이스를 구축하여 사용자 로그인 및 등록, 모델 동적 전환, 멀티미디어 파일 업로드 탐지 및 실시간 카메라 캡처를 지원합니다. 시스템의 핵심적인 특징 중 하나는 DeepSeek 지능형 분석 기능과의 통합으로, 탐지 결과에 대한 추가적인 의미 분석 및 해석을 제공하여 시스템의 응용 깊이를 향상시킵니다.
또한, 시스템은 인식 기록(이미지, 비디오, 카메라) 관리, 사용자 개인 정보 유지 관리, 관리자가 주도하는 시스템 사용자 관리 등 포괄적인 관리 기능 모듈을 구축했습니다. 데이터 시각화 기술을 통해 모델 성능 지표, 인식 통계 데이터와 같은 주요 정보를 직관적으로 표시하여 사용자의 의사 결정 분석을 돕습니다. 본 시스템은 인공지능, 소프트웨어 공학 및 데이터베이스 기술을 통합하여 실제 시나리오에서 YOLO 시리즈 모델의 효과를 입증했을 뿐만 아니라, 문자 인식 애플리케이션을 위한 확장 가능하고 유지 보수하기 쉬운 완전한 솔루션을 제공하며, 높은 실용적 가치와 학술 연구적 의미를 가집니다.
서론
1. 연구 배경 및 중요성
정보화 및 디지털화가 빠르게 발전하는 시대에 영숫자는 정보 전달의 기본 매개체로서, 자동 인식 기술은 컴퓨터 비전 분야의 핵심 주제 중 하나입니다. 문서 디지털화, 차량 번호판 인식, 산업 라벨 판독에서 접근성 향상을 위한 보조 독서에 이르기까지, 효율적이고 정확한 문자 인식 기술은 인간-기계 상호 작용, 프로세스 자동화 및 지능형 의사 결정을 실현하는 데 중요한 요소입니다. 광학 문자 인식(OCR) 기술은 수년간 발전해 왔지만, 복잡한 배경, 다양한 조명 조건, 다양한 글꼴 및 비제한적인 환경에서 실시간으로 여러 대상을 탐지하고 인식하는 데 여전히 큰 과제를 안고 있습니다.
최근 몇 년 동안, 딥러닝 기반의 객체 탐지 알고리즘, 특히 YOLO 시리즈로 대표되는 단일 단계 탐지기는 뛰어난 실시간 성능과 우수한 정확도로 많은 분야에서 혁신적인 성공을 거두었습니다. YOLO 시리즈의 지속적인 업데이트(v1부터 최신 v12까지)는 속도와 정확도 사이에서 최적의 균형을 끊임없이 추구하며, 실시간 문자 인식을 위한 강력한 기술적 기반을 제공했습니다. 그러나 성숙한 애플리케이션 시스템은 강력한 알고리즘 모델뿐만 아니라 안정적이고 신뢰할 수 있는 백엔드 서비스, 사용자 친화적인 상호 작용 인터페이스, 그리고 안전하고 효율적인 데이터 관리 또한 필요로 합니다. 따라서 최첨단 YOLO 모델을 검증된 Java 엔터프라이즈 개발 프레임워크인 Spring Boot와 결합하여 완전하고 실용적인 "엔드 투 엔드" 지능형 인식 시스템을 구축하는 것은 중요한 이론적 탐구 가치와 광범위한 실제 적용 가능성을 가집니다.
2. 국내외 연구 현황
현재 문자 인식 연구는 주로 두 가지 방향으로 심화되고 있습니다. 첫째는 알고리즘 모델 자체의 최적화로, Transformer 기반 탐지기, 경량화 네트워크 설계, 앵커-프리(Anchor-Free) 메커니즘의 적용 등이 있으며, YOLOv10/v11/v12와 같은 최신 버전은 이러한 측면에서 상당한 개선을 이루었습니다. 둘째는 시스템 통합 및 애플리케이션 구현으로, 연구자들은 고성능 모델을 서비스로 캡슐화하여 웹 또는 모바일 애플리케이션을 통해 최종 사용자에게 제공하고, 데이터 관리, 사용자 권한, 기록 추적 등 생산 환경에 필수적인 기능을 통합하는 방법에 점점 더 많은 관심을 기울이고 있습니다. 그러나 기존 연구들은 대부분 모델 성능 경쟁에 집중하거나 간단한 데모 인터페이스를 제공하는 데 그치며, 다중 모델 전환, 심층 지능형 분석, 완전한 기능의 데이터 관리 및 현대적인 웹 인터페이스를 통합한 종합적인 시스템 사례는 부족합니다.
3. 본 프로젝트의 주요 내용 및 기여
이러한 현황에 대응하여 본 프로젝트는 "YOLOv8/v10/v11/v12 및 Spring Boot 기반 영숫자 인식 탐지 시스템"이라는 완전한 기능을 갖춘 시스템을 개발하는 것을 목표로 합니다. 본 프로젝트의 주요 작업 및 혁신적인 점은 다음과 같습니다:
- 다중 모델 통합 및 비교 플랫폼: 시스템은 YOLOv8, YOLOv10, YOLOv11 및 YOLOv12의 네 가지 최신 버전 모델을 동시에 통합하여, 사용자가 속도와 정확도에 대한 다양한 요구 사항에 따라 유연하게 전환할 수 있도록 하며, 실제 시나리오에서 모델 선택을 위한 직접적인 비교 및 검증 플랫폼을 제공합니다.
- DeepSeek 강화 지능형 분석: 단순히 문자를 위치시키고 분류하는 것을 넘어, DeepSeek 대규모 언어 모델의 지능형 분석 능력을 혁신적으로 도입하여, 인식된 문자 시퀀스에 대한 문맥 이해, 의미 해석 또는 오류 검증을 수행함으로써 시스템의 지능화 수준과 응용 가치를 크게 향상시킵니다.
- 풀스택, 모듈형 시스템 구현: 프론트엔드-백엔드 분리 아키텍처를 채택하여, 백엔드는 Spring Boot 기반으로 RESTful API를 구현하고, 프론트엔드는 동적 상호 작용 인터페이스를 구축하여 사용자 인증, 멀티미디어 입력(이미지/비디오/카메라), 모델 추론, 결과 저장 및 시각화 표시까지 전체 프로세스를 폐쇄 루프 방식으로 구현했습니다.
- 포괄적인 데이터 관리 및 시각화: 시스템은 세분화된 MySQL 데이터베이스를 설계하여 사용자 기본 정보뿐만 아니라, 이미지, 비디오, 카메라 세 가지 출처의 모든 인식 기록을 구조화하여 저장합니다. 차트와 결합된 데이터 시각화는 사용자 및 관리자에게 시스템 사용 통찰력과 모델 성능 분석을 직관적으로 제공합니다.
- 완전한 사용자 및 보안 관리: 완전한 사용자 등록 및 로그인, 개인 센터 정보 유지 관리 및 관리자 백엔드 사용자 관리 기능을 구현하여 시스템의 보안성과 관리 가능성을 보장합니다.
시스템 핵심 기능 요약
주요 기능 모듈
- 사용자 로그인 및 등록: 비밀번호 검증 및 MySQL 데이터베이스에 저장 지원.
- YOLOv8, YOLOv10, YOLOv11, YOLOv12 등 네 가지 YOLO 모델 전환 지원.
- 정보 시각화 및 데이터 시각화.
- 이미지 탐지 시 DeepSeek AI 분석 기능 지원.
- 이미지, 비디오, 카메라 실시간 탐지 지원, 탐지 결과는 MySQL 데이터베이스에 저장.
- 이미지, 비디오, 카메라 인식 기록 관리.
- 관리자 권한으로 사용자 추가, 삭제, 수정, 조회 가능한 사용자 관리 모듈.
- 개인 센터에서 자신의 정보, 비밀번호, 이름, 아바타 등 수정 가능.
데이터 관리 모듈 (MySQL 테이블 설계)
system_users- 시스템 사용자 정보 테이블image_detection_logs- 이미지 탐지 기록 테이블video_detection_logs- 비디오 탐지 기록 테이블camera_detection_logs- 카메라 탐지 기록 테이블
모델 훈련 코드 예시
아래 Python 코드는 Ultralytics YOLO 라이브러리를 사용하여 모델 훈련을 시작하는 예시입니다. 실제 시나리오에 따라 모델 가중치 파일, 데이터셋 구성 및 훈련 매개변수를 조정할 수 있습니다.
# -*- coding: utf-8 -*-
# 트레이닝 설정을 위한 YOLO 모델 스크립트 예시
# 필요에 따라 모델 가중치 파일 및 데이터셋 경로를 조정하십시오.
# YOLO 모델 유형 (e.g., 'n': 나노, 's': 스몰, 'm': 미디움, 'b': 베이스, 'l': 라지)
# 각 모델은 속도와 정확도 간의 다른 균형을 제공합니다.
from ultralytics import YOLO
# 사전 훈련된 모델 가중치 경로 설정
initial_weights_path = 'models/pretrained/yolov12s_weights.pt'
# 데이터셋 구성 파일 (YAML 형식) 경로 설정
dataset_configuration_path = 'config/alphanum_data.yaml'
if __name__ == '__main__':
# YOLO 모델 초기화 (사전 훈련된 가중치 로드)
detection_model = YOLO(initial_weights_path)
# 모델 훈련 시작
# parameters:
# data: 데이터셋 구성 파일 경로
# epochs: 총 훈련 에포크 수
# batch: 배치 크기
# device: 훈련에 사용할 GPU ID (e.g., 'cuda:0' for first GPU)
# workers: 데이터 로딩에 사용할 워커 수 (0은 메인 프로세스 사용)
# project: 훈련 결과가 저장될 상위 디렉토리
# name: 현재 훈련 실행의 이름
training_results = detection_model.train(
data=dataset_configuration_path,
epochs=300,
batch=32,
device='cuda:0',
workers=4,
project='detection_runs',
name='alphanum_exp_v1',
)
YOLO 모델 개요
YOLOv8
Ultralytics가 2023년 1월 10일에 출시한 YOLOv8은 정확성과 속도 면에서 최첨단 성능을 제공합니다. 이전 YOLO 버전의 발전을 기반으로 YOLOv8은 새로운 기능과 최적화를 도입하여 다양한 애플리케이션의 객체 탐지 작업에 이상적인 선택이 되었습니다.
YOLOv8의 주요 특징:
- 고급 백본 및 넥 아키텍처: YOLOv8은 최첨단 백본 및 넥 아키텍처를 채택하여 특징 추출 및 객체 탐지 성능을 향상시킵니다.
- 앵커-프리 분리형 Ultralytics 헤드: YOLOv8은 앵커-프리 분리형 Ultralytics 헤드를 사용하여 앵커 기반 방식에 비해 정확도를 높이고 탐지 효율성을 향상시키는 데 기여합니다.
- 최적화된 정확도-속도 균형: YOLOv8은 정확성과 속도 사이의 최적 균형을 유지하는 데 중점을 두어 다양한 응용 분야에서 실시간 객체 탐지 작업에 적합합니다.
- 풍부한 사전 훈련된 모델: YOLOv8은 다양한 작업 및 성능 요구 사항을 충족하기 위한 다양한 사전 훈련된 모델을 제공하여 특정 사용 사례에 적합한 모델을 쉽게 찾을 수 있도록 합니다.
YOLOv10
칭화대학교 연구원들이 Ultralytics Python을 기반으로 개발한 YOLOv10은 실시간 객체 탐지를 위한 새로운 접근 방식을 도입하여 이전 YOLO 버전에서 존재했던 후처리 및 모델 아키텍처의 결함을 해결합니다. NMS(Non-Maximum Suppression)를 제거하고 다양한 모델 구성 요소를 최적화함으로써 YOLOv10은 크게 감소된 계산 오버헤드로 최첨단 성능을 달성합니다. 광범위한 실험을 통해 여러 모델 스케일에서 뛰어난 정확도-지연 시간 균형을 보여주었습니다.
개요:
실시간 객체 탐지는 낮은 지연 시간으로 이미지 내 객체 클래스와 위치를 정확하게 예측하는 것을 목표로 합니다. YOLO 시리즈는 성능과 효율성 간의 균형으로 인해 이 연구의 선두에 서 있었습니다. 그러나 NMS에 대한 의존성과 비효율적인 아키텍처는 최적의 성능을 저해했습니다. YOLOv10은 NMS 없는 훈련을 위한 일관된 이중 할당과 전체적인 효율성-정확도 중심 모델 설계 전략을 도입하여 이러한 문제를 해결합니다.
아키텍처:
YOLOv10의 아키텍처는 이전 YOLO 모델의 장점을 기반으로 하면서 몇 가지 핵심 혁신을 도입합니다. 모델 아키텍처는 다음 구성 요소로 이루어집니다:
- 백본 네트워크: 특징 추출을 담당하며, YOLOv10의 백본은 CSPNet(Cross Stage Partial Network)의 강화 버전을 사용하여 그래디언트 흐름을 개선하고 계산 중복성을 줄입니다.
- 넥: 넥은 다른 스케일의 특징을 통합하여 헤드로 전달하도록 설계되었습니다. 효율적인 다중 스케일 특징 융합을 위한 PAN(Path Aggregation Network) 계층을 포함합니다.
- 다대일(One-to-Many) 헤드: 훈련 중에 각 객체에 대해 여러 예측을 생성하여 풍부한 감독 신호를 제공하고 학습 정확도를 향상시킵니다.
- 일대일(One-to-One) 헤드: 추론 시 각 객체에 대해 하나의 최적 예측을 생성하여 NMS의 필요성을 없애고 지연 시간을 줄이며 효율성을 높입니다.
주요 기능:
- NMS 없는 훈련: 일관된 이중 할당을 활용하여 NMS의 필요성을 제거하고 추론 지연 시간을 줄입니다.
- 전체적인 모델 설계: 경량 분류 헤드, 공간-채널 분리 다운샘플링, 랭크 유도 블록 설계 등 효율성과 정확도 측면에서 다양한 구성 요소를 포괄적으로 최적화합니다.
- 향상된 모델 기능: 대형 커널 컨볼루션과 부분적 자가 주의 모듈을 결합하여 상당한 계산 비용 없이 성능을 향상시킵니다.
YOLOv11
YOLOv11은 Ultralytics YOLO 시리즈 실시간 객체 탐지기의 최신 반복 버전으로, 최첨단 정확도, 속도 및 효율성으로 가능성을 재정의합니다. YOLOv11은 이전 YOLO 버전의 상당한 발전을 기반으로 아키텍처 및 훈련 방법론에서 중요한 개선을 이루어 다양한 컴퓨터 비전 작업에 다용도로 활용될 수 있습니다.
주요 기능:
- 향상된 특징 추출: YOLOv11은 개선된 백본 및 넥 아키텍처를 채택하여 특징 추출 능력을 강화하고, 더 정확한 객체 탐지 및 복잡한 작업 성능을 가능하게 합니다.
- 최적화된 효율성 및 속도: YOLOv11은 개선된 아키텍처 설계와 최적화된 훈련 프로세스를 도입하여 더 빠른 처리 속도를 제공하며, 정확성과 성능 사이의 최적 균형을 유지합니다.
- 더 높은 정확도, 더 적은 매개변수: 모델 설계의 발전과 함께 YOLOv11m은 COCO 데이터셋에서 더 높은 mAP(평균 평균 정밀도)를 달성하면서 YOLOv8m보다 22% 적은 매개변수를 사용하여 정확도를 희생하지 않고 계산 효율성을 향상시킵니다.
- 다양한 환경에 대한 적응성: YOLOv11은 엣지 장치, 클라우드 플랫폼, NVIDIA GPU 지원 시스템을 포함한 다양한 환경에 원활하게 배포될 수 있어 최대의 유연성을 보장합니다.
- 광범위한 작업 지원: 객체 탐지, 인스턴스 분할, 이미지 분류, 자세 추정 또는 회전 바운딩 박스 탐지(OBB) 등 YOLOv11은 다양한 컴퓨터 비전 과제를 해결하도록 설계되었습니다.
YOLOv12
YOLOv12는 이전 YOLO 모델에서 사용된 전통적인 CNN 기반 방식과 차별화되는 주의(Attention) 중심 아키텍처를 도입하지만, 여전히 많은 애플리케이션에 필요한 실시간 추론 속도를 유지합니다. 이 모델은 주의 메커니즘과 전체 네트워크 아키텍처에서 새로운 접근 방식을 통해 혁신하여, 실시간 성능을 유지하면서 최첨단 객체 탐지 정확도를 달성합니다. 이러한 장점에도 불구하고 YOLOv12는 무거운 주의 모듈로 인해 훈련 불안정성, 메모리 소비 증가 및 CPU 처리량 저하 문제가 발생할 수 있어 Ultralytics는 대부분의 프로덕션 워크로드에 여전히 YOLOv11을 권장합니다.
주요 기능:
- 영역 주의 메커니즘: 넓은 수용장(receptive field)을 효과적으로 처리할 수 있는 새로운 자가 주의(self-attention) 방식입니다. 특징 맵을 *l*개의 동일한 크기의 영역(기본값은 4개)으로 수평 또는 수직으로 분할하여 복잡한 연산을 피하고 넓은 유효 수용장을 유지합니다. 이는 표준 자가 주의에 비해 계산 비용을 크게 줄입니다.
- 잔차 효율 계층 통합 네트워크 (R-ELAN): ELAN을 기반으로 개선된 특징 통합 모듈로, 특히 대규모 주의 중심 모델에서 최적화 문제를 해결하도록 설계되었습니다. R-ELAN은 다음을 도입합니다:
- 스케일링이 있는 블록 레벨 잔차 연결 (계층 스케일링과 유사).
- 재설계된 특징 통합 방식으로 병목 현상과 유사한 구조를 만듭니다.
- 최적화된 주의 메커니즘 아키텍처: YOLOv12는 효율성을 높이고 YOLO 프레임워크와 호환성을 유지하기 위해 표준 주의 메커니즘을 간소화했습니다. 여기에는 다음이 포함됩니다:
- 메모리 접근 오버헤드를 최소화하기 위한 FlashAttention 사용.
- 더 간결하고 빠른 모델을 위한 위치 인코딩 제거.
- MLP 비율 조정 (일반적인 4에서 1.2 또는 2로 조정)하여 주의 및 피드포워드 계층 간의 계산 균형을 개선.
- 최적화 개선을 위해 쌓인 블록의 깊이 감소.
- (적절한 경우) 컨볼루션 연산을 활용하여 계산 효율성 향상.
- 주의 메커니즘에 7x7 분리형 컨볼루션("위치 감지기")을 추가하여 위치 정보를 암묵적으로 인코딩.
- 포괄적인 작업 지원: YOLOv12는 객체 탐지, 인스턴스 분할, 이미지 분류, 자세 추정 및 회전 바운딩 박스 탐지(OBB) 등 다양한 핵심 컴퓨터 비전 작업을 지원합니다.
- 향상된 효율성: 이전의 많은 모델보다 적은 매개변수로 더 높은 정확도를 달성하여 속도와 정확도 간의 더 나은 균형을 입증합니다.
- 유연한 배포: 엣지 장치부터 클라우드 인프라까지 다양한 플랫폼에 배포할 수 있도록 설계되었습니다.
프론트엔드 코드 예시
아래 Vue.js 템플릿 코드 일부는 시스템의 메인 대시보드에서 실시간 문자 인식 기록을 표시하고 관리하는 방법을 보여줍니다. 이 컴포넌트는 데이터 시각화를 위한 차트와 함께, 탐지 기록을 테이블 형태로 표시하고 상세 정보를 조회할 수 있는 기능을 포함합니다.
<template>
<div class="home-container layout-pd">
<el-row :gutter="15" class="home-card-two mb15">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<div class="home-card-item">
<div style="height: 100%" ref="homeLineRef"></div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="home-media">
<div class="home-card-item">
<div style="height: 100%" ref="homePieRef"></div>
</div>
</el-col>
</el-row>
<el-row :gutter="15" class="home-card-three">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="home-media">
<div class="home-card-item">
<div style="height: 100%" ref="homeradarRef"></div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<div class="home-card-item">
<div class="home-card-item-title">실시간 문자 인식 기록</div>
<div class="home-monitor">
<div class="flex-warp">
<el-table :data="state.paginatedData" style="width: 100%" height="360" v-loading="state.loading">
<el-table-column prop="username" label="조작 사용자" align="center" width="120" />
<el-table-column prop="label" label="인식 결과" align="center" width="120">
<template #default="scope">
<el-tag
:type="getResultType(scope.row.label)"
effect="light"
>
{{ formatLabel(scope.row.label) }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="confidence" label="신뢰도" align="center" width="120">
<template #default="scope">
{{ formatConfidence(scope.row.confidence) }}
</template>
</el-table-column>
<el-table-column prop="weight" label="모델 가중치" align="center" width="120" />
<el-table-column prop="conf" label="인식 임계값" align="center" width="120" />
<el-table-column prop="startTime" label="인식 시간" align="center" width="180" />
<el-table-column label="조작" align="center" width="100">
<template #default="scope">
<el-button link type="primary" size="small" @click="handleViewDetail(scope.row)">
상세
</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<el-pagination
v-model:current-page="state.currentPage"
v-model:page-size="state.pageSize"
:page-sizes="[10, 20, 50, 100]"
:small="true"
:layout="layout"
:total="state.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 상세 정보 팝업 -->
<el-dialog
v-model="state.detailDialogVisible"
:title="`문자 인식 기록 상세 - ${state.selectedRecord?.username || ''}`"
width="80%"
:close-on-click-modal="false"
:close-on-press-escape="false"
center
>
<div class="detail-container" v-loading="state.detailLoading">
<el-row :gutter="20">
<!-- 문자 이미지 -->
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<div class="detail-section">
<h3 class="detail-title">원본 이미지</h3>
<div class="image-container">
<div class="img-wrapper" @click="previewImage(getImageUrl(state.selectedRecord?.inputImg), '원본 이미지')">
<img
:src="getImageUrl(state.selectedRecord?.inputImg)"
alt="원본 이미지"
class="detection-image"
v-if="state.selectedRecord?.inputImg"
/>
<div class="img-overlay" v-if="state.selectedRecord?.inputImg">
<el-icon><View /></el-icon>
</div>
<div v-else class="image-placeholder">
<el-icon><Picture /></el-icon>
<span>원본 이미지가 없습니다</span>
</div>
</div>
</div>
</div>
</el-col>
<!-- 인식 정보 -->
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<div class="detail-section">
<h3 class="detail-title">인식 정보</h3>
<el-descriptions :column="1" border>
<el-descriptions-item label="조작 사용자">
{{ state.selectedRecord?.username || '알 수 없음' }}
</el-descriptions-item>
<el-descriptions-item label="인식 결과">
<el-tag
:type="getResultType(state.selectedRecord?.label || '')"
effect="light"
>
{{ formatLabel(state.selectedRecord?.label || '') }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="신뢰도">
{{ formatConfidence(state.selectedRecord?.confidence || '') }}
</el-descriptions-item>
<el-descriptions-item label="모델 가중치">
{{ state.selectedRecord?.weight || '알 수 없음' }}
</el-descriptions-item>
<el-descriptions-item label="인식 임계값">
{{ state.selectedRecord?.conf || '알 수 없음' }}
</el-descriptions-item>
<el-descriptions-item label="인식 시간">
{{ state.selectedRecord?.startTime || '알 수 없음' }}
</el-descriptions-item>
<el-descriptions-item label="문자 분석 상세" v-if="hasDetectionDetails">
<div class="detection-details">
<div
v-for="(item, index) in getDetectionDetails()"
:key="index"
class="detail-item"
>
<span class="detail-label">{{ item.label }}:</span>
<span class="detail-value">{{ item.confidence }}</span>
</div>
</div>
</el-descriptions-item>
</el-descriptions>
</div>
</el-col>
</el-row>
<!-- 원본 이미지와 인식 결과 비교 -->
<el-row :gutter="20" v-if="state.selectedRecord?.inputImg || state.selectedRecord?.outImg">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<div class="detail-section">
<h3 class="detail-title">원본 이미지</h3>
<div class="image-container">
<div class="img-wrapper" @click="previewImage(getImageUrl(state.selectedRecord.inputImg), '원본 이미지')">
<img
:src="getImageUrl(state.selectedRecord.inputImg)"
alt="원본 이미지"
class="detection-image"
v-if="state.selectedRecord?.inputImg"
/>
<div class="img-overlay" v-if="state.selectedRecord?.inputImg">
<el-icon><View /></el-icon>
</div>
<div v-else class="image-placeholder">
<el-icon><Picture /></el-icon>
<span>원본 이미지가 없습니다</span>
</div>
</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<div class="detail-section">
<h3 class="detail-title">주석 처리된 이미지</h3>
<div class="image-container">
<div class="img-wrapper" @click="previewImage(getImageUrl(state.selectedRecord.outImg), '주석 처리된 이미지')">
<img
:src="getImageUrl(state.selectedRecord.outImg)"
alt="주석 처리된 이미지"
class="detection-image"
v-if="state.selectedRecord?.outImg"
/>
<div class="img-overlay" v-if="state.selectedRecord?.outImg">
<el-icon><View /></el-icon>
</div>
<div v-else class="image-placeholder">
<el-icon><Picture /></el-icon>
<span>주석 처리된 이미지가 없습니다</span>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>