新手也能学会，100行代码玩AI LOGO

先做准备：新手需要的工具和材料（缺一不可）

在写代码前，先把 "装备" 备齐，就像做饭前要准备锅碗瓢盆一样：

编辑器：用 VS Code（免费！官网直接下载，安装时选 "添加到右键菜单"，后面打开文件更方便）

本地服务器插件：VS Code 里装 "Live Server"（打开 VS Code，点左侧 "扩展" 图标，搜 "Live Server"，点 "安装"，后面解决跨域要用）

API 密钥 ：找一个能调用 DALL-E-3 的 API 接口（比如文中的agicto.cn，按平台要求申请密钥，像领 "会员卡" 一样，调用 API 要靠它验证身份）

浏览器：用 Chrome 或 Edge（兼容性好，报错提示清楚，新手容易排查问题）

一、为啥选这个项目？新手能学到啥？

先跟小白说清楚 "做这个有啥用"，避免学的时候迷茫：

有用：生成的 Logo 能真的用（比如给自己的小红书、小项目当图标），不是 "练手玩具"

好学：只用 HTML、CSS（Bootstrap 帮我们写好了）、JS，不用学框架（Vue/React 这些暂时不用碰）

能落地：学会后能举一反三（比如做 "AI 生成表情包""AI 写文案"，逻辑都差不多）

新手能掌握的 3 个核心能力：

怎么用表单收集用户输入（比如让用户填 "Logo 名称"）

怎么调用别人的 API（让 AI 帮我们干活，不用自己写复杂算法）

怎么让页面 "动起来"（生成 Logo 后自动显示在页面上）

二、最终效果长啥样？（先看结果，再学过程）

就像搭积木前先看成品图，新手先知道 "做完后能实现啥"：

页面中间有两个输入框：一个填 "Bot 名称"（比如 "猫咪咖啡馆"），一个填 "描述"（比如 "可爱风、橘猫、咖啡杯"）

点 "生成图标" 按钮后，等几秒，下面会自动显示一张 1024x1024 的高清 Logo

如果没填 "Bot 名称"，点按钮会提示 "请填写此字段"（不用自己写提示代码）

电脑上打开时，内容会居中，不会偏左偏右（Bootstrap 帮我们搞定布局）

三、技术栈选型：为啥用这些工具？（新手不用纠结，跟着选就行）

每个工具都讲清楚 "它是干啥的""对新手有啥好处"：

技术	通俗作用	新手友好点
Bootstrap 3	现成的 "样式模板"	不用自己写 CSS 居中、调输入框样式，复制类名就行
DALL-E-3	AI 画图模型（帮我们生成 Logo）	不用自己训练模型，调用 API 就能用
fetch API	帮页面 "发请求" 给 AI（要 Logo）	浏览器自带，不用额外下载插件（比如 axios）
VS Code + Live Server	写代码和运行项目	Live Server 能解决 "跨域" 问题（新手最容易卡的坑）

四、代码拆解：从 0 写起，每行都讲透（分 2 步：搭页面 + 写逻辑）

第一步：搭页面（HTML + Bootstrap）------ 先做出 "输入框和按钮"

先创建一个文件：打开 VS Code，新建 "index.html"（右键→新建文件→命名为 index.html），然后复制下面代码，我会逐行解释每个部分是干啥的。

xml 复制代码

<!DOCTYPE html>
<!-- 告诉浏览器：这是一个HTML文件，按HTML规则解析 -->
<html lang="en">
<!-- 网页的"头部"：放样式、标题这些不直接显示在页面上的内容 -->
<head>
  <meta charset="UTF-8">
  <!-- 解决中文乱码的关键！必须加，不然页面可能显示"???" -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 让页面在手机上也能正常显示（响应式基础），新手先不用深究，复制就行 -->
  <title>AI Logo生成器</title>
  <!-- 引入Bootstrap样式：从网上直接拿现成的样式，不用自己写CSS -->
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<!-- 网页的"身体"：所有显示在页面上的内容（输入框、按钮、图片）都在这里 -->
<body>
  <!-- .container：Bootstrap的"居中容器"，加了这个类，里面的内容会自动在电脑屏幕中间 -->
  <div class="container">
    <!-- .row：Bootstrap的"行"，用来放表单（输入框和按钮），避免内容太宽 -->
    <div class="row">
      <!-- .col-md-6：让表单只占屏幕的6/12（一半宽度），不会拉得太宽，看着舒服 -->
      <div class="col-md-6">
        <!-- form：表单，专门用来收集用户输入（比如名称、描述） -->
        <form name="appForm" action="https://www.baidu.com">
          <!-- .form-group：Bootstrap的"表单组"，自动给输入框和标签加间距，不用自己调margin -->
          <div class="form-group">
            <!-- label：输入框的"标签"，告诉用户这个输入框是填啥的 -->
            <!-- for="titleInput"：和下面input的id对应，点标签也能激活输入框（比如点"Bot名称"，光标就会跳到输入框里） -->
            <label for="titleInput">Bot名称：</label>
            <!-- input：单行输入框，让用户填名称 -->
            <input 
              id="titleInput"  <!-- 和上面label的for对应，必须一样 -->
              name="title"     <!-- 给输入框起个名字，后面JS要靠这个名字拿用户输入的内容 -->
              type="text"      <!-- 输入框类型是"文本"，不能输入数字或日期（新手先记死） -->
              required         <!-- 浏览器自带的"必填验证"，没填点按钮会提示"请填写此字段" -->
              placeholder="请输入名称（如：奶茶小铺）"  <!-- 输入框里的灰色提示，告诉用户该填啥 -->
              class="form-control"  <!-- Bootstrap的输入框样式，让输入框变好看（有边框、圆角） -->
            >
          </div>
          <!-- 文本域：多行输入框，让用户填详细描述（比如Logo风格） -->
          <div class="form-group">
            <label for="descInput">Bot描述：</label>
            <textarea 
              name="desc"       <!-- 给文本域起名字，JS要拿这个的内容 -->
              id="descInput"    <!-- 和label的for对应 -->
              rows="3"          <!-- 文本域默认显示3行高，不用用户自己拉 -->
              placeholder="请输入Logo风格描述（如：温暖系、极简风、奶茶元素）"
              class="form-control"
            ></textarea>
          </div>
          <!-- 按钮：用户点这个按钮，就会触发"生成Logo"的操作 -->
          <button type="submit" class="btn btn-primary" id="submitBtn">生成图标</button>
          <!-- type="submit"：表单的"提交按钮"，点了会触发表单的提交事件 -->
          <!-- btn btn-primary：Bootstrap的按钮样式，蓝色按钮，比默认按钮好看 -->
        </form>
      </div>
    </div>
    <!-- 用来放生成的Logo：一开始是空的，JS会把图片插到这里 -->
    <div class="row" id="logo"></div>
  </div>
</body>
</html>

小白注意（这 3 个坑新手最容易踩）：

中文乱码：必须加，不然输入的中文可能显示成 "□□□"

label 和 input 对应：label的for和input的id必须一模一样（比如都是 "titleInput"），不然点标签激活不了输入框

Bootstrap 链接别写错：上面的标签复制全，漏一个字符都可能导致样式失效（比如按钮还是默认灰色）

第二步：写逻辑（JS）------ 让 "点按钮生成 Logo" 生效

现在页面有了，但点按钮只会跳转到百度（因为 form 的 action 是百度），我们要加 JS 代码，实现 3 件事：

阻止跳转（让按钮点了不跳走）

拿用户输入的 "名称" 和 "描述"

调用 AI API 生成 Logo，然后显示在页面上

在 HTML 的标签前面，加一个

xml 复制代码

<!-- 把JS代码放在body最后：确保页面先加载完（输入框、按钮都有了），再执行JS -->
<script>
  // 1. 找到表单：通过form的name属性"appForm"找到它（就像通过名字找人）
  const oForm = document.forms["appForm"];
  // 2. 给表单加"提交事件监听"：用户点"生成图标"时，就会执行后面的函数
  oForm.addEventListener("submit", function(event) {
    // 关键！阻止表单默认跳转：form默认点提交会跳转到action的地址（百度），我们要拦住这个行为
    // 比喻：就像你本来要出门（跳转），突然想先喝水（执行生成Logo的逻辑），就先"拦住"出门的动作
    event.preventDefault();
    // 3. 拿用户输入的内容：this指的是表单，通过"input的name"拿到值
    const appName = this["title"].value;  // 拿"Bot名称"输入框的值
    const appDesc = this["desc"].value;   // 拿"Bot描述"文本域的值
    // 4. 写"提示词"（告诉AI要画什么样的Logo）：提示词越详细，AI画得越准
    // 新手不用纠结怎么写，照着改就行：把用户输入的名称和描述插进去
    const prompt = `
      你是专业UI设计师，帮我设计一个移动应用Logo。
      应用名称：${appName}  // 这里会替换成用户填的名称（比如"猫咪咖啡馆"）
      应用描述：${appDesc}  // 这里会替换成用户填的描述（比如"可爱风、橘猫"）
      设计要求：1024x1024像素（适合当App图标），简洁、好看、符合名称风格
    `;
    // 5. 调用AI API：给AI发请求，要它生成Logo
    fetch('https://api.agicto.cn/v1/images/generations', {
      method: 'POST',  // 请求方式：POST（用来传递复杂内容，比如长提示词），新手记死：调用AI API基本都用POST
      headers: {       // 请求头：告诉API"我是谁""我发的内容是什么格式"
        'Authorization': 'Bearer 你的API密钥',  // 鉴权：证明你有权调用这个API（把"你的API密钥"换成自己申请的）
        'Content-Type': 'application/json'     // 告诉API：我发的内容是JSON格式（必须加，不然API看不懂）
      },
      body: JSON.stringify({  // 请求体：给API传具体参数（要生成几张图、多大尺寸）
        model: "dall-e-3",    // 用哪个AI模型：DALL-E-3（画Logo质量高）
        prompt: prompt,       // 把我们写好的提示词传过去
        n: 1,                 // 生成1张图（新手先别改，改了会多生成，浪费API次数）
        size: "1024x1024"     // 图片尺寸：1024x1024（刚好当App图标）
      })
    })
    // 6. 处理API的响应：AI生成好Logo后，会返回一个"图片链接"，我们要拿到这个链接
    .then(response => response.json())  // 把API返回的内容转换成JSON格式（方便JS读取）
    .then(data => {
      // 7. 创建图片元素：在页面上生成一个<img>标签，用来显示Logo
      const img = document.createElement("img");
      img.src = data.data[0].url;  // 把API返回的图片链接赋值给<img>的src（就像给图片找地址）
      img.style.maxWidth = "100%"; // 让图片适应容器宽度，不会超出屏幕
      
      // 8. 把图片插到页面上：找到id为"logo"的容器，把图片放进去
      document.getElementById("logo").appendChild(img);
    })
    // 9. 捕获错误：如果生成失败（比如API密钥错了、网络不好），给用户提示
    .catch((error) => {
      console.error('生成失败原因：', error);  // 在控制台显示错误（新手可以忽略，用来排查问题）
      alert('Logo生成失败！检查这2点：1. API密钥对不对 2. 网络好不好');  // 弹框告诉用户错了
    });
  });
</script>

小白必看：这 5 个点错了就运行不了！

API 密钥要替换：把'Bearer 你的API密钥'里的 "你的 API 密钥" 换成自己申请的（比如申请到的密钥是 "sk-xxxx"，就写成'Bearer sk-xxxx'，注意 "Bearer" 后面有个空格）

fetch 地址别改 ：文中的api.agicto.cn/v1/images/g...是现成的调用地址，新手别乱换其他地址

JS 要放在 body 最后：必须在前面，不然 JS 找不到表单（就像你要找桌子上的苹果，桌子还没摆出来，怎么找？）

别漏 JSON.stringify：body 里必须用这个函数把参数转成 JSON，不然 API 看不懂你要啥

跨域问题用 Live Server 解决 ：本地直接打开 HTML 文件（双击 index.html），点按钮会报错 "跨域"，解决办法：在 VS Code 里右键点击 index.html，选择 "Open with Live Server"，用弹出的地址访问（比如http://127.0.0.1:5500/index.html），就不会跨域了

五、怎么运行项目？（新手跟着做，3 步出结果）

保存文件：在 VS Code 里按Ctrl+S保存 index.html（一定要保存，不然代码没生效）

用 Live Server 打开：右键点击 index.html 文件，选择 "Open with Live Server"（如果没这个选项，检查是不是没装 Live Server 插件）

测试生成：

- 在 "Bot 名称" 里填 "猫咪咖啡馆"

- 在 "Bot 描述" 里填 "可爱风、橘色猫咪、咖啡杯、无背景"

- 点 "生成图标"，等 3-5 秒（AI 生成需要时间）

- 下面会自动显示生成的 Logo，成功！

六、常见问题：新手遇到的坑怎么解决？

问题现象	可能原因	解决办法
点按钮没反应，控制台报 "跨域"	直接双击打开 HTML 文件，没用水印 Server	右键→Open with Live Server，用新地址访问
弹框 "生成失败"	API 密钥错了或过期了	重新申请 API 密钥，替换代码里的密钥
输入名称后点按钮没提示 "必填"	input 标签漏了 required 属性	检查 input 标签里有没有写 required
生成的 Logo 不符合预期	提示词太简单	描述里加细节（比如 "蓝色主色调、扁平化风格"）
页面样式乱了（按钮是灰色）	Bootstrap 链接错了	重新复制文中的 Bootstrap标签

七、总结：新手学到了啥？（不用记，知道自己会了这些就行）

HTML 表单：会用 input、textarea 收集用户输入，会加必填验证

Bootstrap：会用.container 居中、.form-control 美化输入框，不用写 CSS

JS 事件：会阻止表单默认行为，会用 addEventListener 监听按钮点击

API 调用：会用 fetch 发 POST 请求，会处理响应和错误（以后调用其他 API 也能用）

DOM 操作：会创建图片元素，会把图片插到页面上（让页面 "动起来"）

八、新手能做的扩展（学会后再试，不难！）

加 "重新生成" 按钮：复制一个按钮，点击时清空原来的 Logo，重新调用 API

加 "下载 Logo" 按钮：给图片加一个点击事件，点击时触发下载（代码：img.onclick = () => window.open(img.src, '_blank');，点击图片会在新窗口打开，右键就能保存）

加加载提示：点按钮后显示 "正在生成 Logo..."，生成成功后隐藏（避免用户以为没点到按钮）