AI智能助手功能实现

第4天-1AI智能助手功能实现掘金标题 Vue 3 OpenAI API 实现智能写作助手让你的博客更懂读者CSDN标题Vue 3 接入 OpenAI API 打造博客智能助手从0到1实战前言作为技术博主你是否经常面临以下问题写完文章不知道如何取一个吸引人的标题文章写完后没有信心不知道质量如何想要给文章生成摘要但总是词不达意今天我将分享如何在我的博客项目中集成 AI 智能助手让这些问题迎刃而解技术方案1. 安装依赖npminstallvueuse/core2. 核心实现API 配置文件// src/config/ai.tsexportconstaiConfig{apiKey:import.meta.env.VITE_OPENAI_API_KEY,baseUrl:https://api.openai.com/v1,model:gpt-3.5-turbo,maxTokens:500,temperature:0.7}AI 服务封装// src/services/ai.tsimport{aiConfig}from/config/aiinterfaceAIRequest{prompt:stringmaxTokens?:numbertemperature?:number}exportasyncfunctioncallAI({prompt,maxTokens500,temperature0.7}:AIRequest){constresponseawaitfetch(${aiConfig.baseUrl}/chat/completions,{method:POST,headers:{Content-Type:application/json,Authorization:Bearer${aiConfig.apiKey}},body:JSON.stringify({model:aiConfig.model,messages:[{role:user,content:prompt}],max_tokens:maxTokens,temperature})})constdataawaitresponse.json()returndata.choices[0].message.content}3. AI 功能组件!-- src/components/ai/AiAssistant.vue -- template el-drawer v-modelvisible titleAI 智能助手 size400px div classai-container !-- 功能选择 -- el-tabs v-modelactiveTab el-tab-pane label标题优化 nametitle / el-tab-pane label质量评估 namequality / el-tab-pane label摘要生成 namesummary / /el-tabs !-- 输入区域 -- div classinput-section el-input v-modelinputText typetextarea :rows4 placeholder请输入文章标题/内容... / el-button typeprimary :loadingloading clickhandleAI 开始分析 /el-button /div !-- 输出区域 -- div v-ifresult classresult-section el-dividerAI 分析结果/el-divider div classresult-content v-htmlformatResult(result) / div classresult-actions el-button typesuccess clickapplyResult ✅ 应用结果 /el-button el-button clickcopyResult 复制/el-button /div /div /div /el-drawer /template script setup langts import { ref } from vue import { callAI } from /services/ai import { ElMessage } from element-plus const visible ref(false) const activeTab ref(title) const inputText ref() const loading ref(false) const result ref() const prompts { title: 请为以下文章标题提供3个更吸引人的版本要求 1. 简洁有力不超过30字 2. 包含关键词 3. 能够引发读者好奇心 文章标题{content}, quality: 请从以下几个方面评估这篇技术文章的质量并给出1-10的评分和具体建议 1. 标题吸引力 2. 内容结构 3. 代码示例 4. 可读性 文章内容{content}, summary: 请为以下文章生成一个简洁的摘要要求 1. 50-100字 2. 突出文章的核心价值 3. 包含关键词 文章内容{content} } async function handleAI() { if (!inputText.value.trim()) { ElMessage.warning(请输入内容) return } loading.value true try { const prompt prompts[activeTab.value].replace({content}, inputText.value) result.value await callAI({ prompt }) } catch (error) { ElMessage.error(AI 服务暂时不可用请稍后重试) } finally { loading.value false } } function formatResult(text: string) { return text.replace(/\n/g, br) } function applyResult() { // 根据当前标签应用结果 emit(apply, { type: activeTab.value, value: result.value }) visible.value false } function copyResult() { navigator.clipboard.writeText(result.value) ElMessage.success(已复制到剪贴板) } const emit defineEmits([apply]) defineExpose({ visible }) /script style scoped .ai-container { padding: 16px; } .input-section { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; } .result-section { margin-top: 20px; padding: 16px; background: #f5f7fa; border-radius: 8px; } .result-content { line-height: 1.8; white-space: pre-wrap; } .result-actions { margin-top: 16px; display: flex; gap: 8px; } /style使用效果集成 AI 助手后作者可以快速生成标题输入粗糙标题AI 提供3个优化版本质量自检发布前让 AI 评估文章质量摘要生成自动生成吸引人的文章摘要总结通过集成 OpenAI API我们为博客添加了智能写作助手功能。这个功能不仅提升了博主的内容创作效率也提高了文章的整体质量。实战建议建议设置 API 调用频率限制避免过度消耗配额可以考虑接入国内的 AI 接口如文心一言、通义千问作为备选添加缓存机制避免重复调用相同的提示词相关资源在线演示[fineday.vip]