import streamlit as st
import numpy as np
import matplotlib.pyplot as plt
from PIL import Image
import io

st.set_page_config(page_title="MNIST Pixel Visualizer", layout="wide")
st.title("🧮 MNIST 픽셀값 시각화 데모")

st.markdown("""
사용자가 업로드한 흑백 이미지를 픽셀값으로 시각화합니다.

- 픽셀값은 0~255 범위이며, 밝기에 따라 흰색(255), 검은색(0)으로 표시됩니다.
- 픽셀값도 이미지 위에 숫자로 표시됩니다.

예시 MNIST 이미지도 함께 제공합니다.
""")

# 예시 이미지 로드 (MNIST)
from tensorflow.keras.datasets import mnist
(x_train, y_train), _ = mnist.load_data()

example_index = st.selectbox("예시 이미지 선택 (MNIST)", list(range(10)), format_func=lambda x: f"Label: {y_train[x]}")
example_image = x_train[example_index]

col1, col2 = st.columns(2)

with col1:
    st.subheader("1. 이미지 업로드 or 예시 이미지 사용")
    uploaded_file = st.file_uploader("흑백 이미지 파일 업로드 (28x28 또는 더 큰 이미지)", type=["png", "jpg", "jpeg"])

    if uploaded_file is not None:
        image = Image.open(uploaded_file).convert('L')  # 흑백으로 변환
        image = np.array(image)
        st.image(image, caption="업로드된 이미지", use_container_width=True)
    else:
        image = example_image
        st.image(image, caption=f"예시 이미지 (Label: {y_train[example_index]})", use_container_width=True)

with col2:
    st.subheader("2. 픽셀값 시각화 결과")
    fig, ax = plt.subplots(figsize=(6, 6))
    ax.imshow(image, cmap='gray', vmin=0, vmax=255)
    ax.set_xticks([])
    ax.set_yticks([])

    h, w = image.shape
    for i in range(h):
        for j in range(w):
            val = image[i, j]
            color = 'white' if val < 128 else 'black'
            ax.text(j, i, str(val), ha='center', va='center', fontsize=6, color=color)

    st.pyplot(fig)

st.markdown("""
---
👨‍💻 만든 사람: 전영훈 | Upstage | AI Edu
""")