add mj generation

ZhiShuYun · Oct 7, 2023 · f3d05d5 · f3d05d5
1 parent 2c885fa
commit f3d05d5
Show file tree

Hide file tree

Showing 13 changed files with 725 additions and 13 deletions.
diff --git a/src/components/midjourney/ChannelSelector.vue b/src/components/midjourney/ChannelSelector.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="model-selector">
+    <el-dropdown trigger="click" @command="onCommandChange">
+      <el-button>
+        <font-awesome-icon class="icon" icon="fa-regular fa-" />
+        <span>
+          {{ value.displayName }}
+        </span>
+        <font-awesome-icon icon="fa-solid fa-chevron-down" />
+      </el-button>
+      <template #dropdown>
+        <el-dropdown-menu class="menu">
+          <el-dropdown-item
+            v-for="(channel, channelIndex) in options"
+            :key="channelIndex"
+            :command="channel"
+            class="option"
+          >
+            <font-awesome-icon :icon="channel.icon" />
+            {{ channel.displayName }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { ElDropdown, ElButton, ElDropdownItem } from 'element-plus';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import {
+  IMidjourneyChannel,
+  MIDJOURNEY_CHANNEL_FAST,
+  MIDJOURNEY_CHANNEL_RELAX,
+  MIDJOURNEY_CHANNEL_TURBO
+} from '@/operators';
+
+export default defineComponent({
+  name: 'ModelSelector',
+  components: {
+    ElDropdown,
+    ElButton,
+    ElDropdownItem,
+    FontAwesomeIcon
+  },
+  props: {
+    modelValue: {
+      type: Object as () => IMidjourneyChannel,
+      required: true
+    }
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      value: this.modelValue,
+      options: [MIDJOURNEY_CHANNEL_FAST, MIDJOURNEY_CHANNEL_RELAX, MIDJOURNEY_CHANNEL_TURBO]
+    };
+  },
+  watch: {
+    modelValue(val) {
+      if (val !== this.value) {
+        this.value = val;
+      }
+    }
+  },
+  methods: {
+    onCommandChange(command: IMidjourneyChannel) {
+      this.value = command;
+      this.$emit('update:modelValue', command);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.model-selector {
+  background-color: #ececf1;
+  padding: 7px 6px;
+  border-radius: 15px;
+  margin-bottom: 5px;
+  .group {
+    padding: 20px 30px;
+    color: black;
+    border: none;
+    border-radius: 10px;
+    margin: 0 3px;
+    background-color: inherit;
+    &:hover,
+    &:focus {
+      background-color: inherit;
+    }
+    &.active {
+      background-color: white;
+    }
+    .icon {
+      display: inline-block;
+      margin-right: 5px;
+      &.base {
+        color: #ff9900;
+      }
+      &.plus {
+        color: #ce65e6;
+      }
+    }
+    .fa-chevron-down {
+      margin-left: 5px;
+      font-weight: 100;
+      color: #999;
+      transform: scale(0.8);
+    }
+  }
+}
+.menu {
+  .option {
+    .icon {
+      display: inline-block;
+      margin-right: 5px;
+      &.base {
+        color: #ff9900;
+      }
+      &.plus {
+        color: #ce65e6;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/midjourney/ElementsSelector.vue b/src/components/midjourney/ElementsSelector.vue
@@ -0,0 +1,178 @@
+<template>
+  <div class="field">
+    <h2 class="title">绘制风格</h2>
+    <el-tabs v-model="tab">
+      <el-tab-pane
+        v-for="(element, elementKey) in elements"
+        :key="elementKey"
+        :label="element.displayName"
+        :name="elementKey"
+        class="pane"
+      >
+        <div
+          v-for="(item, itemKey) in element.items"
+          :key="itemKey"
+          :class="{
+            item: true,
+            active: value.includes(item.value)
+          }"
+          @click="onChoose(item.value)"
+        >
+          <el-image :src="item.image" fit="fill" class="preview" />
+          <span class="name">{{ item.label }}</span>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { ElTabs, ElTabPane, ElImage } from 'element-plus';
+
+export default defineComponent({
+  name: 'StylizeSelector',
+  components: {
+    ElTabs,
+    ElTabPane,
+    ElImage
+  },
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      tab: 'styles',
+      value: this.modelValue,
+      elements: {
+        styles: {
+          displayName: '风格',
+          items: [
+            {
+              value: '2D illustration',
+              label: '二位插图',
+              image: 'https://cdn.zhishuyun.com/2023-10-07-102019.png'
+            },
+            {
+              value: 'Pixel art',
+              label: '像素艺术',
+              image: 'https://cdn.zhishuyun.com/2023-10-07-102158.png'
+            },
+            {
+              value: 'Watercolour',
+              label: '水彩',
+              image: 'https://cdn.zhishuyun.com/2023-10-07-102236.png'
+            },
+            {
+              value: 'Ukiyo-e art',
+              label: '浮世绘艺术',
+              image: 'https://cdn.zhishuyun.com/2023-10-07-102303.png'
+            }
+          ]
+        },
+        lighting: {
+          displayName: '光照',
+          items: [
+            {
+              value: 'Golden hour light',
+              label: '黄金时段光线',
+              image: 'https://cdn.zhishuyun.com/2023-10-07-102458.png'
+            },
+            {
+              value: 'Candlelight',
+              label: '烛光',
+              image: 'https://cdn.zhishuyun.com/2023-10-07-102537.png'
+            }
+          ]
+        },
+        artists: {
+          displayName: '艺术家',
+          items: [
+            {
+              value: 'Monet',
+              label: '莫奈',
+              image: 'https://cdn.zhishuyun.com/2023-10-07-102650.png'
+            },
+            {
+              value: 'Picasso',
+              label: '毕加索',
+              image: 'https://cdn.zhishuyun.com/2023-10-07-102740.png'
+            }
+          ]
+        }
+      }
+    };
+  },
+  watch: {
+    modelValue(val) {
+      this.value = val;
+    },
+    value: {
+      handler(val) {
+        this.$emit('update:modelValue', val);
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    if (!this.value) {
+      this.value = [];
+    }
+    this.$emit('update:modelValue', this.value);
+  },
+  methods: {
+    onChoose(value: string) {
+      this.value.push(value);
+      this.$emit('update:modelValue', this.value);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.pane {
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+  align-items: center;
+  .item {
+    $height: 100px;
+    $width: 100px;
+    position: relative;
+    width: $height;
+    height: $width;
+    margin-right: 8px;
+    margin-bottom: 8px;
+    border-width: 2px;
+    border-style: solid;
+    border-color: #eee;
+    border-radius: 5px;
+    overflow: hidden;
+
+    &.active {
+      border-color: var(--el-color-primary);
+    }
+
+    .preview {
+      width: $height;
+      height: $width;
+    }
+    .name {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 20px;
+      width: $width;
+      background-color: rgba(0, 0, 0, 0.5);
+      color: white;
+      font-size: 10px;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/components/midjourney/IgnoreSelector.vue b/src/components/midjourney/IgnoreSelector.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <h2 class="title">忽略元素</h2>
+    <el-input v-model="value" :rows="1" type="textarea" placeholder="Please input" />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { ElInput } from 'element-plus';
+
+export default defineComponent({
+  name: 'PromptInput',
+  components: {
+    ElInput
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: undefined
+    }
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      value: this.modelValue
+    };
+  },
+  watch: {
+    modelValue(val) {
+      if (val !== this.value) {
+        this.value = val;
+      }
+    },
+    value(val) {
+      this.$emit('update:modelValue', val);
+    }
+  },
+  mounted() {}
+});
+</script>
+
+<style lang="scss" scoped>
+.field {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .title {
+    font-size: 14px;
+    margin-bottom: 0;
+    width: 30%;
+  }
+  .value {
+    flex: 1;
+  }
+}
+</style>