《一站式AI智能平台》前端页面实现-第01节：前端页面的设计与实现
作者：冰河
星球：http://m6z.cn/6aeFbs
博客：https://binghe.site
文章汇总：https://binghe.site/md/all/all.html
源码获取地址：https://t.zsxq.com/0dhvFs5oR
沉淀，成长，突破，帮助他人，成就自我。
- 本章难度：★★☆☆☆
- 本章重点：对一站式AI智能平台的前端页面进行设计与实现，从全局角度掌握一站式AI智能平台的整体项目结构。重点掌握一站式AI智能平台的通用设计思路和设计方法，并能够将其灵活应用到自身实际项目中。
大家好，我是冰河~~
截止到目前，我们已经设计和实现了一站式AI智能平台的后端业务逻辑代码，并通过SpringAI对接了AI大模型。接下来，我们就一起实现一站式AI智能平台的前端页面。
PS：实际上后端还未实现系统设置功能，这块嘛，为了增加大家对项目的参与感，我打算屏蔽掉这块的代码实现，将这部分内容留做作业，交给小伙伴们完成。完成作业的小伙伴找我核验，嗯，就这么办了。后续，我会出详细的作业要求，哈哈。
一、前言
一站式AI智能平台的后端核心逻辑基本实现完毕，核心接口功能包括：实时流式聊天、营销文案生成、智能代码生成、智能问答、对话聊天。并且在实现各功能时，设计并内置专门的提示词，对AI大模型，将前端传递的数据发送给AI大模型后，接收AI大模型返回的结果数据，并响应给前端。接下来，我们就对一站式AI智能平台的前端页面进行设计和实现。
PS：系统设置功能留做作业交给小伙伴们实现。
二、本节诉求
对一站式AI智能平台的前端页面进行设计与实现，从全局角度掌握一站式AI智能平台的整体项目结构。重点掌握一站式AI智能平台的通用设计思路和设计方法，并能够将其灵活应用到自身实际项目中。
三、页面实现
在项目的src/main/resources目录下新建static目录，并在static目录下新建index.html文件。
源码详见：src/main/resources/static/index.html。
<div class="container">
<!-- 头部 -->
<header class="header">
<div class="header-content">
<h1><i class="fas fa-robot"></i> Spring AI DeepSeek 智能平台</h1>
<p>一站式AI解决方案 - 智能对话、代码生成、内容创作与营销文案</p>
<div class="header-badge">
<i class="fas fa-bolt"></i> 实时流式响应 | 多场景AI应用 | 企业级解决方案
</div>
</div>
</header>
<!-- 顶部导航栏 -->
<nav class="top-nav">
<div class="nav-container">
<button class="nav-btn active" onclick="switchTab('stream')">
<i class="fas fa-stream"></i> <span>实时流式聊天</span>
</button>
<button class="nav-btn" onclick="switchTab('marketing')">
<i class="fas fa-bullhorn"></i> <span>营销文案生成</span>
</button>
<button class="nav-btn" onclick="switchTab('code')">
<i class="fas fa-code"></i> <span>智能代码生成</span>
</button>
<button class="nav-btn" onclick="switchTab('qa')">
<i class="fas fa-question-circle"></i> <span>智能问答系统</span>
</button>
<button class="nav-btn" onclick="switchTab('chat')">
<i class="fas fa-comments"></i> <span>对话聊天</span>
</button>
<button class="nav-btn" onclick="switchTab('settings')">
<i class="fas fa-cog"></i> <span>系统设置</span>
</button>
</div>
</nav>
<!-- 内容区域 -->
<main class="content-area">
<!-- 实时流式聊天 -->
<div id="stream-tab" class="content-card active">
<div class="card-header">
<h2 class="card-title">
<i class="fas fa-stream"></i> 实时流式聊天
</h2>
<p class="card-subtitle">体验AI实时生成文本的魅力，支持流式响应和交互控制</p>
</div>
<div class="input-section">
<div class="form-group">
<label class="form-label" for="stream-input">
<i class="fas fa-comment-alt"></i> 输入消息
</label>
<textarea class="form-control" id="stream-input"
placeholder="请输入您的问题或对话内容...例如：讲一个关于人工智能未来的故事"></textarea>
</div>
<div class="params-row">
<div class="param-group">
<div class="param-value">
<span>温度 (Temperature)</span>
<span id="temp-value">0.8</span>
</div>
<div class="slider-container">
<div class="slider-track" style="width: 40%"></div>
<div class="slider-thumb" style="left: 40%" data-param="temperature" data-min="0" data-max="2" data-step="0.1"></div>
</div>
</div>
<div class="param-group">
<div class="param-value">
<span>最大长度 (Max Tokens)</span>
<span id="max-tokens-value">1000</span>
</div>
<div class="slider-container">
<div class="slider-track" style="width: 50%"></div>
<div class="slider-thumb" style="left: 50%" data-param="max-tokens" data-min="100" data-max="2000" data-step="50"></div>
</div>
</div>
</div>
<div class="btn-group">
<button class="btn btn-primary" onclick="startStream()">
<i class="fas fa-play"></i> 开始对话
</button>
<button class="btn btn-secondary" id="pauseBtn" onclick="pauseStream()" disabled>
<i class="fas fa-pause"></i> 暂停
</button>
<button class="btn btn-danger" onclick="stopStream()">
<i class="fas fa-stop"></i> 停止
</button>
<button class="btn btn-warning" onclick="clearStream()">
<i class="fas fa-trash-alt"></i> 清空
</button>
<button class="btn btn-secondary" onclick="exportConversation()">
<i class="fas fa-download"></i> 导出
</button>
</div>
</div>
<div class="response-section">
<div class="response-header">
<h3 class="response-title">
<i class="fas fa-comments"></i> 对话记录
</h3>
<div class="response-actions">
<button class="action-btn" onclick="saveConversation()">
<i class="fas fa-save"></i> 保存
</button>
<button class="action-btn" onclick="copyConversation()">
<i class="fas fa-copy"></i> 复制
</button>
<button class="action-btn" onclick="clearStream()">
<i class="fas fa-trash"></i> 清空
</button>
</div>
</div>
<div class="response-content" id="stream-output">
<div class="stream-messages" id="stream-messages">
<div class="message message-ai">
<div class="message-avatar">
<i class="fas fa-robot"></i>
</div>
<div class="message-content">
<div class="message-time">现在</div>
欢迎使用DeepSeek AI流式聊天！我可以帮您：
<br><br>
• 回答问题并提供解释<br>
• 创作故事和文本内容<br>
• 进行头脑风暴和创意讨论<br>
• 编程和技术问题解答<br>
• 学习和教育辅导
<br><br>
请在上方输入框中输入您的问题，然后点击"开始对话"按钮。
</div>
</div>
</div>
<div class="stream-status">
<div class="status-indicator">
<div class="status-dot completed"></div>
<span id="stream-status-text">准备就绪</span>
</div>
<div class="typing-indicator" id="typing-indicator" style="display: none;">
<span>AI正在输入</span>
<div class="typing-dot"></div>
<div class="typing-dot"></div>
<div class="typing-dot"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 营销文案生成 -->
<div id="marketing-tab" class="content-card">
<div class="card-header">
<h2 class="card-title">
<i class="fas fa-bullhorn"></i> 营销文案生成
</h2>
<p class="card-subtitle">为您的产品和服务生成专业的营销文案和广告内容</p>
</div>
<div class="input-section">
<div class="form-group">
<label class="form-label" for="marketing-input">
<i class="fas fa-edit"></i> 产品描述
</label>
<textarea class="form-control" id="marketing-input"
placeholder="请描述您的产品或服务...例如：一款智能健身手环，具有心率监测、睡眠追踪和运动指导功能"></textarea>
</div>
<div class="params-row">
<div class="param-group">
<div class="param-value">
<span>创意度 (Creativity)</span>
<span id="marketing-temp-value">1.2</span>
</div>
<div class="slider-container">
<div class="slider-track" style="width: 60%"></div>
<div class="slider-thumb" style="left: 60%" data-param="marketing-temp" data-min="0" data-max="2" data-step="0.1"></div>
</div>
</div>
</div>
<div class="btn-group">
<button class="btn btn-primary" onclick="generateMarketing()">
<i class="fas fa-magic"></i> 生成营销文案
</button>
<button class="btn btn-secondary" onclick="resetForm('marketing')">
<i class="fas fa-redo"></i> 重置
</button>
</div>
</div>
<div class="loading" id="marketing-loading">
<div class="spinner"></div>
<span>正在生成营销文案...</span>
</div>
<div class="response-section">
<div class="response-header">
<h3 class="response-title">
<i class="fas fa-file-alt"></i> 生成结果
</h3>
</div>
<div class="response-content" id="marketing-response">
营销文案将在这里显示...
</div>
</div>
</div>
<!-- 代码生成 -->
<div id="code-tab" class="content-card">
<div class="card-header">
<h2 class="card-title">
<i class="fas fa-code"></i> 智能代码生成
</h2>
<p class="card-subtitle">根据您的需求生成高质量的代码片段和完整程序</p>
</div>
<div class="input-section">
<div class="form-group">
<label class="form-label" for="code-input">
<i class="fas fa-terminal"></i> 编程需求
</label>
<textarea class="form-control" id="code-input"
placeholder="请描述您的编程需求...例如：用Python实现一个快速排序算法，并添加详细的注释"></textarea>
</div>
<div class="params-row">
<div class="param-group">
<div class="param-value">
<span>精确度 (Precision)</span>
<span id="code-temp-value">0.1</span>
</div>
<div class="slider-container">
<div class="slider-track" style="width: 10%"></div>
<div class="slider-thumb" style="left: 10%" data-param="code-temp" data-min="0" data-max="1" data-step="0.1"></div>
</div>
</div>
</div>
<div class="btn-group">
<button class="btn btn-primary" onclick="generateCode()">
<i class="fas fa-cogs"></i> 生成代码
</button>
<button class="btn btn-secondary" onclick="resetForm('code')">
<i class="fas fa-redo"></i> 重置
</button>
</div>
</div>
<div class="loading" id="code-loading">
<div class="spinner"></div>
<span>正在生成代码...</span>
</div>
<div class="response-section">
<div class="response-header">
<h3 class="response-title">
<i class="fas fa-file-code"></i> 生成结果
</h3>
</div>
<div class="response-content" id="code-response">
生成的代码将在这里显示...
</div>
</div>
</div>
<!-- 智能问答 -->
<div id="qa-tab" class="content-card">
<div class="card-header">
<h2 class="card-title">
<i class="fas fa-question-circle"></i> 智能问答系统
</h2>
<p class="card-subtitle">获取准确、详细的答案和解释</p>
</div>
<div class="input-section">
<div class="form-group">
<label class="form-label" for="qa-input">
<i class="fas fa-question"></i> 您的问题
</label>
<textarea class="form-control" id="qa-input"
placeholder="请输入您的问题...例如：什么是Spring Boot的自动配置原理？"></textarea>
</div>
<div class="btn-group">
<button class="btn btn-primary" onclick="answerQuestion()">
<i class="fas fa-lightbulb"></i> 获取答案
</button>
<button class="btn btn-secondary" onclick="resetForm('qa')">
<i class="fas fa-redo"></i> 重置
</button>
</div>
</div>
<div class="loading" id="qa-loading">
<div class="spinner"></div>
<span>正在思考答案...</span>
</div>
<div class="response-section">
<div class="response-header">
<h3 class="response-title">
<i class="fas fa-answer"></i> 答案
</h3>
</div>
<div class="response-content" id="qa-response">
问题的答案将在这里显示...
</div>
</div>
</div>
<!-- 聊天对话 -->
<div id="chat-tab" class="content-card">
<div class="card-header">
<h2 class="card-title">
<i class="fas fa-comments"></i> 对话聊天
</h2>
<p class="card-subtitle">与AI进行自然的对话交流</p>
</div>
<div class="input-section">
<div class="form-group">
<label class="form-label" for="chat-input">
<i class="fas fa-comment-dots"></i> 聊天消息
</label>
<textarea class="form-control" id="chat-input"
placeholder="请输入聊天消息...例如：你好，今天天气怎么样？"></textarea>
</div>
<div class="params-row">
<div class="param-group">
<div class="param-value">
<span>对话温度 (Temperature)</span>
<span id="chat-temp-value">0.9</span>
</div>
<div class="slider-container">
<div class="slider-track" style="width: 45%"></div>
<div class="slider-thumb" style="left: 45%" data-param="chat-temp" data-min="0" data-max="2" data-step="0.1"></div>
</div>
</div>
</div>
<div class="btn-group">
<button class="btn btn-primary" onclick="sendChat()">
<i class="fas fa-paper-plane"></i> 发送消息
</button>
<button class="btn btn-secondary" onclick="resetForm('chat')">
<i class="fas fa-redo"></i> 重置
</button>
<button class="btn btn-warning" onclick="clearChatHistory()">
<i class="fas fa-trash-alt"></i> 清空历史
</button>
</div>
</div>
<div class="loading" id="chat-loading">
<div class="spinner"></div>
<span>正在等待AI回复...</span>
</div>
<div class="response-section">
<div class="response-header">
<h3 class="response-title">
<i class="fas fa-history"></i> 聊天记录
</h3>
</div>
<div class="response-content" id="chat-response">
<div class="message message-ai">
<div class="message-avatar">
<i class="fas fa-robot"></i>
</div>
<div class="message-content">
<div class="message-time">现在</div>
您好！我是DeepSeek AI助手，很高兴为您服务。我可以与您进行各种话题的聊天对话，包括日常交流、问题解答、创意讨论等。有什么我可以帮助您的吗？
</div>
</div>
</div>
</div>
</div>
<!-- 系统设置 -->
<div id="settings-tab" class="content-card">
<div class="card-header">
<h2 class="card-title">
<i class="fas fa-cog"></i> 系统设置
</h2>
<p class="card-subtitle">配置系统参数和个性化设置</p>
</div>
<div class="input-section">
<div class="form-group">
<label class="form-label" for="api-key">
<i class="fas fa-key"></i> DeepSeek API密钥
</label>
<input type="password" class="form-control" id="api-key"
placeholder="请输入您的DeepSeek API密钥">
</div>
<div class="params-row">
<div class="param-group">
<div class="param-value">
<span>默认温度</span>
<span id="default-temp-value">0.7</span>
</div>
<div class="slider-container">
<div class="slider-track" style="width: 35%"></div>
<div class="slider-thumb" style="left: 35%" data-param="default-temp" data-min="0" data-max="2" data-step="0.1"></div>
</div>
</div>
<div class="param-group">
<div class="param-value">
<span>默认最大长度</span>
<span id="default-max-tokens-value">1000</span>
</div>
<div class="slider-container">
<div class="slider-track" style="width: 50%"></div>
<div class="slider-thumb" style="left: 50%" data-param="default-max-tokens" data-min="100" data-max="2000" data-step="50"></div>
</div>
</div>
</div>
<div class="btn-group">
<button class="btn btn-primary" onclick="saveSettings()">
<i class="fas fa-save"></i> 保存设置
</button>
<button class="btn btn-secondary" onclick="loadSettings()">
<i class="fas fa-sync"></i> 加载设置
</button>
<button class="btn btn-warning" onclick="resetSettings()">
<i class="fas fa-undo"></i> 恢复默认
</button>
</div>
</div>
<div class="response-section">
<div class="response-header">
<h3 class="response-title">
<i class="fas fa-info-circle"></i> 系统信息
</h3>
</div>
<div class="response-content" id="settings-info">
<div style="margin-bottom: 1.5rem;">
<strong>系统状态：</strong> <span id="system-status">正常</span>
</div>
<div style="margin-bottom: 1.5rem;">
<strong>API连接：</strong> <span id="api-status">未配置</span>
</div>
<div style="margin-bottom: 1.5rem;">
<strong>当前版本：</strong> v1.0.0
</div>
<div style="margin-bottom: 1.5rem;">
<strong>最后更新：</strong> 2026年01月
</div>
<div>
<button class="btn btn-secondary" onclick="checkSystemStatus()" style="margin-top: 1rem;">
<i class="fas fa-sync"></i> 检查系统状态
</button>
</div>
</div>
</div>
</div>
</main>
<!-- 底部 -->
<footer class="footer">
<div class="footer-content">
<p>🚀 Spring AI + DeepSeek 智能平台 | 版本 1.0.0 | 企业级AI解决方案 | <a href="https://wx.zsxq.com/group/48848484411888" target="_blank">@冰河技术知识星球</a></p>
<div class="footer-links">
<a href="#" class="footer-link">
<i class="fas fa-book"></i> <a href="https://binghe.site/md/zsxq/introduce.html" target="_blank">文档</a>
</a>
<a href="#" class="footer-link">
<i class="fas fa-cogs"></i> <a href="https://binghe.site/md/zsxq/introduce.html" target="_blank">API文档</a>
</a>
<a href="#" class="footer-link">
<i class="fas fa-question-circle"></i> <a href="https://binghe.site/md/zsxq/introduce.html" target="_blank">帮助中心</a>
</a>
<a href="#" class="footer-link">
<i class="fas fa-shield-alt"></i> <a href="https://binghe.site/md/zsxq/introduce.html" target="_blank">隐私政策</a>
</a>
<a href="#" class="footer-link">
<i class="fas fa-envelope"></i> <a href="https://binghe.site/md/zsxq/introduce.html" target="_blank">联系我们</a>
</a>
</div>
<p class="footer-note">
<i class="fas fa-info-circle"></i> 提示：请确保已正确配置DeepSeek API密钥以获得完整功能
</p>
</div>
</footer>
</div>
这里，给大家展示了index.html的核心源码，其他实现细节和前端页面对应的css样式和js代码，这里也不再展示，大家自行查看本节对应的源码分支即可。
四、后端接口实现
这里，我们主要实现重定向到前端index.html页面的接口。
源码详见：io.binghe.ai.chat.tools.controller.IndexController。
@Controller
public class IndexController {
@GetMapping("/")
public String home() {
return "redirect:/index.html";
}
@GetMapping("/index")
public String index() {
return "redirect:/index.html";
}
}
五、本节总结
本节，主要对一站式AI智能平台的前端页面进行了实现，下一节，我们对一站式AI智能平台的主要功能进行测试。
最后，可以在评论区写下你学完本章节的收获，祝大家都能学有所成，我们一起搞定一站式AI智能平台项目。
写在最后
在冰河技术知识星球， 《AI智能代码审查平台》 已完结，同时，《AI全链路短剧生成平台》 、《企业级OpenClaw》 项目热更中，还有其他二十几个项目，像实战Claude Code、AI知识库系统、智流助手平台、智能成语挑战赛项目、多轮AI智能对话系统、一站式AI智能平台、AI智能客服系统、AI智能问答系统、实战AI大模型、手写高性能敏组件、手写线程池、手写高性能SQL引擎、手写高性能Polaris网关、手写高性能熔断组件、手写通用指标上报组件、手写高性能数据库路由组件、手写分布式IM即时通讯系统、手写Seckill分布式秒杀系统、手写高性能RPC、实战高并发设计模式、简易商城系统等等。
这些项目的需求、方案、架构、落地等均来自互联网真实业务场景，让你真正学到互联网大厂的业务与技术落地方案，并将其有效转化为自己的知识储备。
值得一提的是：冰河自研的Polaris高性能网关比某些开源网关项目性能更高，目前正在热更AI一体化项目，也正在实现MCP，全程带你分析原理和手撸代码。
你还在等啥？不少小伙伴经过星球硬核技术和项目的历练，早已成功跳槽加薪，实现薪资翻倍，而你，还在原地踏步，抱怨大环境不好。抛弃焦虑和抱怨，我们一起塌下心来沉淀硬核技术和项目，让自己的薪资更上一层楼。
🚀PS：目前已开通最大优惠：长按或扫码加入星球立减30，注意：随着项目和专栏的更新，星球也即将涨价！！
目前，领券加入星球就可以跟冰河一起学习《实战Claude Code》、《多轮AI智能对话系统》、《一站式AI智能平台》、《AI智能客服系统》、《AI智能问答系统》、《实战AI大模型》、《手写高性能Redis组件》、《手写高性能脱敏组件》、《手写线程池》、《手写高性能SQL引擎》、《手写高性能Polaris网关》、《手写高性能RPC项目》、《分布式Seckill秒杀系统》、《分布式IM即时通讯系统》《手写高性能通用熔断组件项目》、《手写高性能通用监控指标上报组件》、《手写高性能数据库路由组件》、《手写简易商城脚手架项目》、《Spring6核心技术与源码解析》和《实战高并发设计模式》，从零开始介绍原理、设计架构、手撸代码。
花很少的钱就能学这么多硬核技术、中间件项目和大厂秒杀系统、分布式IM即时通讯系统，AI大模型项目，比其他培训机构不知便宜多少倍，硬核多少倍，如果是我，我会买他个十年！
加入要趁早，后续还会随着项目和加入的人数涨价，而且只会涨，不会降，先加入的小伙伴就是赚到。
另外，还有一个限时福利，邀请一个小伙伴加入，冰河就会给一笔 分享有奖 ，有些小伙伴都邀请了50+人，早就回本了！
其他方式加入星球
- 链接 ：打开链接 http://m6z.cn/6aeFbs 加入星球。
- 回复 ：在公众号 冰河技术 回复 星球 领取优惠券加入星球。
特别提醒： 苹果用户进圈或续费，请加微信 hacker_binghe 扫二维码，或者去公众号 冰河技术 回复 星球 扫二维码加入星球。
好了，今天就到这儿吧，我是冰河，我们下期见~~
