Update app.py

app.py

@@ -1,158 +1,353 @@
 import gradio as gr
+
 import random
-import uuid
+
 from datetime import datetime, timedelta, timezone
 
+
+
 # 12名の聖職者リスト
+
 members = ["かほ", "さや", "こず", "るり", "めぐ", "つづ", "ぎん", "すず", "ひめ", "せら", "いず", "さち"]
 
+
+
 def get_personal_daily_oracle(device_id):
-    # device_id が空（JS失敗時など）の場合は、その場しのぎのランダムIDを生成
-    # これにより「全員同じ」になる事態を物理的に防ぎます
-    if not device_id:
-        seed_base = str(uuid.uuid4())
-    else:
-        seed_base = device_id
-        
+
+    seed_base = device_id if device_id else "default_fate"
+
     jst = timezone(timedelta(hours=9))
+
     today_str = datetime.now(jst).strftime("%Y-%m-%d")
+
     
-    # デバイスIDと日付を組み合わせてシードを固定
+
     random.seed(f"{seed_base}_{today_str}")
+
     
+
     selected = random.sample(members, 2)
+
     random.shuffle(selected)
+
     pair_name = f"{selected[0]}{selected[1]}"
+
     
+
     oracle_html = (
+
         f"<div id='pair-raw' style='display:none;'>{pair_name}</div>"
+
         f"<div style='font-size: 38px; font-weight: normal; margin-bottom: 2px;'>本日の神託</div>"
+
         f"<div style='font-size: 52px; font-weight: 900; letter-spacing: 2px;'>{pair_name}</div>"
+
     )
+
     peace_msg = "これにより、不毛なカップリング論争は終結しました。"
+
     
+
     return oracle_html, peace_msg, gr.update(visible=True), gr.update(visible=True)
 
+
+
 # JS: 状態チェックと復元
+
 js_logic = """
+
 function(deviceId) {
+
     const lastDraw = localStorage.getItem('lastOracleDate');
+
     const lastPair = localStorage.getItem('lastPairText');
+
     const today = new Date().toLocaleDateString('ja-JP');
 
+
+
     if (lastDraw === today && lastPair) {
+
         alert("本日の神託は既に下されています。\\n明日の更新まで、今の思想を維持しなさい。");
+
         return [lastPair, "これにより、不毛なカップリング論争は終結しました。", { "visible": true, "__type__": "update" }, { "visible": true, "__type__": "update" }];
+
     } 
+
     
+
     localStorage.setItem('lastOracleDate', today);
+
     return [null, null, null, null];
+
 }
+
 """
 
+
+
 # JS: 結果の保存
+
 js_save_result = """
-function(oracleHtml, peaceMsg, shareBtn, instructMsg) {
+
+function(oracleHtml, peaceMsg, shareBtn, resultBox) {
+
     if (oracleHtml && oracleHtml.includes("本日の神託")) {
+
         localStorage.setItem('lastPairText', oracleHtml);
+
     }
+
 }
+
 """
 
+
+
 # JS: Bluesky投稿
+
 js_share_bluesky = """
+
 function() {
+
     const pairRawEl = document.getElementById('pair-raw');
+
     let pairName = "";
+
+    
+
     if (pairRawEl) {
+
         pairName = pairRawEl.innerText;
+
     } else {
+
         const lastPair = localStorage.getItem('lastPairText') || "";
+
         const match = lastPair.match(/>([^<]{4,})<\\/div>$/);
+
         pairName = match ? match[1] : "運命";
+
     }
+
+
+
     const currentUrl = window.location.href;
+
     const text = `私は「${pairName}」を信仰しています。\\n\\n蓮ノ空聖書正典：${currentUrl}`;
+
     const intentUrl = `https://bsky.app/intent/compose?text=${encodeURIComponent(text)}`;
+
     window.open(intentUrl, '_blank');
+
 }
+
 """
 
+
+
 custom_css = """
+
 .gradio-container { max-width: 600px !important; text-align: center !important; }
+
+
+
+/* 1. 最上部の空白を40pxに設定 */
+
 .center-content { 
+
     display: flex !important; 
+
     flex-direction: column !important; 
+
     align-items: center !important; 
+
     padding-top: 40px !important; 
+
 }
-h1 { margin-top: 0px !important; margin-bottom: -5px !important; font-size: 32px !important; }
+
+
+
+/* 2. タイトルと教義の間を-5px */
+
+h1 { 
+
+    margin-top: 0px !important;
+
+    margin-bottom: -5px !important; 
+
+    font-size: 32px !important; 
+
+}
+
+
+
+/* 3. 教義と結果の間を-5px */
+
 #doctrine { 
-    font-size: 1.5em !important; line-height: 1.4 !important; font-weight: bold !important;
-    margin-bottom: -5px !important; text-align: center !important;
+
+    font-size: 1.5em !important; 
+
+    line-height: 1.4 !important; 
+
+    font-weight: bold !important;
+
+    margin-bottom: -5px !important; 
+
+    text-align: center !important;
+
 }
+
+
+
+/* 4. 結果ボックスと終結文の間を-5px */
+
 #oracle-box {
-    color: #000 !important; background: #fff !important; border: 4px solid #000 !important;
-    padding: 25px 10px !important; line-height: 1.1 !important; min-height: 130px !important;
-    display: flex !important; flex-direction: column !important; justify-content: center !important;
+
+    color: #000 !important;
+
+    background: #fff !important;
+
+    border: 4px solid #000 !important;
+
+    padding: 25px 10px !important;
+
+    line-height: 1.1 !important;
+
+    min-height: 130px !important;
+
+    display: flex !important;
+
+    flex-direction: column !important;
+
+    justify-content: center !important;
+
     margin: 0px auto -5px auto !important; 
+
 }
+
+
+
+/* 5. 終結文とボタンの間を-5px */
+
 #peace-msg { 
-    font-size: 20px !important; font-weight: bold !important; color: #d63031 !important; 
+
+    font-size: 20px !important; 
+
+    font-weight: bold !important; 
+
+    color: #d63031 !important; 
+
     margin: 0px auto -5px auto !important; 
+
 }
+
+
+
+/* 6. ボタン同士の間を-5px */
+
 .action-btn { 
-    font-size: 26px !important; font-weight: bold !important; height: 70px !important; 
-    width: 320px !important; border: 2px solid #000 !important; 
+
+    font-size: 26px !important; 
+
+    font-weight: bold !important; 
+
+    height: 70px !important; 
+
+    width: 320px !important; 
+
+    border: 2px solid #000 !important; 
+
 }
+
+
+
 #draw-btn { margin: 0px auto -5px auto !important; }
-#share-btn { margin: 0px auto -5px auto !important; }
-#instruct-msg {
-    font-size: 18px !important; font-weight: bold !important; color: #000 !important;
-    margin: 10px auto !important; background: transparent !important; border: none !important;
-}
+
+#share-btn { margin: 0px auto 10px auto !important; }
+
 """
 
+
+
 with gr.Blocks(title="蓮ノ空聖書正典", css=custom_css, theme=gr.themes.Monochrome()) as demo:
-    # デバイスIDを保持する非表示のテキストボックス
-    device_id_val = gr.Textbox(visible=False)
 
-    # ページ読み込み時にJSでIDを取得して device_id_val にセットする
-    demo.load(None, None, device_id_val, js="""
+    device_id_storage = gr.State()
+
+
+
+    demo.load(None, None, device_id_storage, js="""
+
     () => {
+
         let id = localStorage.getItem('cp_oracle_device_id');
+
         if(!id) {
-            id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+
+            id = Math.random().toString(36).substring(2, 15);
+
             localStorage.setItem('cp_oracle_device_id', id);
+
         }
+
         return id;
+
     }
+
     """)
 
+
+
     with gr.Column(elem_classes="center-content"):
+
         gr.Markdown("# ⚖️ 蓮ノ空聖書正典")
+
+        
+
         gr.Markdown("日付が変わるまであなたの思想は<br>統一されます。", elem_id="doctrine")
+
         
+
         result_display = gr.HTML(elem_id="oracle-box", visible=False)
+
         peace_display = gr.Markdown(elem_id="peace-msg")
+
         
+
         draw_btn = gr.Button("神託を受ける", variant="primary", elem_id="draw-btn", elem_classes="action-btn")
+
         share_btn = gr.Button("信仰を広める", variant="secondary", elem_id="share-btn", elem_classes="action-btn", visible=False)
-        instruct_msg = gr.HTML("画像を添えて<br>その導きを世界へ示しなさい。", elem_id="instruct-msg", visible=False)
+
+
 
     draw_btn.click(
+
         fn=get_personal_daily_oracle,
-        inputs=[device_id_val],
-        outputs=[result_display, peace_display, share_btn, instruct_msg],
+
+        inputs=[device_id_storage],
+
+        outputs=[result_display, peace_display, share_btn, result_display],
+
         js=js_logic
+
     ).then(
+
         fn=None,
-        inputs=[result_display, peace_display, share_btn, instruct_msg],
+
+        inputs=[result_display, peace_display, share_btn, result_display],
+
         outputs=None,
+
         js=js_save_result
+
     )
 
+
+
     share_btn.click(fn=None, inputs=None, outputs=None, js=js_share_bluesky)
 
+
+
 if __name__ == "__main__":
+
     demo.launch()