采用SpringCloudAliabaAI型式大模型LLM，进行生成式JavaAI应用开发，实现文生问答、图像和语音合成，Web应用页面交互展现。SpringBootGradle软件框架，Idea集成开发环境，API_Post嵌入插件一体测试。

1 工效展示[文生-答/图/音]

@Override

public String completion(String message) {

    Prompt prompt = new Prompt(new UserMessage(message));

    return chatClient.call(prompt).getResult().getOutput().getContent();

}

@Override

public ImageResponse genImg(String imgPrompt) {

    var prompt = new ImagePrompt(imgPrompt);

    return imageClient.call(prompt);

}

@Override

public Map<String, String> streamCompletion(String message) {

    StringBuilder fullContent = new StringBuilder();

    streamingChatClient.stream(new Prompt(message))

        .flatMap(chatResponse -> Flux.fromIterable(chatResponse.getResults()))

        .map(content -> content.getOutput().getContent())

        .doOnNext(fullContent::append)

        .last()

        .map(lastContent -> Map.of(message, fullContent.toString()))

        .block();

    return Map.of(message, fullContent.toString());

}

@Override

public String genAudio(String text) {

    var resWAV = speechClient.call(text);

    return save(resWAV, SpeechSynthesisAudioFormat.WAV.getValue());

}

private String save(ByteBuffer audio, String type) { // 将语音保存到本地的方法

    String currentPath = System.getProperty("user.dir");

    LocalDateTime now = LocalDateTime.now();

    DateTimeFormatter formatter = DateTimeFormatter.ofPattern("MM-dd-HH-mm-ss");

    String fileName = currentPath + File.separator + now.format(formatter) + "." + type;

    File file = new File(fileName);

    try (FileOutputStream fos = new FileOutputStream(file)) {

        fos.write(audio.array());

    } catch (Exception e) {

        throw new RuntimeException(e);

    }

    return fileName;

}

private final TongYiService tongYiService;

public TongYiController(TongYiService tongYiService) {

    this.tongYiService = tongYiService;

}

@GetMapping("/chat")

public String completion(@RequestParam(value = "message",  defaultValue = "Tell me a joke") String message) {

    return tongYiService.completion(message);

}

@GetMapping("/stream")

public Map<String, String> streamCompletion(@RequestParam(

    value = "message", defaultValue = "请告诉我西红柿炖牛腩怎么做？")  String message) {

    return tongYiService.streamCompletion(message);

}

@GetMapping("/genImg")

public ImageResponse genImg(@RequestParam(value = "prompt",

    defaultValue = "Painting a picture of blue water and blue sky.")  String imgPrompt) {

    return tongYiService.genImg(imgPrompt);

}

@GetMapping("/getImgUrl")

public String getImgUrl(@RequestParam(value = "prompt",

    defaultValue = "Painting a picture of blue water and blue sky.")  String imgPrompt) {

    ImageResponse imageResponse = tongYiService.genImg(imgPrompt);

    return imageResponse.getResult().getOutput().getUrl();

}

@GetMapping("/getImgEtt")

public ResponseEntity<byte[]> getImgEtt(@RequestParam(value = "msg",

    defaultValue = "动漫女主图片") String imgPrompt){

    ImageResponse imageResponse = tongYiService.genImg(imgPrompt);

    String b64Json = imageResponse.getResult().getOutput().getB64Json();

    byte[] decode = Base64.getDecoder().decode(b64Json);

    HttpHeaders httpHeaders = new HttpHeaders();

    httpHeaders.setContentType(MediaType.IMAGE_PNG);

    return new ResponseEntity<>(decode,httpHeaders, HttpStatus.OK);

}

@GetMapping("/genAudio")

public String genAudio(@RequestParam(value = "prompt",

    defaultValue = "你好，Spring Cloud Alibaba AI 框架！") String prompt) {

    return tongYiService.genAudio(prompt);

}

@GetMapping("/speech")

public void speech(@RequestParam(value = "prompt",  defaultValue = "Tell me a joke") String prompt,

    HttpServletResponse response) throws IOException {

    String audio = tongYiService.genAudio(prompt);

    FileInputStream is = new FileInputStream(audio);

    int i = is.available();                       // 得到文件大小

    byte[] data = new byte[i];

    is.read(data);                             // 读数据

    is.close();

    response.setContentType("audio/wav");       // 设置返回的文件类型

    OutputStream toClient = response.getOutputStream();

    toClient.write(data);                       // 向客户端输出二进制数据的对象数据

    toClient.close();

}

//文字输入语音输出答案

@GetMapping("/cvtMp3")

public void cvtMp3(@RequestParam(value = "message",  defaultValue = "Tell me a joke") String message,

    HttpServletResponse response) throws IOException {

    String completion = tongYiService.completion(message);

    String audio = tongYiService.genAudio(completion);

    FileInputStream is = new FileInputStream(audio);

    int i = is.available();                      // 得到文件大小

    byte[] data = new byte[i];

    is.read(data);                            // 读数据

    is.close();

    response.setContentType("audio/wav");      // 设置返回的文件类型

    OutputStream toClient = response.getOutputStream();

    toClient.write(data);                      // 向客户端输出二进制数据的对象数据

    toClient.close();

}

<!DOCTYPE html>

<html lang="zh">

  <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <meta name="viewport" content="user-scalable=no, initial-scale=1,

      maximum-scale=1, minimum-scale=1, width=device-width">

    <title>文生问答</title>

    <script src="js/marked.min.js"></script>

    <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 }

      .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 }

       @keyframes spin { to { transform: rotate(360deg) } }

    </style>

  </head>

  <body>

   <div class="container">

    <h1>Spring Cloud Alibaba AI</h1>

    <form id="form">

      <label for="message">输入信息：</label>

      <input type="text" id="message" name="message" placeholder="输入信息!">

      <br><br>

      <input type="submit" value="提问">

    </form>

    <br>

    <div id="loader" class="loader" style="display: none;"></div>

    <div id="chat-box" class="chat-box"></div>

   </div>

  </body>

  <script>

    let loader = document.getElementById("loader")

    document.getElementById("form").addEventListener("submit", function(event) {

      event.preventDefault()

      let messageInput = document.getElementById("message")

      let message = messageInput.value; messageInput.value = ""

      let chatBox = document.getElementById("chat-box")

      let userMessage = document.createElement("div")

      userMessage.className = "message user-message"

      userMessage.textContent = "用户: " + message

      chatBox.appendChild(userMessage)

      chatBox.scrollTop = chatBox.scrollHeight

      loader.style.display = "block"

      let xhr = new XMLHttpRequest()

      xhr.open("GET", "http://localhost:9320/chat?message=" + encodeURIComponent(message), true)

      xhr.onreadystatechange = function() {

        if (xhr.readyState === 4) {

          loader.style.display = "none"

          if (xhr.status === 200) {

            let response = xhr.responseText, botMessage = document.createElement("div")

            botMessage.className = "message bot-message"

            let botMessageText = document.createElement("span")

            botMessageText.className = "message-text"; botMessage.appendChild(botMessageText)

            botMessageText.innerHTML = marked.marked(response)

            chatBox.appendChild(botMessage); chatBox.scrollTop = chatBox.scrollHeight

          } else if (xhr.status === 400) {

            let error = JSON.parse(xhr.responseText)

            let errorMessage = document.createElement("div")

            errorMessage.className = "message bot-message"

            errorMessage.textContent = "Bot: " + error.message

            chatBox.appendChild(errorMessage); chatBox.scrollTop = chatBox.scrollHeight

          } else {

            let errorMessage = 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>

</html>

<!DOCTYPE html>

<html lang="zh">

  <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <meta name="viewport" content="user-scalable=no, initial-scale=1,

      maximum-scale=1, minimum-scale=1, width=device-width">

    <title>文生图片</title>

    <link rel="stylesheet" href="./css/element-ui.2.15.14.css">

    <script type="text/javascript" src="./js/vue.min.js"></script>

    <script type="text/javascript" src="./js/axios.min.js"></script>

    <script type="text/javascript" src="./js/element-ui.2.15.14.js"></script>

  </head>

  <body style="background: #F0FFFF;">

   <div id="app" >

    <div >

       <h1 >生成图片</h1>

       <el-form :inline="true">

         <el-form-item label="问题">

           <el-input v-model="imgtext" placeholder="请输入问题"></el-input>

         </el-form-item>

         <el-form-item>

           <el-button type="primary" @click="fetchAnswer">提问</el-button>

         </el-form-item>

       </el-form>

       <div v-if="imgresponse!==''">

         <img :src="imgresponse"  alt="生成的图片" width="300px" height="300px">

       </div>

    </div>

    </div>  

  </body>

  <script>

   new Vue({

    el: "#app", data: { imgtext: '', imgresponse: '' },

    methods: {

      fetchAnswer: function() {          //生成图片

        let vm = this;

        axios.get("http://localhost:9320/getImgUrl?prompt="+ this.imgtext).then(function(response) {

          vm.imgresponse = response.data

        }).catch(function(error) {

          console.log(error);

        })

      },

    }

   })

  </script>

</html>

<!DOCTYPE html>

<html lang="zh">

  <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <meta name="viewport" content="user-scalable=no, initial-scale=1,

      maximum-scale=1, minimum-scale=1, width=device-width">

    <title>文生语音</title>

    <link rel="stylesheet" href="./css/element-ui.2.15.14.css">

    <script type="text/javascript" src="./js/vue.min.js"></script>

    <script type="text/javascript" src="./js/axios.min.js"></script>

    <script type="text/javascript" src="./js/element-ui.2.15.14.js"></script>

  </head>

  <body style="background: #F0FFFF;">

   <div id="app" >

    <!--文字转语音-->

    <div >

      <h1 >文字转语音</h1>

      <el-form   :inline="true">

        <el-form-item label="问题">

          <el-input  v-model="mp3text" placeholder="请输入问题"></el-input>

        </el-form-item>

        <el-form-item>

          <el-button type="primary" @click="Mp3Answer">提问</el-button>

        </el-form-item>

      </el-form>

      <div v-if="mp3response!=''">

        <audio :src="mp3response" controls id="audio_demo" ></audio>

      </div>

      <div v-if="mp3text2response!=''">

        <audio :src="mp3text2response" controls id="audio_demo1" ></audio>

      </div>

    </div>

   </div>   

  </body>

  <script>

   new Vue({

    el: "#app", data: { mp3text:'', mp3response:'', mp3text2response:'' },

    methods: {

      Mp3Answer: function() {         //文字转语音

        let vm = this

        axios({

          url:'http://localhost:9320/speech?prompt='+this.mp3text, responseType:'blob'

        }).then(result=>{

          vm.mp3response = window.URL.createObjectURL(result.data)

        })               

        axios({                       //文字输出结果

          url:'http://localhost:9320/cvtMp3?message='+this.mp3text, responseType:'blob'

        }).then(result=>{

          vm.mp3text2response = window.URL.createObjectURL(result.data)

        })

      }

    }

   })

  </script>

</html>