feat: video generation

aqualxx · Mar 29, 2023 · abe38b5 · abe38b5
1 parent 0edd82f
commit abe38b5
Show file tree

Hide file tree

Showing 10 changed files with 549 additions and 176 deletions.
diff --git a/src/components/FormSwitch.vue b/src/components/FormSwitch.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
 import {
  ElFormItem,
- ElSwitch
+ ElSwitch,
+ ElTooltip
 } from 'element-plus';
+import { watchPostEffect } from 'vue';
 import FormLabel from './FormLabel.vue';
 
 const props = defineProps<{
  label?: string;
  modelValue?: boolean;
  prop: string;
  disabled?: boolean;
+ disabledText?: string;
+ defaultValue?: boolean;
  info?: string;
  labelStyle?: string;
  change?: Function;
@@ -23,6 +27,12 @@ function onChanged(value: string | number | boolean) {
  if (!props.change) return;
  props.change(newBoolean);
 }
+
+watchPostEffect(() => {
+ if (props.disabled && props.defaultValue !== undefined) {
+ emit("update:modelValue", props.defaultValue)
+ }
+})
 </script>
 
 <template>
@@ -32,7 +42,10 @@ function onChanged(value: string | number | boolean) {
  <slot name="label">{{label}}</slot>
  </FormLabel>
  </template>
- <el-switch :disabled="disabled" :model-value="modelValue" @change="onChanged" />
+ <el-tooltip :content="disabledText" placement="top" :enterable="false" :hide-after="100" v-if="disabledText && disabled">
+ <el-switch :disabled="disabled" :model-value="modelValue" @change="onChanged" />
+ </el-tooltip>
+ <el-switch :disabled="disabled" :model-value="modelValue" @change="onChanged" v-else />
  <slot name="inline" />
  </el-form-item>
 </template>
diff --git a/src/components/GeneratedCarousel.vue b/src/components/GeneratedCarousel.vue
@@ -14,11 +14,11 @@ const optionStore = useOptionsStore();
 const index = ref(0);
 function onChange(newIndex: number) {
  index.value = newIndex;
- console.log(store.images[index.value])
+ console.log(store.outputs[index.value])
 }
 
 function onDelete(id: number) {
- store.images.splice(store.images.findIndex(el => el.id === id), 1)
+ store.outputs.splice(store.outputs.findIndex(el => el.output.id === id), 1)
 }
 </script>
 
@@ -36,12 +36,14 @@ function onDelete(id: number) {
  indicator-position="outside"
  @change="onChange"
  >
- <el-carousel-item v-for="(imageData, index) in store.images" :key="index">
+ <el-carousel-item v-for="(imageData, index) in store.outputs" :key="index" style="display: flex; justify-content: center;">
+ <video :src="imageData.output.image" controls v-if="imageData.type === 'video'" style="max-width: 100%; height: 100%;" />
  <el-image
- :src="imageData.image"
+ :src="imageData.output.image"
  style="width: 100%; height: 100%;"
  fit="scale-down"
- @click="() => uiStore.activeModal = imageData.id"
+ @click="() => uiStore.activeModal = imageData.output.id"
+ v-if="imageData.type === 'image'"
  ></el-image>
  </el-carousel-item>
  </el-carousel>
@@ -52,7 +54,7 @@ function onDelete(id: number) {
  <el-scrollbar>
  <div style="white-space: nowrap;">
  <ImageActions
- :imageData="store.images[index]"
+ :imageData="store.outputs[index].output"
  :on-delete="onDelete"
  />
  </div>

diff --git a/src/components/ImageProgress.vue b/src/components/ImageProgress.vue
@@ -1,44 +1,66 @@
 <script setup lang="ts">
-import { useGeneratorStore } from '@/stores/generator';
-import { useUIStore } from '@/stores/ui';
+import { useSlots } from 'vue';
+import type { ICurrentGeneration } from '@/stores/generator';
 import { ElProgress, ElIcon } from 'element-plus';
 import { Right } from '@element-plus/icons-vue';
-import { computed } from 'vue';
-const store = useGeneratorStore();
-const uiStore = useUIStore();
+import type { RequestStatusCheck } from '@/types/stable_horde';
 
-const pendingRequests = computed(() => store.queue.filter(el => el.jobId === "" || !el.waitData));
-const failed = computed(() => store.queue.filter(el => el.failed).map(el => el.params?.n).reduce((prev, curr) => (prev || 0) + (curr || 0), 0) || 0);
+defineProps<{
+ est?: string | number;
+ progress?: number;
+ failed?: number;
+ total?: number;
+ gathered?: number;
+ pendingRequests?: ICurrentGeneration[];
+ queueStatus?: RequestStatusCheck;
+}>();
+
+defineEmits(["showGenerated"]);
+
+const slots = useSlots();
 </script>
 
 <template>
- <div v-if="uiStore.progress != 0" style="text-align: center;">
+ <div style="text-align: center;">
  <el-progress
  type="circle"
- :percentage="uiStore.progress / (pendingRequests.length + 1)"
+ :percentage="(progress ?? 0) / ((pendingRequests?.length ?? 0) + 1)"
  :width="200"
  >
  <template #default>
- <span>EST: {{ Math.round((store.queueStatus?.wait_time as number) * (pendingRequests.length + 1)) }}s</span><br>
+ <span>{{ est }}</span><br>
  </template>
  </el-progress>
- <div style="font-size: 15px; padding: 8px; margin-top: 10px; background-color: var(--el-color-info-light-9); border-radius: 5px">
- <div style="font-size: 18px">Generation Status</div>
- <span>Pending: {{ (store.queueStatus.waiting || 0) + pendingRequests.map(el => el?.params?.n || 0).reduce((curr, next) => curr + next, 0) - failed }} - </span>
- <span>Processing: {{ store.queueStatus.processing }} - </span>
- <span>Finished: {{ store.queueStatus.finished }} - </span>
- <span>Restarted: {{ store.queueStatus.restarted }} - </span>
- <span>Failed: {{ failed }}</span>
- <div>Queue Position: {{ store.queueStatus.queue_position }}</div>
+ <div class="queue-status" v-if="queueStatus || slots.status">
+ <slot name="status">
+ <div v-if="queueStatus">
+ <div style="font-size: 18px">Generation Status</div>
+ <span v-if="pendingRequests">Pending: {{ (queueStatus.waiting ?? 0) + pendingRequests.reduce((curr, next) => curr + (next.params?.n ?? 0), 0) - (failed ?? 0) }} - </span>
+ <span>Processing: {{ queueStatus.processing }} - </span>
+ <span>Finished: {{ queueStatus.finished }} - </span>
+ <span>Restarted: {{ queueStatus.restarted }} - </span>
+ <span>Failed: {{ failed }}</span>
+ <div>Queue Position: {{ queueStatus.queue_position }}</div>
+ </div>
+ </slot>
  </div>
- <div @click="uiStore.showGeneratedImages = true" v-if="store.images.length != 0" class="view-images">
- <span>View {{ store.gatheredImages }} / {{ store.queue.map(el => el.params?.n || 0).reduce((curr, next) => curr + next, 0) }} images</span>
+ <div @click="$emit('showGenerated')" v-if="gathered && total" class="view-images">
+ <span>View {{ gathered }} / {{ total }} images</span>
  <el-icon><Right /></el-icon>
  </div>
  </div>
 </template>
 
 <style scoped>
+.queue-status {
+ font-size: 15px;
+ margin-top: 8px;
+ padding: 8px;
+ border-radius: 5px;
+ min-width: 300px;
+ background-color: var(--el-color-info-light-9);
+}
+
 .view-images {
  display: flex;
  align-items: center;

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -8,6 +8,5 @@ export const POLL_WORKERS_INTERVAL = 60; // seconds
 export const POLL_MODELS_INTERVAL = 30; // seconds
 export const POLL_STYLES_INTERVAL = 60 * 30; // seconds
 export const POLL_USERS_INTERVAL = 60 * 5; // seconds
-export const MAX_PARALLEL_IMAGES = 20;
 export const MAX_PARALLEL_REQUESTS = 10;
 export const DEBUG_MODE = false;