[AI 부트캠프] DAY 139 - 파이널 프로젝트 30

[오늘의 일지]

프로젝트 - 데모 페이지 만들기

[상세 내용]

데모 페이지 만들기

- 오늘은 본격적으로 간단하면서 사용하기 쉬운 데모 페이지를 만드는 과정을 정리해 보겠습니다. 사실 제가 실제로 개발적인 측면 해서는 한 게 없을 정도로 활용가능한 예시 페이지가 잘 나와있어서 사용하기 편했습니다.

 

참고 페이지

- 저는 일단 streamlit 내부에서 참고 페이지를 찾다가 마땅히 참고할만한 게 없어서 구글 검색을 통해 찾게 되었습니다. 기존에 학습에서 사용 중인 YOLOv8 모델을 활용한 streamlit 페이지가 없는지 찾은 끝에 매우 유용한 참고 페이지를 발견하게 되어서 거의 수정 없이 사용하게 되었습니다. 참고 페이지의 깃허브 링크는 아래와 같습니다.

GitHub - CodingMantras/yolov8-streamlit-detection-tracking: YOLOv8 object detection algorithm and Streamlit framework for Real-T

 

모델 맞춤으로 활용

- 이번 프로젝트에서는 object detection 만 학습하였기 때문에 페이지에 나와있는 다른 기능은 모두 제거해 주었습니다. 뿐만 아니라 비디오나 실시간 영상을 접목시키는 기능도 필요 없었기 때문에 제거하고 이미지 기능만 넣어 주었습니다.  그리고 detection 결과 부분에서 기존에는 bbox 좌표가 나오는 것을 우리 데이터의 맞게 클래스를 설명해 주는 딕셔너리로 변경해 주었습니다. 더 자세하게 YOLOv8 predict 기능을 알아보시려면 아래의 링크로 가서 보면 좋습니다.

예측

 

Detection 결과를 바꾸는 과정

- 페이지의 결과 부분은 바꾸는 코드

with col2:
    if source_img is None:
        default_detected_image_path = str(settings.DEFAULT_DETECT_IMAGE)
        default_detected_image = PIL.Image.open(
            default_detected_image_path)
        st.image(default_detected_image_path, caption='Default Detected Image',
                 use_column_width=True)
    else:
        if st.sidebar.button('Detect Objects'):
            res = model.predict(uploaded_image,
                                conf=confidence
                                )
            boxes = res[0].boxes
            res_plotted = res[0].plot()[:, :, ::-1]
            st.image(res_plotted, caption='Detected Image',
                     use_column_width=True)
            try:
                classes = {
                    0.0: '010102',
                    1.0: '010103',
                    2.0: '010104',
                    3.0: '010105',
                    4.0: '010109',
                    5.0: '010110',
                    6.0: '010112',
                    7.0: '010114',
                    8.0: '010115'
                }
                explanations = {
                    0.0: '하나의 별',
                    1.0: '두 개의 별',
                    2.0: '세 개의 별',
                    3.0: '네 개 이상의 별 [Note] 중분류 (01-11)의 성좌 및 성군은 포함하지 않음',
                    4.0: '사각별',
                    5.0: '오각 이상의 별',
                    6.0: '꼭지점이 불균등한 별 [Note] 꼭지점이 불균등한 별로 구성된 스파크를 포함',
                    7.0: '불완전한(미완성의) 별',
                    8.0: '혜성, 유성'
                    }
                with st.expander("Detection Results"):
                    unique_class_index = set()

                    for r in res:
                        for i in range(len(r.boxes.cls)):
                            class_index = r.boxes.cls[i].item()

                            # 중복을 피하기 위해 이미 출력한 class_index면 무시
                            if class_index in unique_class_index:
                                continue

                            unique_class_index.add(class_index)

                            # Map class index to class code using the classes dictionary
                            if class_index in classes:
                                class_code = classes[class_index]
                                explanation = explanations[class_index]
                                st.write(f"{class_code} : {explanation}")
                            else:
                                st.write(f"Unknown class index: {class_index}")
            except Exception as ex:
                # st.write(ex)
                st.write("No image is uploaded yet!")

 

 

- 기존 Detection 결과

 

- 프로젝트 맞춤 Detection 결과

 

최종 데모 페이지 결과물

[마무리]

 오늘은 streamlit을 활용해서 데모 페이지를 만드는 과정을 정리해 보았습니다. 지금까지와 다르게 서비스 측면에서 뭔가 결과물을 만들어서 그런가 중간 과정에서 어려움도 많았지만 마무리는 잘 된 느낌을 받은 거 같습니다. 오늘로써 프로젝트가 2일밖에 남지 않게 되었습니다. 그렇기 때문에 내일은 지금까지의 과정을 정리하면서 발표자료를 만들어 보고 최종 프로젝트 리뷰 및 소감을 정리해 보면 좋을 거 같습니다.