Add flux

change/@acedatacloud-nexior-f9339c7d-e331-406b-ac53-c014909a07dd.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add flux",
+  "packageName": "@acedatacloud/nexior",
+  "email": "1348977728@qq.com",
+  "dependentChangeType": "patch"
+}

src/components/common/ImageNavigator.vue

@@ -0,0 +1,38 @@
+<template>
+  <el-menu mode="horizontal" :default-active="active">
+    <el-menu-item v-if="site?.features?.midjourney?.enabled" index="/midjourney" @click="$router.push('/midjourney')">
+      {{ $t('common.nav.midjourney') }}
+    </el-menu-item>
+    <el-menu-item v-if="site?.features?.flux?.enabled" index="/flux" @click="$router.push('/flux')">
+      {{ $t('common.nav.flux') }}
+    </el-menu-item>
+  </el-menu>
+</template>
+
+<script lang="ts">
+import { ElMenu, ElMenuItem } from 'element-plus';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'ImageNavigator',
+  components: {
+    ElMenu,
+    ElMenuItem
+  },
+  computed: {
+    site() {
+      return this.$store.state.site;
+    },
+    active() {
+      console.log(this.$route.path);
+      return this.$route.path;
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.el-menu {
+  justify-content: center;
+}
+</style>

src/components/flux/ConfigPanel.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="panel">
+    <div class="config">
+      <prompt-input class="mb-4" />
+      <model-selector class="mb-4" />
+      <div class="actions">
+        <el-button
+          v-if="config?.video_url !== undefined || config?.custom"
+          type="primary"
+          class="btn w-full"
+          round
+          @click="onGenerate"
+        >
+          <font-awesome-icon icon="fa-solid fa-magic" class="mr-2" />
+          {{ $t('flux.button.extend') }}
+        </el-button>
+        <el-button v-else type="primary" class="btn w-full" round @click="onGenerate">
+          <font-awesome-icon icon="fa-solid fa-magic" class="mr-2" />
+          {{ $t('flux.button.generate') }}
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { ElButton } from 'element-plus';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import ModelSelector from './config/ModelSelector.vue';
+import PromptInput from './config/PromptInput.vue';
+// import RatioSelector from './config/RatioSelector.vue';
+// import NumbersSelector from './config/NumbersSelector.vue';
+// import QualitySelector from './config/QualitySelector.vue';
+export default defineComponent({
+  name: 'PresetPanel',
+  components: {
+    ElButton,
+    FontAwesomeIcon,
+    PromptInput,
+    ModelSelector
+  },
+  emits: ['generate'],
+  computed: {
+    config() {
+      return this.$store.state.flux?.config;
+    }
+  },
+  methods: {
+    onGenerate() {
+      this.$emit('generate');
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.panel {
+  height: 100%;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  .config {
+    width: 100%;
+    height: calc(100% - 50px);
+    flex: 1;
+  }
+  .actions {
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .btn {
+      width: 100%;
+    }
+  }
+}
+</style>

src/components/flux/DetailPanel.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="panel detail">
+    <task-detail />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import TaskDetail from './task/Detail.vue';
+
+export default defineComponent({
+  name: 'DetailPanel',
+  components: {
+    TaskDetail
+  },
+  data() {
+    return {
+      job: 0
+    };
+  },
+  computed: {}
+});
+</script>

src/components/flux/ImageGallery.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="image-gallery">
+    <div class="image-container">
+      <img :src="modelValue.image_url" alt="Image" />
+      <button class="view-button" @click="viewImage(modelValue.image_url)">
+        {{ $t('flux.button.viewImage') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+import { IFluxImage } from '@/models';
+interface IDataItem {
+  image_url: string;
+  // Add other properties if necessary
+}
+
+interface IResponse {
+  data: IDataItem[];
+}
+
+export default defineComponent({
+  name: 'ImageGallery',
+  props: {
+    modelValue: {
+      type: Object as () => IFluxImage | undefined,
+      required: true
+    }
+  },
+  setup(props) {
+    // Computed property to extract the first two images
+
+    // Method to handle the "View Image" button click
+    const viewImage = (url: string) => {
+      window.open(url, '_blank');
+    };
+
+    return {
+      viewImage
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.image-gallery {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.image-container {
+  position: relative;
+  width: 48%; /* Ensures two images fit side by side with some space */
+  overflow: hidden;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+
+  img {
+    width: 100%;
+    height: auto;
+    display: block;
+    transition: transform 0.3s ease;
+  }
+
+  /* Zoom effect on hover */
+  &:hover img {
+    transform: scale(1.05);
+  }
+
+  .view-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(0, 0, 0, 0.6);
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+
+    /* Optional: Add a slight delay for smoother appearance */
+    transition-delay: 0.1s;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.8);
+    }
+  }
+
+  /* Show the button on hover */
+  &:hover .view-button {
+    opacity: 1;
+  }
+}
+</style>

src/components/flux/OperationPanel.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <el-card v-show="operating">
+      <content-input class="mb-4" />
+      <prompt-input class="mb-4" />
+      <preset-selector class="mb-4" />
+      <div class="actions">
+        <el-button type="primary" class="btn w-full" round @click="onGenerate">
+          <font-awesome-icon icon="fa-solid fa-magic" class="mr-2" />
+          {{ $t('flux.button.generate') }}
+        </el-button>
+      </div>
+    </el-card>
+    <div>
+      <el-button type="primary" class="btn btn-operate" @click="operating = !operating">+</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { ElButton, ElCard } from 'element-plus';
+import PresetSelector from './config/PresetSelector2.vue';
+import ContentInput from './config/ContentInput.vue';
+import PromptInput from './config/PromptInput.vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+export default defineComponent({
+  name: 'OperationPanel',
+  components: {
+    ElButton,
+    ElCard,
+    PresetSelector,
+    ContentInput,
+    PromptInput,
+    FontAwesomeIcon
+  },
+  emits: ['generate'],
+  data() {
+    return {
+      operating: false
+    };
+  },
+  methods: {
+    onGenerate() {
+      this.$emit('generate');
+      this.operating = false;
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.el-card {
+  width: 580px;
+  height: fit-content;
+  overflow-y: scroll;
+  position: absolute;
+  bottom: 70px;
+  left: calc(50% - 300px);
+  @media (max-width: 767px) {
+    width: 100%;
+    left: 0;
+  }
+}
+
+.btn-operate {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  font-size: 24px;
+  line-height: 40px;
+  padding: 0;
+  margin: auto;
+  display: block;
+}
+</style>