From d26a53936c6b75b579ee125de6eb2a65a880dbae Mon Sep 17 00:00:00 2001 From: Germey Date: Sun, 8 Oct 2023 16:07:37 +0800 Subject: [PATCH] update history --- src/components/midjourney/ImaginePreview.vue | 51 ------- src/components/midjourney/TaskBriefList.vue | 86 +++++++++++ src/components/midjourney/TaskPreview.vue | 149 +++++++++++++++++++ src/operators/common/contants.ts | 2 + src/operators/index.ts | 1 + src/operators/midjourney/models.ts | 38 ++++- src/operators/midjourney/operator.ts | 27 +++- src/operators/usage/contants.ts | 0 src/operators/usage/index.ts | 2 + src/operators/usage/models.ts | 19 +++ src/operators/usage/operator.ts | 27 ++++ src/pages/midjourney/Index.vue | 100 ++++++++----- 12 files changed, 407 insertions(+), 95 deletions(-) delete mode 100644 src/components/midjourney/ImaginePreview.vue create mode 100644 src/components/midjourney/TaskBriefList.vue create mode 100644 src/components/midjourney/TaskPreview.vue create mode 100644 src/operators/common/contants.ts create mode 100644 src/operators/usage/contants.ts create mode 100644 src/operators/usage/index.ts create mode 100644 src/operators/usage/models.ts create mode 100644 src/operators/usage/operator.ts diff --git a/src/components/midjourney/ImaginePreview.vue b/src/components/midjourney/ImaginePreview.vue deleted file mode 100644 index 5b9e6ba..0000000 --- a/src/components/midjourney/ImaginePreview.vue +++ /dev/null @@ -1,51 +0,0 @@ - - - - - diff --git a/src/components/midjourney/TaskBriefList.vue b/src/components/midjourney/TaskBriefList.vue new file mode 100644 index 0000000..139a0dc --- /dev/null +++ b/src/components/midjourney/TaskBriefList.vue @@ -0,0 +1,86 @@ + + + + + diff --git a/src/components/midjourney/TaskPreview.vue b/src/components/midjourney/TaskPreview.vue new file mode 100644 index 0000000..6df27a6 --- /dev/null +++ b/src/components/midjourney/TaskPreview.vue @@ -0,0 +1,149 @@ + + + + + diff --git a/src/operators/common/contants.ts b/src/operators/common/contants.ts new file mode 100644 index 0000000..f98171d --- /dev/null +++ b/src/operators/common/contants.ts @@ -0,0 +1,2 @@ +export const ENDPOINT_API = 'https://api.zhishuyun.com'; +export const ENDPOINT_DATA = 'https://data.zhishuyun.com'; diff --git a/src/operators/index.ts b/src/operators/index.ts index eb7679d..11d3b0b 100644 --- a/src/operators/index.ts +++ b/src/operators/index.ts @@ -4,3 +4,4 @@ export * from './user'; export * from './api'; export * from './chat'; export * from './midjourney'; +export * from './usage'; diff --git a/src/operators/midjourney/models.ts b/src/operators/midjourney/models.ts index 080c1b7..696d061 100644 --- a/src/operators/midjourney/models.ts +++ b/src/operators/midjourney/models.ts @@ -15,7 +15,24 @@ export interface IMidjourneyPreset { export enum MidjourneyImagineAction { GENERATE = 'generate', - UPSAMPLE1 = 'upsample1' + UPSAMPLE1 = 'upsample1', + UPSAMPLE2 = 'upsample2', + UPSAMPLE3 = 'upsample3', + UPSAMPLE4 = 'upsample4', + VARIATION1 = 'variation1', + VARIATION2 = 'variation2', + VARIATION3 = 'variation3', + VARIATION4 = 'variation4', + HIGH_VARIATION = 'high_variation', + LOW_VARIATION = 'low_variation', + ZOOM_OUT_2X = 'zoom_out_2x', + ZOOM_OUT_1_5X = 'zoom_out_1_5x', + SQUARE = 'square', + PAN_LEFT = 'pan_left', + PAN_UP = 'pan_up', + PAN_DOWN = 'pan_down', + PAN_RIGHT = 'pan_right', + REROLL = 'reroll' } export enum MidjourneyImagineState { @@ -26,8 +43,8 @@ export enum MidjourneyImagineState { } export interface IMidjourneyImagineRequest { - action: MidjourneyImagineAction; - prompt: string; + action?: MidjourneyImagineAction; + prompt?: string; image_id?: string; } @@ -37,11 +54,20 @@ export interface IMidjourneyImagineResponse { image_id: string; image_url: string; actions: MidjourneyImagineAction[]; + code?: string; + detail?: string; + success?: boolean; +} + +export interface IMidjourneyImagineTask { + request?: IMidjourneyImagineRequest; + response?: IMidjourneyImagineResponse; + state?: MidjourneyImagineState; } export interface IMidjourneyImagineOptions { stream?: (response: IMidjourneyImagineResponse) => void; - token: string; - endpoint: string; - path: string; + token?: string; + endpoint?: string; + path?: string; } diff --git a/src/operators/midjourney/operator.ts b/src/operators/midjourney/operator.ts index bc22834..3ff6e1b 100644 --- a/src/operators/midjourney/operator.ts +++ b/src/operators/midjourney/operator.ts @@ -1,10 +1,33 @@ import axios, { AxiosResponse } from 'axios'; -import { IMidjourneyImagineOptions, IMidjourneyImagineRequest, IMidjourneyImagineResponse } from './models'; +import { IMidjourneyImagineRequest, IMidjourneyImagineResponse, IMidjourneyImagineTask } from './models'; +import { ENDPOINT_API } from '../common/contants'; class MidjourneyOperator { + async task(id: string): Promise> { + return await axios.post( + `/midjourney/tasks`, + { + action: 'retrieve', + id: id + }, + { + headers: { + accept: 'application/json', + 'content-type': 'application/json' + }, + baseURL: ENDPOINT_API + } + ); + } + async imagine( data: IMidjourneyImagineRequest, - options: IMidjourneyImagineOptions + options: { + stream: (response: IMidjourneyImagineResponse) => void; + token: string; + endpoint: string; + path: string; + } ): Promise> { return await axios.post(options.path, data, { headers: { diff --git a/src/operators/usage/contants.ts b/src/operators/usage/contants.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/operators/usage/index.ts b/src/operators/usage/index.ts new file mode 100644 index 0000000..2e04d2d --- /dev/null +++ b/src/operators/usage/index.ts @@ -0,0 +1,2 @@ +export * from './operator'; +export * from './models'; diff --git a/src/operators/usage/models.ts b/src/operators/usage/models.ts new file mode 100644 index 0000000..3a8dfbd --- /dev/null +++ b/src/operators/usage/models.ts @@ -0,0 +1,19 @@ +import { IApi } from '../api'; + +export interface IApiUsage { + id?: string; + api?: IApi; + api_id?: string; + application_id?: string; + trace_id?: string; + metadata?: any; + created_at?: string; + updated_at?: string; +} + +export interface IApiUsageListResponse { + count: number; + items: IApiUsage[]; +} + +export type IApiUsageDetailResponse = IApiUsage; diff --git a/src/operators/usage/operator.ts b/src/operators/usage/operator.ts new file mode 100644 index 0000000..957db81 --- /dev/null +++ b/src/operators/usage/operator.ts @@ -0,0 +1,27 @@ +import { AxiosResponse } from 'axios'; +import { httpClient } from '../instance'; +import { IApiUsageDetailResponse, IApiUsageListResponse } from './models'; + +export interface IApiUsageQuery { + user_id?: string; + offset?: number; + limit?: number; + application_id?: string; + ordering?: string; +} + +class ApiUsageOperator { + key = 'usage/apis'; + + async getAll(query: IApiUsageQuery): Promise> { + return await httpClient.get(`/${this.key}/`, { + params: query + }); + } + + async get(id: string): Promise> { + return await httpClient.get(`/${this.key}/${id}`); + } +} + +export const apiUsageOperator = new ApiUsageOperator(); diff --git a/src/pages/midjourney/Index.vue b/src/pages/midjourney/Index.vue index bab4544..c9eada6 100644 --- a/src/pages/midjourney/Index.vue +++ b/src/pages/midjourney/Index.vue @@ -10,7 +10,9 @@ 生成 - + +
+
@@ -23,7 +25,6 @@ import ElementsSelector from '@/components/midjourney/ElementsSelector.vue'; import IgnoreSelector from '@/components/midjourney/IgnoreSelector.vue'; import { ElButton, ElImage } from 'element-plus'; import ChannelSelector from '@/components/midjourney/ChannelSelector.vue'; -import ImaginePreview from '@/components/midjourney/ImaginePreview.vue'; import { IApplication, IMidjourneyChannel, @@ -33,9 +34,12 @@ import { MIDJOURNEY_CHANNEL_FAST, applicationOperator, midjourneyOperator, - MidjourneyImagineState + MidjourneyImagineState, + IMidjourneyImagineTask, + IMidjourneyImagineRequest } from '@/operators'; import ApiStatus from '@/components/common/ApiStatus.vue'; +import TaskBriefList from '@/components/midjourney/TaskBriefList.vue'; interface IData { channel: IMidjourneyChannel; @@ -46,8 +50,7 @@ interface IData { initializing: boolean; applied: boolean | undefined; application: IApplication | undefined; - response: IMidjourneyImagineResponse | undefined; - state: MidjourneyImagineState | undefined; + task: IMidjourneyImagineTask | undefined; } export default defineComponent({ @@ -59,8 +62,8 @@ export default defineComponent({ ElementsSelector, IgnoreSelector, ElButton, - ImaginePreview, - ApiStatus + ApiStatus, + TaskBriefList }, data(): IData { return { @@ -72,18 +75,17 @@ export default defineComponent({ ignore: '', initializing: false, applied: undefined, - response: undefined, - state: undefined + task: undefined }; }, mounted() { - this.onFetchChannel(); + this.onFetchApplication(); }, methods: { async onSelectChannel() { - await this.onFetchChannel(); + await this.onFetchApplication(); }, - async onFetchChannel() { + async onFetchApplication() { this.initializing = true; const { data: applications } = await applicationOperator.getAll({ user_id: this.$store.state.user.id, @@ -96,39 +98,60 @@ export default defineComponent({ } this.application = applications.items[0]; }, - async onGenerate() { - this.state = MidjourneyImagineState.PENDING; + async onStartTask(request: IMidjourneyImagineRequest) { const token = this.application?.credential?.token; const endpoint = this.application?.api?.endpoint; const path = this.application?.api?.path; - if (!token || !endpoint || !this.prompt || !path) { + if (!token || !endpoint || !path) { console.error('no token or endpoint or question'); return; } + this.task = { + ...this.task, + request, + state: MidjourneyImagineState.PENDING + }; midjourneyOperator - .imagine( - { - prompt: this.prompt, - action: MidjourneyImagineAction.GENERATE - }, - { - token, - endpoint, - path, - stream: (response: IMidjourneyImagineResponse) => { - console.log(response); - this.state = MidjourneyImagineState.GENERATING; - this.response = response; - } + .imagine(request, { + token, + endpoint, + path, + stream: (response: IMidjourneyImagineResponse) => { + console.log(response); + this.task = { + ...this.task, + state: MidjourneyImagineState.GENERATING, + response + }; } - ) - .then((res) => { - this.state = MidjourneyImagineState.FINISHED; - console.log(res); }) - .catch(() => { - this.state = MidjourneyImagineState.FAILED; + .then(() => { + this.task = { + ...this.task, + state: MidjourneyImagineState.FINISHED + }; + }) + .catch((error) => { + this.task = { + ...this.task, + state: MidjourneyImagineState.FAILED, + response: error?.response as IMidjourneyImagineResponse + }; }); + }, + async onCustom(payload: { image_id: string; action: MidjourneyImagineAction }) { + const request = { + image_id: payload.image_id, + action: payload.action + }; + this.onStartTask(request); + }, + async onGenerate() { + const request = { + prompt: this.prompt, + action: MidjourneyImagineAction.GENERATE + }; + this.onStartTask(request); } } }); @@ -143,7 +166,7 @@ export default defineComponent({ .presets { width: 260px; height: 100%; - background-color: var(--el-bg-color-page); + // background-color: var(--el-bg-color-page); } .main { flex: 1; @@ -153,5 +176,10 @@ export default defineComponent({ margin-bottom: 10px; } } + .tasks { + width: 400px; + height: 100%; + // background-color: var(--el-bg-color-page); + } }