mirror of
https://github.com/201206030/novel-plus.git
synced 2025-04-26 09:20:50 +00:00
perf: 使用流式响应处理AI生成文本，提高用户体验
This commit is contained in:
xiongxiaoyang
parent
eff4fc4c7c
commit
d4fa0abc4e
@ -12,9 +12,13 @@ import org.springframework.http.server.ServerHttpResponse;
|
||||
import org.springframework.web.bind.annotation.RestControllerAdvice;
|
||||
import org.springframework.web.servlet.mvc.method.annotation.ResponseBodyAdvice;
|
||||
|
||||
import java.util.Objects;
|
||||
|
||||
/**
|
||||
* 在对 RestController 返回对象 json 格式化时，将所有 Long 类型转为 String 类型返回，避免前端数据精度丢失的问题
|
||||
* 取代 spring.jackson.generator.write-numbers-as-strings=true 配置，避免影响全局的 ObjectMapper 配置
|
||||
* 在对 RestController 返回对象 json 序列化时，将所有 Long 类型转为 String 类型返回，避免前端数据精度丢失的问题
|
||||
* 取代 spring.jackson.generator.write-numbers-as-strings=true 配置，避免影响全局的 ObjectMapper
|
||||
*
|
||||
* @author xiongxiaoyang
|
||||
* */
|
||||
@RestControllerAdvice
|
||||
public class CustomResponseBodyAdvice implements ResponseBodyAdvice<Object> {
|
||||
@ -38,7 +42,11 @@ public class CustomResponseBodyAdvice implements ResponseBodyAdvice<Object> {
|
||||
@Override
|
||||
public Object beforeBodyWrite(Object body, MethodParameter returnType, MediaType selectedContentType, Class<? extends HttpMessageConverter<?>> selectedConverterType, ServerHttpRequest request, ServerHttpResponse response) {
|
||||
// 使用自定义的 ObjectMapper 序列化响应体
|
||||
if(Objects.nonNull(body)) {
|
||||
return customObjectMapper.valueToTree(body);
|
||||
}else{
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -17,7 +17,14 @@ import jakarta.servlet.http.HttpServletRequest;
|
||||
import lombok.RequiredArgsConstructor;
|
||||
import lombok.extern.slf4j.Slf4j;
|
||||
import org.springframework.ai.chat.client.ChatClient;
|
||||
import org.springframework.ai.chat.messages.UserMessage;
|
||||
import org.springframework.ai.chat.model.ChatModel;
|
||||
import org.springframework.ai.chat.model.ChatResponse;
|
||||
import org.springframework.ai.chat.prompt.Prompt;
|
||||
import org.springframework.ai.openai.OpenAiChatModel;
|
||||
import org.springframework.http.MediaType;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
import reactor.core.publisher.Flux;
|
||||
|
||||
import java.util.Date;
|
||||
|
||||
@ -36,9 +43,11 @@ public class AuthorController extends BaseController{
|
||||
|
||||
private final ChatClient chatClient;
|
||||
|
||||
private final OpenAiChatModel chatModel;
|
||||
|
||||
/**
|
||||
* 校验笔名是否存在
|
||||
* */
|
||||
*/
|
||||
@GetMapping("checkPenName")
|
||||
public RestResult<Boolean> checkPenName(String penName) {
|
||||
|
||||
@ -47,16 +56,17 @@ public class AuthorController extends BaseController{
|
||||
|
||||
/**
|
||||
* 作家发布小说分页列表查询
|
||||
* */
|
||||
*/
|
||||
@GetMapping("listBookByPage")
|
||||
public RestResult<PageBean<Book>> listBookByPage(@RequestParam(value = "curr", defaultValue = "1") int page, @RequestParam(value = "limit", defaultValue = "10") int pageSize , HttpServletRequest request){
|
||||
public RestResult<PageBean<Book>> listBookByPage(@RequestParam(value = "curr", defaultValue = "1") int page,
|
||||
@RequestParam(value = "limit", defaultValue = "10") int pageSize, HttpServletRequest request) {
|
||||
|
||||
return RestResult.ok(bookService.listBookPageByUserId(getUserDetails(request).getId(), page, pageSize));
|
||||
}
|
||||
|
||||
/**
|
||||
* 发布小说
|
||||
* */
|
||||
*/
|
||||
@PostMapping("addBook")
|
||||
public RestResult<Void> addBook(@RequestParam("bookDesc") String bookDesc, Book book, HttpServletRequest request) {
|
||||
|
||||
@ -74,7 +84,7 @@ public class AuthorController extends BaseController{
|
||||
|
||||
/**
|
||||
* 更新小说状态,上架或下架
|
||||
* */
|
||||
*/
|
||||
@PostMapping("updateBookStatus")
|
||||
public RestResult<Void> updateBookStatus(Long bookId, Byte status, HttpServletRequest request) {
|
||||
Author author = checkAuthor(request);
|
||||
@ -86,7 +96,6 @@ public class AuthorController extends BaseController{
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 删除章节
|
||||
*/
|
||||
@ -116,13 +125,12 @@ public class AuthorController extends BaseController{
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 发布章节内容
|
||||
*/
|
||||
@PostMapping("addBookContent")
|
||||
public RestResult<Void> addBookContent(Long bookId, String indexName, String content,Byte isVip, HttpServletRequest request) {
|
||||
public RestResult<Void> addBookContent(Long bookId, String indexName, String content, Byte isVip,
|
||||
HttpServletRequest request) {
|
||||
Author author = checkAuthor(request);
|
||||
|
||||
content = content.replaceAll("\\n", "<br>")
|
||||
@ -153,7 +161,8 @@ public class AuthorController extends BaseController{
|
||||
* 更新章节内容
|
||||
*/
|
||||
@PostMapping("updateBookContent")
|
||||
public RestResult<Void> updateBookContent(Long indexId, String indexName, String content, HttpServletRequest request) {
|
||||
public RestResult<Void> updateBookContent(Long indexId, String indexName, String content,
|
||||
HttpServletRequest request) {
|
||||
Author author = checkAuthor(request);
|
||||
|
||||
content = content.replaceAll("\\n", "<br>")
|
||||
@ -168,7 +177,8 @@ public class AuthorController extends BaseController{
|
||||
* 修改小说封面
|
||||
*/
|
||||
@PostMapping("updateBookPic")
|
||||
public RestResult<Void> updateBookPic(@RequestParam("bookId") Long bookId,@RequestParam("bookPic") String bookPic,HttpServletRequest request) {
|
||||
public RestResult<Void> updateBookPic(@RequestParam("bookId") Long bookId, @RequestParam("bookPic") String bookPic,
|
||||
HttpServletRequest request) {
|
||||
Author author = checkAuthor(request);
|
||||
bookService.updateBookPic(bookId, bookPic, author.getId());
|
||||
return RestResult.ok();
|
||||
@ -177,29 +187,34 @@ public class AuthorController extends BaseController{
|
||||
|
||||
/**
|
||||
* 作家日收入统计数据分页列表查询
|
||||
* */
|
||||
*/
|
||||
@GetMapping("listIncomeDailyByPage")
|
||||
public RestResult<PageBean<AuthorIncomeDetail>> listIncomeDailyByPage(@RequestParam(value = "curr", defaultValue = "1") int page,
|
||||
public RestResult<PageBean<AuthorIncomeDetail>> listIncomeDailyByPage(
|
||||
@RequestParam(value = "curr", defaultValue = "1") int page,
|
||||
@RequestParam(value = "limit", defaultValue = "10") int pageSize,
|
||||
@RequestParam(value = "bookId", defaultValue = "0") Long bookId,
|
||||
@RequestParam(value = "startTime", defaultValue = "2020-05-01") Date startTime,
|
||||
@RequestParam(value = "endTime", defaultValue = "2030-01-01") Date endTime,
|
||||
HttpServletRequest request) {
|
||||
|
||||
return RestResult.ok(authorService.listIncomeDailyByPage(page,pageSize,getUserDetails(request).getId(),bookId,startTime,endTime));
|
||||
return RestResult.ok(
|
||||
authorService.listIncomeDailyByPage(page, pageSize, getUserDetails(request).getId(), bookId, startTime,
|
||||
endTime));
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 作家月收入统计数据分页列表查询
|
||||
* */
|
||||
*/
|
||||
@GetMapping("listIncomeMonthByPage")
|
||||
public RestResult<PageBean<AuthorIncome>> listIncomeMonthByPage(@RequestParam(value = "curr", defaultValue = "1") int page,
|
||||
public RestResult<PageBean<AuthorIncome>> listIncomeMonthByPage(
|
||||
@RequestParam(value = "curr", defaultValue = "1") int page,
|
||||
@RequestParam(value = "limit", defaultValue = "10") int pageSize,
|
||||
@RequestParam(value = "bookId", defaultValue = "0") Long bookId,
|
||||
HttpServletRequest request) {
|
||||
|
||||
return RestResult.ok(authorService.listIncomeMonthByPage(page,pageSize,getUserDetails(request).getId(),bookId));
|
||||
return RestResult.ok(
|
||||
authorService.listIncomeMonthByPage(page, pageSize, getUserDetails(request).getId(), bookId));
|
||||
}
|
||||
|
||||
private Author checkAuthor(HttpServletRequest request) {
|
||||
@ -218,7 +233,6 @@ public class AuthorController extends BaseController{
|
||||
throw new BusinessException(ResponseStatus.AUTHOR_STATUS_FORBIDDEN);
|
||||
}
|
||||
|
||||
|
||||
return author;
|
||||
|
||||
|
||||
@ -272,7 +286,52 @@ public class AuthorController extends BaseController{
|
||||
.content());
|
||||
}
|
||||
|
||||
/**
|
||||
* AI扩写
|
||||
*/
|
||||
@GetMapping(value = "ai/stream/expand", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
|
||||
public Flux<String> streamExpandText(@RequestParam("text") String text, @RequestParam("ratio") Double ratio) {
|
||||
String prompt = "请将以下文本扩写为原长度的" + ratio / 100 + "倍：" + text;
|
||||
return chatClient.prompt()
|
||||
.user(prompt)
|
||||
.stream()
|
||||
.content();
|
||||
}
|
||||
|
||||
/**
|
||||
* AI缩写
|
||||
*/
|
||||
@GetMapping(value = "ai/stream/condense", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
|
||||
public Flux<String> streamCondenseText(@RequestParam("text") String text, @RequestParam("ratio") Integer ratio) {
|
||||
String prompt = "请将以下文本缩写为原长度的" + 100 / ratio + "分之一：" + text;
|
||||
return chatClient.prompt()
|
||||
.user(prompt)
|
||||
.stream()
|
||||
.content();
|
||||
}
|
||||
|
||||
/**
|
||||
* AI续写
|
||||
*/
|
||||
@GetMapping(value = "ai/stream/continue", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
|
||||
public Flux<String> streamContinueText(@RequestParam("text") String text, @RequestParam("length") Integer length) {
|
||||
String prompt = "请续写以下文本，续写长度约为" + length + "字：" + text;
|
||||
return chatClient.prompt()
|
||||
.user(prompt)
|
||||
.stream()
|
||||
.content();
|
||||
}
|
||||
|
||||
/**
|
||||
* AI润色
|
||||
*/
|
||||
@GetMapping(value = "/ai/stream/polish", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
|
||||
public Flux<String> streamPolishText(@RequestParam("text") String text) {
|
||||
String prompt = "请润色优化以下文本，保持原意：" + text;
|
||||
return chatClient.prompt()
|
||||
.user(prompt)
|
||||
.stream()
|
||||
.content();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -18,16 +18,7 @@ import org.springframework.web.client.RestClient;
|
||||
public class AiConfig {
|
||||
|
||||
/**
|
||||
* 目的：配置自定义的 RestClientBuilder 对象
|
||||
* <p>
|
||||
* 原因：Spring AI 框架的 ChatClient 内部通过 RestClient（Spring Framework 6 和 Spring Boot 3 中引入） 发起 HTTP REST 请求与远程的大模型服务进行通信，
|
||||
* 如果项目中没有配置自定义的 RestClientBuilder 对象， 那么在 RestClient 的自动配置类 org.springframework.boot.autoconfigure.web.client.RestClientAutoConfiguration
|
||||
* 中配置的 RestClientBuilder 对象会使用 Spring 容器中提供的 HttpMessageConverters， 由于本项目中配置了 spring.jackson.generator.write-numbers-as-strings
|
||||
* = true， 所以 Spring 容器中的 HttpMessageConverters 在 RestClient 发起 HTTP REST 请求转换 Java 对象为 JSON 字符串时会自动将 Number 类型的
|
||||
* Java 对象属性转换为字符串而导致请求参数错误
|
||||
* <p>
|
||||
* 示例："temperature": 0.7 =》"temperature": "0.7"
|
||||
* {"code":20015,"message":"The parameter is invalid. Please check again.","data":null}
|
||||
* 配置自定义的 RestClientBuilder 对象
|
||||
*/
|
||||
@Bean
|
||||
public RestClient.Builder restClientBuilder() {
|
||||
|
||||
@ -124,10 +124,10 @@
|
||||
<li id="contentLi" style="width: 500px">
|
||||
<div class="editor-container">
|
||||
<div class="ai-toolbar">
|
||||
<a class="ai-link expand" data-type="expand">AI扩写</a>
|
||||
<a class="ai-link condense" data-type="condense">AI缩写</a>
|
||||
<a class="ai-link continue" data-type="continue">AI续写</a>
|
||||
<a class="ai-link polish" data-type="polish">AI润色</a>
|
||||
<a class="ai-link expand" data-type="stream/expand">AI扩写</a>
|
||||
<a class="ai-link condense" data-type="stream/condense">AI缩写</a>
|
||||
<a class="ai-link continue" data-type="stream/continue">AI续写</a>
|
||||
<a class="ai-link polish" data-type="stream/polish">AI润色</a>
|
||||
</div>
|
||||
<textarea id="bookContent" name="bookContent"
|
||||
placeholder="请输入文本内容..."></textarea>
|
||||
@ -284,7 +284,7 @@
|
||||
|
||||
// 参数配置
|
||||
let params = {text: selectedText};
|
||||
if(type === 'expand' || type === 'condense'){
|
||||
if (type === 'stream/expand' || type === 'stream/condense') {
|
||||
layer.prompt({
|
||||
title: '请输入比例',
|
||||
value: 2,
|
||||
@ -300,11 +300,11 @@
|
||||
layer.msg('请输入正确的比例');
|
||||
return;
|
||||
}
|
||||
if(type === 'expand' && value <= 1){
|
||||
if (type === 'stream/expand' && value <= 1) {
|
||||
layer.msg('请输入正确的比例');
|
||||
return;
|
||||
}
|
||||
if(type === 'condense' && (value <=0 || value >= 1)){
|
||||
if (type === 'stream/condense' && (value <= 0 || value >= 1)) {
|
||||
layer.msg('请输入正确的比例');
|
||||
return;
|
||||
}
|
||||
@ -313,7 +313,7 @@
|
||||
sendRequest(type, params, loading, textarea);
|
||||
});
|
||||
return;
|
||||
}else if(type === 'continue'){
|
||||
} else if (type === 'stream/continue') {
|
||||
layer.prompt({
|
||||
title: '请输入续写长度（字数）',
|
||||
value: 200,
|
||||
@ -340,25 +340,27 @@
|
||||
});
|
||||
|
||||
function sendRequest(type, params, loading, textarea) {
|
||||
$.ajax({
|
||||
url: '/author/ai/' + type,
|
||||
type: 'POST',
|
||||
data: params,
|
||||
success: function(res){
|
||||
const url = `/author/ai/${type}?text=${encodeURIComponent(params.text)}&ratio=${params.ratio}&length=${params.length}`;
|
||||
const eventSource = new EventSource(url);
|
||||
|
||||
// 监听消息事件
|
||||
eventSource.onmessage = function (event) {
|
||||
layer.close(loading);
|
||||
// 将生成的内容追加到文本末尾
|
||||
if(res.code == '200'){
|
||||
const newText = "\n\n【AI生成内容】" + res.data; // 添加换行符分隔
|
||||
typeWriter(textarea, newText); // 使用打字机效果
|
||||
}else{
|
||||
layer.msg('AI内容生成失败，请稍后重试');
|
||||
}
|
||||
},
|
||||
error: function(){
|
||||
layer.msg('请求失败，请稍后重试');
|
||||
const data = event.data;
|
||||
console.log('Received data:', data);
|
||||
|
||||
textarea.val(textarea.val() + data);
|
||||
// 滚动到底部
|
||||
textarea.scrollTop(textarea[0].scrollHeight);
|
||||
};
|
||||
|
||||
// 监听错误事件
|
||||
eventSource.onerror = function (error) {
|
||||
layer.close(loading);
|
||||
}
|
||||
});
|
||||
console.error('EventSource failed:', error);
|
||||
eventSource.close(); // 关闭连接
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -124,10 +124,10 @@
|
||||
<li id="contentLi" style="width: 500px">
|
||||
<div class="editor-container">
|
||||
<div class="ai-toolbar">
|
||||
<a class="ai-link expand" data-type="expand">AI扩写</a>
|
||||
<a class="ai-link condense" data-type="condense">AI缩写</a>
|
||||
<a class="ai-link continue" data-type="continue">AI续写</a>
|
||||
<a class="ai-link polish" data-type="polish">AI润色</a>
|
||||
<a class="ai-link expand" data-type="stream/expand">AI扩写</a>
|
||||
<a class="ai-link condense" data-type="stream/condense">AI缩写</a>
|
||||
<a class="ai-link continue" data-type="stream/continue">AI续写</a>
|
||||
<a class="ai-link polish" data-type="stream/polish">AI润色</a>
|
||||
</div>
|
||||
<textarea id="bookContent" name="bookContent"
|
||||
placeholder="请输入文本内容..."></textarea>
|
||||
@ -284,7 +284,7 @@
|
||||
|
||||
// 参数配置
|
||||
let params = {text: selectedText};
|
||||
if(type === 'expand' || type === 'condense'){
|
||||
if (type === 'stream/expand' || type === 'stream/condense') {
|
||||
layer.prompt({
|
||||
title: '请输入比例',
|
||||
value: 2,
|
||||
@ -300,11 +300,11 @@
|
||||
layer.msg('请输入正确的比例');
|
||||
return;
|
||||
}
|
||||
if(type === 'expand' && value <= 1){
|
||||
if (type === 'stream/expand' && value <= 1) {
|
||||
layer.msg('请输入正确的比例');
|
||||
return;
|
||||
}
|
||||
if(type === 'condense' && (value <=0 || value >= 1)){
|
||||
if (type === 'stream/condense' && (value <= 0 || value >= 1)) {
|
||||
layer.msg('请输入正确的比例');
|
||||
return;
|
||||
}
|
||||
@ -313,7 +313,7 @@
|
||||
sendRequest(type, params, loading, textarea);
|
||||
});
|
||||
return;
|
||||
}else if(type === 'continue'){
|
||||
} else if (type === 'stream/continue') {
|
||||
layer.prompt({
|
||||
title: '请输入续写长度（字数）',
|
||||
value: 200,
|
||||
@ -340,25 +340,27 @@
|
||||
});
|
||||
|
||||
function sendRequest(type, params, loading, textarea) {
|
||||
$.ajax({
|
||||
url: '/author/ai/' + type,
|
||||
type: 'POST',
|
||||
data: params,
|
||||
success: function(res){
|
||||
const url = `/author/ai/${type}?text=${encodeURIComponent(params.text)}&ratio=${params.ratio}&length=${params.length}`;
|
||||
const eventSource = new EventSource(url);
|
||||
|
||||
// 监听消息事件
|
||||
eventSource.onmessage = function (event) {
|
||||
layer.close(loading);
|
||||
// 将生成的内容追加到文本末尾
|
||||
if(res.code == '200'){
|
||||
const newText = "\n\n【AI生成内容】" + res.data; // 添加换行符分隔
|
||||
typeWriter(textarea, newText); // 使用打字机效果
|
||||
}else{
|
||||
layer.msg('AI内容生成失败，请稍后重试');
|
||||
}
|
||||
},
|
||||
error: function(){
|
||||
layer.msg('请求失败，请稍后重试');
|
||||
const data = event.data;
|
||||
console.log('Received data:', data);
|
||||
|
||||
textarea.val(textarea.val() + data);
|
||||
// 滚动到底部
|
||||
textarea.scrollTop(textarea[0].scrollHeight);
|
||||
};
|
||||
|
||||
// 监听错误事件
|
||||
eventSource.onerror = function (error) {
|
||||
layer.close(loading);
|
||||
}
|
||||
});
|
||||
console.error('EventSource failed:', error);
|
||||
eventSource.close(); // 关闭连接
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user