AI介绍

Spring AI简介

Spring AI是一个面向AI工程的应用框架。springcloud alibaba--><dependencyManagement><dependencies><!--SpringCloud微服务 --><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-dependencies</artifactId><version>${spring-cloud.version}</version><type>pom</type><scope>import</scope></dependency><!--SpringCloudAlibaba微服务 --><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-alibaba-dependencies</artifactId><version>${spring-cloud-alibaba.version}</version><type>pom</type><scope>import</scope></dependency><!--SpringBoot依赖配置 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-dependencies</artifactId><version>${spring-boot.version}</version><type>pom</type><scope>import</scope></dependency></dependencies></dependencyManagement></project>

2.2 创建子工程

2.2.1 创建子工程就是正常的maven项目(选中父工程右键)

2.2.2 引入依赖

<?xml version="1.0"encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><parent><artifactId>tongyi2</artifactId><groupId>com.tongyi</groupId><version>1.0-SNAPSHOT</version></parent><modelVersion>4.0.0</modelVersion><artifactId>aliai</artifactId><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-ai</artifactId><version>2023.0.1.0</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.83</version></dependency></dependencies><repositories><repository><id>spring-milestones</id><name>SpringMilestones</name><url>https://repo.spring.io/milestone</url><snapshots><enabled>false</enabled></snapshots></repository></repositories><build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><version>3.8.1</version><configuration><source>17</source><target>17</target><encoding>UTF-8</encoding></configuration></plugin><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><version>2.7.18</version><configuration><mainClass>com.usian.AliApplication</mainClass><skip>true</skip></configuration><executions><execution><id>repackage</id></execution></executions></plugin></plugins></build></project>

2.2.3 添加配置文件

主要配置阿里云申请的api-key
阿里云Api-Key申请

spring:cloud:ai:tongyi:api-key:your api-key #自己在阿里云官网申请的api-keyserver:port:8081

3.案例

以下所有案例均在一个项目中编写，小伙伴们不要整懵了哈

3.1 单轮对话

3.1.1 编写业务层接口

publicinterfaceTongYiService{//聊天对话Stringcompletion(Stringmessage);

3.1.2 编写业务层抽象类

publicabstractclassAbstractTongYiServiceImplimplementsTongYiService{privatestaticfinalStringINFO_PREFIX ="please implement ";privatestaticfinalStringINFO_SUFFIX ="() method.";@OverridepublicStringcompletion(Stringmessage){thrownewRuntimeException(INFO_PREFIX +Thread.currentThread().getStackTrace()[2].getMethodName());}

3.1.3 编写业务层实现类

@ServicepublicclassTongYiServiceImplimplementsTongYiService{privatestaticfinalStringINFO_PREFIX ="please implement ";privatestaticfinalStringINFO_SUFFIX ="() method.";@OverridepublicStringcompletion(Stringmessage){thrownewRuntimeException(INFO_PREFIX +Thread.currentThread().getStackTrace()[2].getMethodName());}

3.1.4 编写业务层实现类

@OverridepublicStringcompletion(Stringmessage){Promptprompt =newPrompt(newUserMessage(message));returnchatClient.call(prompt).getResult().getOutput().getContent();}

3.1.5 编写控制层

@RestController@RequestMapping("/ai")@CrossOriginpublicclassTongYiController{/**     * 聊天对话应用  单轮对话     * @param message     * @return     */@GetMapping("/example")publicStringcompletion(@RequestParam(value ="message",defaultValue ="Tell me a joke")Stringmessage,HttpServletRequestrequest,HttpServletResponseresponse){Stringcompletion =tongYiSimpleService.completion(message);returncompletion;}}

3.1.6 测试

可以在地址栏输入地址进行访问
http://localhost:8081/ai/example?message=讲一个笑话

以上就是Spring Cloud Alibaba AI入门案例

3.1.7 可以整合Vue输入

<divid="app"><template><div><h1>单轮输出</h1><el-form:inline="true"><el-form-itemlabel="问题"><el-inputv-model="singletext"placeholder="请输入问题"></el-input></el-form-item><el-form-item><el-buttontype="primary"@click="SingleAnswer">提问</el-button></el-form-item></el-form>{{singleresponse}}	     </div></template></div><script>newVue({el:"#app",data:{singletext:'',//单轮输入值singleresponse:'',//单轮输出结果},methods:{//单轮对话SingleAnswer:function(){varvm =this;axios.get("http://localhost:8081/ai/example?message="+this.singletext).then(function(response){vm.singleresponse =response.data;}).catch(function(error){console.log(error);});}}});</script>

3.2 多轮对话

3.2.1 编写业务层接口

/**     * 多轮对话     * @param message 用户问题.     * @return AI 答案.     */StringmultiCompletion(Stringmessage);

3.2.2 编写业务层抽象类

@OverridepublicStringmultiCompletion(Stringmessage){thrownewRuntimeException(INFO_PREFIX +Thread.currentThread().getStackTrace()[2].getMethodName());}

3.2.3 编写业务层实现类

@OverridepublicStringmultiCompletion(Stringmessage){thrownewRuntimeException(INFO_PREFIX +Thread.currentThread().getStackTrace()[2].getMethodName());}

3.2.4 编写业务层实现类

@OverridepublicStringmultiCompletion(Stringmessage){//判断当前线程的消息列表是否为空if(multiMessage.get()==null){//初始化当前线程的消息列表multiMessage.set(newArrayList<>());}//获取当前线程的消息列表List<Message>userMessages =multiMessage.get();//将用户输入的消息添加到消息列表中multiMessage.get().add(newUserMessage(message));//创建Prompt对象,并把整个消息列表作为参数Promptprompt =newPrompt(userMessages);returnchatClient.call(prompt).getResult().getOutput().getContent();}

3.2.5 编写控制层

/**     * 多轮聊天应用     *     * @param message     * @return     */@GetMapping("/multi")publicStringmulti(@RequestParamStringmessage){Stringcompletion =tongYiMultiServiceImpl.multiCompletion(message);returncompletion;}

3.2.6 编写前端

<!--   Copyright 2023-2024 the original author or authors.   Licensed under the Apache License, Version 2.0 (the "License");   you may not use this file except in compliance with the License.   You may obtain a copy of the License at        https://www.apache.org/licenses/LICENSE-2.0   Unless required by applicable law or agreed to in writing, software   distributed under the License is distributed on an "AS IS" BASIS,   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   See the License for the specific language governing permissions and   limitations under the License.--><!DOCTYPEhtml><html><head><metacharset="UTF-8"><scriptsrc="js/marked.min.js"></script><title>SCA AI Example Front</title><style>body{background-color:#f8f9fa;font-family:Arial,sans-serif;}.container{margin:50px auto;width:800px;background-color:#fff;padding:20px;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,0.1);}h1{color:#2ecc71;text-align:center;margin-bottom:30px;}label{display:block;margin-bottom:10px;color:#333;}input[type="text"]{width:100%;padding:10px;border:1px solid #ccc;border-radius:3px;}input[type="submit"]{background-color:#2ecc71;color:#fff;border:none;padding:10px 20px;border-radius:3px;cursor:pointer;width:100%;}.chat-box{width:100%;height:500px;padding:10px;border:1px solid #ccc;border-radius:3px;overflow-y:scroll;}.message{margin-bottom:10px;padding:10px;background-color:#f1f1f1;border-radius:3px;}.user-message{background-color:#2ecc71;color:#fff;}.bot-message{background-color:#3498db;color:#fff;}.loader{text-align:center;}.loader::after{content:"";display:inline-block;width:20px;height:20px;border-radius:50%;border:2px solid #ccc;border-top-color:#2ecc71;animation:spin 1s infinite linear;}@keyframesspin{to{transform:rotate(360deg);}}</style></head><body><divclass="container"><h1>Spring Cloud Alibaba AI</h1><formid="form"><labelfor="message">输入信息：</label><inputtype="text"id="message"name="message"placeholder="输入信息!"><br><br><inputtype="submit"value="提问"></form><br><divid="loader"class="loader"style="display:none;"></div><divid="chat-box"class="chat-box"></div></div><script>varloader =document.getElementById("loader");document.getElementById("form").addEventListener("submit",function(event){event.preventDefault();varmessageInput =document.getElementById("message");varmessage =messageInput.value;messageInput.value ="";varchatBox =document.getElementById("chat-box");varuserMessage =document.createElement("div");userMessage.className ="message user-message";userMessage.textContent ="用户: "+message;chatBox.appendChild(userMessage);chatBox.scrollTop =chatBox.scrollHeight;loader.style.display ="block";varxhr =newXMLHttpRequest();xhr.open("GET","http://localhost:8081/ai/example?message="+encodeURIComponent(message),true);xhr.onreadystatechange=function(){if(xhr.readyState ===4){loader.style.display ="none";if(xhr.status ===200){varresponse =xhr.responseText;varbotMessage =document.createElement("div");botMessage.className ="message bot-message";varbotMessageText =document.createElement("span");botMessageText.className ="message-text";botMessage.appendChild(botMessageText);botMessageText.innerHTML =marked.marked(response);chatBox.appendChild(botMessage);chatBox.scrollTop =chatBox.scrollHeight;}elseif(xhr.status ===400){varerror =JSON.parse(xhr.responseText);varerrorMessage =document.createElement("div");errorMessage.className ="message bot-message";errorMessage.textContent ="Bot: "+error.message;chatBox.appendChild(errorMessage);chatBox.scrollTop =chatBox.scrollHeight;}else{varerrorMessage =document.createElement("div");errorMessage.className ="message bot-message";errorMessage.textContent ="Bot: Failed to connect to the backend service. Please make sure the backend service is running.";chatBox.appendChild(errorMessage);chatBox.scrollTop =chatBox.scrollHeight;}}};xhr.onloadstart=function(){loader.style.display ="block";};xhr.onloadend=function(){loader.style.display ="none";};xhr.send();});</script></body></html>

3.2.7 测试

输入一个问题，回答后接着第一个问题继续提问

3.3 文生图

输入文字，最后输出图片

3.3.1 编写业务层接口

// 生成图片ImageResponsegenImg(StringimgPrompt);

3.3.2 编写业务层抽象类

@OverridepublicImageResponsegenImg(StringimgPrompt){thrownewRuntimeException(INFO_PREFIX +Thread.currentThread().getStackTrace()[2].getMethodName()+INFO_SUFFIX);}

3.3.3 编写业务层实现类

@OverridepublicImageResponsegenImg(StringimgPrompt){thrownewRuntimeException(INFO_PREFIX +Thread.currentThread().getStackTrace()[2].getMethodName()+INFO_SUFFIX);}

3.3.4 编写业务层实现类

@OverridepublicImageResponsegenImg(StringimgPrompt){varprompt =newImagePrompt(imgPrompt);returnimageClient.call(prompt);}

3.3.5 编写控制层

/**     * 文生图应用     * @param imgPrompt     * @return     */@GetMapping("/img")publicStringgenImg(@RequestParam(value ="prompt",defaultValue ="Painting a picture of blue water and blue sky.")StringimgPrompt){ImageResponseimageResponse =tongYiImgService.genImg(imgPrompt);Stringurl =imageResponse.getResult().getOutput().getUrl();returnurl;}

3.3.6 编写前端

<divid="app"><template><!--生成图片--><div><h1>生成图片</h1><el-form:inline="true"><el-form-itemlabel="问题"><el-inputv-model="imgtext"placeholder="请输入问题"></el-input></el-form-item><el-form-item><el-buttontype="primary"@click="fetchAnswer">提问</el-button></el-form-item></el-form><divv-if="imgresponse!=''"><img:src="imgresponse"alt="生成的图片"width="300px"height="300px"></div></div></template></div><script>newVue({el:"#app",data:{imgtext:'',//图片输入问题imgresponse:'',//图片返回结果},methods:{//生成图片fetchAnswer:function(){varvm =this;axios.get("http://localhost:8081/ai/img?prompt="+this.imgtext).then(function(response){vm.imgresponse =response.data;}).catch(function(error){console.log(error);});},}});</script>

3.3.7 测试

3.4 文生语音

输入文字，转换成语音，且用语音回答答案

3.4.1 编写业务层接口

// 生成音频StringgenAudio(Stringtext);

3.4.2 编写业务层抽象类

@OverridepublicStringgenAudio(Stringtext){thrownewRuntimeException(INFO_PREFIX +Thread.currentThread().getStackTrace()[2].getMethodName()+INFO_SUFFIX);}

3.4.3 编写业务层实现类

@OverridepublicStringgenAudio(Stringtext){thrownewRuntimeException(INFO_PREFIX +Thread.currentThread().getStackTrace()[2].getMethodName()+INFO_SUFFIX);}

3.4.4 编写业务层实现类

@OverridepublicStringgenAudio(Stringtext){logger.info("gen audio prompt is: {}",text);varresWAV =speechClient.call(text);returnsave(resWAV,SpeechSynthesisAudioFormat.WAV.getValue());}//生成的语音存入当前项目中privateStringsave(ByteBufferaudio,Stringtype){StringcurrentPath =System.getProperty("user.dir");currentPath =currentPath+"\\aliai\\src\\main\\resources\\static\\audio";LocalDateTimenow =LocalDateTime.now();DateTimeFormatterformatter =DateTimeFormatter.ofPattern("MM-dd-HH-mm-ss");StringfileName =currentPath +File.separator +now.format(formatter)+"."+type;Filefile =newFile(fileName);try(FileOutputStreamfos =newFileOutputStream(file)){fos.write(audio.array());}catch(Exceptione){thrownewRuntimeException(e);}returnfileName;}

3.4.5 编写控制层

/**     * 文字问题输入语音文字输出     * @param message     * @param request     * @param response     * @return     */@GetMapping("/audio/speech")publicvoidgenAudio(@RequestParam(value ="prompt")Stringprompt,HttpServletRequestrequest,HttpServletResponseresponse){Stringaudio =tongYiAudioService.genAudio(prompt);try{FileInputStreamis =newFileInputStream(audio);inti =is.available();// 得到文件大小bytedata[]=newbyte[i];is.read(data);// 读数据is.close();response.setContentType("audio/wav");// 设置返回的文件类型OutputStreamtoClient =response.getOutputStream();// 得到向客户端输出二进制数据的对象toClient.write(data);// 输出数据toClient.close();}catch(IOExceptione){thrownewRuntimeException(e);}}/**     * 文字输入语音输出答案     * @param message     * @param request     * @param response     * @return     */@GetMapping("/exampleToMp3")publicvoidexampleToMp3(@RequestParam(value ="message",defaultValue ="Tell me a joke")Stringmessage,HttpServletRequestrequest,HttpServletResponseresponse){Stringcompletion =tongYiSimpleService.completion(message);Stringaudio =tongYiAudioService.genAudio(completion);try{FileInputStreamis =newFileInputStream(audio);inti =is.available();// 得到文件大小bytedata[]=newbyte[i];is.read(data);// 读数据is.close();response.setContentType("audio/wav");// 设置返回的文件类型OutputStreamtoClient =response.getOutputStream();// 得到向客户端输出二进制数据的对象toClient.write(data);// 输出数据toClient.close();}catch(IOExceptione){thrownewRuntimeException(e);}}

3.4.6 编写前端

<divid="app"><template><!--文字转语音--><div><h1>文字转语音</h1><el-form:inline="true"><el-form-itemlabel="问题"><el-inputv-model="mp3text"placeholder="请输入问题"></el-input></el-form-item><el-form-item><el-buttontype="primary"@click="Mp3Answer">提问</el-button></el-form-item></el-form><divv-if="mp3response!=''"><audio:src="mp3response"controlsid="audio_demo"></audio></div><divv-if="mp3text2response!=''"><audio:src="mp3text2response"controlsid="audio_demo1"></audio></div></div></template></div><script>newVue({el:"#app",data:{mp3text:'',//语音输入问题mp3response:'',//语音返回结果mp3text2response:''//文字输入语音输出结果},methods:{//文字转语音Mp3Answer:function(){varvm =this;axios({url:'http://localhost:8081/ai/audio/speech?prompt='+this.mp3text,responseType:'blob'}).then(result=>{vm.mp3response =window.URL.createObjectURL(result.data);})//文字输出结果axios({url:'http://localhost:8081/ai/exampleToMp3?message='+this.mp3text,responseType:'blob'}).then(result=>{vm.mp3text2response =window.URL.createObjectURL(result.data);})}}});</script>

3.4.7 测试

以上就是一些基本案例，后期陆续更新！！！