js在浏览器直接调用openai的apikey实现文本描述ai自动生成色卡代码-html代码-BFW代码库

js在浏览器直接调用openai的apikey实现文本描述ai自动生成色卡代码

代码语言：html

所属分类：其他

代码描述：js在浏览器直接调用openai的apikey实现文本描述ai自动生成色卡代码

代码标签： js 浏览器直接调用 openai apikey 文本描述 ai 自动生成色卡代码

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

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>根据文字描述生成配色方案 · 色卡展示</title>
  <style>
    :root{
      --bg:#0f1724;
      --card:#0b1220;
      --muted:#9AA4B2;
      --accent:#7C3AED;
      --glass: rgba(255,255,255,0.04);
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      background: linear-gradient(180deg, #071022 0%, #0b1220 100%);
      color:#e6eef6;
      -webkit-font-smoothing:antialiased;
      padding:32px;
    }
    .container{
      max-width:980px;
      margin:0 auto;
    }
    header{
      display:flex;
      gap:16px;
      align-items:center;
      margin-bottom:18px;
    }
    h1{
      font-size:20px;
      margin:0;
    }
    .subtitle{ color:var(--muted); font-size:13px; margin-top:6px}
    .panel{
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border-radius:12px;
      padding:16px;
      box-shadow: 0 6px 20px rgba(2,6,23,0.6);
      margin-bottom:18px;
    }
    label{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
    textarea{
      width:100%;
      min-height:96px;
      resize:vertical;
      padding:12px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,0.04);
      background:var(--card);
      color:inherit;
      font-size:14px;
    }
    .controls{
      display:flex;
      gap:12px;
      margin-top:10px;
      align-items:center;
      flex-wrap:wrap;
    }
    .btn{
      background:linear-gradient(90deg,var(--accent),#5b21b6);
      color:white;
      border:none;
      padding:10px 14px;
      border-radius:10px;
      cursor:pointer;
      font-weight:600;
      box-shadow:0 6px 18px rgba(124,58,237,0.18);
    }
    .btn:disabled{ opacity:0.5; cursor:not-allowed }
    .small{
      font-size:13px;
      color:var(--muted);
    }
    .range{
      display:flex;
      gap:12px;
      align-items:center;
    }
    .swatches{
      display:grid;
      grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
      gap:12px;
      margin-top:18px;
    }
    .swatch{
      border-radius:10px;
      overflow:hidden;
      cursor:pointer;
      transition:transform .12s ease, box-shadow .12s ease;
      position:relative;
      border:1px solid rgba(255,255,255,0.035);
    }
    .swatch:hover{ transform:translateY(-6px); box-shadow:0 10px 30px rgba(2,6,23,0.6) }
    .swatch .visual{
      height:110px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      font-size:14px;
    }
    .swatch .meta{
      padding:10px;
      background:linear-gradient(18.........完整代码请登录后点击上方下载按钮下载查看