Skip to content

Commit

Permalink
Change to use tasks for mj (#65)
Browse files Browse the repository at this point in the history
Co-authored-by: Germey <germey@acedata.cloud>
  • Loading branch information
Germey and Germey authored Jul 2, 2024
1 parent 4d179f3 commit 01d44e7
Show file tree
Hide file tree
Showing 16 changed files with 194 additions and 67 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "upgrade to use tasks for mj",
"packageName": "@acedatacloud/nexior",
"email": "germey@acedata.cloud",
"dependentChangeType": "patch"
}
4 changes: 4 additions & 0 deletions src/assets/scss/_common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,10 @@ html.dark,
color: var(--el-text-color-regular);
}

.el-radio-group {
--el-border-radius-base: 15px;
}

.el-textarea {
border-radius: 10px;
textarea {
Expand Down
2 changes: 1 addition & 1 deletion src/components/chat/Message.vue
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ export default defineComponent({
background-color: var(--el-bg-color-page);
color: var(--el-text-color-primary);
width: fit-content;
text-align: right;
text-align: left;
max-width: 100%;
padding: 8px 15px;
}
Expand Down
17 changes: 9 additions & 8 deletions src/components/midjourney/tasks/TaskItem.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="item">
<div v-if="modelValue?.type === 'imagine'" class="item">
<div class="left">
<el-image src="https://cdn.acedata.cloud/05daz4.png" class="avatar" />
</div>
Expand Down Expand Up @@ -121,7 +121,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { ElImage, ElButton, ElTooltip, ElAlert } from 'element-plus';
import { IMidjourneyImagineTask, MidjourneyImagineAction, MidjourneyImagineState } from '@/models';
import { IMidjourneyTask, MidjourneyImagineAction, MidjourneyImagineState } from '@/models';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import CopyToClipboard from '@/components/common/CopyToClipboard.vue';
Expand All @@ -143,7 +143,7 @@ export default defineComponent({
},
props: {
modelValue: {
type: Object as () => IMidjourneyImagineTask | undefined,
type: Object as () => IMidjourneyTask | undefined,
required: true
},
full: {
Expand Down Expand Up @@ -241,10 +241,12 @@ export default defineComponent({
target.src = url.toString();
},
onCustom(action: string) {
this.$emit('custom', {
action,
image_id: this.modelValue?.response?.image_id
});
if (this.modelValue?.type === 'imagine') {
this.$emit('custom', {
action,
image_id: this.modelValue?.response?.image_id
});
}
},
onOpenUrl(url: string) {
window.open(url, '_blank');
Expand Down Expand Up @@ -332,7 +334,6 @@ $left-width: 70px;
}
}
}

.content {
width: 100%;
position: relative;
Expand Down
14 changes: 7 additions & 7 deletions src/components/midjourney/tasks/TaskList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default defineComponent({
},
tasks() {
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
return this.$store.state.midjourney.imagineTasks?.reverse();
return this.$store.state.midjourney.tasks?.items?.reverse();
},
application() {
return this.$store.state.midjourney.application;
Expand All @@ -71,11 +71,11 @@ export default defineComponent({
}
},
async mounted() {
await this.$store.dispatch('midjourney/setImagineTasks', undefined);
this.getImagineTasks();
await this.$store.dispatch('midjourney/setTasks', undefined);
this.getTasks();
// @ts-ignore
this.job = setInterval(() => {
this.getImagineTasks();
this.getTasks();
}, 5000);
},
unmounted() {
Expand All @@ -85,12 +85,12 @@ export default defineComponent({
async onLoadHistory() {
this.$router.push({ name: ROUTE_MIDJOURNEY_HISTORY });
},
async getImagineTasks() {
async getTasks() {
// ensure that the previous request has been completed
if (this.loading) {
return;
}
await this.$store.dispatch('midjourney/getImagineTasks', {
await this.$store.dispatch('midjourney/getTasks', {
limit: 30,
offset: 0
});
Expand Down Expand Up @@ -133,7 +133,7 @@ export default defineComponent({
.main {
width: calc(100% - 70px);
flex: 1;
padding: 0 10px;
padding: 10px;
.icon {
display: flex;
Expand Down
82 changes: 77 additions & 5 deletions src/components/qrart/RecentPanel.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,27 @@
<template>
<div class="panel recent tasks">
<task-preview v-for="(task, taskIndex) in tasks?.items" :key="taskIndex" :model-value="task" class="preview" />
<div class="panel recent">
<div v-if="tasks?.items === undefined" class="tasks">
<div v-for="_ in 3" :key="_" class="task placeholder">
<div class="left">
<el-skeleton animated>
<template #template>
<el-skeleton-item variant="image" class="avatar" />
</template>
</el-skeleton>
</div>
<div class="main">
<el-skeleton animated>
<template #template>
<el-skeleton-item variant="p" class="title" />
<el-skeleton-item variant="image" class="icon" />
</template>
</el-skeleton>
</div>
</div>
</div>
<div v-else-if="tasks?.items?.length && tasks?.items?.length > 0" class="tasks">
<task-preview v-for="(task, taskIndex) in tasks?.items" :key="taskIndex" :model-value="task" class="preview" />
</div>
<p v-if="tasks?.items?.length === 0" class="description">
{{ $t('qrart.message.noTasks') }}
</p>
Expand All @@ -11,11 +32,14 @@
import { defineComponent } from 'vue';
import TaskPreview from './task/Preview.vue';
import { Status } from '@/models';
import { ElSkeleton, ElSkeletonItem } from 'element-plus';
export default defineComponent({
name: 'RecentPanel',
components: {
TaskPreview
TaskPreview,
ElSkeleton,
ElSkeletonItem
},
data() {
return {
Expand Down Expand Up @@ -49,8 +73,8 @@ export default defineComponent({
methods: {
async onScrollDown() {
setTimeout(() => {
// scroll to bottom for `.tasks`
const el = document.querySelector('.tasks');
// scroll to bottom for `.recent`
const el = document.querySelector('.recent');
if (el) {
el.scrollTop = el.scrollHeight;
}
Expand Down Expand Up @@ -91,6 +115,54 @@ export default defineComponent({
font-size: 14px;
color: var(--el-text-color-secondary);
}
.tasks {
width: 100%;
.task {
margin-bottom: 15px;
width: 100%;
height: fit-content;
text-align: left;
&.placeholder {
display: flex;
flex-direction: row;
.left {
width: 70px;
padding: 10px;
.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
}
}
.main {
width: calc(100% - 70px);
flex: 1;
padding: 10px;
margin-bottom: 10px;
.icon {
display: flex;
height: 200px;
width: 300px;
}
.title {
display: block;
width: 200px;
height: 20px;
margin-bottom: 15px;
}
}
}
.operations {
height: fit-content !important;
}
}
}
}
}
</style>
26 changes: 23 additions & 3 deletions src/models/midjourney.ts
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,11 @@ export interface IMidjourneyImagineRequest {
application_id?: string;
}

export interface IMidjourneyDescribeRequest {
image_url: string;
application_id?: string;
}

export interface IMidjourneyImagineResponse {
task_id: string;
progress: number;
Expand All @@ -75,18 +80,33 @@ export interface IMidjourneyImagineResponse {
success?: boolean;
}

export interface IMidjourneyDescribeResponse {
descriptions: string[];
}

export interface IMidjourneyImagineTask {
id: string;
type: 'imagine';
created_at?: string;
request?: IMidjourneyImagineRequest;
response?: IMidjourneyImagineResponse;
state?: MidjourneyImagineState;
}

export type IMidjourneyImagineTaskResponse = IMidjourneyImagineTask;
export interface IMidjourneyDescribeTask {
id: string;
type: 'describe';
created_at?: string;
request?: IMidjourneyDescribeRequest;
response?: IMidjourneyDescribeResponse;
}

export type IMidjourneyTask = IMidjourneyImagineTask | IMidjourneyDescribeTask;

export type IMidjourneyTaskResponse = IMidjourneyTask;

export interface IMidjourneyImagineTasksResponse {
items: IMidjourneyImagineTask[];
export interface IMidjourneyTasksResponse {
items: IMidjourneyTask[];
count: number;
}

Expand Down
8 changes: 4 additions & 4 deletions src/operators/midjourney.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import axios, { AxiosResponse } from 'axios';
import {
IMidjourneyImagineRequest,
IMidjourneyImagineResponse,
IMidjourneyImagineTaskResponse,
IMidjourneyImagineTasksResponse
IMidjourneyTaskResponse,
IMidjourneyTasksResponse
} from '@/models';
import { BASE_URL_API } from '@/constants';

class MidjourneyOperator {
async task(id: string, options: { token: string }): Promise<AxiosResponse<IMidjourneyImagineTaskResponse>> {
async task(id: string, options: { token: string }): Promise<AxiosResponse<IMidjourneyTaskResponse>> {
return await axios.post(
`/midjourney/tasks`,
{
Expand All @@ -30,7 +30,7 @@ class MidjourneyOperator {
async tasks(
filter: { ids?: string[]; applicationId?: string; limit?: number; offset?: number },
options: { token: string }
): Promise<AxiosResponse<IMidjourneyImagineTasksResponse>> {
): Promise<AxiosResponse<IMidjourneyTasksResponse>> {
return await axios.post(
`/midjourney/tasks`,
{
Expand Down
6 changes: 6 additions & 0 deletions src/pages/distribution/Index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -434,4 +434,10 @@ export default defineComponent({
bottom: 40px;
z-index: 1000;
}

@media (max-width: 767px) {
.help {
top: 40px;
}
}
</style>
8 changes: 4 additions & 4 deletions src/pages/midjourney/Index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,8 @@ export default defineComponent({
};
},
computed: {
imagineTasks() {
return this.$store.state.midjourney.imagineTasks;
tasks() {
return this.$store.state.midjourney.tasks;
},
service() {
return this.$store.state.midjourney.service;
Expand Down Expand Up @@ -189,7 +189,7 @@ export default defineComponent({
}
},
watch: {
imagineTasks: {
tasks: {
handler(val, oldVal) {
if (oldVal === undefined && val) {
this.onScrollDown();
Expand Down Expand Up @@ -272,7 +272,7 @@ export default defineComponent({
}, 500);
},
async onSyncTasks() {
await this.$store.dispatch('midjourney/getImagineTasks', {
await this.$store.dispatch('midjourney/getTasks', {
limit: 30,
offset: 0
});
Expand Down
19 changes: 13 additions & 6 deletions src/pages/profile/Index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,9 @@ export default defineComponent({
user() {
return this.$store.getters.user;
},
showSite() {
return this.$store?.state?.site?.admins?.includes(this.$store.getters.user?.id);
},
links(): ILink[] {
let links: ILink[] = [
{
Expand Down Expand Up @@ -105,12 +108,16 @@ export default defineComponent({
name: ROUTE_DISTRIBUTION_INDEX,
icon: 'fa-solid fa-coins'
},
{
key: 'site-index',
text: this.$t('common.nav.site'),
name: ROUTE_SITE_INDEX,
icon: 'fa-solid fa-gear'
},
...(this.showSite
? [
{
key: 'site-index',
text: this.$t('common.nav.site'),
name: ROUTE_SITE_INDEX,
icon: 'fa-solid fa-gear'
}
]
: []),
{
key: 'dark-setting',
text: this.$t('common.nav.darkMode'),
Expand Down
Loading

0 comments on commit 01d44e7

Please sign in to comment.