10今天任务：AI聊天机器人

02811

今天任务：AI聊天机器人（20分钟）

思路

做一个像微信一样的聊天界面：

  • 底部输入框 + 发送按钮
  • 上面显示对话气泡（用户右边，AI左边）
  • 接入 Kimi 真AI（用你刚才成功的配置）
  • 加到作品集网站里

第 1 步：新建文件

Trae 里点 「文件」→「新建文件」

第 2 步：发需求给 AI

按 Ctrl + L，完整复制下面这段话：

plain

我已经成功接入了Kimi API（模型kimi-k2.6，temperature:1）。
现在我想做一个网页版AI聊天机器人，要求：

1. 界面像微信聊天：
   - 顶部标题栏显示"AI助手"
   - 中间是对话区域，用户消息在右边（粉色气泡），AI消息在左边（白色气泡）
   - 底部是输入框和发送按钮

2. 功能：
   - 输入文字，点击发送，调用Kimi API获取回复
   - 显示对话历史（保留上下文）
   - 有一个"清空对话"按钮
   - 发送时显示"AI思考中..."的加载状态

3. 技术要求：
   - 用HTML/CSS/JS实现
   - API Key用变量存储（方便替换）
   - 模型用kimi-k2.6，temperature:1
   - 系统提示词设定AI为"一个友善的助手，擅长回答各种问题"

4. 风格：
   - 和ai-copywriter.html保持一致（粉色系、圆角、现代感）
   - 适配手机和电脑

5. 给我完整代码，每行加中文注释，直接能运行

第 3 步：应用代码

等 AI 写完，点 「应用」，代码进左边编辑区

第 4 步：填API Key

找到代码里的 API Key 变量，填上你的 Key：

plain

sk-EsbZd1Gl8j21gKrYlAImEQcbr8myT1raqgtqbdliLJZ9n3Jg

第 5 步：保存

按 Ctrl + S

  • 文件名：ai-chat.html
  • 保存到 my-website 文件夹

第 6 步：测试

  1. 双击打开 ai-chat.html
  2. 输入”你好”，看AI能不能回复
  3. 多聊几句，看上下文能不能记住

加到作品集里

测试成功后，把 ai-chat.html 上传到 GitHub，然后改主页 index.html：

在 Trae 里打开 index.html，按 Ctrl + L 说：

“在作品卡片里再加一个：AI聊天机器人，简介’接入Kimi真AI的网页版聊天机器人，支持多轮对话’，链接到ai-chat.html”

点应用，保存，重新上传 GitHub。
优化方案：主线 + 交互一起完成

第一步：先做聊天机器人（主线）

按我上面给的步骤，在 Trae 里生成 ai-chat.html，填好 API Key，测试能对话。

第二步：升级主页交互（顺手做）

测试完聊天机器人后，在 Trae 里打开 index.html，按 Ctrl + L，发这段：

plain

我已经有6个作品了（Hello World、名字欢迎页、计算器、AI文案生成器、AI聊天机器人、关于我）。
现在帮我升级主页的交互效果：

1. 作品卡片鼠标悬停时：轻微放大（1.03倍）、边框发光、阴影加深
2. 页面滚动时：卡片依次淡入上来（有动画，不是一下子全出来）
3. 点击卡片时：有轻微的按下反馈
4. 导航栏滚动时：变成半透明毛玻璃效果
5. 整体保持现在的深色风格，不要改颜色

给我升级后的完整 index.html 代码，每行加中文注释。

AI 会生成一个带炫酷交互的新主页，保存覆盖原来的 index.html。

第三步：一起上传

把以下文件一起传到 GitHub：

ai-copywriter.html（如果之前没传过）

ai-chat.html（新做的聊天机器人）

index.html（升级后的交互主页）

现在做最后几步：

第 1 步：填 API Key

  1. 看代码里有没有一行类似：JavaScriptconst API_KEY = '你的API_Key';或者JavaScriptconst API_KEY = '';
  2. 把引号里的内容换成你的真实 Key：plainsk-EsbZd1Gl8j21gKrYlAImEQcbr8myT1raqgtqbdliLJZ9n3Jg

第 2 步：保存

按 Ctrl + S

  • 文件名：ai-chat.html
  • 保存位置：桌面 → my-website 文件夹（和其他 html 文件放一起）

第 3 步：测试

  1. 去 my-website 文件夹
  2. 双击 ai-chat.html
  3. 输入”你好”，点发送
  4. 看 Kimi 能不能回复你

第 4 步：加到作品集

测试成功后，把 ai-chat.html 上传到 GitHub，然后改主页

保存聊天机器人

确认 ai-chat.html 已经保存在 my-website 文件夹里。

第二步：升级主页（带交互 + 6个作品）

  1. Trae 里打开 index.html
  2. 按 Ctrl + A（全选），Delete 删掉所有内容
  3. 完整复制下面这段新代码，粘贴进去
  4. Ctrl + S 保存

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的AI学习作品集</title>
    <style>
        /* 页面基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            background: linear-gradient(135deg, #0f172a, #1e293b);
            color: #e2e8f0;
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        /* 顶部导航栏 - 毛玻璃效果 */
        .navbar {
            background: rgba(15, 23, 42, 0.8);
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 100;
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(96, 165, 250, 0.1);
            transition: all 0.3s ease;
        }
        
        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #60a5fa;
        }
        
        /* 主体内容 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        
        /* 欢迎区域 */
        .hero {
            text-align: center;
            padding: 60px 20px;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s ease forwards;
        }
        
        .hero h1 {
            font-size: 42px;
            margin-bottom: 20px;
            background: linear-gradient(90deg, #60a5fa, #a78bfa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .hero p {
            font-size: 18px;
            color: #94a3b8;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        /* 作品卡片网格 */
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            margin-top: 40px;
        }
        
        /* 单个作品卡片 */
        .project-card {
            background: rgba(30, 41, 59, 0.8);
            border: 1px solid rgba(96, 165, 250, 0.2);
            border-radius: 16px;
            padding: 30px;
            transition: all 0.3s ease;
            text-decoration: none;
            color: inherit;
            display: block;
            opacity: 0;
            transform: translateY(30px);
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        
        /* 卡片悬停效果 - 放大+发光+阴影 */
        .project-card:hover {
            transform: translateY(-8px) scale(1.03);
            border-color: #60a5fa;
            box-shadow: 0 15px 40px rgba(96, 165, 250, 0.3);
        }
        
        /* 卡片点击反馈 */
        .project-card:active {
            transform: translateY(-4px) scale(0.98);
        }
        
        /* 卡片进入动画 - 依次淡入 */
        .project-card.show {
            animation: fadeInUp 0.6s ease forwards;
        }
        
        /* 每个卡片延迟不同，形成依次出现的效果 */
        .project-card:nth-child(1).show { animation-delay: 0.1s; }
        .project-card:nth-child(2).show { animation-delay: 0.2s; }
        .project-card:nth-child(3).show { animation-delay: 0.3s; }
        .project-card:nth-child(4).show { animation-delay: 0.4s; }
        .project-card:nth-child(5).show { animation-delay: 0.5s; }
        .project-card:nth-child(6).show { animation-delay: 0.6s; }
        
        /* 淡入动画定义 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .project-icon {
            font-size: 40px;
            margin-bottom: 15px;
            transition: transform 0.3s ease;
        }
        
        /* 图标悬停旋转效果 */
        .project-card:hover .project-icon {
            transform: scale(1.2) rotate(5deg);
        }
        
        .project-card h3 {
            font-size: 22px;
            margin-bottom: 10px;
            color: #f1f5f9;
        }
        
        .project-card p {
            font-size: 14px;
            color: #94a3b8;
            line-height: 1.6;
        }
        
        .project-tag {
            display: inline-block;
            background: rgba(96, 165, 250, 0.2);
            color: #60a5fa;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            margin-top: 15px;
            transition: all 0.3s ease;
        }
        
        /* 标签悬停变亮 */
        .project-card:hover .project-tag {
            background: rgba(96, 165, 250, 0.4);
            color: #fff;
        }
        
        /* 页脚 */
        footer {
            text-align: center;
            padding: 40px;
            color: #64748b;
            font-size: 14px;
            opacity: 0;
            animation: fadeInUp 0.8s ease 0.8s forwards;
        }
        
        /* 响应式适配手机 */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 28px;
            }
            .projects-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="logo">🚀 AI学习之路</div>
            <div style="color: #94a3b8;">零基础 → AI开发工程师</div>
        </div>
    </nav>

    <!-- 欢迎区域 -->
    <div class="container">
        <div class="hero">
            <h1>欢迎来到我的AI学习作品集</h1>
            <p>这是一个从零开始的学习记录。我不会写代码，全程用AI辅助，做出了这些网页。每一个作品都代表一次进步。</p>
        </div>

        <!-- 作品展示 -->
        <div class="projects-grid">
            <!-- 作品1：Hello World -->
            <a href="index1.html" class="project-card">
                <div class="project-icon">👋</div>
                <h3>Hello World</h3>
                <p>我的第一个网页！点击红色按钮，弹出"Hello World"。学会了按钮和弹窗的基本原理。</p>
                <span class="project-tag">基础入门</span>
            </a>

            <!-- 作品2：名字欢迎页 -->
            <a href="hello-name.html" class="project-card">
                <div class="project-icon">🎉</div>
                <h3>名字欢迎页</h3>
                <p>输入你的名字，生成专属欢迎语。学会了输入框和获取用户输入的值。</p>
                <span class="project-tag">交互入门</span>
            </a>

            <!-- 作品3：计算器 -->
            <a href="calculator.html" class="project-card">
                <div class="project-icon">🧮</div>
                <h3>网页计算器</h3>
                <p>支持加减乘除的完整计算器。学会了运算逻辑和条件判断。</p>
                <span class="project-tag">逻辑运算</span>
            </a>

            <!-- 作品4：AI文案生成器 -->
            <a href="ai-copywriter.html" class="project-card">
                <div class="project-icon">✨</div>
                <h3>AI文案生成器</h3>
                <p>接入Kimi真AI，输入产品名称自动生成小红书种草文案。带emoji、分段、网感十足！</p>
                <span class="project-tag">AI应用</span>
            </a>

            <!-- 作品5：AI聊天机器人（新增） -->
            <a href="ai-chat.html" class="project-card">
                <div class="project-icon">🤖</div>
                <h3>AI聊天机器人</h3>
                <p>接入Kimi真AI的网页版聊天机器人，支持多轮对话，像微信一样聊天！</p>
                <span class="project-tag">AI应用</span>
            </a>

            <!-- 作品6：关于我 -->
            <div class="project-card" style="cursor: default;">
                <div class="project-icon">👤</div>
                <h3>关于我</h3>
                <p>零基础小白，正在用AI学习编程。目标是成为AI开发工程师。这个网站就是我用AI做出来的！</p>
                <span class="project-tag">持续更新中</span>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <p>Made with ❤️ and AI | 我的AI学习之旅</p>
    </footer>

    <script>
        // 滚动动画：当卡片进入视口时，添加show类触发动画
        // 创建IntersectionObserver观察器
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                // 当元素进入视口时
                if (entry.isIntersecting) {
                    entry.target.classList.add('show'); // 添加show类，触发CSS动画
                }
            });
        }, {
            threshold: 0.1 // 元素出现10%时触发
        });

        // 观察所有作品卡片
        document.querySelectorAll('.project-card').forEach(card => {
            observer.observe(card);
        });

        // 导航栏滚动效果：滚动时增加阴影
        window.addEventListener('scroll', () => {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 10) {
                navbar.style.boxShadow = '0 4px 20px rgba(0,0,0,0.3)';
            } else {
                navbar.style.boxShadow = 'none';
            }
        });
    </script>
</body>
</html>

第三步：上传到 GitHub

  1. 打开 GitHub 仓库 my-website111
  2. 点 「添加文件」→「上传文件」
  3. 选中以下文件（从 my-website 文件夹里）：
    • ai-chat.html（新做的聊天机器人）
    • index.html（刚升级的主页）
    • ai-copywriter.html（如果之前没传过）
  4. 点 「提交」

第四步：等 1 分钟，刷新网址

访问：

plain

https://my-website111.vercel.app/

你应该能看到：

  • ✅ 6个作品卡片（新增了AI聊天机器人）
  • ✅ 鼠标放上去卡片会放大、发光
  • ✅ 滚动时卡片依次淡入上来
  • ✅ 点击有反馈
  • ✅ 导航栏有毛玻璃效果
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
学习笔记
喜欢就支持一下吧
点赞11 分享
yanzhi的头像-衍挚资源站
15.装 Python-衍挚资源站
15.装 Python
15.装 Python
19小时前 49
11.今天加这3个功能-衍挚资源站
11.今天加这3个功能
11.今天加这3个功能
19小时前 48
3.网页计算器-衍挚资源站
3.网页计算器
3.网页计算器
前天 47
13.AI工作流（Agent）-衍挚资源站
13.AI工作流（Agent）
13.AI工作流（Agent）
19小时前 46
7.把这个加到作品集网站里-衍挚资源站
7.把这个加到作品集网站里
7.把这个加到作品集网站里
前天 42
16.安装 Flask-衍挚资源站
16.安装 Flask
16.安装 Flask
18小时前 41
相关推荐
15.装 Python-衍挚资源站
15.装 Python
15.装 Python
19小时前 49
11.今天加这3个功能-衍挚资源站
11.今天加这3个功能
11.今天加这3个功能
19小时前 48
3.网页计算器-衍挚资源站
3.网页计算器
3.网页计算器
前天 47
13.AI工作流（Agent）-衍挚资源站
13.AI工作流（Agent）
13.AI工作流（Agent）
19小时前 46
7.把这个加到作品集网站里-衍挚资源站
7.把这个加到作品集网站里
7.把这个加到作品集网站里
前天 42
16.安装 Flask-衍挚资源站
16.安装 Flask
16.安装 Flask
18小时前 41
评论 抢沙发

请登录后发表评论

    暂无评论内容