Update app.py

app.py

@@ -1,353 +1,194 @@
 import gradio as gr
-
 import random
-
 from datetime import datetime, timedelta, timezone
 
-
-
 # 12名の聖職者リスト
-
 members = ["かほ", "さや", "こず", "るり", "めぐ", "つづ", "ぎん", "すず", "ひめ", "せら", "いず", "さち"]
 
-
-
 def get_personal_daily_oracle(device_id):
-
+    # 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")
-
     
-
     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 = "これにより、不毛なカップリング論争は終結しました。"
-
     
-
+    # [結果HTML, 終結文, 共有ボタン表示, 案内文表示]
     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明日の更新まで、今の思想を維持しなさい。");
-
+        // 戻り値を4つ（HTML, 終結文, 共有ボタン, 案内文）に対応
         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, resultBox) {
-
+function(oracleHtml, peaceMsg, shareBtn, instructMsg) {
     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; 
-
 }
 
-
-
-/* 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;
-
 }
 
-
-
-/* 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;
-
     margin: 0px auto -5px auto !important; 
-
 }
 
-
-
-/* 5. 終結文とボタンの間を-5px */
-
 #peace-msg { 
-
     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; 
-
 }
 
-
-
 #draw-btn { margin: 0px auto -5px auto !important; }
-
 #share-btn { margin: 0px auto 10px auto !important; }
 
+/* 案内文のスタイル：他のテキストと同様に黒く表示 */
+#instruct-msg {
+    font-size: 18px !important;
+    font-weight: bold !important;
+    color: #000 !important;
+    margin: 0px auto 10px auto !important;
+    line-height: 1.5 !important;
+    background: transparent !important;
+    border: none !important;
+}
 """
 
-
-
 with gr.Blocks(title="蓮ノ空聖書正典", css=custom_css, theme=gr.themes.Monochrome()) as demo:
-
-    device_id_storage = gr.State()
-
-
+    # 修正ポイント: gr.State から gr.Textbox(visible=False) に変更
+    device_id_storage = gr.Textbox(visible=False)
 
     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);
-
+            id = Math.random().toString(36).substring(2, 15) + 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_storage],
-
-        outputs=[result_display, peace_display, share_btn, result_display],
-
+        outputs=[result_display, peace_display, share_btn, instruct_msg],
         js=js_logic
-
     ).then(
-
         fn=None,
-
-        inputs=[result_display, peace_display, share_btn, result_display],
-
+        inputs=[result_display, peace_display, share_btn, instruct_msg],
         outputs=None,
-
         js=js_save_result
-
     )
 
-
-
     share_btn.click(fn=None, inputs=None, outputs=None, js=js_share_bluesky)
 
-
-
 if __name__ == "__main__":
-
     demo.launch()