@fonixtree/magic-design 1.0.5 → 2.0.3

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

@@ -0,0 +1,711 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _antd = require("antd");
+
+var _GenerateSize = _interopRequireDefault(require("./GenerateSize"));
+
+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 _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 }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+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) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
+var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
+  var _ = {
+    label: 0,
+    sent: function sent() {
+      if (t[0] & 1) throw t[1];
+      return t[1];
+    },
+    trys: [],
+    ops: []
+  },
+      f,
+      y,
+      t,
+      g;
+  return g = {
+    next: verb(0),
+    "throw": verb(1),
+    "return": verb(2)
+  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
+    return this;
+  }), g;
+
+  function verb(n) {
+    return function (v) {
+      return step([n, v]);
+    };
+  }
+
+  function step(op) {
+    if (f) throw new TypeError("Generator is already executing.");
+
+    while (_) {
+      try {
+        if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+        if (y = 0, t) op = [op[0] & 2, t.value];
+
+        switch (op[0]) {
+          case 0:
+          case 1:
+            t = op;
+            break;
+
+          case 4:
+            _.label++;
+            return {
+              value: op[1],
+              done: false
+            };
+
+          case 5:
+            _.label++;
+            y = op[1];
+            op = [0];
+            continue;
+
+          case 7:
+            op = _.ops.pop();
+
+            _.trys.pop();
+
+            continue;
+
+          default:
+            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+              _ = 0;
+              continue;
+            }
+
+            if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+              _.label = op[1];
+              break;
+            }
+
+            if (op[0] === 6 && _.label < t[1]) {
+              _.label = t[1];
+              t = op;
+              break;
+            }
+
+            if (t && _.label < t[2]) {
+              _.label = t[2];
+
+              _.ops.push(op);
+
+              break;
+            }
+
+            if (t[2]) _.ops.pop();
+
+            _.trys.pop();
+
+            continue;
+        }
+
+        op = body.call(thisArg, _);
+      } catch (e) {
+        op = [6, e];
+        y = 0;
+      } finally {
+        f = t = 0;
+      }
+    }
+
+    if (op[0] & 5) throw op[1];
+    return {
+      value: op[0] ? op[1] : void 0,
+      done: true
+    };
+  }
+};
+
+var Search = _antd.Input.Search;
+
+var AiImageGenerator =
+/** @class */
+function (_super) {
+  __extends(AiImageGenerator, _super);
+
+  function AiImageGenerator() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      loading: false,
+      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) {
+        return 1;
+      } else if (num > 1 && num <= 4) {
+        return 2;
+      } else {
+        return 3;
+      }
+    };
+
+    _this.onCloseDrawer = function () {
+      _this.props.onClose();
+    };
+
+    _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 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);
+              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', params, 'POST')];
+
+            case 2:
+              result = _a.sent();
+              history.push({
+                images: result.imageList,
+                params: params
+              });
+              this.historyChange(history);
+              this.setState({
+                loading: false,
+                hisCursor: history.length - 1
+              });
+              return [3
+              /*break*/
+              , 4];
+
+            case 3:
+              e_1 = _a.sent();
+              this.setState({
+                loading: false
+              });
+              return [3
+              /*break*/
+              , 4];
+
+            case 4:
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    };
+
+    _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*/
+              ];
+          }
+        });
+      });
+    };
+
+    _this.getImageList = function (images) {
+      var selected = _this.state.selected;
+      return images.map(function (img, index) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          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'
+        })));
+      });
+    };
+
+    _this.onRefresh = function (index) {
+      return __awaiter(_this, void 0, void 0, function () {
+        var _a, history, hisCursor, _b, images, params, result, e_3;
+
+        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.onHistoryClick = function (index) {
+      _this.setState({
+        hisCursor: index
+      });
+    };
+
+    return _this;
+  }
+
+  AiImageGenerator.prototype.componentDidMount = function () {
+    var history = (0, _storeUtil.getSessionStore)(_constants.STORAGE_KEY.FONIXTREE_AI_IMG_HIS) || [];
+    this.setState({
+      history: history
+    });
+  };
+
+  AiImageGenerator.prototype.componentWillUnmount = function () {
+    if (this.destory) this.destory();
+  };
+
+  AiImageGenerator.prototype.render = function () {
+    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,
+        background: '#F5F6F7'
+      },
+      className: "generate_drawer",
+      closable: false,
+      headerStyle: {
+        padding: '12px 24px'
+      },
+      onClose: this.onCloseDrawer,
+      open: visible,
+      placement: "right",
+      title: /*#__PURE__*/_react["default"].createElement("div", {
+        className: "dialog_head"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "dialog_title"
+      }, "Text to Image"), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "btn_group"
+      }, /*#__PURE__*/_react["default"].createElement(_common.Button, {
+        onClick: this.onCloseDrawer,
+        size: "small",
+        type: "light"
+      }, "Cancel"), /*#__PURE__*/_react["default"].createElement(_common.Button, {
+        className: "ml8",
+        onClick: this.onConfirm,
+        size: "small",
+        type: "primary"
+      }, "Confirm"))),
+      width: 1084
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Spin, {
+      spinning: loading
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "drawer_content"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "left_wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Form, {
+      ref: this.formRef,
+      initialValues: {
+        number: 4
+      },
+      layout: "vertical"
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
+      label: "Choose an AI artist",
+      name: "size"
+    }, /*#__PURE__*/_react["default"].createElement(_GenerateArtist["default"], null)), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
+      label: "Upload reference images",
+      name: "ref"
+    }, /*#__PURE__*/_react["default"].createElement(_UploadReference["default"], null)), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
+      label: "Size",
+      name: "size"
+    }, /*#__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, {
+      label: "Style",
+      name: "style"
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+      mode: "tags"
+    })), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
+      label: "Modifier",
+      name: "modifier"
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+      mode: "tags"
+    })), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
+      label: "Do not appear",
+      name: "notAppear"
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+      mode: "tags"
+    })))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "middle_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      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", {
+      className: "btn_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "regenerate_btn",
+      onClick: this.onRegenerate
+    }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      color: "#232F46",
+      size: 16,
+      style: {
+        marginRight: 5
+      },
+      type: "icon-refresh"
+    }), "Regenerate Response")), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "search_wrap"
+    }, /*#__PURE__*/_react["default"].createElement(Search, {
+      enterButton: "Generate",
+      onSearch: this.onGenarate,
+      size: "large"
+    }))), /*#__PURE__*/_react["default"].createElement(_History["default"], {
+      onChange: this.historyChange,
+      onClick: this.onHistoryClick,
+      selectIndex: hisCursor,
+      source: history
+    }))));
+  };
+
+  return AiImageGenerator;
+}(_react.Component);
+
+var _default = AiImageGenerator;
+exports["default"] = _default;