Switch to pink princess visual theme

README.md

@@ -1,7 +1,7 @@
 ---
-title: 暗黑自监督学习实验室
-emoji: 🌑
-colorFrom: blue
+title: 粉色公主自监督学习实验室
+emoji: 👑
+colorFrom: pink
 colorTo: pink
 sdk: gradio
 sdk_version: 6.12.0
@@ -9,7 +9,7 @@ app_file: app.py
 python_version: "3.10"
 fullWidth: true
 header: default
-short_description: 中文交互式 MAE、SimCLR 与旋转预测自监督学习 Demo
+short_description: 粉色公主系中文交互式 MAE、SimCLR 与旋转预测自监督学习 Demo
 tags:
   - gradio
   - self-supervised-learning
@@ -19,9 +19,9 @@ tags:
   - chinese
 ---
 
-# 暗黑自监督学习实验室
+# 粉色公主自监督学习实验室
 
-这是一个中文暗黑风 Hugging Face Space，用轻量可交互方式展示图像自监督学习：
+这是一个中文粉色公主系 Hugging Face Space，用轻量可交互方式展示图像自监督学习：
 
 - 旋转预测：自动生成 0/90/180/270 度标签，训练一个小型分类器预测图像旋转角度。
 - MAE 遮挡重建：比较两种 patch mask 比例，展示遮挡输入、重建输出和 masked MSE loss。
@@ -39,5 +39,5 @@ python app.py
 
 ```powershell
 $env:HF_TOKEN="your_token"
-python deploy_hf_space.py --repo-id your-username/ssl-dark-vision-lab
+python deploy_hf_space.py --repo-id your-username/ssl-princess-vision-lab
 ```

app.py

@@ -1,4 +1,4 @@
-"""Dark Chinese self-supervised learning lab for Hugging Face Spaces."""
+"""Pink princess Chinese self-supervised learning lab for Hugging Face Spaces."""
 
 from __future__ import annotations
 
@@ -252,6 +252,249 @@ APP_THEME = gr.themes.Base(
     button_primary_text_color="#06101a",
 )
 
+CUSTOM_CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Ma+Shan+Zheng&display=swap');
+
+:root {
+  --cream: #fff8fc;
+  --blush: #ffe3ef;
+  --blush-2: #ffd0e4;
+  --rose: #e84f8a;
+  --rose-deep: #9f2f62;
+  --berry: #6e244b;
+  --gold: #c88a30;
+  --gold-soft: #ffe7a8;
+  --lilac: #b77ff2;
+  --panel: rgba(255, 248, 252, 0.82);
+  --panel-strong: rgba(255, 255, 255, 0.94);
+  --line: rgba(232, 79, 138, 0.24);
+  --text: #54213d;
+  --muted: #8a5f75;
+  --shadow: 0 28px 90px rgba(177, 71, 116, 0.22);
+}
+
+body,
+.gradio-container {
+  background:
+    radial-gradient(circle at 12% 8%, rgba(255, 196, 218, 0.92), transparent 25%),
+    radial-gradient(circle at 86% 6%, rgba(255, 231, 168, 0.76), transparent 23%),
+    radial-gradient(circle at 72% 88%, rgba(219, 188, 255, 0.54), transparent 30%),
+    linear-gradient(135deg, #fff6fb 0%, #ffe4f0 45%, #fff7df 100%) !important;
+  color: var(--text) !important;
+  font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif !important;
+}
+
+.gradio-container {
+  max-width: 1460px !important;
+}
+
+.app-shell {
+  position: relative;
+  overflow: hidden;
+  padding: clamp(24px, 4vw, 46px);
+  border: 1px solid rgba(232, 79, 138, 0.24);
+  border-radius: 38px;
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 238, 247, 0.72)),
+    repeating-linear-gradient(90deg, rgba(232,79,138,0.035) 0 1px, transparent 1px 78px);
+  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.82);
+  margin-bottom: 18px;
+}
+
+.app-shell::before {
+  content: "";
+  position: absolute;
+  inset: -34% -8% auto auto;
+  width: 470px;
+  height: 470px;
+  background:
+    radial-gradient(circle, rgba(255, 231, 168, 0.92), transparent 42%),
+    conic-gradient(from 120deg, rgba(232,79,138,0), rgba(232,79,138,0.22), rgba(183,127,242,0.18), rgba(232,79,138,0));
+  filter: blur(10px);
+  opacity: 0.86;
+  animation: floatRibbon 12s ease-in-out infinite alternate;
+}
+
+.app-shell::after {
+  content: "♕";
+  position: absolute;
+  right: 34px;
+  bottom: 18px;
+  color: rgba(200, 138, 48, 0.22);
+  font-size: clamp(5rem, 11vw, 10rem);
+  font-family: Georgia, serif;
+  transform: rotate(-9deg);
+}
+
+@keyframes floatRibbon {
+  from { transform: rotate(0deg) translate3d(0, 0, 0); }
+  to { transform: rotate(14deg) translate3d(-28px, 22px, 0); }
+}
+
+.hero-grid {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.72fr);
+  gap: 26px;
+  align-items: stretch;
+  z-index: 1;
+}
+
+.eyebrow {
+  display: inline-flex;
+  gap: 10px;
+  align-items: center;
+  padding: 9px 15px;
+  border: 1px solid rgba(200, 138, 48, 0.34);
+  border-radius: 999px;
+  color: var(--rose-deep);
+  background: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(255,231,168,0.48));
+  font-size: 0.82rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  font-weight: 900;
+  box-shadow: 0 10px 28px rgba(232, 79, 138, 0.13);
+}
+
+.hero-title {
+  margin: 18px 0 16px;
+  max-width: 900px;
+  font-family: 'Ma Shan Zheng', 'Noto Sans SC', cursive;
+  font-size: clamp(3.2rem, 7vw, 6.6rem);
+  line-height: 0.92;
+  letter-spacing: 0.02em;
+  color: var(--rose-deep);
+  text-shadow: 0 3px 0 #fff, 0 18px 36px rgba(232, 79, 138, 0.20);
+}
+
+.hero-copy {
+  max-width: 790px;
+  color: var(--muted);
+  font-size: 1.05rem;
+  line-height: 1.86;
+}
+
+.hero-badges,
+.mini-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.badge-chip {
+  padding: 10px 15px;
+  border: 1px solid rgba(232, 79, 138, 0.22);
+  border-radius: 999px;
+  background: linear-gradient(135deg, rgba(255,255,255,0.84), rgba(255,224,239,0.78));
+  color: var(--berry);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 10px 24px rgba(232, 79, 138, 0.12);
+  font-weight: 800;
+}
+
+.side-card {
+  min-height: 132px;
+  border-radius: 28px;
+  padding: 19px;
+  border: 1px solid rgba(232,79,138,0.22);
+  background:
+    radial-gradient(circle at 18% 0%, rgba(255,231,168,0.72), transparent 34%),
+    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,226,240,0.82));
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 18px 40px rgba(177, 71, 116, 0.13);
+}
+
+.side-card strong {
+  display: block;
+  margin-bottom: 8px;
+  color: var(--rose-deep);
+  font-size: 1.08rem;
+}
+
+.side-card span {
+  color: var(--muted);
+  line-height: 1.68;
+}
+
+.control-card,
+.note-card,
+.metric-card {
+  border: 1px solid var(--line) !important;
+  border-radius: 28px !important;
+  background: var(--panel) !important;
+  box-shadow: 0 18px 52px rgba(177, 71, 116, 0.14), inset 0 1px 0 rgba(255,255,255,0.78) !important;
+  backdrop-filter: blur(8px);
+}
+
+.control-card {
+  padding: 18px !important;
+}
+
+.note-card {
+  padding: 18px 20px;
+  color: var(--muted);
+  line-height: 1.78;
+}
+
+.note-card strong {
+  color: var(--rose-deep);
+}
+
+.metric-card {
+  padding: 14px 16px;
+}
+
+.tabs button,
+button {
+  font-weight: 900 !important;
+}
+
+button.primary {
+  border: 0 !important;
+  background: linear-gradient(135deg, #ff9cc5, #ffd36e 52%, #d8a5ff) !important;
+  color: #5a213e !important;
+  box-shadow: 0 14px 34px rgba(232, 79, 138, 0.24) !important;
+}
+
+.gradio-container label,
+.gradio-container .wrap,
+.gradio-container .prose,
+.gradio-container .markdown {
+  color: var(--text) !important;
+}
+
+.gradio-container input,
+.gradio-container textarea,
+.gradio-container select {
+  background: rgba(255, 255, 255, 0.74) !important;
+  color: var(--text) !important;
+  border-color: rgba(232, 79, 138, 0.24) !important;
+}
+
+.caption {
+  color: var(--muted);
+  line-height: 1.7;
+  margin-top: -6px;
+}
+
+@media (max-width: 960px) {
+  .hero-grid { grid-template-columns: 1fr; }
+}
+"""
+
+APP_THEME = gr.themes.Base(
+    primary_hue="pink",
+    secondary_hue="purple",
+    neutral_hue="stone",
+    radius_size="lg",
+).set(
+    body_background_fill="#fff6fb",
+    block_background_fill="rgba(255, 248, 252, 0.82)",
+    block_border_color="rgba(232, 79, 138, 0.24)",
+    input_background_fill="rgba(255, 255, 255, 0.74)",
+    button_primary_background_fill="#ff9cc5",
+    button_primary_text_color="#5a213e",
+)
+
 
 def make_demo_image(size: int = DEFAULT_SIZE, seed: int = 7) -> Image.Image:
     """Create a default image with enough structure for pretext tasks."""
@@ -261,9 +504,9 @@ def make_demo_image(size: int = DEFAULT_SIZE, seed: int = 7) -> Image.Image:
     cy = size * 0.50
     r = np.sqrt((x - cx) ** 2 + (y - cy) ** 2)
     base = np.zeros((size, size, 3), dtype=np.float32)
-    base[..., 0] = 18 + 58 * (x / size) + 24 * np.sin(y / 22)
-    base[..., 1] = 28 + 84 * (y / size) + 32 * np.cos((x + y) / 37)
-    base[..., 2] = 48 + 118 * np.exp(-(r / (size * 0.62)) ** 2)
+    base[..., 0] = 246 + 8 * np.sin(y / 20) + 5 * (x / size)
+    base[..., 1] = 206 + 26 * (y / size) + 8 * np.cos((x + y) / 34)
+    base[..., 2] = 226 + 18 * np.exp(-(r / (size * 0.60)) ** 2)
     noise = rng.normal(0, 4, base.shape)
     arr = np.clip(base + noise, 0, 255).astype(np.uint8)
     img = Image.fromarray(arr, "RGB")
@@ -272,26 +515,39 @@ def make_demo_image(size: int = DEFAULT_SIZE, seed: int = 7) -> Image.Image:
     draw.rounded_rectangle(
         [size * 0.08, size * 0.10, size * 0.58, size * 0.50],
         radius=int(size * 0.07),
-        outline=(100, 227, 255, 210),
+        outline=(232, 79, 138, 210),
         width=max(2, size // 80),
-        fill=(100, 227, 255, 28),
+        fill=(255, 255, 255, 72),
     )
     draw.ellipse(
         [size * 0.46, size * 0.18, size * 0.90, size * 0.62],
-        outline=(255, 93, 135, 230),
+        outline=(183, 127, 242, 210),
         width=max(2, size // 70),
-        fill=(255, 93, 135, 30),
+        fill=(255, 226, 240, 76),
     )
     draw.polygon(
         [(size * 0.18, size * 0.84), (size * 0.54, size * 0.45), (size * 0.86, size * 0.86)],
-        outline=(255, 179, 92, 235),
-        fill=(255, 179, 92, 38),
+        outline=(200, 138, 48, 235),
+        fill=(255, 231, 168, 92),
+    )
+    draw.polygon(
+        [
+            (size * 0.34, size * 0.25),
+            (size * 0.42, size * 0.13),
+            (size * 0.50, size * 0.25),
+            (size * 0.60, size * 0.12),
+            (size * 0.66, size * 0.25),
+            (size * 0.67, size * 0.35),
+            (size * 0.33, size * 0.35),
+        ],
+        outline=(200, 138, 48, 230),
+        fill=(255, 231, 168, 150),
     )
     for i in range(7):
         offset = int(size * (0.12 + i * 0.10))
         draw.line(
             [(offset, size * 0.08), (size * 0.92, offset)],
-            fill=(140, 255, 194, 54),
+            fill=(232, 79, 138, 48),
             width=max(1, size // 130),
         )
     return img
@@ -477,30 +733,30 @@ def fig_to_image(fig: plt.Figure) -> np.ndarray:
 
 
 def style_axis(ax: plt.Axes) -> None:
-    ax.set_facecolor("#0b1324")
-    ax.tick_params(colors="#b8c7db", labelsize=8)
+    ax.set_facecolor("#fff8fc")
+    ax.tick_params(colors="#8a5f75", labelsize=8)
     for spine in ax.spines.values():
-        spine.set_color("#28415f")
-    ax.grid(True, color="#20324c", linewidth=0.8, alpha=0.72)
+        spine.set_color("#f2bad2")
+    ax.grid(True, color="#f8d6e6", linewidth=0.8, alpha=0.9)
 
 
 def plot_rotation_curves(losses: Iterable[float], accuracies: Iterable[float]) -> np.ndarray:
     losses = list(losses)
     accuracies = list(accuracies)
     xs = np.arange(1, len(losses) + 1)
-    fig, axes = plt.subplots(1, 2, figsize=(8.7, 3.45), facecolor="#070b16")
-    axes[0].plot(xs, losses, color="#ffb35c", linewidth=2.7)
-    axes[0].set_title("Rotation pretext loss", color="#eef7ff", fontsize=10, weight="bold")
-    axes[0].set_xlabel("epoch", color="#9db0c5")
-    axes[0].set_ylabel("cross entropy", color="#9db0c5")
+    fig, axes = plt.subplots(1, 2, figsize=(8.7, 3.45), facecolor="#fff8fc")
+    axes[0].plot(xs, losses, color="#c88a30", linewidth=2.7)
+    axes[0].set_title("Rotation pretext loss", color="#6e244b", fontsize=10, weight="bold")
+    axes[0].set_xlabel("epoch", color="#8a5f75")
+    axes[0].set_ylabel("cross entropy", color="#8a5f75")
     style_axis(axes[0])
 
-    axes[1].plot(xs, np.array(accuracies) * 100, color="#64e3ff", linewidth=2.7)
-    axes[1].fill_between(xs, np.array(accuracies) * 100, color="#64e3ff", alpha=0.13)
+    axes[1].plot(xs, np.array(accuracies) * 100, color="#e84f8a", linewidth=2.7)
+    axes[1].fill_between(xs, np.array(accuracies) * 100, color="#e84f8a", alpha=0.16)
     axes[1].set_ylim(0, 105)
-    axes[1].set_title("Rotation prediction accuracy", color="#eef7ff", fontsize=10, weight="bold")
-    axes[1].set_xlabel("epoch", color="#9db0c5")
-    axes[1].set_ylabel("accuracy %", color="#9db0c5")
+    axes[1].set_title("Rotation prediction accuracy", color="#6e244b", fontsize=10, weight="bold")
+    axes[1].set_xlabel("epoch", color="#8a5f75")
+    axes[1].set_ylabel("accuracy %", color="#8a5f75")
     style_axis(axes[1])
     fig.tight_layout(pad=1.25)
     return fig_to_image(fig)
@@ -628,18 +884,18 @@ def loss_curve(start: float, end: float, epochs: int, seed: int) -> np.ndarray:
 
 def plot_mae_curves(curve_a: np.ndarray, curve_b: np.ndarray, label_a: str, label_b: str) -> np.ndarray:
     xs = np.arange(1, len(curve_a) + 1)
-    fig, ax = plt.subplots(figsize=(8.7, 3.45), facecolor="#070b16")
-    ax.plot(xs, curve_a, color="#64e3ff", linewidth=2.8, label=label_a)
-    ax.plot(xs, curve_b, color="#ff5d87", linewidth=2.8, label=label_b)
-    ax.fill_between(xs, curve_a, color="#64e3ff", alpha=0.11)
-    ax.fill_between(xs, curve_b, color="#ff5d87", alpha=0.10)
-    ax.set_title("MAE masked reconstruction loss", color="#eef7ff", fontsize=11, weight="bold")
-    ax.set_xlabel("epoch", color="#9db0c5")
-    ax.set_ylabel("masked MSE", color="#9db0c5")
+    fig, ax = plt.subplots(figsize=(8.7, 3.45), facecolor="#fff8fc")
+    ax.plot(xs, curve_a, color="#e84f8a", linewidth=2.8, label=label_a)
+    ax.plot(xs, curve_b, color="#b77ff2", linewidth=2.8, label=label_b)
+    ax.fill_between(xs, curve_a, color="#e84f8a", alpha=0.13)
+    ax.fill_between(xs, curve_b, color="#b77ff2", alpha=0.12)
+    ax.set_title("MAE masked reconstruction loss", color="#6e244b", fontsize=11, weight="bold")
+    ax.set_xlabel("epoch", color="#8a5f75")
+    ax.set_ylabel("masked MSE", color="#8a5f75")
     style_axis(ax)
-    leg = ax.legend(facecolor="#0b1324", edgecolor="#28415f", fontsize=8)
+    leg = ax.legend(facecolor="#fff8fc", edgecolor="#f2bad2", fontsize=8)
     for text in leg.get_texts():
-        text.set_color("#eef7ff")
+        text.set_color("#6e244b")
     fig.tight_layout(pad=1.25)
     return fig_to_image(fig)
 
@@ -810,27 +1066,27 @@ def plot_simclr(
     label_b: str,
 ) -> np.ndarray:
     xs = np.arange(1, len(curves_a[0]) + 1)
-    fig, axes = plt.subplots(1, 2, figsize=(8.7, 3.45), facecolor="#070b16")
-    axes[0].plot(xs, curves_a[2], color="#64e3ff", linewidth=2.6, label=label_a)
-    axes[0].plot(xs, curves_b[2], color="#ff5d87", linewidth=2.6, label=label_b)
-    axes[0].set_title("InfoNCE loss", color="#eef7ff", fontsize=10, weight="bold")
-    axes[0].set_xlabel("epoch", color="#9db0c5")
-    axes[0].set_ylabel("loss", color="#9db0c5")
+    fig, axes = plt.subplots(1, 2, figsize=(8.7, 3.45), facecolor="#fff8fc")
+    axes[0].plot(xs, curves_a[2], color="#e84f8a", linewidth=2.6, label=label_a)
+    axes[0].plot(xs, curves_b[2], color="#b77ff2", linewidth=2.6, label=label_b)
+    axes[0].set_title("InfoNCE loss", color="#6e244b", fontsize=10, weight="bold")
+    axes[0].set_xlabel("epoch", color="#8a5f75")
+    axes[0].set_ylabel("loss", color="#8a5f75")
     style_axis(axes[0])
 
-    axes[1].plot(xs, curves_a[0], color="#64e3ff", linewidth=2.4, label=f"{label_a} pos")
-    axes[1].plot(xs, curves_a[1], color="#64e3ff", linestyle="--", linewidth=2.1, label=f"{label_a} neg")
-    axes[1].plot(xs, curves_b[0], color="#ff5d87", linewidth=2.4, label=f"{label_b} pos")
-    axes[1].plot(xs, curves_b[1], color="#ff5d87", linestyle="--", linewidth=2.1, label=f"{label_b} neg")
+    axes[1].plot(xs, curves_a[0], color="#e84f8a", linewidth=2.4, label=f"{label_a} pos")
+    axes[1].plot(xs, curves_a[1], color="#e84f8a", linestyle="--", linewidth=2.1, label=f"{label_a} neg")
+    axes[1].plot(xs, curves_b[0], color="#b77ff2", linewidth=2.4, label=f"{label_b} pos")
+    axes[1].plot(xs, curves_b[1], color="#b77ff2", linestyle="--", linewidth=2.1, label=f"{label_b} neg")
     axes[1].set_ylim(-0.2, 1.05)
-    axes[1].set_title("Cosine similarity", color="#eef7ff", fontsize=10, weight="bold")
-    axes[1].set_xlabel("epoch", color="#9db0c5")
+    axes[1].set_title("Cosine similarity", color="#6e244b", fontsize=10, weight="bold")
+    axes[1].set_xlabel("epoch", color="#8a5f75")
     style_axis(axes[1])
 
     for ax in axes:
-        leg = ax.legend(facecolor="#0b1324", edgecolor="#28415f", fontsize=7)
+        leg = ax.legend(facecolor="#fff8fc", edgecolor="#f2bad2", fontsize=7)
         for text in leg.get_texts():
-            text.set_color("#eef7ff")
+            text.set_color("#6e244b")
     fig.tight_layout(pad=1.25)
     return fig_to_image(fig)
 
@@ -890,20 +1146,20 @@ def run_simclr_ui(
 
 def build_interface() -> gr.Blocks:
     default_image = pil_to_np(make_demo_image())
-    with gr.Blocks(title="暗黑自监督学习实验室") as demo:
+    with gr.Blocks(title="粉色公主自监督学习实验室") as demo:
         gr.HTML(
             """
             <div class="app-shell">
               <div class="hero-grid">
                 <div>
-                  <div class="eyebrow">Self-Supervised Vision Lab</div>
-                  <div class="hero-title">暗黑自监督学习实验室</div>
+                  <div class="eyebrow">Princess Self-Supervised Vision Lab</div>
+                  <div class="hero-title">粉色公主自监督学习实验室</div>
                   <div class="hero-copy">
-                    上传一张图片，现场观察旋转预测、MAE 遮挡重建和 SimCLR 对比学习。
+                    上传一张图片，在玫瑰粉、香槟金和软糖色的实验台里观察旋转预测、MAE 遮挡重建和 SimCLR 对比学习。
                     页面会展示原图、变换或遮挡后的输入、模型输出结果，并用 loss / accuracy 曲线解释“自监督信号”如何起作用。
                   </div>
                   <div class="hero-badges">
-                    <div class="badge-chip">中文交互页面</div>
+                    <div class="badge-chip">中文公主风交互页面</div>
                     <div class="badge-chip">旋转预测预任务</div>
                     <div class="badge-chip">MAE patch mask 重建</div>
                     <div class="badge-chip">SimCLR 正负样本对比</div>
@@ -930,7 +1186,7 @@ def build_interface() -> gr.Blocks:
                 )
                 seed = gr.Slider(0, 999, value=42, step=1, label="随机种子", info="换一个种子会改变 mask、裁剪和增强视图。")
                 gr.Markdown(
-                    "这不是重型训练平台，而是一个教学型 Vibe Coding Demo：用轻量模型和可视化，把自监督学习的机制讲清楚。",
+                    "这不是重型训练平台，而是一个粉色公主系教学 Demo：用轻量模型和可视化，把自监督学习的机制讲清楚。",
                     elem_classes=["caption"],
                 )
             with gr.Column(scale=2):
@@ -1059,7 +1315,7 @@ def build_interface() -> gr.Blocks:
 
 
 def main() -> None:
-    parser = argparse.ArgumentParser(description="Launch the dark self-supervised learning lab.")
+    parser = argparse.ArgumentParser(description="Launch the pink princess self-supervised learning lab.")
     parser.add_argument("--share", action="store_true", help="Create a temporary Gradio sharing link.")
     parser.add_argument("--port", type=int, default=int(os.environ.get("PORT", "7860")), help="Server port.")
     parser.add_argument("--no-browser", action="store_true", help="Do not open a browser window.")

deploy_hf_space.py

@@ -49,7 +49,7 @@ def main() -> None:
     parser.add_argument("--private", action="store_true", help="Create the Space as private.")
     parser.add_argument(
         "--commit-message",
-        default="Deploy dark self-supervised learning lab",
+        default="Deploy pink princess self-supervised learning lab",
         help="Commit message for the uploaded Space files.",
     )
     args = parser.parse_args()