cp-oracle-dev

Sleeping

App Files Files Community

Nyanpre commited on Apr 6

Commit

65aa626

verified ·

1 Parent(s): 37f4c73

Update app.py

Browse files

Files changed (1) hide show

app.py +116 -75

app.py CHANGED Viewed

@@ -1,84 +1,125 @@
-import gradio as gr
-import random
-from datetime import datetime, timedelta, timezone
-# --- 1. 定数と設定 ---
-GITHUB_PAGES_URL = "https://rairaff8-source.github.io/hasu-cp-ogp/"
-members = ["かほ", "さや", "こず", "るり", "めぐ", "つづ", "ぎん", "すず", "ひめ", "せら", "いず", "さち"]
-# --- 2. シェアテキスト生成ロジック ---
-js_get_share_text = f"""
-function() {{
-    const pairRawEl = document.getElementById('pair-raw');
-    let pairName = "";
-    if (pairRawEl) {{
-        pairName = pairRawEl.innerText;
-    }} else {{
-        const lastPair = localStorage.getItem('lastPairText') || "";
-        const match = lastPair.match(/>([^<]{{2,}})<\\/div>$/);
-        pairName = match ? match[1] : "運命";
-    }}
-    const shareUrl = "{GITHUB_PAGES_URL}" + encodeURIComponent(pairName) + ".html";
-    return "私は「" + pairName + "」を信仰しています。\\n\\n蓮ノ空聖書正典：\\n" + shareUrl;
-}}
-"""
-js_share_bluesky = f"function() {{ const text = ({js_get_share_text})(); window.open(`https://bsky.app/intent/compose?text=${{encodeURIComponent(text)}}`, '_blank'); }}"
-js_share_x = f"function() {{ const text = ({js_get_share_text})(); window.open(`https://twitter.com/intent/tweet?text=${{encodeURIComponent(text)}}`, '_blank'); }}"
-# --- 3. Python ロジック ---
-def get_personal_daily_oracle(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 = "これにより、不毛なカップリング論争は終結しました。"
-    return oracle_html, peace_msg, gr.update(visible=True), gr.update(visible=True), gr.update(visible=True)
-# --- 4. フロントエンド (Gradio UI) ---
-custom_css = """
-.gradio-container { max-width: 600px !important; text-align: center !important; }
-.center-content { display: flex !important; flex-direction: column !important; align-items: center !important; padding-top: 45px !important; }
-#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;
-}
-.action-btn { font-size: 24px !important; font-weight: bold !important; width: 320px !important; border: 2px solid #000 !important; }
-"""
-# title 以外はここでは指定せず、launch() に移動させました
-with gr.Blocks(title="蓮ノ空聖書正典") as demo:
-    device_id_storage = gr.Textbox(visible=False)
-    demo.load(None, None, device_id_storage, js="() => localStorage.getItem('cp_oracle_device_id') || '' ")
-    with gr.Column(elem_classes="center-content"):
-        gr.Markdown("# ⚖️ 蓮ノ空聖書正典")
-        result_display = gr.HTML(elem_id="oracle-box", visible=False)
-        peace_display = gr.Markdown("")
-        draw_btn = gr.Button("神託を受ける", variant="primary", elem_classes="action-btn")
-        share_btn_x = gr.Button("Xで信仰を広める", visible=False)
-        share_btn_bsky = gr.Button("Blueskyで信仰を広める", visible=False)
-# --- Hugging Faceの app.py 125行目付近 ---
-    draw_btn.click(
-        fn=get_personal_daily_oracle,
-        inputs=[device_id_storage],
-        outputs=[result_display, peace_display, share_btn_bsky, share_btn_x, result_display],
-        api_name="get_oracle"  # ← ここにカンマとこれを追加！
-    ) # ← 閉じカッコ
-    share_btn_bsky.click(fn=None, js=js_share_bluesky)
-    share_btn_x.click(fn=None, js=js_share_x)
-if __name__ == "__main__":
-    # css と theme はここで指定します。api_open は削除しました。
-    demo.launch(css=custom_css, theme=gr.themes.Monochrome())

+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>蓮ノ空聖書正典 (Dev)</title>
+    <style>
+        body {
+            background-color: white; color: black; font-family: 'Helvetica Neue', Arial, sans-serif;
+            display: flex; flex-direction: column; align-items: center; justify-content: center;
+            min-height: 100vh; margin: 0; text-align: center;
+        }
+        .container { max-width: 600px; padding: 20px; }
+        h1 { font-size: 32px; margin-bottom: 0; }
+        .subtitle { font-size: 1.2em; font-weight: bold; margin-bottom: 30px; }
+        #oracle-box {
+            display: none; border: 4px solid black; padding: 30px; margin: 20px 0;
+            background: white; min-width: 300px;
+        }
+        .oracle-label { font-size: 24px; margin-bottom: 10px; }
+        .pair-name { font-size: 52px; font-weight: 900; letter-spacing: 2px; }
+        .peace-msg { color: #d63031; font-weight: bold; font-size: 1.2em; margin-top: 20px; }
+        .btn {
+            background: white; border: 2px solid black; padding: 15px 30px;
+            font-size: 20px; font-weight: bold; cursor: pointer; margin: 10px;
+            width: 280px; transition: 0.2s;
+        }
+        .btn:hover { background: #eee; }
+        .btn-primary { background: black; color: white; height: 70px; font-size: 24px; }
+        .share-area { display: none; margin-top: 20px; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>⚖️ 蓮ノ空聖書正典</h1>
+        <p class="subtitle">日付が変わるまであなたの思想は<br>統一されます。</p>
+        <button id="draw-btn" class="btn btn-primary" onclick="getOracle()">神託を受ける</button>
+        <div id="oracle-box">
+            <div class="oracle-label">本日の神託</div>
+            <div id="pair-display" class="pair-name"></div>
+            <div class="peace-msg">これにより、不毛なカップリング論争は終結しました。</div>
+        </div>
+        <div id="share-area" class="share-area">
+            <button class="btn" onclick="shareSNS('bsky')">Blueskyで信仰を広める</button><br>
+            <button class="btn" onclick="shareSNS('x')">Xで信仰を広める</button>
+        </div>
+    </div>
+    <script>
+        const HF_URL = "https://nyanpre-cp-oracle-dev.hf.space";
+        const GITHUB_URL = window.location.origin + window.location.pathname.split('/').slice(0, -1).join('/') + '/';
+        let currentPair = "";
+        // この名前が HTML の onclick="getOracle()" と対応します
+        async function getOracle() {
+            console.log("Starting getOracle..."); // ログ出力
+            const btn = document.getElementById('draw-btn');
+            btn.innerText = "交信中...";
+            btn.disabled = true;
+            try {
+                let deviceId = localStorage.getItem('cp_oracle_device_id');
+                if(!deviceId) {
+                    deviceId = Math.random().toString(36).substring(2, 15);
+                    localStorage.setItem('cp_oracle_device_id', deviceId);
+                }
+                // 1. 実行リクエスト (POST)
+                const response = await fetch(`${HF_URL}/call/get_oracle`, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ data: [deviceId] })
+                });
+                if (!response.ok) throw new Error('POST request failed');
+                const { event_id } = await response.json();
+                // 2. 結果取得 (GET)
+                const resultResponse = await fetch(`${HF_URL}/call/get_oracle/${event_id}`);
+                const resultText = await resultResponse.text();
+                const lines = resultText.split('\n');
+                let resultData = null;
+                for (const line of lines) {
+                    if (line.startsWith('data: ')) {
+                        resultData = JSON.parse(line.substring(6));
+                        break;
+                    }
+                }
+                if (!resultData) throw new Error("No data received from HF");
+                const htmlString = resultData[0];
+                const match = htmlString.match(/letter-spacing: 2px;'>([^<]+)<\/div>/);
+                currentPair = match ? match[1] : "運命";
+                document.getElementById('pair-display').innerText = currentPair;
+                document.getElementById('oracle-box').style.display = 'block';
+                document.getElementById('share-area').style.display = 'block';
+                btn.style.display = 'none';
+            } catch (e) {
+                console.error("Critical Error:", e);
+                alert("神との交信に失敗しました。詳細はコンソールを確認してください。");
+                btn.innerText = "神託を受ける";
+                btn.disabled = false;
+            }
+        }
+        function shareSNS(platform) {
+            const shareUrl = `${GITHUB_URL}${encodeURIComponent(currentPair)}.html`;
+            const text = `私は「${currentPair}」を信仰しています。\n\n蓮ノ空聖書正典：\n${shareUrl}`;
+            if (platform === 'bsky') {
+                window.open(`https://bsky.app/intent/compose?text=${encodeURIComponent(text)}`, '_blank');
+            } else {
+                window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}`, '_blank');
+            }
+        }
+    </script>
+</body>
+</html>