src/streamlit_app.py

import streamlit as st
import base64
import os

# 1. 이미지 경로 설정 (app.py와 같은 위치에 img 폴더가 있어야 함)
IMG_PATH = "src/img/mic.png"

# 2. 이미지를 Base64 문자열로 변환하는 함수
def get_image_base64(path):
    if os.path.exists(path):
        with open(path, "rb") as f:
            data = f.read()
        return base64.b64encode(data).decode()
    return None

# 이미지 로드 시도
mic_icon_base64 = get_image_base64(IMG_PATH)

# 이미지가 없을 경우를 대비한 대체 텍스트 혹은 빈 값
if mic_icon_base64:
    img_src = f"data:image/png;base64,{mic_icon_base64}"
else:
    # 이미지가 없으면 깨진 이미지 아이콘 대신 투명하게 처리하거나 경고 표시
    img_src = "" 

# ============

# 페이지 설정
st.set_page_config(
    page_title="건강 관리 앱",
    page_icon="💪",
    layout="centered",
    initial_sidebar_state="collapsed"
)

# CSS 스타일링 (f-string으로 변경하여 변수 주입 가능하게 함)
st.markdown(f"""
<style>
    /* 전체 배경 */
    .stApp {{
        background-color: #ffffff;
    }}
    
    /* 헤더 영역 */
    .header {{
        padding: 20px 0;
        text-align: left;
    }}
    
    .menu-icon {{
        font-size: 32px;
        font-weight: 300;
        color: #333;
        cursor: pointer;
    }}
    
    /* 카드 컨테이너 - 가로 스크롤 */
    .card-container {{
        position: fixed;
        bottom: 80px;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: row;
        gap: 15px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 20px;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }}
    
    /* 스크롤바 숨기기 (Webkit) */
    .card-container::-webkit-scrollbar {{
        display: none;
    }}
    
    /* 개별 카드 */
    .card {{
        background: #f5f5f5;
        padding: 15px 18px;
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 13px;
        color: #333;
        font-weight: 400;
        flex-shrink: 0;
        max-width: 140px;
        white-space: normal;
    }}
    
    .card:hover {{
        transform: translateY(-2px);
    }}
    
    /* 하단 입력 영역 */
    .input-container {{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        padding: 15px 20px 15px 20px;
    }}
    
    .input-box {{
        display: flex;
        align-items: center;
        background: #f0f0f0;
        border-radius: 40px;
        padding: 1px 10px;
    }}
    
    .plus-btn {{
        font-size: 26px;
        color: #666;
        cursor: pointer;
        user-select: none;
    }}
    
    .input-text {{
        flex: 1;
        font-size: 15px;
        color: #999;
    }}
    
    .voice-btn {{
        width: 20px;            /* 버튼 전체 크기 */
        height: 20px;
        cursor: pointer;
        box-sizing: border-box; /* 패딩을 포함해서 40px로 고정 */
        object-fit: contain;    /* 이미지가 찌그러지지 않게 */
    }}
    
    /* Streamlit 기본 요소 숨기기 */
    #MainMenu {{visibility: hidden;}}
    footer {{visibility: hidden;}}
    header {{visibility: hidden;}}
    
    /* 여백 조정 */
    .block-container {{
        padding-top: 2rem;
        padding-bottom: 8rem;
    }}
</style>
""", unsafe_allow_html=True)

# 헤더 (햄버거 메뉴)
st.markdown("""
<div class="header">
    <div class="menu-icon">☰</div>
</div>
""", unsafe_allow_html=True)

# 중간 카드 영역 (가로 스크롤)
st.markdown("""
<div class="card-container">
    <div class="card">이번주의 건강 분석 리포트를 써줘</div>
    <div class="card">나에게 맞는 식단 추천해줘</div>
    <div class="card">새롭게 해볼만한 운동 추천해줘</div>
</div>
""", unsafe_allow_html=True)

# 하단 입력 영역 (이미지 경로가 주입됨)
st.markdown(f"""
<div class="input-container">
    <div class="input-box">
        <div class="plus-btn">＋</div>
        <div class="input-text">무엇이든 부탁하세요</div>
        <img src="{img_src}" class="voice-btn" alt="마이크"></div>
</div>
""", unsafe_allow_html=True)

# 디버깅용: 이미지가 로드되지 않았을 때만 에러 메시지 표시
if not mic_icon_base64:
    st.error(f"이미지를 찾을 수 없습니다. 경로를 확인해주세요: {os.path.abspath(IMG_PATH)}")