@fonixtree/magic-design 0.1.73 → 0.1.74

package/es/core/Designer/AiImageGenerator/index.js

@@ -17,14 +17,18 @@ var _GenerateArtist = _interopRequireDefault(require("./GenerateArtist"));
 
 var _UploadReference = _interopRequireDefault(require("./UploadReference"));
 
+var _History = _interopRequireDefault(require("./History"));
+
 var _nodata = _interopRequireDefault(require("./images/nodata.png"));
 
 var _common = require("../../../common");
 
-var _mobx = require("../../../mobx");
-
 var _commonUtil = require("../../../utils/commonUtil");
 
+var _storeUtil = require("../../../utils/storeUtil");
+
+var _constants = require("../../../constants");
+
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -59,6 +63,22 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
 var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
   function adopt(value) {
     return value instanceof P ? value : new P(function (resolve) {
@@ -214,13 +234,25 @@ function (_super) {
 
     _this.state = {
       loading: false,
-      visible: false,
-      images: []
+      selected: [],
+      prompt: '',
+      history: [],
+      hisCursor: 0
     };
     _this.formRef = /*#__PURE__*/_react["default"].createRef();
 
+    _this.onHisConfigClick = function () {};
+
+    _this.historyChange = function (newHis) {
+      (0, _storeUtil.setSessionStore)(_constants.STORAGE_KEY.FONIXTREE_AI_IMG_HIS, newHis);
+
+      _this.setState({
+        history: newHis
+      });
+    };
+
     _this.getColumnNum = function (num) {
-      if (num === 1) {
+      if (num <= 1) {
         return 1;
       } else if (num > 1 && num <= 4) {
         return 2;
@@ -230,42 +262,89 @@ function (_super) {
     };
 
     _this.onCloseDrawer = function () {
-      _mobx.store.setState({
-        imgGenVisible: false
-      });
+      _this.props.onClose();
     };
 
-    _this.onHisConfigClick = function () {};
+    _this.onConfirm = function () {
+      return __awaiter(_this, void 0, void 0, function () {
+        var _a, history, hisCursor, selected, images, imageList, result;
+
+        return __generator(this, function (_b) {
+          switch (_b.label) {
+            case 0:
+              _a = this.state, history = _a.history, hisCursor = _a.hisCursor, selected = _a.selected;
+
+              if (!selected.length) {
+                return [2
+                /*return*/
+                ];
+              }
+
+              images = history[hisCursor].images;
+              imageList = selected.map(function (sel) {
+                return images[sel];
+              });
+              return [4
+              /*yield*/
+              , (0, _commonUtil.commonFetch)('/designer/v1/uploadImage', {
+                base64Images: imageList
+              }, 'POST')];
+
+            case 1:
+              result = _b.sent();
+              this.props.onConfirm(result[0]);
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    };
 
     _this.onGenarate = function (prompt) {
       return __awaiter(_this, void 0, void 0, function () {
-        var formVal, result, e_1;
+        var history, formVal, params, result, e_1;
         return __generator(this, function (_a) {
           switch (_a.label) {
             case 0:
+              history = this.state.history;
+
+              if (!prompt) {
+                return [2
+                /*return*/
+                ];
+              }
+
               formVal = this.formRef.current.getFieldsValue(true);
-              this.setState({
-                loading: true
-              });
+              params = {
+                prompt: prompt,
+                n: formVal.number || 1,
+                height: 256,
+                width: 256
+              };
               _a.label = 1;
 
             case 1:
               _a.trys.push([1, 3,, 4]);
 
+              this.setState({
+                prompt: prompt,
+                loading: true
+              });
               return [4
               /*yield*/
-              , (0, _commonUtil.commonFetch)('/designer/v1/ai/create-image', {
-                prompt: prompt,
-                n: formVal.number || 4,
-                height: 256,
-                width: 256
-              }, 'POST')];
+              , (0, _commonUtil.commonFetch)('/designer/v1/ai/create-image', params, 'POST')];
 
             case 2:
               result = _a.sent();
+              history.push({
+                images: result.imageList,
+                params: params
+              });
+              this.historyChange(history);
               this.setState({
                 loading: false,
-                images: result.imageList
+                hisCursor: history.length - 1
               });
               return [3
               /*break*/
@@ -289,29 +368,207 @@ function (_super) {
       });
     };
 
-    _this.getImageList = function (images) {
-      var columnNum = _this.getColumnNum(images.length);
+    _this.onRegenerate = function () {
+      return __awaiter(_this, void 0, void 0, function () {
+        var _a, history, hisCursor, params, result, e_2;
+
+        return __generator(this, function (_b) {
+          switch (_b.label) {
+            case 0:
+              _a = this.state, history = _a.history, hisCursor = _a.hisCursor;
+              params = history[hisCursor].params;
+              _b.label = 1;
+
+            case 1:
+              _b.trys.push([1, 3,, 4]);
+
+              this.setState({
+                loading: true
+              });
+              return [4
+              /*yield*/
+              , (0, _commonUtil.commonFetch)('/designer/v1/ai/create-image', params, 'POST')];
+
+            case 2:
+              result = _b.sent();
+              history[hisCursor] = {
+                images: result.imageList,
+                params: params
+              };
+              this.historyChange(history);
+              this.setState({
+                loading: false
+              });
+              return [3
+              /*break*/
+              , 4];
+
+            case 3:
+              e_2 = _b.sent();
+              this.setState({
+                loading: false
+              });
+              return [3
+              /*break*/
+              , 4];
+
+            case 4:
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    };
 
-      return images.map(function (img) {
+    _this.getImageList = function (images) {
+      var selected = _this.state.selected;
+      return images.map(function (img, index) {
         return /*#__PURE__*/_react["default"].createElement("div", {
-          className: "aiImageWrap" + columnNum
+          className: "aiImageItem"
         }, /*#__PURE__*/_react["default"].createElement("img", {
           alt: "",
           src: img
-        }));
+        }), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "imgHandleBtnWrap"
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "refreshBtnWrap"
+        }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+          color: "#232F46",
+          onClick: function onClick() {
+            return _this.onRefresh(index);
+          },
+          size: 16,
+          type: "icon-refresh"
+        })), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "downloadBtnWrap"
+        }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+          color: "#232F46",
+          onClick: function onClick() {
+            return _this.onDownload(index);
+          },
+          size: 16,
+          type: "icon-download1"
+        }))), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "imgSelectBtnWrap"
+        }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+          color: "#2F54EB",
+          onClick: function onClick() {
+            return _this.onSelectClick(index);
+          },
+          size: 22,
+          style: {
+            cursor: 'pointer'
+          },
+          type: selected.includes(index) ? 'icon-select1' : 'icon-uncheck'
+        })));
       });
     };
 
-    return _this;
-  }
+    _this.onRefresh = function (index) {
+      return __awaiter(_this, void 0, void 0, function () {
+        var _a, history, hisCursor, _b, images, params, result, e_3;
 
-  AiImageGenerator.prototype.componentDidMount = function () {
-    var _this = this;
+        return __generator(this, function (_c) {
+          switch (_c.label) {
+            case 0:
+              _a = this.state, history = _a.history, hisCursor = _a.hisCursor;
+              _b = history[hisCursor], images = _b.images, params = _b.params;
+              _c.label = 1;
+
+            case 1:
+              _c.trys.push([1, 3,, 4]);
+
+              this.setState({
+                loading: true
+              });
+              return [4
+              /*yield*/
+              , (0, _commonUtil.commonFetch)('/designer/v1/ai/create-image', __assign(__assign({}, params), {
+                n: 1
+              }), 'POST')];
+
+            case 2:
+              result = _c.sent();
+              images[index] = result.imageList[0];
+              this.historyChange(history);
+              this.setState({
+                loading: false
+              });
+              return [3
+              /*break*/
+              , 4];
+
+            case 3:
+              e_3 = _c.sent();
+              this.setState({
+                loading: false
+              });
+              return [3
+              /*break*/
+              , 4];
+
+            case 4:
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    };
+
+    _this.onDownload = function (index) {
+      var _a = _this.state,
+          prompt = _a.prompt,
+          history = _a.history,
+          hisCursor = _a.hisCursor;
+      var images = history[hisCursor].images;
+      (0, _commonUtil.downloadBase64Image)(images[index], prompt + ".png");
+    };
+
+    _this.onSelectClick = function (index) {
+      var selected = _this.state.selected;
+      var single = _this.props.single; // 单选模式下，智能选中一个
+
+      if (single) {
+        _this.setState({
+          selected: [index]
+        });
+
+        return;
+      } // 多选模式，可以选择多个
+
+
+      if (selected.includes(index)) {
+        var newSelected = selected.filter(function (sel) {
+          return sel !== index;
+        });
+
+        _this.setState({
+          selected: newSelected
+        });
+      } else {
+        selected.push(index);
+
+        _this.setState({
+          selected: selected
+        });
+      }
+    };
 
-    this.destory = (0, _mobx.autorun)(function () {
+    _this.onHistoryClick = function (index) {
       _this.setState({
-        visible: _mobx.store.imgGenVisible
+        hisCursor: index
       });
+    };
+
+    return _this;
+  }
+
+  AiImageGenerator.prototype.componentDidMount = function () {
+    var history = (0, _storeUtil.getSessionStore)(_constants.STORAGE_KEY.FONIXTREE_AI_IMG_HIS) || [];
+    this.setState({
+      history: history
     });
   };
 
@@ -320,10 +577,15 @@ function (_super) {
   };
 
   AiImageGenerator.prototype.render = function () {
-    var _a = this.state,
-        visible = _a.visible,
-        images = _a.images,
-        loading = _a.loading;
+    var _a;
+
+    var _b = this.state,
+        loading = _b.loading,
+        history = _b.history,
+        hisCursor = _b.hisCursor;
+    var visible = this.props.visible;
+    var images = ((_a = history[hisCursor]) === null || _a === void 0 ? void 0 : _a.images) || [];
+    var columnNum = this.getColumnNum(images.length || []);
     return /*#__PURE__*/_react["default"].createElement(_antd.Drawer, {
       bodyStyle: {
         padding: 16,
@@ -349,6 +611,7 @@ function (_super) {
         type: "light"
       }, "Cancel"), /*#__PURE__*/_react["default"].createElement(_common.Button, {
         className: "ml8",
+        onClick: this.onConfirm,
         size: "small",
         type: "primary"
       }, "Confirm"))),
@@ -404,19 +667,24 @@ function (_super) {
     })))), /*#__PURE__*/_react["default"].createElement("div", {
       className: "middle_wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "img_wrap"
-    }, images.length > 0 ? this.getImageList(images) : /*#__PURE__*/_react["default"].createElement("img", {
+      className: "img_wrap",
+      style: {
+        gridTemplateColumns: "repeat(" + columnNum + ", 1fr)",
+        gridTemplateRows: "repeat(" + columnNum + ", 1fr)"
+      }
+    }, images.length > 0 ? this.getImageList(images) : /*#__PURE__*/_react["default"].createElement("div", {
+      className: "noDataWrap"
+    }, /*#__PURE__*/_react["default"].createElement("img", {
       alt: "",
       className: "no_data",
       src: _nodata["default"]
-    }), /*#__PURE__*/_react["default"].createElement("div", null)), /*#__PURE__*/_react["default"].createElement("div", {
+    })), /*#__PURE__*/_react["default"].createElement("div", null)), /*#__PURE__*/_react["default"].createElement("div", {
       className: "btn_wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "regenerate_btn",
-      onClick: this.onRegenarate
+      onClick: this.onRegenerate
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
       color: "#232F46",
-      onClick: this.onCloseDrawer,
       size: 16,
       style: {
         marginRight: 5
@@ -428,20 +696,12 @@ function (_super) {
       enterButton: "Generate",
       onSearch: this.onGenarate,
       size: "large"
-    }))), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "right_wrap"
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "right_header"
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "title"
-    }, "History"), /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-      onClick: this.onHisConfigClick,
-      size: 20,
-      style: {
-        cursor: 'pointer'
-      },
-      type: "icon-setting1"
-    }))))));
+    }))), /*#__PURE__*/_react["default"].createElement(_History["default"], {
+      onChange: this.historyChange,
+      onClick: this.onHistoryClick,
+      selectIndex: hisCursor,
+      source: history
+    }))));
   };
 
   return AiImageGenerator;

package/es/core/Designer/AiImageGenerator/index.less

@@ -27,46 +27,74 @@
       position: relative;
       .img_wrap {
         width: 492px;
-        height: 100%;
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        justify-content: center;
-        .aiImageWrap1 {
-          height: 492px;
-          width: 492px;
-        }
-        .aiImageWrap2 {
-          height: 240px;
-          width: 240px;
-          margin-bottom: 12px;
-          margin-left: 12px;
-          &:nth-child(2n - 1) {
-            margin-left: 0;
-          }
+        height: 492px;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: repeat(2, 1fr);
+        grid-gap: 12px;
+        margin: 0 auto;
+    
+        .aiImageItem {
+          position: relative;
+          background-color: #ccc;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 24px;
           img {
-            max-width: 100%;
+            width: 100%;
           }
-        }
-        
-        .aiImageWrap3 {
-          height: 156px;
-          width: 156px;
-          margin-bottom: 12px;
-          margin-bottom: 12px;
-          margin-left: 12px;
-          &:nth-child(3n + 1) {
-            margin-left: 0;
+          .imgHandleBtnWrap {
+            display: flex;
+            position: absolute;
+            bottom: 12px;
+            right: 12px;
+            .refreshBtnWrap {
+              background-color: #FFF;
+              cursor: pointer;
+              height: 28px;
+              width: 28px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              border-radius: 50%;
+              border: 1px solid #D2D9E5;
+            }
+            .downloadBtnWrap {
+              background-color: #FFF;
+              cursor: pointer;
+              height: 28px;
+              width: 28px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-left: 12px;
+              border-radius: 50%;
+              border: 1px solid #D2D9E5;
+            }
           }
-          img {
-            max-width: 100%;
+          .imgSelectBtnWrap {
+            position: absolute;
+            top: 12px;
+            right: 12px;
+            border-radius: 50%;
+            height: 22px;
+            display: flex;
+            background: #FFF;
           }
         }
-        
-        .no_data {
-          height: 183px;
-          width: 212px;
+        .noDataWrap {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .no_data {
+            height: 183px;
+            width: 212px;
+          }
         }
+        
       }
       .btn_wrap {
         margin-top: 40px;

package/es/core/Designer/ChatRobot/index.js

@@ -19,10 +19,10 @@ var _CopyBtn = _interopRequireDefault(require("./components/CopyBtn"));
 
 var _common = require("../../../common");
 
-var _mobx = require("../../../mobx");
-
 var _FonixtreeGpt = _interopRequireDefault(require("../FonixtreeGpt"));
 
+var _AiImageGenerator = _interopRequireDefault(require("../AiImageGenerator"));
+
 require("./index.less");
 
 require("./markdown.less");
@@ -71,12 +71,13 @@ function (_super) {
       open: false,
       message: '',
       context: [],
-      isGenerating: false
+      isGenerating: false,
+      aiImageVisible: false
     };
 
     _this.scrollBottom = function () {
       var container = document.getElementById('content_wrap');
-      container.scrollTop = container.scrollHeight;
+      container.scrollTop = container.scrollHeight + 50;
     };
 
     _this.onMessageChage = function (e) {
@@ -105,6 +106,8 @@ function (_super) {
         isGenerating: true,
         context: context,
         message: ''
+      }, function () {
+        _this.scrollBottom();
       });
     };
 
@@ -139,8 +142,8 @@ function (_super) {
         open: false
       });
 
-      _mobx.store.setState({
-        imgGenVisible: true
+      _this.setState({
+        aiImageVisible: true
       });
     };
 
@@ -169,7 +172,6 @@ function (_super) {
   }
 
   ChatRobot.prototype.componentDidMount = function () {
-    this.chatGpt.initChatGpt();
     var context = this.chatGpt.getContext();
     this.setState({
       context: context
@@ -183,7 +185,8 @@ function (_super) {
         context = _a.context,
         message = _a.message,
         open = _a.open,
-        isGenerating = _a.isGenerating;
+        isGenerating = _a.isGenerating,
+        aiImageVisible = _a.aiImageVisible;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "chat_wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -296,7 +299,19 @@ function (_super) {
         marginRight: 5
       },
       type: "icon-refresh"
-    }), "Regenerate Response"))));
+    }), "Regenerate Response"))), /*#__PURE__*/_react["default"].createElement(_AiImageGenerator["default"], {
+      onClose: function onClose() {
+        return _this.setState({
+          aiImageVisible: false
+        });
+      },
+      onConfirm: function onConfirm() {
+        return _this.setState({
+          aiImageVisible: false
+        });
+      },
+      visible: aiImageVisible
+    }));
   };
 
   return ChatRobot;

package/es/core/Designer/ChatRobot/index.less

@@ -89,6 +89,9 @@
         padding: 7px 14px;
         background: #F5F6F7;
         color: #232F46;
+        p {
+          margin-bottom: 0;
+        }
       }
     }
     .regenerate_btn {