优化

static/css/styles.css

@@ -31,7 +31,7 @@ input[type="range"]{width:100%}
 .preview{overflow:auto}
 .stage-wrap{background:#0b1224;border:1px solid var(--border);border-radius:16px;padding:12px}
 .stage-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:#94a3b8}
-.stage{position:relative;margin:0 auto;background:#111827;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.35);overflow:hidden;width:960px;height:504px;display:flex;align-items:center;justify-content:center}
+.stage{position:relative;margin:0 auto;background:#111827;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.35);overflow:hidden;width:960px;height:504px;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;background-repeat:no-repeat}
 .logo-wrap{position:absolute;top:24px;left:24px;width:80px;height:80px;border-radius:12px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;overflow:hidden}
 .logo-wrap img{max-width:70px;max-height:70px}
 .content{padding:40px;text-align:center;max-width:85%}

static/js/main.js

@@ -16,7 +16,8 @@ const state = {
   gradient: "",
   shadow: true,
   padding: 64,
-  logo: null
+  logo: null,
+  bgImg: null
 };
 
 function applySize() {
@@ -36,7 +37,9 @@ function applyTheme() {
   const content = el("content");
 
   // 背景
-  if (state.gradient) {
+  if (state.bgImg) {
+    stage.style.background = `url(${state.bgImg}) center/cover no-repeat`;
+  } else if (state.gradient) {
     stage.style.background = `linear-gradient(${state.gradient})`;
   } else {
     stage.style.background = state.bgColor;
@@ -150,6 +153,17 @@ function bindInputs() {
     fr.readAsDataURL(file);
   });
 
+  el("bgImgInput").addEventListener("change", (e) => {
+    const file = e.target.files && e.target.files[0];
+    if (!file) return;
+    const fr = new FileReader();
+    fr.onload = () => {
+      state.bgImg = fr.result;
+      applyTheme();
+    };
+    fr.readAsDataURL(file);
+  });
+
   document.querySelectorAll(".preset").forEach((btn) => {
     btn.addEventListener("click", () => {
       const p = btn.dataset.preset;
@@ -198,6 +212,33 @@ function applyPreset(name) {
   applyTheme();
 }
 
+function randomTheme() {
+  const r = () => Math.floor(Math.random() * 256);
+  const rc = () => `#${r().toString(16).padStart(2,'0')}${r().toString(16).padStart(2,'0')}${r().toString(16).padStart(2,'0')}`;
+  
+  state.bgColor = rc();
+  state.fgColor = rc();
+  state.gradient = Math.random() > 0.5 ? "" : `to right, ${state.bgColor}, ${rc()}`;
+  state.titleSize = 32 + Math.floor(Math.random() * 64);
+  state.subtitleSize = 18 + Math.floor(Math.random() * 30);
+  state.textAlign = ["left", "center", "right"][Math.floor(Math.random() * 3)];
+  state.shadow = Math.random() > 0.5;
+  state.padding = 24 + Math.floor(Math.random() * 96);
+  state.bgImg = null; // 随机时清除背景图
+  
+  el("bgColor").value = state.bgColor;
+  el("fgColor").value = state.fgColor;
+  el("titleSize").value = state.titleSize;
+  el("subtitleSize").value = state.subtitleSize;
+  el("textAlign").value = state.textAlign;
+  el("gradient").value = state.gradient || ""; // 简单的处理
+  el("shadow").checked = state.shadow;
+  el("padding").value = state.padding;
+  el("bgImgInput").value = "";
+  
+  applyTheme();
+}
+
 function resetAll() {
   Object.assign(state, {
     w: 1200, h: 630,
@@ -211,11 +252,13 @@ function resetAll() {
     gradient: "",
     shadow: true,
     padding: 64,
-    logo: null
+    logo: null,
+    bgImg: null
   });
   const wrap = el("logo");
   wrap.style.display = "none";
   el("logoImg").src = "";
+  el("bgImgInput").value = ""; 
   el("titleInput").value = state.title;
   el("subtitleInput").value = state.subtitle;
   el("sizePreset").value = "1200x630";
@@ -259,5 +302,19 @@ function init() {
   applyTheme();
 }
 
+window.addEventListener("DOMContentLoaded", init);
+
+  a.href = data;
+  a.click();
+}
+
+function init() {
+  el("title").textContent = state.title;
+  el("subtitle").textContent = state.subtitle;
+  bindInputs();
+  applySize();
+  applyTheme();
+}
+
 window.addEventListener("DOMContentLoaded", init);
 

templates/index.html

@@ -5,8 +5,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>OG 社交预览图工坊 | OG Image Studio</title>
   <link rel="stylesheet" href="/static/css/styles.css" />
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <script>
     window.__APP_CONFIG__ = {
       defaultTitle: "你的标题在这里",
@@ -25,7 +23,7 @@
         <p>一键生成 1200×630/675 的社交分享封面，适配公众号/微博/小红书/推特</p>
       </div>
     </div>
-    <a class="link" href="https://huggingface.co/spaces/duqing2026" target="_blank" rel="noreferrer">Hugging Face Spaces</a>
+    <!-- <a class="link" href="https://huggingface.co/spaces/duqing2026" target="_blank" rel="noreferrer">Hugging Face Spaces</a> -->
   </header>
 
   <main class="container">
@@ -132,6 +130,7 @@
 
       <div class="actions">
         <button id="resetBtn" class="ghost">重置</button>
+        <button id="randomBtn" class="ghost">🎲 随机</button>
         <button id="downloadBtn" class="primary">导出 PNG</button>
       </div>
     </section>
@@ -161,7 +160,7 @@
     <a href="/healthz" target="_blank" rel="noreferrer">健康检查</a>
   </footer>
 
-  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
+  <script src="/static/js/html2canvas.min.js"></script>
   <script src="/static/js/main.js"></script>
 </body>
 </html>