Update app.py

app.py

@@ -10,52 +10,62 @@ if "OPENAI_API_KEY" not in os.environ:
 openai.api_key = os.environ["OPENAI_API_KEY"]
 
 # ──────────────────────────────────────────────────────────────
-# 1.  Wave-style chart utilities  (← NEW)
+# 1.  Wave-style chart utilities
 # ──────────────────────────────────────────────────────────────
 CYCLES = {
     "Tech Cycle (50 yr)": 50,
     "Finance Cycle (80 yr)": 80,
     "Hegemony Cycle (250 yr)": 250,
 }
-COLOR_MAP = {50: "#ff3333", 80: "#ffcc00", 250: "#66ccff"}        # red / yellow / blue
-AMPLITUDE_MAP = {50: 1.0, 80: 1.6, 250: 4.0}                     # taller tower for longer cycle
-CENTER = 2025                                                    # alignment reference
+COLOR_MAP = {50: "#ff3333", 80: "#ffcc00", 250: "#66ccff"}
+AMPLITUDE_MAP = {50: 1.0, 80: 1.6, 250: 4.0}
+CENTER = 2025  # alignment reference
 
 def _half_sine(xs, period, amp):
-    """positive half-sine wave, aligned so peak at CENTER, 0 elsewhere"""
     phase = np.mod(xs - CENTER, period)
     y = amp * np.sin(np.pi * phase / period)
     y[y < 0] = 0
     return y
 
 def build_wave_chart_and_summary(start: int, end: int):
-    """return (matplotlib figure, text summary)"""
-    xs = np.linspace(start, end, (end - start) * 4)              # 4 pts/yr ⇒ smooth
-    fig, ax = plt.subplots(figsize=(10, 3))
-    summaries, align_years = [], None
+    xs = np.linspace(start, end, (end - start) * 4)
+    fig, ax = plt.subplots(figsize=(14, 6))
+    fig.subplots_adjust(top=0.9)  # prevent title clipping
+
+    summaries, align_years, all_year_labels = [], None, set()
 
-    # draw many stacked half-sine lines for each cycle → “tower” 느낌
     for period in sorted(CYCLES.values()):
         col, amp = COLOR_MAP[period], AMPLITUDE_MAP[period]
-        for frac in np.linspace(amp / 30, amp, 30):              # 30 concentric lines
-            ax.plot(xs, _half_sine(xs, period, frac),
-                    color=col, alpha=0.85, lw=0.6)
+        for frac in np.linspace(amp / 30, amp, 30):
+            ax.plot(xs, _half_sine(xs, period, frac), color=col, alpha=0.85, lw=0.6)
 
         years = [CENTER + n * period for n in range(
                  math.ceil((start - CENTER) / period),
                  math.floor((end   - CENTER) / period) + 1)]
         summaries.append(f"{period}-yr cycle peaks: {years}")
         align_years = set(years) if align_years is None else align_years & set(years)
+        all_year_labels.update(years)
+
+    # baseline year labels (small font, duplicates removed)
+    for y in sorted(all_year_labels):
+        if start <= y <= end:
+            ax.text(y, -0.1, str(y), ha="center", va="top",
+                    fontsize=6, color="white", rotation=90)
 
-    # cosmetic — black bg & white grid
-    ax.set_facecolor("black"); fig.patch.set_facecolor("black")
-    ax.set_xlim(start, end); ax.set_ylim(0, max(AMPLITUDE_MAP.values()) + .2)
-    ax.set_xlabel("Year", color="white"); ax.set_ylabel("Relative Amplitude", color="white")
-    ax.set_title("Technology · Finance · Hegemony Cycles", color="white", pad=20)
-    ax.tick_params(colors="white");  [s.set_color("white") for s in ax.spines.values()]
-    ax.grid(color="white", ls="--", lw=.3, alpha=.3)
+    ax.set_facecolor("black")
+    fig.patch.set_facecolor("black")
+    ax.set_xlim(start, end)
+    ax.set_ylim(-0.2, max(AMPLITUDE_MAP.values()) + 0.2)
+    ax.set_xlabel("Year", color="white")
+    ax.set_ylabel("Relative Amplitude", color="white")
+    ax.set_title("Technology · Finance · Hegemony Cycles", color="white",
+                 pad=35, fontsize=14, fontweight="bold")
+    ax.tick_params(colors="white")
+    for spine in ax.spines.values():
+        spine.set_color("white")
+    ax.grid(axis="y", color="white", ls="--", lw=.3, alpha=.3)
 
-    # vertical dashed line at alignment year + 250-yr span arrow
+    # alignment marker
     ax.axvline(CENTER, color="white", ls="--", lw=1, alpha=.6)
     arrow_y = AMPLITUDE_MAP[250] * 1.05
     ax.annotate("", xy=(CENTER - 125, arrow_y), xytext=(CENTER + 125, arrow_y),
@@ -63,13 +73,14 @@ def build_wave_chart_and_summary(start: int, end: int):
     ax.text(CENTER, arrow_y + .15, "250 yr", color="white",
             ha="center", va="bottom", fontsize=10, fontweight="bold")
 
-    summary = (f"Range {start}-{end}\n" +
-               "\n".join(summaries) +
-               f"\nAlignment year inside range: {', '.join(map(str, sorted(align_years))) if align_years else 'None'}")
+    summary = (f"Range {start}-{end}\n"
+               + "\n".join(summaries)
+               + f"\nAlignment year inside range: "
+               + (", ".join(map(str, sorted(align_years))) if align_years else "None"))
     return fig, summary
 
 # ─────────────────────────────────────────��────────────────────
-# 2.  GPT chat (차트 요약 → system 프롬프트에 자동 삽입)
+# 2.  GPT chat
 # ──────────────────────────────────────────────────────────────
 BASE_PROMPT = (
     "당신은 간결하고 정확한 한국어 어시스턴트입니다. "
@@ -78,22 +89,31 @@ BASE_PROMPT = (
 
 def chat_with_gpt(history, user_msg, chart_summary):
     msgs = [{"role": "system", "content": BASE_PROMPT}]
-    if chart_summary != "No chart yet.":        # 차트가 이미 그려졌다면
+    if chart_summary != "No chart yet.":
         msgs.append({"role": "system", "content": f"[Chart summary]\n{chart_summary}"})
 
     for u, a in history:
-        msgs += [{"role": "user", "content": u}, {"role": "assistant", "content": a}]
+        msgs += [{"role": "user", "content": u},
+                 {"role": "assistant", "content": a}]
     msgs.append({"role": "user", "content": user_msg})
 
-    answer = openai.chat.completions.create(
-        model="gpt-3.5-turbo", messages=msgs,
-        max_tokens=600, temperature=0.7).choices[0].message.content.strip()
-    return answer
+    reply = openai.chat.completions.create(
+        model="gpt-3.5-turbo",
+        messages=msgs,
+        max_tokens=600,
+        temperature=0.7
+    ).choices[0].message.content.strip()
+    return reply
 
 # ──────────────────────────────────────────────────────────────
-# 3.  Gradio UI
+# 3.  Gradio UI + CSS
 # ──────────────────────────────────────────────────────────────
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
+custom_css = """
+#wave_plot {width: 100% !important;}
+#wave_plot canvas {width: 100% !important; height: auto !important;}
+"""
+
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
     gr.Markdown("## 📊 Wave-style Cycle Timeline & 💬 GPT Chat")
 
     chart_summary_state = gr.State(value="No chart yet.")
@@ -101,11 +121,169 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
     with gr.Tabs():
         # ▸ Tab 1 — Chart
         with gr.TabItem("Timeline Chart"):
-            start_year = gr.Number(label="Start Year", value=1500)
-            end_year   = gr.Number(label="End Year",   value=2500)
+            fig0, summ0 = build_wave_chart_and_summary(1500, 2500)
+            plot_out = gr.Plot(value=fig0, elem_id="wave_plot")
+
+            with gr.Row():
+                start_year = gr.Number(label="Start Year", value=1500)
+                end_year   = gr.Number(label="End Year",   value=2500)
+
+            def refresh_chart(s, e):
+                fig, summ = build_wave_chart_and_summary(int(s), int(e))
+                return fig, summ
+
+            start_year.change(refresh_chart, [start_year, end_year],
+                              [plot_out, chart_summary_state])
+            end_year.change(refresh_chart,   [start_year, end_year],
+                              [plot_out, chart_summary_state])
+
+        # ▸ Tab 2 — GPT Chat
+        with gr.TabItem("GPT Chat"):
+            chatbot = gr.Chatbot(label="Assistant")
+            user_in = gr.Textbox(lines=3, placeholder="메시지를 입력하세요…")
+            send_btn = gr.Button("Send", variant="primary")
+
+            def respond(chat_hist, user_msg, summary):
+                ans = chat_with_gpt(chat_hist, user_msg, summary)
+                chat_hist.append((user_msg, ans))
+                return chat_hist, gr.Textbox(value="", interactive=True)
+
+            send_btn.click(respond, [chatbot, user_in, chart_summary_state],
+                                       [chatbot, user_in])
+            user_in.submit(respond, [chatbot, user_in, chart_summary_state],
+                                       [chatbot, user_in])
+
+if __name__ == "__main__":
+    demo.launch()
+# cycles_chat_app.py
+import os, math, numpy as np, matplotlib.pyplot as plt, gradio as gr
+import openai
+
+# ──────────────────────────────────────────────────────────────
+# 0. OpenAI key
+# ──────────────────────────────────────────────────────────────
+if "OPENAI_API_KEY" not in os.environ:
+    os.environ["OPENAI_API_KEY"] = input("🔑 Enter your OpenAI API key: ").strip()
+openai.api_key = os.environ["OPENAI_API_KEY"]
+
+# ──────────────────────────────────────────────────────────────
+# 1.  Wave-style chart utilities
+# ─────────────────���────────────────────────────────────────────
+CYCLES = {
+    "Tech Cycle (50 yr)": 50,
+    "Finance Cycle (80 yr)": 80,
+    "Hegemony Cycle (250 yr)": 250,
+}
+COLOR_MAP = {50: "#ff3333", 80: "#ffcc00", 250: "#66ccff"}
+AMPLITUDE_MAP = {50: 1.0, 80: 1.6, 250: 4.0}
+CENTER = 2025  # alignment reference
+
+def _half_sine(xs, period, amp):
+    phase = np.mod(xs - CENTER, period)
+    y = amp * np.sin(np.pi * phase / period)
+    y[y < 0] = 0
+    return y
+
+def build_wave_chart_and_summary(start: int, end: int):
+    xs = np.linspace(start, end, (end - start) * 4)
+    fig, ax = plt.subplots(figsize=(14, 6))
+    fig.subplots_adjust(top=0.9)  # prevent title clipping
+
+    summaries, align_years, all_year_labels = [], None, set()
+
+    for period in sorted(CYCLES.values()):
+        col, amp = COLOR_MAP[period], AMPLITUDE_MAP[period]
+        for frac in np.linspace(amp / 30, amp, 30):
+            ax.plot(xs, _half_sine(xs, period, frac), color=col, alpha=0.85, lw=0.6)
+
+        years = [CENTER + n * period for n in range(
+                 math.ceil((start - CENTER) / period),
+                 math.floor((end   - CENTER) / period) + 1)]
+        summaries.append(f"{period}-yr cycle peaks: {years}")
+        align_years = set(years) if align_years is None else align_years & set(years)
+        all_year_labels.update(years)
+
+    # baseline year labels (small font, duplicates removed)
+    for y in sorted(all_year_labels):
+        if start <= y <= end:
+            ax.text(y, -0.1, str(y), ha="center", va="top",
+                    fontsize=6, color="white", rotation=90)
+
+    ax.set_facecolor("black")
+    fig.patch.set_facecolor("black")
+    ax.set_xlim(start, end)
+    ax.set_ylim(-0.2, max(AMPLITUDE_MAP.values()) + 0.2)
+    ax.set_xlabel("Year", color="white")
+    ax.set_ylabel("Relative Amplitude", color="white")
+    ax.set_title("Technology · Finance · Hegemony Cycles", color="white",
+                 pad=35, fontsize=14, fontweight="bold")
+    ax.tick_params(colors="white")
+    for spine in ax.spines.values():
+        spine.set_color("white")
+    ax.grid(axis="y", color="white", ls="--", lw=.3, alpha=.3)
+
+    # alignment marker
+    ax.axvline(CENTER, color="white", ls="--", lw=1, alpha=.6)
+    arrow_y = AMPLITUDE_MAP[250] * 1.05
+    ax.annotate("", xy=(CENTER - 125, arrow_y), xytext=(CENTER + 125, arrow_y),
+                arrowprops=dict(arrowstyle="<|-|>", color="white", lw=1.2))
+    ax.text(CENTER, arrow_y + .15, "250 yr", color="white",
+            ha="center", va="bottom", fontsize=10, fontweight="bold")
+
+    summary = (f"Range {start}-{end}\n"
+               + "\n".join(summaries)
+               + f"\nAlignment year inside range: "
+               + (", ".join(map(str, sorted(align_years))) if align_years else "None"))
+    return fig, summary
 
+# ──────────────────────────────────────────────────────────────
+# 2.  GPT chat
+# ──────────────────────────────────────────────────────────────
+BASE_PROMPT = (
+    "당신은 간결하고 정확한 한국어 어시스턴트입니다. "
+    "사용자의 질문에 답할 때, 제공된 [Chart summary] 내용을 반드시 반영하세요."
+)
+
+def chat_with_gpt(history, user_msg, chart_summary):
+    msgs = [{"role": "system", "content": BASE_PROMPT}]
+    if chart_summary != "No chart yet.":
+        msgs.append({"role": "system", "content": f"[Chart summary]\n{chart_summary}"})
+
+    for u, a in history:
+        msgs += [{"role": "user", "content": u},
+                 {"role": "assistant", "content": a}]
+    msgs.append({"role": "user", "content": user_msg})
+
+    reply = openai.chat.completions.create(
+        model="gpt-3.5-turbo",
+        messages=msgs,
+        max_tokens=600,
+        temperature=0.7
+    ).choices[0].message.content.strip()
+    return reply
+
+# ──────────────────────────────────────────────────────────────
+# 3.  Gradio UI + CSS
+# ──────────────────────────────────────────────────────────────
+custom_css = """
+#wave_plot {width: 100% !important;}
+#wave_plot canvas {width: 100% !important; height: auto !important;}
+"""
+
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
+    gr.Markdown("## 📊 Wave-style Cycle Timeline & 💬 GPT Chat")
+
+    chart_summary_state = gr.State(value="No chart yet.")
+
+    with gr.Tabs():
+        # ▸ Tab 1 — Chart
+        with gr.TabItem("Timeline Chart"):
             fig0, summ0 = build_wave_chart_and_summary(1500, 2500)
-            plot_out = gr.Plot(value=fig0)
+            plot_out = gr.Plot(value=fig0, elem_id="wave_plot")
+
+            with gr.Row():
+                start_year = gr.Number(label="Start Year", value=1500)
+                end_year   = gr.Number(label="End Year",   value=2500)
 
             def refresh_chart(s, e):
                 fig, summ = build_wave_chart_and_summary(int(s), int(e))
@@ -123,8 +301,8 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             send_btn = gr.Button("Send", variant="primary")
 
             def respond(chat_hist, user_msg, summary):
-                reply = chat_with_gpt(chat_hist, user_msg, summary)
-                chat_hist.append((user_msg, reply))
+                ans = chat_with_gpt(chat_hist, user_msg, summary)
+                chat_hist.append((user_msg, ans))
                 return chat_hist, gr.Textbox(value="", interactive=True)
 
             send_btn.click(respond, [chatbot, user_in, chart_summary_state],