Upload main_app.py

main_app.py

@@ -12,12 +12,21 @@ import streamlit.components.v1 as components
 import requests
 from dotenv import load_dotenv
 from contextlib import contextmanager
-from huggingface_hub import whoami
+from urllib.parse import urlencode
 
 # --- HFユーザーIDによる永続ストレージ管理 ---
 import json
 import uuid
 
+# --- 定数と環境変数の設定 ---
+HF_ENDPOINT = "https://huggingface.co"
+
+# README.mdで hf_oauth: true を設定すると、以下の環境変数が自動的に設定される
+CLIENT_ID = os.environ.get("OAUTH_CLIENT_ID")
+CLIENT_SECRET = os.environ.get("OAUTH_CLIENT_SECRET")
+SPACE_ID = os.environ.get("SPACE_ID")
+
+
 st.set_page_config(
         page_title="麻理プロジェクト", page_icon="🤖",
         layout="centered", initial_sidebar_state="auto"
@@ -28,76 +37,46 @@ st.set_page_config(
 USER_DATA_DIR = "/mnt/data/mari_users"
 os.makedirs(USER_DATA_DIR, exist_ok=True)
 
-# ローカルストレージ操作用JavaScript
-def get_local_storage_js():
-    return """
-    <script>
-    // ローカルストレージからトークンを取得
-    function getStoredToken() {
-        return localStorage.getItem('hf_token') || '';
-    }
-    
-    // ローカルストレージにトークンを保存
-    function saveToken(token) {
-        if (token) {
-            localStorage.setItem('hf_token', token);
-        } else {
-            localStorage.removeItem('hf_token');
-        }
-    }
-    
-    // ローカルストレージをクリア
-    function clearStorage() {
-        localStorage.removeItem('hf_token');
-        localStorage.removeItem('hf_user');
-    }
-    
-    // ユーザー情報を保存
-    function saveUser(userInfo) {
-        localStorage.setItem('hf_user', JSON.stringify(userInfo));
-    }
-    
-    // ユーザー情報を取得
-    function getStoredUser() {
-        const user = localStorage.getItem('hf_user');
-        return user ? JSON.parse(user) : null;
-    }
-    
-    // Streamlitにメッセージを送信
-    function sendToStreamlit(type, data) {
-        window.parent.postMessage({
-            type: type,
-            data: data
-        }, '*');
-    }
-    
-    // ページ読み込み時に保存されたトークンを確認
-    window.addEventListener('load', function() {
-        const token = getStoredToken();
-        const user = getStoredUser();
-        
-        if (token && user) {
-            sendToStreamlit('stored_auth', {token: token, user: user});
-        }
-    });
-    </script>
-    """
 
-# JavaScript実行用コンポーネント
-def execute_js(js_code):
-    components.html(f"""
-    <script>
-    {js_code}
-    </script>
-    """, height=0)
-
-# トークン検証関数
-def verify_hf_token(token):
+def get_redirect_uri():
+    """リダイレクトURIを動的に生成する"""
+    if SPACE_ID:
+        return f"https://huggingface.co/spaces/{SPACE_ID}"
+    else:
+        # ローカル開発用のフォールバック（必要に応じて変更）
+        # st.query_paramsはローカルではうまく機能しない場合がある
+        return "http://localhost:8501"
+
+def get_hf_token(code: str, redirect_uri: str) -> dict | None:
+    """認可コード(code)をアクセストークンに交換する"""
+    url = f"{HF_ENDPOINT}/oauth/token"
+    payload = {
+        "grant_type": "authorization_code",
+        "code": code,
+        "redirect_uri": redirect_uri,
+        "client_id": CLIENT_ID,
+        "client_secret": CLIENT_SECRET,
+    }
     try:
-        user_info = whoami(token)
-        return True, user_info
-    except Exception as e:
-        return False, str(e)
+        response = requests.post(url, data=payload)
+        response.raise_for_status() # エラーがあれば例外を発生
+        return response.json()
+    except requests.exceptions.RequestException as e:
+        st.error(f"トークンの取得に失敗しました: {e}")
+        return None
+
+def get_user_info(access_token: str) -> dict | None:
+    """アクセストークンを使ってユーザー情報を取得する"""
+    url = f"{HF_ENDPOINT}/api/whoami"
+    headers = {"Authorization": f"Bearer {access_token}"}
+    try:
+        response = requests.get(url, headers=headers)
+        response.raise_for_status()
+        return response.json()
+    except requests.exceptions.RequestException as e:
+        st.error(f"ユーザー情報の取得に失敗しました: {e}")
+        return None
+
     
 # --- 基本設定 ---
 # 非同期処理の問題を解決 (Windows向け)
@@ -367,9 +346,6 @@ def initialize_session_state(managers, force_reset_override=False):
 
     # 基本的なセッション状態を最初に初期化（Cookie処理より前）
     logger.info("🚀 基本セッション状態の早期初期化開始")
-
-        # ローカルストレージ操作用JavaScriptを埋め込み
-    components.html(get_local_storage_js(), height=0)
     
     # セッション状態の初期化
     if 'authenticated' not in st.session_state:
@@ -1411,96 +1387,83 @@ def render_chat_tab_content(managers):
             st.markdown(f"**現在のシーン**: {current_theme_name}")
 
                 # 認証状態の表示
-        if st.session_state.authenticated:
-            st.success(f"✅ ログイン中: **{st.session_state.user_info.get('name', 'Unknown')}**")
+      
+
+            user_id_manager = managers["user_id_manager"]  # フォールバック用
                 
-            col1, col2 = st.columns([3, 1])
-            with col2:
-                if st.button("ログアウト", type="secondary"):
-                        # ローカルストレージをクリア
-                        execute_js("clearStorage();")
-                        # セッション状態をクリア
-                        st.session_state.authenticated = False
-                        st.session_state.user_info = None
-                        st.session_state.token = None
-                        st.rerun()
-                    # ユーザー情報の表示
-            with st.expander("ユーザー情報"):
-                st.json(st.session_state.user_info)
-            
+            has_saved_data = False
+            user_info = None
+            
+        if 'token_data' in st.session_state:
+            # --- ログイン済みの画面 ---
+            user_data = st.session_state.get('user_data', {})
+            
+            st.success(f"ようこそ、{user_data.get('fullname', 'ユーザー')} さん！")
+            if 'avatarUrl' in user_data:
+                st.image(user_data['avatarUrl'], width=100, caption="プロフィール画像")
+            
+            st.write("ログイン済みです。")
+            st.json(user_data) # 取得したユーザー情報を表示
+            
+            if st.button("ログアウト"):
+                # セッション情報をクリアしてログアウト
+                del st.session_state['token_data']
+                if 'user_data' in st.session_state:
+                    del st.session_state['user_data']
+                # ページを再読み込みしてクリーンな状態にする
+                st.rerun()
+
         else:
-            st.info("Hugging Face トークンでログインしてください")
-        
-            with st.form("auth_form"):
-                token_input = st.text_input(
-                    "Hugging Face Token",
-                    type="password",
-                    help="https://huggingface.co/settings/tokens からトークンを取得してください"
-                )                    
-                col1, col2 = st.columns([3,2])
-                with col1:
-                    auth_button = st.form_submit_button("🔑 認証", type="primary")
-                with col2:
-                    auto_login = st.checkbox("自動ログイン", value=True)
-            
-            # 認証処理
-            if auth_button and token_input:
-                with st.spinner("認証中..."):
-                    is_valid, result = verify_hf_token(token_input)
-                    
-                    if is_valid:
-                        st.session_state.authenticated = True
-                        st.session_state.user_info = result
-                        st.session_state.token = token_input
-                        
-                        # ローカルストレージに保存（自動ログインが有効な場合）
-                        if auto_login:
-                            execute_js(f"""
-                            saveToken('{token_input}');
-                            saveUser({json.dumps(result)});
-                            """)
-                        
-                        st.success(f"認証成功: {result.get('name', 'Unknown')}")
-                        st.rerun()
-                    else:
-                        st.error(f"認証失敗: {result}")
+            # --- 未ログインの画面 ---
             
-            # 保存されたトークンから自動ログイン
-            st.markdown("---")
-            st.subheader("💡 使い方")
-            st.markdown("""
-            1. [Hugging Face Settings](https://huggingface.co/settings/tokens) でトークンを作成
-            2. 上記フォームにトークンを入力
-            3. 「自動ログイン」をチェックすると次回から自動でログイン
-            4. ブラウザのローカルストレージにトークンが保存されます
-            """)
-        
-
-            # 手動でローカルストレージから復元するボタン
-            if st.button("💾 保存済みトークンで復元", help="ローカルストレージに保存されたトークンで認証を試行"):
-                execute_js("""
-                const token = getStoredToken();
-                const user = getStoredUser();
-                if (token && user) {
-                    // Streamlitに通知（実際の実装では適切なコールバックが必要）
-                    alert('保存されたトークンが見つかりました。ページを再読み込みし��ください。');
-                } else {
-                    alert('保存されたトークンが見つかりません。');
-                }
-                """)
+            # 2. Hugging Faceからのリダイレクト直後か確認 (URLに 'code' があるか)
+            query_params = st.query_params
+            auth_code = query_params.get("code")
 
-                user_id_manager = managers["user_id_manager"]  # フォールバック用
+            if auth_code:
+                # 3. 認可コードがあれば、トークン取得とユーザー情報取得を実行
+                redirect_uri = get_redirect_uri()
+                token_data = get_hf_token(auth_code, redirect_uri)
                 
-                has_saved_data = False
-                user_info = None
+                if token_data:
+                    st.session_state['token_data'] = token_data
+                    user_data = get_user_info(token_data['access_token'])
+                    
+                    if user_data:
+                        st.session_state['user_data'] = user_data
+
+                    # URLから 'code' を消去してページを再読み込みし、ログイン後の画面を表示
+                    st.query_params.clear()
+                    st.rerun()
+
+            else:
+                # 4. 初期アクセス時（未ログイン状態）
+                st.warning("現在ログインしていません。")
                 
-                try:
+                if not CLIENT_ID or not CLIENT_SECRET:
+                    st.error("OAuthクライアントが設定されていません。SpaceのREADME.mdを確認し、再起動してください。")
+                else:
+                    # ログインURLを生成
+                    redirect_uri = get_redirect_uri()
+                    params = {
+                        "client_id": CLIENT_ID,
+                        "redirect_uri": redirect_uri,
+                        "scope": "openid profile", # 取得したい情報の範囲
+                        "state": "STATE_STRING", # CSRF対策のためランダムな文字列を推奨
+                        "response_type": "code",
+                    }
+                    login_url = f"{HF_ENDPOINT}/oauth/authorize?{urlencode(params)}"
+
+                    st.markdown(f'<a href="{login_url}" target="_self" style="display: inline-block; padding: 10px 20px; background-color: #FFD21E; color: black; text-align: center; text-decoration: none; border-radius: 5px; font-weight: bold;">🤗 Hugging Faceでログイン</a>', unsafe_allow_html=True)
+
+
+            try:
                     # 永続ストレージから確認
                     # persistent_user_manager 完全廃止
                     has_saved_data = user_info is not None and "game_data" in user_info
                     if has_saved_data:
                         logger.debug("永続ストレージに保存データを確認")
-                except Exception as e:
+            except Exception as e:
                     logger.warning(f"永続ストレージ確認エラー、フォールバック使用: {e}")
                     # フォールバック: 従来のローカルファイル方式
                     has_saved_data = user_id_manager.is_user_data_exists()
@@ -1508,7 +1471,7 @@ def render_chat_tab_content(managers):
                         user_info = user_id_manager.get_user_info()
                         logger.debug("フォールバック: ローカルファイルに保存データを確認")
                 
-                if has_saved_data and user_info and "game_data" in user_info:
+            if has_saved_data and user_info and "game_data" in user_info:
                     # 保存データがある場合の情報表示
                     game_data = user_info["game_data"]
                     if game_data:
@@ -1527,7 +1490,7 @@ def render_chat_tab_content(managers):
                         storage_type = "🌐 永続ストレージ" if user_info.get("storage_type") != "local" else "📁 ローカル"
                         st.info(f"💾 保存データあり ({storage_type})\n好感度: {saved_affection}/100\nメッセージ: {saved_messages}件\n保存日時: {saved_at}")
                 
-                if st.button("💾 ゲームデータを保存", help="現在の進行状況（好感度、チャット履歴など）をファイルに保存します", use_container_width=True):
+            if st.button("💾 ゲームデータを保存", help="現在の進行状況（好感度、チャット履歴など）をファイルに保存します", use_container_width=True):
                     success = save_game_data_to_file(managers)
                     if success:
                         st.success("✅ ゲームデータを保存しました！")