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;
   .........完整代码请登录后点击上方下载按钮下载查看