app.py

# ============================================================
# app.py — 그로센딕 AI Day 3 (점집 컨셉 · 따뜻한 버전)
# 자연어 프롬프트 기반 디자인 / 무섭지 않고 친근한 점집
# ============================================================

import warnings
warnings.filterwarnings("ignore", message=".*HF_TOKEN.*")

import gradio as gr
import torch, torch.nn as nn, timm
from torchvision import models, transforms
from huggingface_hub import hf_hub_download
from PIL import Image
import numpy as np

# ──────────────────────────────────────────
# 1. 5개 AI 모델 로드 (Space 시작 시 1번만)  ※ 그대로 유지
# ──────────────────────────────────────────
REPO_ID = "junkim1209/isic-models"
MODEL_NAMES = ['efficientnet_b3', 'efficientnet_b5',
               'convnext_tiny', 'convnext_base', 'swin_base']

def build_model(name):
    if name == 'efficientnet_b3':
        m = models.efficientnet_b3(weights=None)
        m.classifier[1] = nn.Linear(m.classifier[1].in_features, 1); return m, 300
    elif name == 'efficientnet_b5':
        return timm.create_model('efficientnet_b5', pretrained=False, num_classes=1), 456
    elif name == 'convnext_tiny':
        m = models.convnext_tiny(weights=None)
        m.classifier[2] = nn.Linear(m.classifier[2].in_features, 1); return m, 224
    elif name == 'convnext_base':
        return timm.create_model('convnext_base', pretrained=False, num_classes=1), 224
    elif name == 'swin_base':
        return timm.create_model('swin_base_patch4_window12_384',
                                 pretrained=False, num_classes=1), 384

print("📥 무당 5명 모시는 중...")
LOADED = {}
for name in MODEL_NAMES:
    path = hf_hub_download(repo_id=REPO_ID, filename=f"{name}.pth")
    model, size = build_model(name)
    state = torch.load(path, map_location='cpu', weights_only=False)
    model.load_state_dict(state['model_state_dict'], strict=True)
    model.eval()
    LOADED[name] = {'model': model, 'size': size}
print("✅ 점집 개시 준비 완료")

# ──────────────────────────────────────────
# 2. 본인 1일차 가중치
# ──────────────────────────────────────────
MY_WEIGHTS = {
    'efficientnet_b3': 1.0, 'efficientnet_b5': 1.0,
    'convnext_tiny':   1.0, 'convnext_base':   1.0,
    'swin_base':       1.0,
}

# ──────────────────────────────────────────
# 3. 추론 + 문진 결합  ※ predict 본체는 유지하고 함수 시그니처만 확장
# ──────────────────────────────────────────
def predict_with_questionnaire(image, age, family_history, mole_change):
    if image is None:
        return None, ""

    img = Image.fromarray(image).convert('RGB')
    probs = {}
    for name, info in LOADED.items():
        tfm = transforms.Compose([
            transforms.Resize((info['size'], info['size'])),
            transforms.ToTensor(),
            transforms.Normalize([0.485, 0.456, 0.406], [0.229, 0.224, 0.225]),
        ])
        x = tfm(img).unsqueeze(0)
        with torch.no_grad():
            probs[name] = torch.sigmoid(info['model'](x)).item()

    total = sum(MY_WEIGHTS.values())
    ai_prob = sum(probs[k] * w / total for k, w in MY_WEIGHTS.items())

    bonus = 0.0
    if family_history == "예":   bonus += 0.10
    if mole_change   == "예":    bonus += 0.15
    if age >= 50:                bonus += 0.05
    final = min(ai_prob + bonus, 1.0)

    label_data = {
        "흉(凶) — 멜라노마 의심": float(final),
        "길(吉) — 양성 모반":     float(1 - final),
    }

    # 위험도별 점괘 풀이 (따뜻한 톤)
    if final < 0.20:
        tag       = "길조 (吉兆)"
        msg       = "이 점은 평온한 점이라네.<br>일반적인 모반으로 보이오. 평소처럼 자가 관찰을 이어가시오."
        tag_color = "#3F8B5F"   # 부드러운 초록
        tag_bg    = "#EDF6EF"
    elif final < 0.50:
        tag       = "주의 (注意)"
        msg       = "조금 신경 쓰이는 기운이 있구려.<br>가까운 피부과에서 한번 봐달라 하시오."
        tag_color = "#C9722E"   # 따뜻한 주황
        tag_bg    = "#FCF1E0"
    else:
        tag       = "흉조 (凶兆)"
        msg       = "이 점은 좀 살펴봐야 할 것 같소.<br>가능한 빨리 피부과 전문의에게 진료를 받으시오."
        tag_color = "#B5394A"   # 무섭지 않은 짙은 주홍
        tag_bg    = "#FBEAEC"

    detail_html = f"""
    <div style='background:{tag_bg}; border-left:5px solid {tag_color};
                padding: 16px 18px; border-radius: 12px; margin-top: 14px;'>
        <div style='color:{tag_color}; font-weight:800; font-size:16px;
                    margin-bottom:8px; letter-spacing:1.5px;'>
            🔮 {tag}
        </div>
        <div style='color:#4A3826; font-size:13.5px; line-height:1.65;'>{msg}</div>
    </div>

    <div style='background:#FFFBF0; padding:14px 16px; border-radius:12px;
                margin-top:12px; font-size:12.5px; color:#6B4423;
                border: 1px dashed #D4B873;'>
        <div style='font-weight:700; margin-bottom:8px; color:#A8462C;
                    letter-spacing: 1px;'>📜 점괘 풀이</div>
        AI 무당의 직관: <strong>{ai_prob*100:.1f}%</strong><br>
        운수(문진) 가산: <strong>+{bonus*100:.1f}%</strong><br>
        ─ 최종 흉조 정도: <strong style='color:{tag_color}; font-size:14px;'>{final*100:.1f}%</strong>
    </div>
    """
    return label_data, detail_html


# ──────────────────────────────────────────
# 4. 점집 CSS — 따뜻한 한지·주홍 톤
# ──────────────────────────────────────────
custom_css = """
:root {
    --brand:      #C24536;   /* 따뜻한 주홍 (테라코타) */
    --brand-dark: #9E3528;
    --brand-soft: #E8533D;   /* 더 밝은 주홍 (포인트) */
    --gold:       #D4A93B;   /* 부드러운 금색 */
    --gold-light: #E8C868;
    --paper:      #FFF8E7;   /* 한지색 */
    --paper-warm: #FCEFD3;   /* 더 진한 한지 */
    --ink:        #4A3826;
    --ink-sub:    #7A5C3D;
}

.gradio-container {
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: var(--paper) !important;
    min-height: 100vh !important;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont,
                 'Noto Sans KR', sans-serif !important;
    background-image:
        radial-gradient(circle at 15% 8%, rgba(212,169,59,0.12) 0%, transparent 45%),
        radial-gradient(circle at 85% 92%, rgba(232,83,61,0.08) 0%, transparent 45%);
}
footer { display: none !important; }

/* 한지 위 도장 느낌 헤더 */
.scr-header {
    background: linear-gradient(135deg, #C24536 0%, #9E3528 100%);
    color: white;
    padding: 22px 22px 20px;
    margin-bottom: 14px;
    position: relative;
    border-radius: 0 0 16px 16px;
}
.scr-header::after {
    content: "";
    position: absolute; left: 18px; right: 18px; bottom: -2px; height: 2px;
    background: repeating-linear-gradient(
        90deg, var(--gold) 0, var(--gold) 8px,
        transparent 8px, transparent 14px
    );
}
.scr-header .scr-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1.5px;
    font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif;
}
.scr-header .scr-sub {
    font-size: 12.5px;
    opacity: 0.94;
    margin-top: 5px;
    letter-spacing: 0.3px;
}

/* 진행 표시 */
.progress-dots {
    display: flex;
    gap: 7px;
    margin: 6px 18px 14px;
    justify-content: center;
}
.progress-dot {
    width: 28px;
    height: 5px;
    border-radius: 3px;
    background: #ECDBB0;
}
.progress-dot.active {
    background: var(--gold);
    box-shadow: 0 0 8px rgba(212,169,59,0.5);
}

/* 한지 카드 */
.app-card {
    background: white;
    border-radius: 14px;
    padding: 16px 18px;
    margin: 0 18px 12px;
    border: 1px solid #EEDFB8;
    box-shadow: 0 2px 8px rgba(194,69,54,0.06);
}
.app-card-title {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--brand);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
    font-family: 'Noto Serif KR', serif;
}
.app-card-desc {
    font-size: 12.8px;
    color: var(--ink-sub);
    line-height: 1.7;
}

/* 디스클레이머 — 부적 느낌 */
.disclaimer {
    background: #FFF3DE;
    color: #8B5A2B;
    padding: 11px 14px;
    border-radius: 10px;
    margin: 0 18px 12px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    border: 1.5px dashed #D4A93B;
}

/* 홈 히어로 */
.jeomjip-hero {
    text-align: center;
    padding: 12px 24px 12px;
}
.mudang-svg {
    width: 240px;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
}
.hero-title {
    font-size: 30px;
    font-weight: 900;
    color: var(--brand);
    margin: 14px 0 8px;
    letter-spacing: 3px;
    font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif;
}
.hero-sub {
    font-size: 14px;
    color: var(--ink-sub);
    line-height: 1.75;
    margin-bottom: 4px;
}
.hero-quote {
    color: var(--brand);
    font-weight: 700;
    font-style: italic;
    display: inline-block;
    margin-top: 8px;
}

/* 도장 느낌 주요 버튼 */
button.primary-btn {
    background: var(--brand) !important;
    color: white !important;
    border: none !important;
    padding: 15px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    border-radius: 14px !important;
    min-height: 56px !important;
    margin: 0 18px 10px !important;
    width: calc(100% - 36px) !important;
    letter-spacing: 2.5px !important;
    box-shadow: 0 4px 0 var(--brand-dark),
                0 6px 12px rgba(194,69,54,0.18) !important;
    font-family: 'Noto Serif KR', serif !important;
    transition: all 0.15s !important;
}
button.primary-btn:hover {
    background: var(--brand-soft) !important;
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--brand-dark),
                0 3px 6px rgba(194,69,54,0.18) !important;
}

/* 종이 느낌 보조 버튼 */
button.secondary-btn {
    background: white !important;
    color: var(--brand) !important;
    border: 2px solid var(--brand) !important;
    padding: 13px !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    border-radius: 14px !important;
    min-height: 50px !important;
    margin: 0 18px 10px !important;
    width: calc(100% - 36px) !important;
    letter-spacing: 1.5px !important;
    font-family: 'Noto Serif KR', serif !important;
}
button.secondary-btn:hover {
    background: #FFF3DE !important;
}

.row-buttons button { width: 100% !important; margin: 0 !important; }
.row-buttons { padding: 0 18px 10px; gap: 10px !important; }

label, .label, .gradio-container label { color: var(--ink) !important; }
"""

# ──────────────────────────────────────────
# 5. 친근한 무당 SVG — 미소 띤 표정
# ──────────────────────────────────────────
MUDANG_SVG = """
<svg class="mudang-svg" viewBox="0 0 260 230" xmlns="http://www.w3.org/2000/svg">
    <!-- 부적 점 (배경 장식) -->
    <circle cx="30" cy="40" r="3" fill="#D4A93B" opacity="0.4"/>
    <circle cx="240" cy="60" r="2.5" fill="#D4A93B" opacity="0.4"/>
    <circle cx="20" cy="180" r="2" fill="#C24536" opacity="0.3"/>

    <!-- 깃대 -->
    <line x1="55" y1="30" x2="55" y2="210" stroke="#7A4F2A" stroke-width="5" stroke-linecap="round"/>
    <circle cx="55" cy="30" r="6" fill="#D4A93B" stroke="#A8821A" stroke-width="0.6"/>

    <!-- 만자 깃발 (부드러운 빨강) -->
    <path d="M 55 38 L 142 38 L 130 65 L 142 92 L 55 92 Z"
          fill="#C24536" stroke="#9E3528" stroke-width="1"/>
    <text x="92" y="76" text-anchor="middle" fill="#FFF3DE"
          font-size="34" font-weight="bold" font-family="serif">卍</text>
    <!-- 깃발 바람 휘날림 표시 -->
    <path d="M 55 92 Q 60 96 55 100" stroke="#9E3528" stroke-width="1.5" fill="none"/>

    <!-- 그림자 -->
    <ellipse cx="175" cy="210" rx="42" ry="5" fill="#4A3826" opacity="0.13"/>

    <!-- 한복 치마 (밝은 주홍) -->
    <path d="M 138 138 Q 175 132 212 138 L 222 205 Q 175 211 128 205 Z"
          fill="#E8533D" stroke="#9E3528" stroke-width="1"/>
    <!-- 치마 무늬 (꽃잎) -->
    <circle cx="155" cy="175" r="2.5" fill="#D4A93B"/>
    <circle cx="175" cy="185" r="2.5" fill="#D4A93B"/>
    <circle cx="195" cy="172" r="2.5" fill="#D4A93B"/>
    <path d="M 140 195 Q 175 192 210 195" stroke="#D4A93B" stroke-width="1.2" fill="none" opacity="0.6"/>

    <!-- 금색 띠 -->
    <rect x="133" y="130" width="84" height="10" fill="#D4A93B" rx="1"/>
    <rect x="133" y="130" width="84" height="10" fill="none" stroke="#A8821A" stroke-width="0.5" rx="1"/>

    <!-- 저고리 (따뜻한 흰색) -->
    <path d="M 143 95 Q 175 90 207 95 L 210 132 L 140 132 Z"
          fill="#FFF8E7" stroke="#7A4F2A" stroke-width="1"/>
    <!-- 저고리 깃 (주홍) -->
    <path d="M 165 95 L 175 112 L 185 95" fill="#E8533D" stroke="#C24536" stroke-width="1.5" stroke-linejoin="round"/>

    <!-- 왼팔 (깃대 잡기) -->
    <path d="M 143 105 Q 100 100 65 65" stroke="#FFF8E7" stroke-width="12"
          fill="none" stroke-linecap="round"/>
    <path d="M 143 105 Q 100 100 65 65" stroke="#7A4F2A" stroke-width="1"
          fill="none" stroke-linecap="round" opacity="0.25"/>
    <circle cx="63" cy="65" r="7" fill="#F5C9A0" stroke="#7A4F2A" stroke-width="0.8"/>

    <!-- 오른팔 (반갑게 들기) -->
    <path d="M 205 105 Q 230 105 235 125" stroke="#FFF8E7" stroke-width="12"
          fill="none" stroke-linecap="round"/>
    <path d="M 205 105 Q 230 105 235 125" stroke="#7A4F2A" stroke-width="1"
          fill="none" stroke-linecap="round" opacity="0.25"/>
    <!-- 손 흔드는 모양 -->
    <circle cx="237" cy="128" r="7" fill="#F5C9A0" stroke="#7A4F2A" stroke-width="0.8"/>
    <!-- 손가락 표시 -->
    <line x1="235" y1="122" x2="234" y2="118" stroke="#7A4F2A" stroke-width="1" stroke-linecap="round"/>
    <line x1="240" y1="122" x2="241" y2="118" stroke="#7A4F2A" stroke-width="1" stroke-linecap="round"/>

    <!-- 얼굴 (둥글고 따뜻하게) -->
    <ellipse cx="175" cy="73" rx="22" ry="24" fill="#F5C9A0" stroke="#7A4F2A" stroke-width="1"/>

    <!-- 머리카락 -->
    <path d="M 153 64 Q 153 42 175 40 Q 197 42 197 64 Q 197 58 192 53 L 158 53 Q 153 58 153 64 Z"
          fill="#3A2415"/>
    <!-- 비녀 -->
    <line x1="190" y1="51" x2="208" y2="40" stroke="#D4A93B" stroke-width="2.8" stroke-linecap="round"/>
    <circle cx="208" cy="40" r="3" fill="#D4A93B" stroke="#A8821A" stroke-width="0.5"/>

    <!-- 이마 점 (작은 빨간점, 부적 의미) -->
    <circle cx="175" cy="63" r="2.4" fill="#C24536"/>

    <!-- 웃는 눈 (반달 모양) -->
    <path d="M 165 74 Q 168 71 171 74" stroke="#3A2415" stroke-width="2"
          fill="none" stroke-linecap="round"/>
    <path d="M 179 74 Q 182 71 185 74" stroke="#3A2415" stroke-width="2"
          fill="none" stroke-linecap="round"/>

    <!-- 입 (웃는 입) -->
    <path d="M 168 83 Q 175 88 182 83" stroke="#9E3528" stroke-width="2"
          fill="none" stroke-linecap="round"/>

    <!-- 볼터치 (분홍) -->
    <ellipse cx="159" cy="79" rx="3.5" ry="2.5" fill="#E89090" opacity="0.55"/>
    <ellipse cx="191" cy="79" rx="3.5" ry="2.5" fill="#E89090" opacity="0.55"/>
</svg>
"""

# ──────────────────────────────────────────
# 6. UI — 5개 화면
# ──────────────────────────────────────────
with gr.Blocks(css=custom_css, title="우리 동네 점집",
               theme=gr.themes.Soft(primary_hue="red")) as demo:

    # =============== 화면 1: 홈 ===============
    with gr.Column(visible=True) as home_screen:
        gr.HTML(f"""
        <div class="scr-header">
            <div class="scr-title">우리 동네 점집</div>
            <div class="scr-sub">그로센딕 · AI 무당이 봐주는 점(點) 점(占)</div>
        </div>
        <div class="disclaimer">⚠️ 교육용 도구 · 의료 진단 대체 불가</div>
        <div class="jeomjip-hero">
            {MUDANG_SVG}
            <div class="hero-title">점 보러 오셨소</div>
            <div class="hero-sub">
                "어서 오시오, 손님.<br>
                그 점, 무당이 봐드리리다."<br>
                <span class="hero-quote">— AI 무당 5명이 합심하여 점괘를 풉니다</span>
            </div>
        </div>
        """)
        start_btn      = gr.Button("🔮  점견적 보기",  elem_classes="primary-btn")
        info_from_home = gr.Button("📜  점이란?",      elem_classes="secondary-btn")

    # =============== 화면 2: 운수 확인 (문진) ===============
    with gr.Column(visible=False) as questionnaire_screen:
        gr.HTML("""
        <div class="scr-header">
            <div class="scr-title">📋 운수(運數) 확인</div>
            <div class="scr-sub">1 / 3 · 점괘 풀기 전 사주 묻기</div>
        </div>
        <div class="progress-dots">
            <div class="progress-dot active"></div>
            <div class="progress-dot"></div>
            <div class="progress-dot"></div>
        </div>
        <div class="app-card">
            <div class="app-card-title">— 무당의 첫 질문 —</div>
            <div class="app-card-desc">사주를 알아야 점이 더 정확하다오. 솔직하게 답해주시오.</div>
        </div>
        """)
        with gr.Column(elem_classes="app-card"):
            age = gr.Slider(0, 80, value=30, step=1, label="🎂 손님 나이는 어찌 되시오?",
                            info="흑색종은 나이가 들수록 발생 빈도가 높아진다오")
            family = gr.Radio(["아니오", "예"], value="아니오",
                              label="👨‍👩‍👧 집안에 흑색종 가진 분이 있소?",
                              info="부모·형제 기준")
            mole_change = gr.Radio(["아니오", "예"], value="아니오",
                                   label="🔄 그 점이 최근 변(變)했소?",
                                   info="크기·색·모양 변화 (최근 6개월 이내)")
        with gr.Row(elem_classes="row-buttons"):
            q_back = gr.Button("← 돌아가기",       elem_classes="secondary-btn")
            q_next = gr.Button("점 보여주오  →",   elem_classes="primary-btn")

    # =============== 화면 3: 점 사진 ===============
    with gr.Column(visible=False) as photo_screen:
        gr.HTML("""
        <div class="scr-header">
            <div class="scr-title">📸 점(點) 사진</div>
            <div class="scr-sub">2 / 3 · 무당에게 점을 보여주오</div>
        </div>
        <div class="progress-dots">
            <div class="progress-dot active"></div>
            <div class="progress-dot active"></div>
            <div class="progress-dot"></div>
        </div>
        <div class="app-card">
            <div class="app-card-title">— 점을 가까이 비추시오 —</div>
            <div class="app-card-desc">밝은 곳에서, 점이 화면에 가득 차게 찍어주시오. 카메라로 찍거나 갤러리에서 골라도 좋소.</div>
        </div>
        """)
        image_input = gr.Image(sources=["upload", "webcam"], type="numpy",
                               label="", show_label=False, height=300)
        with gr.Row(elem_classes="row-buttons"):
            p_back   = gr.Button("← 돌아가기",       elem_classes="secondary-btn")
            analyze  = gr.Button("🔮  점괘 보기",    elem_classes="primary-btn")

    # =============== 화면 4: 점괘 (결과) ===============
    with gr.Column(visible=False) as result_screen:
        gr.HTML("""
        <div class="scr-header">
            <div class="scr-title">🔮 오늘의 점괘</div>
            <div class="scr-sub">3 / 3 · 무당의 풀이</div>
        </div>
        <div class="progress-dots">
            <div class="progress-dot active"></div>
            <div class="progress-dot active"></div>
            <div class="progress-dot active"></div>
        </div>
        """)
        with gr.Column(elem_classes="app-card"):
            result_label  = gr.Label(label="", show_label=False, num_top_classes=2)
            result_detail = gr.HTML()
        gr.HTML('<div class="disclaimer">참고용 점괘일 뿐, 진짜 진단은 피부과 전문의에게 받으시오.</div>')
        with gr.Row(elem_classes="row-buttons"):
            again_btn        = gr.Button("🔄 다시 점치기",  elem_classes="primary-btn")
            info_from_result = gr.Button("📜 점이란?",      elem_classes="secondary-btn")

    # =============== 화면 5: 점이란 (정보) ===============
    with gr.Column(visible=False) as info_screen:
        gr.HTML("""
        <div class="scr-header">
            <div class="scr-title">📜 점이란 무엇이오?</div>
            <div class="scr-sub">알아두면 좋은 의학 이야기</div>
        </div>
        """)
        with gr.Column(elem_classes="app-card"):
            with gr.Accordion("🔍 흑색종이란?", open=True):
                gr.Markdown(
                    "**흑색종(Melanoma)** 은 피부의 멜라노사이트(색소 세포)가 "
                    "악성 변화한 암이오. 다른 피부암보다 발생 빈도는 낮지만 "
                    "**전이가 빨라 가장 공격적**이라 조기 발견이 중요하다오."
                )
            with gr.Accordion("📐 ABCDE 규칙 — 자가 검진"):
                gr.Markdown(
                    "- **A**symmetry — 비대칭\n"
                    "- **B**order — 들쭉날쭉한 경계\n"
                    "- **C**olor — 한 점에 여러 색\n"
                    "- **D**iameter — 6mm 이상\n"
                    "- **E**volving — 변화\n\n"
                    "여러 항목 해당 시 피부과 진료가 답이외다."
                )
            with gr.Accordion("🇰🇷 한국인이 알아야 할 것"):
                gr.Markdown(
                    "한국인 흑색종의 **30~50%** 는 **말단흑색점 흑색종**(손바닥·발바닥·손톱) "
                    "형태라네. 자외선과 무관하며 단순 점처럼 보여 늦게 발견되는 경우가 많소."
                )
            with gr.Accordion("🏥 병원에 가야 할 때"):
                gr.Markdown(
                    "- 점이 변할 때 (크기·색·모양)\n"
                    "- 점에서 출혈\n"
                    "- 가렵거나 통증\n"
                    "- 손·발바닥에 새로운 점\n"
                    "- 가족 중 흑색종 환자 있음\n\n"
                    "→ **피부과 전문의** 진료가 정답이오."
                )
        info_back = gr.Button("← 점집으로", elem_classes="secondary-btn")

    # ──────────────────────────────────────────
    # 7. 화면 전환 로직
    # ──────────────────────────────────────────
    all_screens = [home_screen, questionnaire_screen, photo_screen,
                   result_screen, info_screen]

    def goto(screen_name):
        order = ["home", "questionnaire", "photo", "result", "info"]
        return [gr.update(visible=(s == screen_name)) for s in order]

    start_btn.click(       fn=lambda: goto("questionnaire"), outputs=all_screens)
    info_from_home.click(  fn=lambda: goto("info"),          outputs=all_screens)
    q_back.click(          fn=lambda: goto("home"),          outputs=all_screens)
    q_next.click(          fn=lambda: goto("photo"),         outputs=all_screens)
    p_back.click(          fn=lambda: goto("questionnaire"), outputs=all_screens)
    again_btn.click(       fn=lambda: goto("home"),          outputs=all_screens)
    info_from_result.click(fn=lambda: goto("info"),          outputs=all_screens)
    info_back.click(       fn=lambda: goto("home"),          outputs=all_screens)

    # AI 점괘 → 결과 화면
    def analyze_and_show(image, age_v, family_v, mole_change_v):
        if image is None:
            return goto("photo") + [None, "<div class='disclaimer'>먼저 점 사진을 보여주오</div>"]
        label, detail = predict_with_questionnaire(image, age_v, family_v, mole_change_v)
        return goto("result") + [label, detail]

    analyze.click(
        fn=analyze_and_show,
        inputs=[image_input, age, family, mole_change],
        outputs=all_screens + [result_label, result_detail],
    )

demo.launch()