在自己项目中接入AI(API)

文章介绍了如何在项目中使用OGTwelveUtilPack库来集成AI功能。首先,需要引入该库的依赖,然后在启动类添加@EnableChatGPT注解。接着,在配置文件设置OpenAI的API密钥和相关参数。最后,通过示例测试了四个不同的API接口:文本交互、图像生成、流式输出和事件流响应。文章提供了简单的代码示例并给出了各接口的效果说明。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.引入依赖

		<dependency>
            <groupId>cn.com.ogtwelve</groupId>
            <artifactId>OGTwelveUtilPack</artifactId>
            <version>1.2.5</version>
        </dependency>

2.启动class添加注解

@SpringBootApplication
@EnableChatGPT
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

}

3.配置文件中配置你的api

openai.token= 
# 你在openai官网申请的key或者某宝买的key
openai.proxyHost=
openai.proxyPort=
# 这两个参数可以不要, 但是可能会因为网络问题访问不了, 一般这块放置的是机场的端口信息;
openai.model=
openai.chatModel=
# 以上两种模型默认的就是官网目前为止3.5turbo一类的, 
# 但是等instruct的那个出来后我就会给默认的修改成instruct
openai.sessionExpirationTime=30
# 对话的过期时间, 单位是分钟;

以上这么多参数当然可以只输入token;

4.测试

@RestController
@RequestMapping("/gpt1")
public class TestController {
	// 正常chat问题接口
   @RequestMapping("/test1")
    public List<String> ask(String content){
        return OpenAIUtils.createChatCompletion(content);
    }

	// 根据描述生成图片, 效果一般
    @RequestMapping("/test2")
    public List<String> testGenerateImg(String description){
        return OpenAIUtils.createImage(description);
    }

	// 以流的形式输出结果, 就和正常chatgpt一样
	@RequestMapping("/test3")
    public void streamTest(String content){
        OpenAIUtils.createStreamChatCompletion(content);
    }

	@RequestMapping("/test4")
    public void webTest(String content, HttpServletResponse response) throws IOException {
        response.setContentType("text/event-stream");
        response.setCharacterEncoding("UTF-8");
        response.setHeader("Cache-Control", "no-cache");
        OpenAIUtils.createStreamChatCompletion(content, response.getOutputStream());
    }
}

test1

在这里插入图片描述

test2

在这里插入图片描述
在这里插入图片描述
图的效果是这样的, 看得出还是bug比较多, 不到迫不得已不建议用这个接口;

test3

在这里插入图片描述
在这里插入图片描述

test4

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
效果就是一个字一个字的那种效果, 会前端的小伙伴可以写个页面配合着使用;

结尾

那么以上就是如何在你的项目中接入ai的api, 整体还算得上简单;

祝愿各位能在这寒冬里突破自我, 成为更好的自己 !
### 集成 DeepSeek 到 Vue.js 项目 为了在 Vue.js 中集成 DeepSeek 并实现 AI 对话功能,可以按照如下方法操作: #### 安装依赖库 首先,在项目的根目录下安装必要的 npm 包来支持 HTTP 请求以及可能的 WebSocket 连接。 ```bash npm install axios socket.io-client ``` 这一步骤确保了前端能够与后端服务通信[^1]。 #### 创建 API 接口文件 创建一个新的 JavaScript 文件用于定义同 DeepSeek 的交互接口。假设命名为 `api/deepseek.js`: ```javascript import axios from 'axios'; const DEEPSEEK_API_URL = "https://your.deepseek.api.endpoint"; // 替换成实际API地址 export const sendMessageToDeepSeek = async (message) => { try { let response = await axios.post(`${DEEPSEEK_API_URL}/chat`, { message }); return response.data; } catch (error) { console.error('Error communicating with DeepSeek:', error); throw new Error('Failed to communicate with DeepSeek'); } }; ``` 此部分代码实现了发送消息给 DeepSeek 和接收回复的功能。 #### 构建聊天组件 接着构建一个简单的 Vue 组件来进行用户输入并展示来自 DeepSeek 的响应。可以在 src/components 下新建 ChatBox.vue 文件: ```vue <template> <div class="chat-box"> <div v-for="(msg, index) in messages" :key="index">{{ msg }}</div> <input type="text" v-model="newMessage" @keyup.enter="sendMessage"/> </div> </template> <script> import { ref } from 'vue'; import { sendMessageToDeepSeek } from '../api/deepseek'; export default { name: 'ChatBox', setup() { let messages = ref([]); let newMessage = ref(''); function addMessage(message){ messages.value.push(message); } async function sendMessage(){ if(newMessage.value.trim()){ addMessage(`User: ${newMessage.value}`); try{ let reply = await sendMessageToDeepSeek(newMessage.value); addMessage(`AI: ${reply.text}`); }catch(error){ addMessage('An error occurred while fetching the response.'); } newMessage.value=''; } } return {messages, newMessage, sendMessage} } </script> <style scoped> .chat-box{border:solid 1px #ccc;padding:10px;} </style> ``` 这段代码展示了如何通过调用之前定义的服务函数获取数据,并将其显示出来。 #### 使用聊天组件 最后,在 App.vue 或其他页面中引入刚刚制作好的 ChatBox 组件即可开始测试。 ```html <!--App.vue--> <template> <div id="app"> <!-- Other components --> <ChatBox /> </div> </template> <script> // Import statements... import ChatBox from './components/ChatBox.vue' export default { name: 'App', components:{ ChatBox, // other component imports ... }, } </script> ``` 这样就完成了基本的集成工作,可以根据具体需求进一步优化界面设计和服务逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

OGtwelve

不用打赏, 各位学的会是关键.

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值