AI智能助手功能实现

第4天-1：AI智能助手功能实现

🎯 掘金标题：🤖 Vue 3 + OpenAI API 实现智能写作助手，让你的博客更懂读者

📝 CSDN标题：Vue 3 接入 OpenAI API 打造博客智能助手：从0到1实战

前言

作为技术博主，你是否经常面临以下问题：

写完文章不知道如何取一个吸引人的标题
文章写完后没有信心，不知道质量如何
想要给文章生成摘要但总是词不达意

今天，我将分享如何在我的博客项目中集成 AI 智能助手，让这些问题迎刃而解！

技术方案

1. 安装依赖

bash 复制代码

npm install @vueuse/core

2. 核心实现

API 配置文件

typescript 复制代码

// src/config/ai.ts
export const aiConfig = {
  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 服务封装

typescript 复制代码

// src/services/ai.ts
import { aiConfig } from '@/config/ai'

interface AIRequest {
  prompt: string
  maxTokens?: number
  temperature?: number
}

export async function callAI({ prompt, maxTokens = 500, temperature = 0.7 }: AIRequest) {
  const response = await fetch(`${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
    })
  })
  
  const data = await response.json()
  return data.choices[0].message.content
}

3. AI 功能组件

vue 复制代码

<!-- src/components/ai/AiAssistant.vue -->
<template>
  <el-drawer v-model="visible" title="AI 智能助手" size="400px">
    <div class="ai-container">
      <!-- 功能选择 -->
      <el-tabs v-model="activeTab">
        <el-tab-pane label="标题优化" name="title" />
        <el-tab-pane label="质量评估" name="quality" />
        <el-tab-pane label="摘要生成" name="summary" />
      </el-tabs>
      
      <!-- 输入区域 -->
      <div class="input-section">
        <el-input
          v-model="inputText"
          type="textarea"
          :rows="4"
          placeholder="请输入文章标题/内容..."
        />
        <el-button type="primary" :loading="loading" @click="handleAI">
          🚀 开始分析
        </el-button>
      </div>
      
      <!-- 输出区域 -->
      <div v-if="result" class="result-section">
        <el-divider>AI 分析结果</el-divider>
        <div class="result-content" v-html="formatResult(result)" />
        <div class="result-actions">
          <el-button type="success" @click="applyResult">
            ✅ 应用结果
          </el-button>
          <el-button @click="copyResult">📋 复制</el-button>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
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$