src/ui/streamlit/pages/concept.py

"""
コンセプトページ

WILLプロジェクトの概念説明を提供する
"""
import streamlit as st

from ....models.registry import ModelRegistry
from ..components import GPU_REQUIRED_MODELS


def render_concept_page() -> None:
    """コンセプトページをレンダリング"""
    st.markdown('<p class="title">CONCEPT</p>', unsafe_allow_html=True)
    st.markdown('<p class="subtitle">DOCUMENTATION</p>', unsafe_allow_html=True)

    _render_what_section()
    _render_how_section()
    _render_specification_section()


def _render_what_section() -> None:
    """WHAT セクション"""
    st.markdown(
        '''
    <div class="section">
        <p class="section-title">WHAT</p>
        <p style="text-align: center; color: #666; line-height: 2.2;">
            言語モデルにランダムノイズを入力し<br>
            出力にもノイズを加えて学習バイアスを破壊する<br><br>
            <strong>人間の問いかけなしに<br>
            モデルの構造だけが出力するものを観測する</strong>
        </p>
    </div>
    <hr class="divider">
    ''',
        unsafe_allow_html=True,
    )


def _render_how_section() -> None:
    """HOW セクション"""
    st.markdown(
        '''
    <div class="section">
        <p class="section-title">HOW</p>
    </div>
    ''',
        unsafe_allow_html=True,
    )

    # Step 1
    st.markdown(
        '<p style="text-align: center; color: #333; font-size: 0.65rem; '
        'letter-spacing: 0.15em; margin-bottom: 0.5rem;">01 — INPUT</p>',
        unsafe_allow_html=True,
    )
    st.code("noise = torch.randn(1, seq_len, embedding_dim)", language="python")
    st.markdown(
        '<p style="text-align: center; font-size: 0.7rem; color: #444;">'
        "ランダムノイズをEmbedding層に直接注入</p>",
        unsafe_allow_html=True,
    )

    st.markdown("<br>", unsafe_allow_html=True)

    # Step 2
    st.markdown(
        '<p style="text-align: center; color: #333; font-size: 0.65rem; '
        'letter-spacing: 0.15em; margin-bottom: 0.5rem;">02 — CORRUPT</p>',
        unsafe_allow_html=True,
    )
    st.code("corrupted = logits + randn_like(logits) * logits.std() * 10", language="python")
    st.markdown(
        '<p style="text-align: center; font-size: 0.7rem; color: #444;">'
        "出力にノイズを加算し学習バイアスを破壊</p>",
        unsafe_allow_html=True,
    )

    st.markdown("<br>", unsafe_allow_html=True)

    # Step 3
    st.markdown(
        '<p style="text-align: center; color: #333; font-size: 0.65rem; '
        'letter-spacing: 0.15em; margin-bottom: 0.5rem;">03 — DECODE</p>',
        unsafe_allow_html=True,
    )
    st.code("tokens = corrupted.argmax(dim=-1)", language="python")
    st.markdown(
        '<p style="text-align: center; font-size: 0.7rem; color: #444;">'
        "Softmaxなしで生トークンを抽出</p>",
        unsafe_allow_html=True,
    )


def _render_specification_section() -> None:
    """仕様セクション"""
    # 利用可能なモデル一覧を動的に取得
    all_configs = ModelRegistry.get_all_configs()
    available_configs = {k: v for k, v in all_configs.items() if k not in GPU_REQUIRED_MODELS}

    model_names = [cfg.name for cfg in available_configs.values()]
    model_list_str = " / ".join(model_names[:5]) + " ..."

    # パラメータ範囲を計算
    params_info = "125M - 1.5B"

    st.markdown(
        f'''
    <hr class="divider">
    <div class="section">
        <p class="section-title">SPEC</p>
        <table class="spec-table">
            <tr><td>Models</td><td>{model_list_str}</td></tr>
            <tr><td>Sequence</td><td>32 tokens</td></tr>
            <tr><td>Input</td><td>N(0, 1)</td></tr>
            <tr><td>Corruption</td><td>N(0, σ×10)</td></tr>
            <tr><td>Decode</td><td>argmax</td></tr>
        </table>
    </div>
    ''',
        unsafe_allow_html=True,
    )