Update app.py

app.py

@@ -129,4 +129,84 @@ h1 { margin-top: 0px !important; margin-bottom: -5px !important; font-size: 32px
 }
 
 /* 結果表示ボックス */
-#oracle-box {
+#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; 
+}
+
+/* 生成された画像 */
+#result-img { max-width: 400px !important; margin: 10px auto -5px auto !important; border: 1px solid #ccc; }
+
+#peace-msg { 
+    font-size: 20px !important; 
+    font-weight: bold !important; 
+    color: #d63031 !important; 
+    margin: 0px auto -5px auto !important; 
+}
+
+/* ボタン共通 */
+.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; }
+"""
+
+with gr.Blocks(title="蓮ノ空聖書正典") as demo:
+    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);
+            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)
+        
+        # 案1：画像出力（負荷軽減のため、初回描画時のみ生成）
+        result_image = gr.Image(label="神託の証（保存して投稿に添付してください）", elem_id="result-img", visible=False, type="pil")
+        
+        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)
+
+    draw_btn.click(
+        fn=get_personal_daily_oracle,
+        inputs=[device_id_storage],
+        outputs=[result_display, peace_display, share_btn, result_display, result_image],
+        js=js_logic
+    ).then(
+        fn=None,
+        inputs=[result_display, peace_display, share_btn, result_display, result_image],
+        outputs=None,
+        js=js_save_result
+    )
+
+    share_btn.click(fn=None, inputs=None, outputs=None, js=js_share_bluesky)
+
+if __name__ == "__main__":
+    # Gradio最新版対応
+    demo.launch(css=custom_css, theme=gr.themes.Monochrome())