@fonixtree/magic-design 0.1.76 → 0.1.78

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

@@ -11,20 +11,28 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _antd = require("antd");
 
+var _uuid = require("uuid");
+
 var _GenerateSize = _interopRequireDefault(require("./GenerateSize"));
 
 var _GenerateArtist = _interopRequireDefault(require("./GenerateArtist"));
 
 var _UploadReference = _interopRequireDefault(require("./UploadReference"));
 
+var _NumberSlider = _interopRequireDefault(require("./NumberSlider"));
+
+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 +67,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 +238,35 @@ 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, newIndex) {
+      if (newIndex === void 0) {
+        newIndex = null;
+      }
+
+      (0, _storeUtil.setSessionStore)(_constants.STORAGE_KEY.FONIXTREE_AI_IMG_HIS, newHis);
+
+      _this.setState({
+        history: newHis
+      });
+
+      if (newIndex !== null) {
+        _this.setState({
+          hisCursor: newIndex
+        });
+      }
+    };
+
     _this.getColumnNum = function (num) {
-      if (num === 1) {
+      if (num <= 1) {
         return 1;
       } else if (num > 1 && num <= 4) {
         return 2;
@@ -230,42 +276,100 @@ 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();
+
+              if (!result || !result.imageList) {
+                this.setState({
+                  loading: false
+                });
+                return [2
+                /*return*/
+                ];
+              }
+
+              history.push({
+                key: (0, _uuid.v4)(),
+                images: result.imageList,
+                params: params
+              });
+              this.historyChange(history);
               this.setState({
                 loading: false,
-                images: result.imageList
+                hisCursor: history.length - 1
               });
               return [3
               /*break*/
@@ -289,29 +393,228 @@ 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, _b, params, key, result, e_2;
+
+        return __generator(this, function (_c) {
+          switch (_c.label) {
+            case 0:
+              _a = this.state, history = _a.history, hisCursor = _a.hisCursor;
+              _b = history[hisCursor], params = _b.params, key = _b.key;
+              _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', params, 'POST')];
+
+            case 2:
+              result = _c.sent();
+
+              if (!result || !result.imageList) {
+                this.setState({
+                  loading: false
+                });
+                return [2
+                /*return*/
+                ];
+              }
+
+              history[hisCursor] = {
+                key: key,
+                images: result.imageList,
+                params: params
+              };
+              this.historyChange(history);
+              this.setState({
+                loading: false
+              });
+              return [3
+              /*break*/
+              , 4];
+
+            case 3:
+              e_2 = _c.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;
 
-    this.destory = (0, _mobx.autorun)(function () {
+            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();
+
+              if (!result || !result.imageList) {
+                this.setState({
+                  loading: false
+                });
+                return [2
+                /*return*/
+                ];
+              }
+
+              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.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
     });
   };
 
@@ -321,9 +624,18 @@ function (_super) {
 
   AiImageGenerator.prototype.render = function () {
     var _a = this.state,
-        visible = _a.visible,
-        images = _a.images,
-        loading = _a.loading;
+        loading = _a.loading,
+        history = _a.history,
+        hisCursor = _a.hisCursor;
+    var visible = this.props.visible;
+
+    var _b = history[hisCursor] || {},
+        _c = _b.images,
+        images = _c === void 0 ? [] : _c,
+        _d = _b.key,
+        key = _d === void 0 ? '' : _d;
+
+    var columnNum = this.getColumnNum(images.length || []);
     return /*#__PURE__*/_react["default"].createElement(_antd.Drawer, {
       bodyStyle: {
         padding: 16,
@@ -349,6 +661,7 @@ function (_super) {
         type: "light"
       }, "Cancel"), /*#__PURE__*/_react["default"].createElement(_common.Button, {
         className: "ml8",
+        onClick: this.onConfirm,
         size: "small",
         type: "primary"
       }, "Confirm"))),
@@ -377,16 +690,7 @@ function (_super) {
     }, /*#__PURE__*/_react["default"].createElement(_GenerateSize["default"], null)), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
       label: "Number",
       name: "number"
-    }, /*#__PURE__*/_react["default"].createElement(_antd.Slider, {
-      className: "cylon-slider-sm",
-      defaultValue: 4,
-      max: 9,
-      min: 1,
-      step: 1,
-      tooltip: {
-        open: true
-      }
-    })), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
+    }, /*#__PURE__*/_react["default"].createElement(_NumberSlider["default"], null)), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
       label: "Style",
       name: "style"
     }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
@@ -404,19 +708,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 +737,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,
+      selectKey: key,
+      source: history
+    }))));
   };
 
   return AiImageGenerator;

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

@@ -1,4 +1,8 @@
 .generate_drawer {
+  ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
   .dialog_head {
     display: flex;
     align-items: center;
@@ -27,46 +31,78 @@
       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: 19px;
+            width: 19px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            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;
@@ -96,17 +132,5 @@
         }
       }
     }
-    .right_wrap {
-      overflow: scroll;
-      width: 132px;
-      min-height: 100%;
-      background-color: #FFF;
-      border-radius: 4px;
-      padding: 16px;
-      .right_header {
-        display: flex;
-        justify-content: space-between;
-      }
-    }
   }
 }