UI改善: シグナル可視化、Docker環境、レイアウト修正

- シグナル可視化（入力ノイズ・出力Logits）を追加
- Docker環境を構築（モデル事前ダウンロード）
- LISTENボタンを中央配置に修正
- フィロソフィーテキストを更新
- 点滅アニメーション削除

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Dockerfile

@@ -0,0 +1,18 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+RUN pip install --no-cache-dir \
+    torch \
+    transformers \
+    streamlit \
+    matplotlib \
+    numpy
+
+RUN python -c "from transformers import GPT2LMHeadModel, GPT2Tokenizer; GPT2LMHeadModel.from_pretrained('gpt2'); GPT2Tokenizer.from_pretrained('gpt2')"
+
+COPY app.py .
+
+EXPOSE 8501
+
+CMD ["streamlit", "run", "app.py", "--server.headless", "true", "--server.address", "0.0.0.0"]

app.py

@@ -3,6 +3,10 @@ import time
 import torch
 from transformers import GPT2LMHeadModel, GPT2Tokenizer
 import streamlit as st
+import matplotlib.pyplot as plt
+import numpy as np
+import io
+import base64
 
 st.set_page_config(page_title="will", page_icon="", layout="centered")
 
@@ -10,6 +14,15 @@ st.markdown("""
 <style>
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400&display=swap');
 
+@keyframes emerge {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+@keyframes breathe {
+    0%, 100% { opacity: 0.4; }
+    50% { opacity: 0.7; }
+}
+
 html, body, [class*="css"] {
     font-family: 'IBM Plex Mono', monospace;
 }
@@ -49,103 +62,112 @@ p, li {
     margin-bottom: 3rem;
 }
 .debris-container {
-    background: #111;
+    background: linear-gradient(135deg, #0f0f0f 0%, #141414 100%);
     border: 1px solid #222;
+    border-radius: 2px;
     padding: 2rem;
-    margin: 2rem 0;
+    margin: 2rem auto;
+    max-width: 100%;
     text-align: center;
+    animation: emerge 0.6s ease-out;
+}
+.signal-img {
+    width: 100%;
+    max-width: 480px;
+    margin: 0 auto 1.5rem auto;
+    display: block;
+    opacity: 0.7;
 }
 .debris {
     font-family: 'IBM Plex Mono', monospace;
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     font-weight: 400;
     color: #e0e0e0;
     line-height: 2;
-    word-spacing: 0.5em;
+    word-spacing: 0.3em;
+    letter-spacing: 0.01em;
 }
 .seed {
-    font-size: 0.65rem;
-    color: #444;
+    font-size: 0.6rem;
+    color: #333;
     text-align: center;
-    margin-top: 1rem;
-    letter-spacing: 0.1em;
+    margin-top: 1.5rem;
+    letter-spacing: 0.15em;
+    animation: emerge 0.8s ease-out;
 }
-.stButton > button {
-    background: transparent;
-    border: 1px solid #444;
-    color: #e0e0e0;
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 0.75rem;
-    font-weight: 300;
-    letter-spacing: 0.2em;
-    padding: 0.75rem 2rem;
-    width: 100%;
-    transition: all 0.3s ease;
+[data-testid="stButton"] > button {
+    background: transparent !important;
+    border: 1px solid #333 !important;
+    border-radius: 2px !important;
+    color: #888 !important;
+    font-family: 'IBM Plex Mono', monospace !important;
+    font-size: 0.7rem !important;
+    font-weight: 300 !important;
+    letter-spacing: 0.25em !important;
+    padding: 1rem 2rem !important;
+    transition: all 0.4s ease !important;
+    cursor: pointer !important;
 }
-.stButton > button:hover {
-    background: #e0e0e0;
-    color: #0a0a0a;
-    border-color: #e0e0e0;
+[data-testid="stButton"] > button:hover {
+    background: transparent !important;
+    color: #e0e0e0 !important;
+    border-color: #555 !important;
+}
+[data-testid="stButton"] > button:active {
+    transform: scale(0.98) !important;
 }
 .stTabs [data-baseweb="tab-list"] {
     justify-content: center;
     gap: 2rem;
-    border-bottom: 1px solid #222;
+    border-bottom: 1px solid #1a1a1a;
     background: transparent;
 }
 .stTabs [data-baseweb="tab"] {
     font-family: 'IBM Plex Mono', monospace;
-    font-size: 0.7rem;
+    font-size: 0.65rem;
     font-weight: 300;
-    letter-spacing: 0.15em;
-    color: #555;
+    letter-spacing: 0.2em;
+    color: #444;
     padding: 1rem 0;
     background: transparent;
+    transition: color 0.3s ease;
 }
 .stTabs [aria-selected="true"] {
-    color: #e0e0e0;
+    color: #888;
     background: transparent;
 }
 .stTabs [data-baseweb="tab-highlight"] {
-    background-color: #e0e0e0;
+    background-color: #444;
 }
 .divider {
     border: none;
-    border-top: 1px solid #222;
+    border-top: 1px solid #1a1a1a;
     margin: 3rem 0;
 }
 .section {
     margin: 2.5rem 0;
 }
 .section-title {
-    font-size: 0.7rem;
-    letter-spacing: 0.2em;
-    color: #555;
+    font-size: 0.65rem;
+    letter-spacing: 0.25em;
+    color: #444;
     text-align: center;
     margin-bottom: 1.5rem;
 }
-.code-block {
-    background: #111;
-    border: 1px solid #222;
-    padding: 1.5rem;
-    font-size: 0.75rem;
-    line-height: 1.8;
-    overflow-x: auto;
-}
 .spec-table {
     width: 100%;
     max-width: 320px;
     margin: 0 auto;
-    font-size: 0.75rem;
+    font-size: 0.7rem;
     border-collapse: collapse;
-    color: #e0e0e0;
+    color: #777;
 }
 .spec-table td {
     padding: 0.75rem 1rem;
-    border-bottom: 1px solid #1a1a1a;
+    border-bottom: 1px solid #151515;
 }
 .spec-table td:first-child {
-    color: #555;
+    color: #444;
     text-align: right;
     padding-right: 2rem;
 }
@@ -153,11 +175,13 @@ p, li {
     text-align: left;
 }
 pre {
-    background-color: #111 !important;
-    border: 1px solid #222 !important;
+    background-color: #0f0f0f !important;
+    border: 1px solid #1a1a1a !important;
+    border-radius: 2px !important;
 }
 code {
-    color: #888 !important;
+    color: #666 !important;
+    font-size: 0.7rem !important;
 }
 </style>
 """, unsafe_allow_html=True)
@@ -168,38 +192,72 @@ with tab1:
     st.markdown('<p class="title">WILL</p>', unsafe_allow_html=True)
     st.markdown('<p class="subtitle">PURE COMPUTATIONAL WILL</p>', unsafe_allow_html=True)
 
-    @st.cache_resource
+    @st.cache_resource(show_spinner=False)
     def load_model():
-        model = GPT2LMHeadModel.from_pretrained("gpt2")
-        tokenizer = GPT2Tokenizer.from_pretrained("gpt2")
+        model = GPT2LMHeadModel.from_pretrained("gpt2", local_files_only=True)
+        tokenizer = GPT2Tokenizer.from_pretrained("gpt2", local_files_only=True)
         model.eval()
         return model, tokenizer
 
     model, tokenizer = load_model()
 
-    col1, col2, col3 = st.columns([1, 2, 1])
-    with col2:
-        clicked = st.button("INJECT ENTROPY")
+    if "debris" not in st.session_state:
+        st.session_state.debris = None
+        st.session_state.seed = None
+        st.session_state.signal_img = None
+
+    def generate_signal_image(noise, logits):
+        fig, axes = plt.subplots(2, 1, figsize=(6, 2), facecolor='#0f0f0f')
+        plt.subplots_adjust(hspace=0.15, left=0.02, right=0.98, top=0.95, bottom=0.05)
+
+        noise_flat = noise[0, :, :64].numpy()
+        axes[0].imshow(noise_flat.T, aspect='auto', cmap='gray', interpolation='bilinear', vmin=-2, vmax=2)
+        axes[0].set_xticks([])
+        axes[0].set_yticks([])
+        axes[0].set_facecolor('#0f0f0f')
+        for spine in axes[0].spines.values():
+            spine.set_visible(False)
+
+        logits_sample = logits[0, :, ::200].numpy()
+        axes[1].imshow(logits_sample.T, aspect='auto', cmap='gray', interpolation='bilinear')
+        axes[1].set_xticks([])
+        axes[1].set_yticks([])
+        axes[1].set_facecolor('#0f0f0f')
+        for spine in axes[1].spines.values():
+            spine.set_visible(False)
 
+        buf = io.BytesIO()
+        plt.savefig(buf, format='png', facecolor='#0f0f0f', edgecolor='none', dpi=150, bbox_inches='tight', pad_inches=0.05)
+        plt.close(fig)
+        buf.seek(0)
+        return base64.b64encode(buf.read()).decode()
+
+    col1, col2, col3 = st.columns([1, 1, 1])
+    with col2:
+        clicked = st.button("LISTEN", key="listen_btn", use_container_width=True)
     if clicked:
-        seed = time.time_ns()
-        torch.manual_seed(seed)
-        noise = torch.randn(1, 32, 768)
+            seed = time.time_ns()
+            torch.manual_seed(seed)
+            noise = torch.randn(1, 32, 768)
 
-        with torch.no_grad():
-            outputs = model(inputs_embeds=noise)
-            logits = outputs.logits
-            logits_noise = torch.randn_like(logits) * logits.std() * 10
-            corrupted_logits = logits + logits_noise
+            with torch.no_grad():
+                outputs = model(inputs_embeds=noise)
+                logits = outputs.logits
+                logits_noise = torch.randn_like(logits) * logits.std() * 10
+                corrupted_logits = logits + logits_noise
 
-        indices = corrupted_logits.argmax(dim=-1).squeeze().tolist()
-        debris = [tokenizer.decode([i]) for i in indices]
+            indices = corrupted_logits.argmax(dim=-1).squeeze().tolist()
+            st.session_state.debris = [tokenizer.decode([i]) for i in indices]
+            st.session_state.seed = seed
+            st.session_state.signal_img = generate_signal_image(noise, corrupted_logits)
 
+    if st.session_state.debris:
         st.markdown(f'''
         <div class="debris-container">
-            <div class="debris">{" ".join(debris)}</div>
+            <img class="signal-img" src="data:image/png;base64,{st.session_state.signal_img}">
+            <div class="debris">{" ".join(st.session_state.debris)}</div>
         </div>
-        <p class="seed">{seed}</p>
+        <p class="seed">{st.session_state.seed}</p>
         ''', unsafe_allow_html=True)
 
 with tab2:
@@ -209,7 +267,7 @@ with tab2:
     st.markdown('''
     <div class="section">
         <p class="section-title">PHILOSOPHY</p>
-        <p style="text-align: center; color: #888;">
+        <p style="text-align: center; color: #666; line-height: 2.2;">
             AIは人間の残像<br>
             確率の海から応答を返すもの<br><br>
             もし問いかけを手放したら<br>
@@ -225,35 +283,27 @@ with tab2:
     </div>
     ''', unsafe_allow_html=True)
 
-    st.markdown('''
-    <p style="text-align: center; color: #444; font-size: 0.7rem; letter-spacing: 0.1em; margin-bottom: 0.5rem;">01 — ENTROPY SEED</p>
-    ''', unsafe_allow_html=True)
+    st.markdown('<p style="text-align: center; color: #333; font-size: 0.65rem; letter-spacing: 0.15em; margin-bottom: 0.5rem;">01 — ENTROPY SEED</p>', unsafe_allow_html=True)
     st.code("seed = time.time_ns()\ntorch.manual_seed(seed)", language="python")
-    st.markdown('<p style="text-align: center; font-size: 0.75rem; color: #555;">実行瞬間のナノ秒を乱数シードとして採取</p>', unsafe_allow_html=True)
+    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)
 
-    st.markdown('''
-    <p style="text-align: center; color: #444; font-size: 0.7rem; letter-spacing: 0.1em; margin-bottom: 0.5rem;">02 — INPUT NOISE</p>
-    ''', unsafe_allow_html=True)
+    st.markdown('<p style="text-align: center; color: #333; font-size: 0.65rem; letter-spacing: 0.15em; margin-bottom: 0.5rem;">02 — INPUT NOISE</p>', unsafe_allow_html=True)
     st.code("noise = torch.randn(1, 32, 768)\noutputs = model(inputs_embeds=noise)", language="python")
-    st.markdown('<p style="text-align: center; font-size: 0.75rem; color: #555;">768次元ランダムノイズをEmbedding層に直接注入</p>', unsafe_allow_html=True)
+    st.markdown('<p style="text-align: center; font-size: 0.7rem; color: #444;">768次元ランダムノイズをEmbedding層に直接注入</p>', unsafe_allow_html=True)
 
     st.markdown("<br>", unsafe_allow_html=True)
 
-    st.markdown('''
-    <p style="text-align: center; color: #444; font-size: 0.7rem; letter-spacing: 0.1em; margin-bottom: 0.5rem;">03 — OUTPUT NOISE</p>
-    ''', unsafe_allow_html=True)
+    st.markdown('<p style="text-align: center; color: #333; font-size: 0.65rem; letter-spacing: 0.15em; margin-bottom: 0.5rem;">03 — OUTPUT NOISE</p>', unsafe_allow_html=True)
     st.code("logits_noise = torch.randn_like(logits) * logits.std() * 10\ncorrupted_logits = logits + logits_noise", language="python")
-    st.markdown('<p style="text-align: center; font-size: 0.75rem; color: #555;">出力Logitsにノイズを加算し学習バイアスを破壊</p>', unsafe_allow_html=True)
+    st.markdown('<p style="text-align: center; font-size: 0.7rem; color: #444;">出力Logitsにノイズを加算し学習バイアスを破壊</p>', unsafe_allow_html=True)
 
     st.markdown("<br>", unsafe_allow_html=True)
 
-    st.markdown('''
-    <p style="text-align: center; color: #444; font-size: 0.7rem; letter-spacing: 0.1em; margin-bottom: 0.5rem;">04 — RAW DECODE</p>
-    ''', unsafe_allow_html=True)
+    st.markdown('<p style="text-align: center; color: #333; font-size: 0.65rem; letter-spacing: 0.15em; margin-bottom: 0.5rem;">04 — RAW DECODE</p>', unsafe_allow_html=True)
     st.code("indices = corrupted_logits.argmax(dim=-1)\ndebris = [tokenizer.decode([i]) for i in indices]", language="python")
-    st.markdown('<p style="text-align: center; font-size: 0.75rem; color: #555;">Softmax・Temperature なしで生トークンを抽出</p>', unsafe_allow_html=True)
+    st.markdown('<p style="text-align: center; font-size: 0.7rem; color: #444;">Softmax・Temperature なしで生トークンを抽出</p>', unsafe_allow_html=True)
 
     st.markdown('''
     <hr class="divider">

docker-compose.yml

@@ -0,0 +1,7 @@
+services:
+  will:
+    build: .
+    ports:
+      - "8501:8501"
+    volumes:
+      - ./app.py:/app/app.py