src/streamlit_app.py

# 패키지 불러오기
import re
import base64
from io import BytesIO
import streamlit as st

import numpy as np
import pandas as pd
from gtts import gTTS
# assitant 아바타 이미지 경로
assistant_icon_path = "https://huggingface.co/spaces/randmimc/aitom/resolve/main/chat_icon/assistant.ico"

# 세션 상태에서 approval_state 및 messages 초기화
if "approval_state" not in st.session_state:
    st.session_state.approval_state = "require"
if "messages" not in st.session_state:
    st.session_state.messages = []

# 드롭다운 메뉴
st.subheader("데이터 선택")

options = [
    "",
    "2024-08-24",
    "2024-09-26"
]
selected_text = st.selectbox("데이터를 선택하세요", options)

# 커스텀 CSS 삽입
st.markdown("""
    <style>
    div.stButton > button {
        background-color: transparent;
        border: none;
        color: black;
        font-size: 30px;
        padding: 0;
    }
    div.stButton > button:hover {
        color: red;
        cursor: pointer;
    }
    </style>
""", unsafe_allow_html=True)
df = pd.read_csv("https://huggingface.co/spaces/randmimc/mobility_condition/raw/main/chat_icon/text.csv", on_bad_lines='skip') 

# 오디오 플레이어용 placeholder 만들기

# 데이터 상태 및 조치 상황 표시 함수
def display_status_and_action(text):
    if text == "":
        st.info("먼저 데이터를 선택해주세요.")
    elif text == "2024-09-26":
        st.line_chart(
            df,
            y=['ECU_DPFSoot']
        )
        st.success("✅ 차량 상태: 정상")
        st.markdown("**조치 사항:** 추가 조치는 필요하지 않습니다.")
    else:
        st.line_chart(
            df,
            y=['ECU_DPFSoot']
        )
        text_input = "위의 증상들이 보일 경우, 다음과 같은 조치를 취하는 것이 필요합니다:\n\n1. **자동재생 시도**: 우선적으로 일반적인 자동 재생을 진행하여 DPF 시스템이 정상적으로 작동하는지 확인합니다. 차량 속도는 약 60km/h로 유지하고, 20분 이상 주행하여 DPF 시스템이 스스로 soot를 제거하도록 합니다.\n\n2. **DPF 수동 제거 버튼 활용**: 만약 자동재생이 어려운 상태라면, DPF 수동 제거 버튼을 통해 운전자가 강제로 soot를 제거하는 방법을 시도해 봅니다.\n\n3. **정비소 방문**: 자동 재생이나 수동 제거 버튼을 통해서도 문제가 해결되지 않을 경우, 가까운 정비소를 방문하여 DPF 시스템을 점검 받는 것이 중요합니다. 이는 센서 불량이나 DPF 필터 문제 등 다른 원인을 파악하는 데 도움이 됩니다.\n\n4. **배기계통 점검**: 해당 현상이 지속 발견될 경우 만약을 대비하여 차량 자체의 배기계통 점검을 하는 것이 추천됩니다.\n\n**정상적인 경우**: 만약 soot 수치가 적절한 타이밍에 연소되어 없어지고 전체적으로 봤을 때 축적량이 40을 초과하는 구간이 존재하지 않는다면, 이는 정상적이며 문제 없습니다"
        warning  = "⚠️ 일정 수치 이상의 Soot 축적량이 2시간 이상 지속되는 현상을 보임. \nSoot 가 일정수치에 도달했을때 정상적으로 연소되지 않거나, 센서 불량으로 인해 Dosing 이 과하게 활성화됨. \nsoot 가 증가하는 과정에서 불규칙적인 증감 현상이 발생함. \n튐 또는 비선형 형태가 크게 나타남. \nSoot 의 축적량이 40을 초과하는 구간이 존재함."
        st.warning(warning)
        st.markdown(text_input)

        text_input = warning + " " + text_input
        cleaned_text = re.sub(r'[\x00-\x1F]+', '', text_input).replace("*", "")
        tts = gTTS(text=cleaned_text, lang='ko')
        mp3_fp = BytesIO()
        tts.write_to_fp(mp3_fp)

        # 오디오 스트림 재설정 후 재생
        mp3_fp.seek(0)
        
        # Base64 인코딩
        audio_bytes = mp3_fp.read()
        audio_base64 = base64.b64encode(audio_bytes).decode()        
        
        # HTML 스타일 및 오디오 출력
        audio_html = f"""
            <style>
                .audio-container {{
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    justify-content: flex-end; /* 오른쪽 정렬 */
                    margin-top: 10px;
                }}
                .audio-icon {{
                    font-size: 30px;
                    cursor: pointer;
                }}
                .audio-icon[title]:hover::after {{
                    content: attr(title);
                    position: absolute;
                    background: #333;
                    color: #fff;
                    padding: 5px 8px;
                    border-radius: 5px;
                    white-space: nowrap;
                    font-size: 12px;
                    top: -35px;
                    right: 0;
                    z-index: 999;
                }}
            </style>
                        
            <div class="audio-container">
                <div class="audio-icon" title="위 내용을 음성으로 듣기">🔊</div>
                <audio controls>
                    <source src="data:audio/mp3;base64,{audio_base64}" type="audio/mp3">
                    브라우저가 오디오 태그를 지원하지 않습니다.
                </audio>
            </div>
        """
        
        # HTML 렌더링
        st.markdown(audio_html, unsafe_allow_html=True)

if selected_text:
    display_status_and_action(selected_text)