二、前置准备
（一）工具准备
- 浏览器：推荐谷歌浏览器（兼容性最佳，避免微软默认浏览器的兼容问题）。
- 文本编辑器：记事本、VS Code均可（用于保存本地代码文件）。
- 大模型API：选择支持API调用的大模型（如Kimi、Deepseek），需提前获取3类信息：
- Model Name（模型名称，如Deepseek的“chat”）
- 辅助工具：腾讯会议（用于演示交流）、知识文档/群聊（获取课程提示词模板）。
（二）核心概念提前理解
- 系统提示词（System Prompt）：预设给大模型的“规则说明书”，用于控制输出格式、效果（如“花式排版”“润色文案”），无此配置则输出不可控、效果差。
- API调用：通过接口地址（Base URL）、密钥（API Key）连接大模型，实现“发送请求→接收结果”的交互。
- 套壳智能体：基于大模型API，通过预设提示词和UI模板封装的专属工具（本质是简化版AI应用，无需从零开发大模型）。
- 流式输出：结果实时逐步显示，提升用户体验（课程模板已集成）。
- UI模板（SHD CNUI）：预设的页面样式（黑框白框简约风格），避免AI生成的页面“巨丑无比”，支持自定义颜色（16位色号或RGB格式）。
三、基础实战：花式排版助手（30分钟上手）
（一）第一步：创建本地文件结构
- 新建文件夹，命名为「AI排版助手」（自定义即可）。
- 文件夹内创建2个核心文件：
- 文件1：index.html（存储网页代码，核心文件）
- 文件2：system-prompt.md（存储系统提示词，方便复制）
（二）第二步：配置系统提示词（关键！）
- 打开system-prompt.md，复制以下提示词模板（可直接从课程知识文档获取）：
|
Plain Text
你是一个花式排版助手，需按照以下规则处理用户输入的文案：
1. 排版风格：简洁美观，使用换行、符号分隔（如「✨」「��」），避免杂乱；
2. 颜色限制：仅使用黑色、白色、灰色（16位色号：#000000、#FFFFFF、#808080）；
3. 输出要求：流式输出，结果显示在用户输入框下方；
4. 内容保留：不修改用户文案核心信息，仅优化排版。 |
- 保存文件（Ctrl+S），后续需将此提示词粘贴到网页配置中。
（三）第三步：编写网页核心代码
- 打开index.html，复制以下基础代码（课程模板直接复用，无需修改结构）：
|
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>AI花式排版助手</title>
<!-- 引入UI模板（SHD CNUI），保证页面美观 -->
<style>
.container { width: 80%; margin: 50px auto; }
.input-area { margin-bottom: 20px; }
#text-input { width: 100%; padding: 10px; height: 100px; }
#submit-btn { padding: 10px 20px; background: #000; color: #fff; border: none; cursor: pointer; }
.result-area { border: 1px solid #808080; padding: 20px; min-height: 100px; }
.config-btn { position: fixed; top: 20px; right: 20px; padding: 8px 16px; }
</style>
</head>
<body>
<div class="container">
<h1>✨ AI花式排版助手</h1>
<div class="input-area">
<textarea id="text-input" placeholder="请输入需要排版的文案（如广告、通知等）"></textarea>
<br>
<button id="submit-btn">开始排版</button>
</div>
<div class="result-area" id="result"></div>
</div>
<button class="config-btn" onclick="openConfig()">配置</button>
<!-- 配置弹窗（Base URL、Model Name、API Key、系统提示词） -->
<div id="config-modal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 20px; border: 1px solid #808080;">
<h3>配置信息（必填！）</h3>
<div>
<label>Base URL：</label>
<input type="text" id="base-url" placeholder="如Kimi/Deepseek的接口地址" style="width: 300px; margin: 5px 0;">
</div>
<div>
<label>Model Name：</label>
<input type="text" id="model-name" placeholder="如chat、kimi-turbo" style="width: 300px; margin: 5px 0;">
</div>
<div>
<label>API Key：</label>
<input type="text" id="api-key" placeholder="大模型的密钥" style="width: 300px; margin: 5px 0;">
</div>
<div>
<label>系统提示词：</label>
<textarea id="system-prompt" rows="5" cols="40" placeholder="粘贴system-prompt.md中的内容"></textarea>
</div>
<button onclick="saveConfig()">保存配置</button>
<button onclick="closeConfig()">取消</button>
</div>
<script>
// 存储配置信息
let config = {
baseUrl: '',
modelName: '',
apiKey: '',
systemPrompt: ''
};
// 打开配置弹窗
function openConfig() {
document.getElementById('config-modal').style.display = 'block';
// 加载已保存的配置
document.getElementById('base-url').value = config.baseUrl;
document.getElementById('model-name').value = config.modelName;
document.getElementById('api-key').value = config.apiKey;
document.getElementById('system-prompt').value = config.systemPrompt;
}
// 关闭配置弹窗
function closeConfig() {
document.getElementById('config-modal').style.display = 'none';
}
// 保存配置
function saveConfig() {
config.baseUrl = document.getElementById('base-url').value;
config.modelName = document.getElementById('model-name').value;
config.apiKey = document.getElementById('api-key').value;
config.systemPrompt = document.getElementById('system-prompt').value;
alert('配置保存成功！');
closeConfig();
}
// 点击排版按钮，调用API
document.getElementById('submit-btn').addEventListener('click', async function() {
const userInput = document.getElementById('text-input').value.trim();
const resultDom = document.getElementById('result');
if (!userInput) {
alert('请输入需要排版的文案！');
return;
}
if (!config.baseUrl || !config.modelName || !config.apiKey || !config.systemPrompt) {
alert('请先配置必要信息（Base URL、Model Name、API Key、系统提示词）！');
openConfig();
return;
}
resultDom.innerHTML = '正在排版...';
try {
// 拼接提示词：系统提示词 + 用户输入（用分隔符区分）
const prompt = `【系统提示词】${config.systemPrompt}\n【用户文案】${userInput}`;
// 调用大模型API
const response = await fetch(`${config.baseUrl}/v1/chat/completions`, { // 注意：部分API需加/v1，部分不需要，根据官方文档调整
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${config.apiKey}`
},
body: JSON.stringify({
model: config.modelName,
messages: [
{ role: 'system', content: config.systemPrompt },
{ role: 'user', content: userInput }
],
stream: true // 流式输出
})
});
// 处理流式输出结果
const reader = response.body.getReader();
const decoder = new TextDecoder('utf-8');
let result = '';
resultDom.innerHTML = '';
while (true) {
const { done, value } = await reader.read();
if (done) break;
const chunk = decoder.decode(value);
// 解析API返回的流式数据（不同大模型格式略有差异，需根据官方文档调整）
const lines = chunk.split('\n').filter(line => line.trim() !== '');
for (const line of lines) {
if (line.startsWith('data: ')) {
const data = line.slice(6);
if (data === '[DONE]') continue;
try {
const json = JSON.parse(data);
const content = json.choices[0].delta.content || '';
if (content) {
result += content;
resultDom.innerHTML = result;
}
} catch (e) {
console.error('解析流式数据失败：', e);
}
}
}
}
} catch (error) {
resultDom.innerHTML = `排版失败！错误原因：${error.message}\n请检查：1. 网络连接 2. Base URL/Model Name/API Key是否正确 3. 系统提示词是否完整`;
console.error('API调用失败：', error);
}
});
</script>
</body>
</html> |
- 保存文件（Ctrl+S），代码核心逻辑说明：
- 页面结构：输入框（用户写文案）、排版按钮、结果显示区、配置弹窗。
- 配置模块：存储Base URL、Model Name、API Key、系统提示词（必填项）。
- API调用：拼接系统提示词和用户输入，通过fetch请求大模型接口，流式输出结果。
（四）第四步：配置与测试运行
- 用谷歌浏览器打开index.html文件（双击即可）。
- 点击页面右上角「配置」按钮，填写4类信息：
- Base URL：填写大模型官方接口地址（如Deepseek：https://api.deepseek.com，Kimi：https://api.moonshot.cn，注意是否需要加/v1，参考官方文档）。
- Model Name：填写模型名称（如Deepseek的deepseek-chat，Kimi的moonshot-v1-8k，需与官方一致）。
- API Key：粘贴你的大模型密钥（从大模型平台的“API管理”中获取）。
- 系统提示词：复制system-prompt.md中的内容，粘贴到输入框。
- 点击「保存配置」，返回主页面。
- 测试：在输入框中输入文案（如“AI转岗、AI产品经理实战行动营开营，学习AI技术，成为AI人才”），点击「开始排版」，等待结果输出。
四、常见错误排查（零基础必看）
|
错误现象 |
可能原因 |
解决方案 |
|
API调用失败（404错误） |
Base URL错误（如漏加/v1或多写/v1） |
1. 查看大模型官方文档，确认接口地址格式；
2. 尝试在Base URL后加/v1或去掉/v1重新测试 |
|
排版无效果（输出与输入一致） |
系统提示词未配置或不完整 |
1. 检查配置弹窗中“系统提示词”是否填写；
2. 优化提示词（明确排版规则，如“使用符号分隔、换行优化”） |
|
密钥错误（401/403错误） |
API Key填写错误或过期 |
1. 重新复制大模型平台的API Key（注意不要有空格）；
2. 检查API Key是否过期，重新生成 |
|
页面无响应/报错 |
浏览器兼容问题 |
更换谷歌浏览器，清除浏览器缓存后重试 |
|
流式输出失败（一次性显示结果） |
未开启stream参数或API不支持 |
1. 确认代码中stream: true是否保留；
2. 查看大模型API是否支持流式输出，不支持则改为stream: false |
|
PDF上传后无法读取（进阶案例） |
未搭建本地服务 |
1. 搭建本地服务（如使用Node.js的express）；
2. 使用localHost:8000作为本地服务地址，确保PDF解析组件正常 |
五、进阶实战：开发专属应用（参考学员案例）
基础版排版助手完成后，可通过修改「系统提示词」和「核心功能」，开发专属应用，以下是3个经典案例参考：
（一）案例1：AI笑话生成器
- 核心功能：用户输入关键词（如“产品经理”“程序员”），生成相关笑话。
- 系统提示词修改：
|
Plain Text
你是一个笑话生成助手，需按照以下规则处理用户输入：
1. 基于用户提供的关键词（如职业、场景），生成1则简短搞笑的笑话（50字以内）；
2. 风格轻松幽默，无低俗内容；
3. 输出格式：✨ 笑话主题：XXX\n�� 笑话内容：XXX |
- 代码调整：无需修改核心结构，仅需保证用户输入关键词后，拼接提示词调用API即可。
（二）案例2：化工特殊作业票检查工具
- 核心功能：用户上传PDF格式的作业票，大模型审核内容是否符合规范，输出审核结果。
- 前置准备：搭建本地服务（如Node.js），用于解析PDF内容（推荐使用pdf-parse库）。
- 系统提示词修改：
|
Plain Text
你是化工特殊作业票审核助手，需按照以下规则审核：
1. 检查作业票是否包含：作业名称、作业时间、作业地点、安全措施、审批人签字；
2. 缺失项标注为“❌ 缺失XXX”，完整项标注为“✅ XXX已齐全”；
3. 输出审核总结：是否符合作业要求，需补充哪些内容。 |
- 代码调整：添加PDF上传组件（<input type="file" accept=".pdf" id="pdf-upload">），并在API调用前解析PDF内容，拼接至用户输入中。
（三）案例3：食材菜谱生成器
- 核心功能：用户输入现有食材（如“鸡肉、西兰花、土豆”），生成可做的菜谱（含食材用量、步骤），支持导出Excel。
- 系统提示词修改：
|
Plain Text
你是菜谱生成助手，需按照以下规则处理用户输入：
1. 基于用户提供的食材，推荐1道可行的菜谱，包含：菜名、食材用量、详细步骤（3-5步）；
2. 用量精准（如“鸡肉200g、西兰花1颗”），步骤简单易懂；
3. 若食材无法搭配，提示“❌ 该食材组合暂无合适菜谱，建议添加XXX食材”。 |
- 额外功能：添加导出Excel按钮，使用xlsx库将结果导出为Excel文件（需引入相关依赖）。
六、拓展知识：ChatGPT4进阶应用（可交互页面嵌入）
（一）核心目标
实现ChatGPT4与自定义服务的连接，让ChatGPT生成可交互的网页（如列表、地图），而非仅文本结果。
（二）前置条件
- 拥有ChatGPT Plus账号（仅Plus支持应用连接功能）。
- 搭建本地服务（如Node.js/Python服务），并将服务暴露到云端（使用ngrok工具实现本地服务穿透）。
- 熟悉JSX语法（用于编写前端页面模板）。
（三）关键步骤
- 下载ChatGPT官方示例代码（含订披萨、太阳系演示等demo），扔给AI解析逻辑。
- 编写自定义服务：明确服务功能（如“查询天气”“生成表格”）、输入输出格式、前端页面模板（参考ChatGPT设计规范design guidelines）。
- 本地服务穿透：使用ngrok将本地服务地址（如127.0.0.1:3000）暴露为云端地址（如https://xxx.ngrok.io）。
- 配置ChatGPT应用连接：
- 打开ChatGPT网页端，进入「设置→高级→开发者模式」（开启）。
- 点击「应用连接→创建」，填写服务名称、云端地址（ngrok生成的地址），信任该应用。
- 测试：在ChatGPT中发送请求（如“用我的服务生成天气表格”），ChatGPT会调用你的服务，返回可交互的网页（通过iframe嵌入）。
（四）注意事项
- ngrok免费版首次访问需手动确认告警，否则ChatGPT无法连接。
- 服务需支持API调用格式（与ChatGPT的交互逻辑一致），否则会调用失败。
- 前端页面模板需遵循ChatGPT设计规范，否则显示效果异常。
七、学习资源与工具
- 提示词模板：课程知识文档（含花式排版、周报生成、引流文案等预设提示词）。
- API文档：Kimi/Deepseek官方API文档（查询Base URL、Model Name、请求格式）。
- 工具下载：
- 问题求助：课程群聊（可上麦演示问题，老师实时解答）、AI提问（将错误代码扔给AI，询问解决方案）
10
0
已为社区贡献10条内容
所有评论(0)