前端调用deepseek API 实现与ai助手对话

1.获取apikey

1.1 deepseek API开放平台：DeepSeek 开放平台

1.2 创建API Key

2. 前端调用api

2.1 接口地址

https://platform.deepseek.com/usage  --post

2.2 接口封装

import axios from 'axios';

// 封装DeepSeek API接口
interface Message {
  content: string;
  role: 'user' | 'assistant' | 'system';
}
 
export const getDeepSeekReply = async (messages: Message[]): Promise<Message> => {
    const apiKey = '***********'; // 替换为你的API密钥
    const url = 'https://api.deepseek.com/chat/completions'; // 替换为实际的API端点
    const params = {
        messages: messages,
        model: "deepseek-chat",
        max_tokens: 1500, // 增加max_tokens以获得更长的回复
        temperature: 0.7, // 调整temperature以获得更自然的回复
        top_p: 1,
        frequency_penalty: 0,
        presence_penalty: 0,
    };

    try {
        const response = await axios.post(url, params, {
            headers: {
                'Authorization': `Bearer ${apiKey}`,
                "Content-Type": "application/json",
                "Accept": "application/json",
            }
        });
        
        return response.data.choices[0].message;
    } catch (error) {
        console.error('Axios error:', error);
        return { content: 'Error occurred while fetching data.', role: 'assistant' }; 
    }
}

3. 页面展示

<template>
  <div class="chat-window">
    <!-- 聊天内容 -->
    <div class="chat-content">
      <h2 style="margin-left: 20px;">聊天窗口</h2>
      <div class="messages" ref="messagesContainer">
        <div v-for="(message, index) in messages" :key="index" class="message" :class="{'ai-message': message.role === 'user' || message.role === 'system', 'user-message': message.role === 'assistant'}">
          <img v-if="message.role === 'user' || message.role === 'system'" src="../assets/logo.png" alt="User Avatar" class="avatar" /> <!-- 添加用户头像 -->
          <div class="message-content">
            <!-- 修改: 使用 v-html 渲染消息内容 -->
            <div v-html="message.content" class="content"></div>
            <el-divider v-if="message.role === 'assistant' && index+1 === messages.length" />
           <div style="display: flex;">
            <el-button v-if="message.role === 'assistant' && index+1 === messages.length" type="primary" @click="regenerateMessage(index)" :disabled="isLoading">重新生成</el-button> <!-- 添加重新生成按钮 -->
            <!-- 新增: 添加复制按钮 -->
            <el-button v-if="message.role === 'assistant'" type="info" @click="copyMes