""" 실패 모달 컴포넌트 (Gradio 6 호환 버전) 커스텀 Modal 클래스 사용 👨‍💻 담당: 개발자 B """ import gradio as gr from frontend.components.custom_modal import Modal from frontend.renderers import render_radar_chart class FailureModalComponent: """실패 모달 컴포넌트 - custom_modal 사용""" def __init__(self): self.modal = None self.close_btn = None def render(self): """ 실패 모달 UI 렌더링 Returns: gr.HTML: modal_component """ self.modal = Modal( visible=False, content="", elem_id="failure-modal" ) modal_component = self.modal.render() return modal_component def setup_events(self, on_close=None): """ 이벤트 바인딩 (현재는 JS에서 처리) Args: on_close: 모달 닫힐 때 호출할 콜백 (미사용) """ # 모달 닫기는 JS에서 자동 처리됨 pass @staticmethod def create_modal_content( recognized_text: str, score: int, hint: str, audio_path: str = None, metrics: dict = None, user_text: str = None ) -> str: """ 모달 내용 HTML 생성 (오디오 재생 + 오각 그래프 + 점수표 + 조언) Args: recognized_text: 인식된 텍스트 score: 점수 hint: 힌트 메시지 audio_path: 제출한 오디오 파일 경로 metrics: 메트릭 데이터 {pronunciation, tone, pitch, rhythm, energy} user_text: 사용자가 말한 텍스트 (STT 결과) Returns: str: HTML 문자열 """ # 기본 메트릭 if metrics is None: metrics = {} # 점수에 따른 색상 결정 함수 def get_color(val): return "#e8a054" if val < 85 else "#4db8ff" # 사용자가 말한 텍스트 (STT 결과) HTML user_text_html = "" if user_text: user_text_html = f"""
You said
"{user_text}"
""" # 오디오 플레이어 HTML audio_html = "" if audio_path: audio_html = f"""
{user_text_html}
""" # 레이더 차트 SVG radar_svg = render_radar_chart(metrics, size=280) if metrics else "" # 점수표 HTML score_table_html = "" if metrics: score_table_html = f"""
Pronunciation
{metrics.get('pronunciation', '-')}
Pitch
{metrics.get('pitch', '-')}
Line Accuracy
{metrics.get('tone', '-')}
Rhythm
{metrics.get('rhythm', '-')}
Energy
{metrics.get('energy', '-')}
""" # 그래프 + 점수표 영역 chart_section = "" if metrics: chart_section = f"""
{radar_svg} {score_table_html}
""" # API에서 받은 advice 또는 기본 메시지 advice_text = hint if hint else "발음의 정확도를 높이기 위해 각 음절을 또박또박 발음해 보세요. 특히 받침 발음에 주의하시고, 말의 속도를 조금 천천히 하면 인식률이 향상됩니다." advice_html = f"""
Advice
{advice_text}
""" backup_recognized_text = """
인식된 텍스트
{recognized_text}
""" return f"""

Try Again!

{audio_html} {advice_html} {chart_section}
""" @staticmethod def show(content: str): """모달 열기""" return Modal.show(content) @staticmethod def hide(): """모달 닫기""" return Modal.hide()