js浏览器调用openai的api实现文本描述生成元素可视化拖拽编辑的海报效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js浏览器调用openai的api实现文本描述生成元素可视化拖拽编辑的海报效果代码

代码标签： js 浏览器调用 openai api 文本描述生成元素可视化拖拽编辑海报

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1" />
  <title>H5 海报 AI 设计器</title>
  <style>
    :root{
      --primary:#2563eb;
      --accent:#60a5fa;
      --bg:#eff6ff;
      --text:#0f172a;
      --panel:#ffffff;
      --border:#e5e7eb;
      --muted:#6b7280;
      --shadow: 0 6px 24px rgba(0,0,0,.08);
      --radius: 12px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans CJK SC","PingFang SC","Microsoft YaHei", Arial, sans-serif;
      color:#111827; background: #f7f7fb;
    }
    .app{display:flex; height:100vh; gap:12px; padding:12px}
    .sidebar{
      width:340px; min-width:300px; max-width:420px; background:var(--panel);
      border:1px solid var(--border); border-radius: var(--radius); padding:14px; overflow:auto;
      box-shadow: var(--shadow);
    }
    .sidebar h1{font-size:18px;margin:0 0 12px 0}
    .group{border:1px solid var(--border); border-radius:10px; padding:12px; margin-bottom:12px; background:#fff}
    .group h3{font-size:14px; margin:0 0 8px 0; color:#374151}
    label{display:block; font-size:12px; color:#374151; margin:8px 0 4px}
    input[type="text"], input[type="number"], input[type="password"], select, textarea{
      width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:8px; outline:none;
      font-size:13px; background:#fff;
    }
    textarea{min-height:90px; resize:vertical}
    .row{display:flex; gap:8px}
    .row > div{flex:1}
    .btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 12px;
      border:1px solid var(--border); border-radius:10px; cursor:pointer; user-select:none; background:#fff;
      transition:.2s; font-size:13px;
    }
    .btn:hover{transform:translateY(-1px); box-shadow: var(--shadow)}
    .btn.primary{background: var(--primary); border-color: transparent; color:#fff}
    .btn.ghost{background:#fff}
    .btn.warn{background:#fee2e2; border-color:#fecaca; color:#991b1b}
    .btn-row{display:flex; gap:8px; flex-wrap:wrap}
    .muted{color:var(--muted); font-size:12px}
    .palette{display:grid; grid-template-columns: repeat(3,1fr); gap:8px}
    .chip{
      padding:8px 10px; border:1px solid var(--border); border-radius:999px; cursor:pointer; text-align:center;
      font-size:12px; background:#fff; user-select:none;
    }
    .chip.active{border-color: var(--primary); color:var(--primary); background:#f0f7ff}
    .main{
      flex:1; display:flex; gap:12px; min-width:320px; min-height: 0; /* 允许子项正确滚动 */
    }
    .stage{
      flex:1; display:flex; align-items:flex-start; justify-content:center; position:relative; overflow:auto;
      background:linear-gradient(180deg,#f6f7ff,#fbfbff);
      border:1px dashed #e8ebf3; border-radius:12px; padding:16px;
      min-height: 0; /* 关键：配合 overflow 在 flex 布局下可滚动 */
      scroll-behavior: smooth; /* 平滑滚动 */
    }
    .poster-wrap{
      position:relative; background: var(--bg);
      border-radius: 18px; overflow:hidden; border:1px solid #e4e7ee;
      box-shadow: 0 10px 40px rgba(30,41,59,.12);
      transform-origin: top left;
    }
    .poster{
      position:relative; width:1080px; height:1920px; overflow:hidden; background: var(--bg);
    }
    .grid-overlay{
      position:absolute; inset:0; pointer-events:none;
      background-image:
        linear-gradient(to right, rgba(0,0,0,.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,.04) 1px, transparent 1px);
      background-size: 40px 40px, 40px 40px;
      opacity:.4; display:none;
    }
    .grid-overlay.show{display:block}
    .element{
      position:absolute; cursor:move; user-select:none; transition:outline-color .15s;
    }
    .element.selected{outline:2px dashed rgba(37,99,235,.8); outline-offset:2px}
    .text-el{
      color: var(--text); line-height:1.25; letter-spacing:.2px;
      text-shadow: none; padding:2px 4px;
    }
    .img-el{display:block; object-fit:cover; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,.08)}
    .badge{
      display:inline-block; padding:3px 8px; border-radius:999px; font-size:11px; background:#eef2ff; color:#3730a3;
      border:1px solid #dbe3ff;
    }
    /* Style Panel */
    .style-panel{
      width:300px; background:#fff; border:1px solid var(--border); border-radius: var(--radius);
      box-shadow: var(--shadow); padding:12px; height:100%; overflow:auto;
    }
    .style-panel h3{font-size:14px; margin:0 0 8px 0; color:#374151}
    .row-inline{display:flex; gap:8px; align-items:center}
    .row-inline input[type="number"]{width:90px}
    .pill{padding:4px 8px; border:1px solid var(--border); border-radius:8px; font-size:12px}
    .panel-section{border-top:1px dashed #e5e7eb; padding-top:10px; margin-top:10px}
    .tag{font-size:11px; color:#6b7280; background:#f3f4f6; padding:2px 6px; border-radius:6px; border:1px solid #e5e7eb}
    .hidden{display:none}
    .small{font-size:12px}
    .kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:11px; background:#f3f4f6; border:1px solid #e5e7eb; border-radius:6px; padding:2px 6px}
    .footer-note{font-size:11px; color:#6b7280; margin-top:6px}
  </style>
</head>
<body>
  <div class="app">
    <aside class="sidebar">
      <h1>🎨 H5 海报 AI 设计器</h1>

      <div class="group">
        <h3>海报描述</h3>
        <textarea id="desc" placeholder="示例：夏日新品促销，清新风格，强调 7 折优惠，主色系绿色，加入二维码引导关注。"></textarea>
        <div class="btn-row" style="margin-top:8px">
          <button id="btnAddTitle" class="btn">+ 添加标题</button>
          <button id="btnAddBody" class="btn">+ 添加正文</button>
          <button id="btnAddImage" class="btn">+ 添加图片</button>
        </div>
      </div>

      <div class="group">
        <h3>色系与尺寸</h3>
        <div class="palette" id="palette">
          <div class="chip active" data-key="冷静蓝">冷静蓝</div>
          <div class="chip" data-key="活力红">活力红</div>
          <div class="chip" data-key="清新绿">清新绿</div>
          <div class="chip" data-key="商务灰">商务灰</div>
          <div class="chip" data-key="浪漫紫">浪漫紫</div>
          <div class="chip" data-key="自定义">自定义</div>
        </div>
        <div id="customColors" class="row panel-section hidden">
          <div>
            <label>主色</label>
            <input type="color" id="cPrimary" value="#2563eb"/>
          </div>
          <div>
            <label>强调</label>
            <input type="color" id="cAccent" value="#60a5fa"/>
          </div>
          <div>
            <label>背景</label>
            <input type="color" id="cBg" value="#eff6ff"/>
          </div>
        </div>

        <div class="row panel-section">
          <div>
            <label>宽度(px)</label>
            <input type="number" id="w" value="1080" min="320" step="10"/>
          </div>
          <div>
            <label>高度(px)</label>
            <input type="number" id="h" value="1920" min="320" step="10"/>
          </div>
        </div>
        <div class="row-inline" style="margin-top:8px">
          <input type="checkbox" id="gridToggle" />
          <label for="gridToggle" style="margin:0">显示网格</label>
          <span class="tag">预览缩放</span>
          <input type="range" id="zoom" min="30" max="100" value="60" />
          <span id="zoomLabel" class="small">60%</span>
        </div>
     .........完整代码请登录后点击上方下载按钮下载查看