feat: 新增百度文生图功能支持;聊天页面新增图片点击预览功能。

README.md

@@ -28,8 +28,8 @@
 | 模型/能力     | 文本生成 | 流式输出 | 语音  | 函数调用 | 图片生成 | 多模态(VISION) | 嵌入EMBEDDING |
 |-----------|-----------|-----------|-----------|-----------|------|-----------|-----------|
 | openai    | 支持   | 支持   | 支持  | 支持   | 支持   | 支持          | 支持          |
-| 百度(文心)    | 支持   | 支持   | -   | 支持   | -    | -           | 支持          |
-| 智谱(GLM-4) | 支持   | 支持   | -   | 支持   | 支持    | 支持          | 支持          |
+| 百度(文心)    | 支持   | 支持   | -   | 支持   | 支持   | -           | 支持          |
+| 智谱(GLM-4) | 支持   | 支持   | -   | 支持   | 支持   | 支持          | 支持          |
 | chatglm2  | 支持   | 支持   | -   | -    | -    | -           | -           |
 | ... ...   | -    | -    | -   | -    | -    | -           |-  |
 

src/main/java/com/hkh/ai/chain/llm/capabilities/generation/image/ImageChatServiceFactory.java

@@ -1,5 +1,6 @@
 package com.hkh.ai.chain.llm.capabilities.generation.image;
 
+import com.hkh.ai.chain.llm.capabilities.generation.image.baidu.BaiduImageChatService;
 import com.hkh.ai.chain.llm.capabilities.generation.image.openai.OpenAiImageChatService;
 import com.hkh.ai.chain.llm.capabilities.generation.image.zhipu.ZhipuImageChatService;
 import lombok.extern.slf4j.Slf4j;
@@ -15,16 +16,20 @@ public class ImageChatServiceFactory {
 
     private final OpenAiImageChatService openAiImageChatService;
     private final ZhipuImageChatService zhipuImageChatService;
+    private final BaiduImageChatService baiduImageChatService;
 
-    public ImageChatServiceFactory(OpenAiImageChatService openAiImageChatService, ZhipuImageChatService zhipuImageChatService) {
+    public ImageChatServiceFactory(OpenAiImageChatService openAiImageChatService, ZhipuImageChatService zhipuImageChatService, BaiduImageChatService baiduImageChatService) {
         this.openAiImageChatService = openAiImageChatService;
         this.zhipuImageChatService = zhipuImageChatService;
+        this.baiduImageChatService = baiduImageChatService;
     }
 
     public ImageChatService getImageChatService(){
         if("openai".equals(type)){
             return openAiImageChatService;
-        } else if ("zhipu".equals(type)) {
+        } else if ("baidu".equals(type)) {
+            return baiduImageChatService;
+        }else if ("zhipu".equals(type)) {
             return zhipuImageChatService;
         } else {
             return null;

src/main/java/com/hkh/ai/chain/llm/capabilities/generation/image/baidu/BaiduImageChatService.java

@@ -0,0 +1,56 @@
+package com.hkh.ai.chain.llm.capabilities.generation.image.baidu;
+
+import cn.hutool.http.HttpUtil;
+import com.alibaba.fastjson2.JSONArray;
+import com.alibaba.fastjson2.JSONObject;
+import com.hkh.ai.chain.llm.capabilities.generation.BaiduChatApis;
+import com.hkh.ai.chain.llm.capabilities.generation.BaiduQianFanUtil;
+import com.hkh.ai.chain.llm.capabilities.generation.image.ImageChatService;
+import com.hkh.ai.chain.llm.capabilities.generation.text.baidu.BlockCompletionResult;
+import com.knuddels.jtokkit.Encodings;
+import com.knuddels.jtokkit.api.Encoding;
+import com.knuddels.jtokkit.api.EncodingRegistry;
+import com.knuddels.jtokkit.api.EncodingType;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.util.ArrayList;
+import java.util.List;
+@Service
+@Slf4j
+public class BaiduImageChatService implements ImageChatService {
+    @Autowired
+    private BaiduQianFanUtil baiduQianFanUtil;
+    @Override
+    public List<String> createImage(String prompt) {
+        EncodingRegistry registry = Encodings.newDefaultEncodingRegistry();
+        Encoding enc = registry.getEncoding(EncodingType.CL100K_BASE);
+        List<Integer> promptTokens = enc.encode(prompt);
+        System.out.println("promptTokens length == " + promptTokens.size());
+        String accessToken = baiduQianFanUtil.getAccessToken();
+
+        JSONObject body = new JSONObject();
+        body.put("prompt",prompt);
+        body.put("size","1024x1024");
+        body.put("n",1);
+
+        String jsonStrResult = HttpUtil.post(BaiduChatApis.IMAGE_CREATE + "?access_token=" + accessToken,body.toJSONString());
+//        log.info("baidu ai image create result ===> {}",jsonStrResult);
+        JSONObject jsonObject = JSONObject.parseObject(jsonStrResult);
+        JSONArray dataArr = jsonObject.getJSONArray("data");
+        List<String> result = new ArrayList<>();
+        for (int i = 0; i < dataArr.size(); i++) {
+            JSONObject item = dataArr.getJSONObject(i);
+            String b64_image = "data:image/png;base64," + item.getString("b64_image");
+            result.add(b64_image);
+        }
+        return result;
+    }
+
+    @Override
+    public List<String> editImage(String content, List<String> httpUrls) {
+        // 百度API无图片修改相关的API，降级为图片生成
+        return createImage(content);
+    }
+}

src/main/resources/static/css/chat.css

@@ -398,6 +398,26 @@ a:hover {
     opacity: 0.5;
 }
 
+.full-screen-bg-preview{
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    z-index: 1000;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    background: #afabb4;
+    padding: 10px;
+}
+
+.visionSelectedPreviewImage{
+    width: 100%;
+    max-width: 800px;
+}
+
 
 .h{
     display: none !important;
@@ -518,6 +538,7 @@ a:hover {
     border-radius: 6px;
     margin-left: 10px;
     margin-top: 10px;
+    cursor: pointer;
 }
 .vision-add-img-btn{
     color: #c4bdbd;

src/main/resources/static/js/chat.js

@@ -1007,6 +1007,9 @@ function createImageSubmit(){
     });
 }
 
+function closePreviewDiv(){
+    $("#previewImageDIv").addClass("h");
+}
 
 $(function () {
     $("form").on('submit', function (e) {
@@ -1025,6 +1028,12 @@ $(function () {
     $(".add-session-btn").click(function() {
         addSession();
     });
+    $("div").on("click",".visionSelectedImage",function (){
+        console.log(1234)
+        let attr = $(this).attr("src");
+        $("#visionSelectedPreviewImage").attr("src",attr);
+        $("#previewImageDIv").removeClass("h");
+    });
     loadSelectedKnowledge();
     loadSession();
 });

src/main/resources/templates/chat.ftl

@@ -239,6 +239,10 @@
             <span aria-hidden="true">×</span>
         </button>
 </div>
+<div id="previewImageDIv" class="full-screen-bg-preview h">
+    <img src="" id="visionSelectedPreviewImage" class="visionSelectedPreviewImage">
+    <button type="button" class="btn btn-outline-danger btn-round" onclick="closePreviewDiv();">关闭</button>
+</div>
 </body>
 <script src="/static/js/chat.js"></script>
 </html>