From f3d05d5be4ffa0a5340284cfc02feb7becab5a58 Mon Sep 17 00:00:00 2001
From: Germey <cqc@cuiqingcai.com>
Date: Sat, 7 Oct 2023 21:35:04 +0800
Subject: [PATCH] add mj generation

---
 src/components/midjourney/ChannelSelector.vue | 128 +++++++++++++
 .../midjourney/ElementsSelector.vue           | 178 ++++++++++++++++++
 src/components/midjourney/IgnoreSelector.vue  |  58 ++++++
 src/components/midjourney/ImaginePreview.vue  |  50 +++++
 src/components/midjourney/PresetPanel.vue     |  26 ++-
 src/components/midjourney/PromptInput.vue     |  58 ++++++
 src/operators/index.ts                        |   1 +
 src/operators/midjourney/constants.ts         |  30 +++
 src/operators/midjourney/index.ts             |   3 +
 src/operators/midjourney/models.ts            |  47 +++++
 src/operators/midjourney/operator.ts          |  32 ++++
 src/pages/midjourney/Index.vue                | 124 +++++++++++-
 src/store/index.ts                            |   3 +-
 13 files changed, 725 insertions(+), 13 deletions(-)
 create mode 100644 src/components/midjourney/ChannelSelector.vue
 create mode 100644 src/components/midjourney/ElementsSelector.vue
 create mode 100644 src/components/midjourney/IgnoreSelector.vue
 create mode 100644 src/components/midjourney/ImaginePreview.vue
 create mode 100644 src/components/midjourney/PromptInput.vue
 create mode 100644 src/operators/midjourney/constants.ts
 create mode 100644 src/operators/midjourney/index.ts
 create mode 100644 src/operators/midjourney/models.ts
 create mode 100644 src/operators/midjourney/operator.ts

diff --git a/src/components/midjourney/ChannelSelector.vue b/src/components/midjourney/ChannelSelector.vue
new file mode 100644
index 0000000..a5a6730
--- /dev/null
+++ 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
new file mode 100644
index 0000000..db4cc18
--- /dev/null
+++ 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
new file mode 100644
index 0000000..090b7c2
--- /dev/null
+++ 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>
diff --git a/src/components/midjourney/ImaginePreview.vue b/src/components/midjourney/ImaginePreview.vue
new file mode 100644
index 0000000..9559617
--- /dev/null
+++ b/src/components/midjourney/ImaginePreview.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="preview">
+    <el-image
+      v-if="modelValue?.image_url"
+      v-loading="state === midjourneyImagineState.PENDING"
+      :src="modelValue?.image_url"
+      fit="fill"
+      class="image"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { ElImage } from 'element-plus';
+import { IMidjourneyImagineResponse, MidjourneyImagineState } from '@/operators';
+
+export default defineComponent({
+  name: 'ImaginePreview',
+  components: {
+    ElImage
+  },
+  props: {
+    modelValue: {
+      type: Object as () => IMidjourneyImagineResponse,
+      default: undefined
+    },
+    state: {
+      type: Object as () => MidjourneyImagineState,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      midjourneyImagineState: MidjourneyImagineState
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.preview {
+  width: 100%;
+  text-align: center;
+  .image {
+    width: 200px;
+    height: 200px;
+  }
+}
+</style>
diff --git a/src/components/midjourney/PresetPanel.vue b/src/components/midjourney/PresetPanel.vue
index a6ad9a7..59eb97a 100644
--- a/src/components/midjourney/PresetPanel.vue
+++ b/src/components/midjourney/PresetPanel.vue
@@ -3,7 +3,6 @@
     <model-selector v-model="preset.model" class="block" />
     <ratio-selector v-model="preset.ratio" class="block" />
     <version-selector v-model="preset.version" class="block" />
-
     <stylize-selector v-model="preset.stylize" class="block" />
     <chaos-selector v-model="preset.chaos" class="block" />
   </div>
@@ -25,15 +24,28 @@ export default defineComponent({
     StylizeSelector,
     ChaosSelector
   },
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ['update:modelValue'],
   data() {
     return {
-      preset: {
-        ratio: undefined,
-        version: undefined,
-        stylize: undefined,
-        chaos: undefined
-      }
+      preset: this.modelValue
     };
+  },
+  watch: {
+    modelValue(val) {
+      this.preset = val;
+    },
+    preset: {
+      handler(val) {
+        this.$emit('update:modelValue', val);
+      },
+      deep: true
+    }
   }
 });
 </script>
diff --git a/src/components/midjourney/PromptInput.vue b/src/components/midjourney/PromptInput.vue
new file mode 100644
index 0000000..dbd02ed
--- /dev/null
+++ b/src/components/midjourney/PromptInput.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <h2 class="title">绘图描述</h2>
+    <el-input v-model="value" :rows="3" 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>
diff --git a/src/operators/index.ts b/src/operators/index.ts
index 0391628..eb7679d 100644
--- a/src/operators/index.ts
+++ b/src/operators/index.ts
@@ -3,3 +3,4 @@ export * from './application';
 export * from './user';
 export * from './api';
 export * from './chat';
+export * from './midjourney';
diff --git a/src/operators/midjourney/constants.ts b/src/operators/midjourney/constants.ts
new file mode 100644
index 0000000..746bb92
--- /dev/null
+++ b/src/operators/midjourney/constants.ts
@@ -0,0 +1,30 @@
+import { IMidjourneyChannel } from './models';
+
+export const MIDJOURNEY_CHANNEL_NAME_FAST = 'Fast';
+export const MIDJOURNEY_CHANNEL_NAME_RELAX = 'Relax';
+export const MIDJOURNEY_CHANNEL_NAME_TURBO = 'Turbo';
+
+export const API_ID_MIDJOURNEY_FAST = '9a628863-8879-462b-bbee-5dc46505b733';
+export const API_ID_MIDJOURNEY_RELAX = 'c58713f3-fef7-4c18-824c-9f76b5a07a7f';
+export const API_ID_MIDJOURNEY_TURBO = '62ec82bd-7de3-427f-b71a-ab3551ac7677';
+
+export const MIDJOURNEY_CHANNEL_FAST: IMidjourneyChannel = {
+  icon: 'fa-bolt fa-regular',
+  apiId: API_ID_MIDJOURNEY_FAST,
+  name: MIDJOURNEY_CHANNEL_NAME_FAST,
+  displayName: 'Fast'
+};
+
+export const MIDJOURNEY_CHANNEL_RELAX: IMidjourneyChannel = {
+  icon: 'fa-bolt fa-regular',
+  apiId: API_ID_MIDJOURNEY_RELAX,
+  name: MIDJOURNEY_CHANNEL_NAME_RELAX,
+  displayName: 'Relax'
+};
+
+export const MIDJOURNEY_CHANNEL_TURBO: IMidjourneyChannel = {
+  icon: 'fa-bolt fa-regular',
+  apiId: API_ID_MIDJOURNEY_TURBO,
+  name: MIDJOURNEY_CHANNEL_NAME_TURBO,
+  displayName: 'Turbo'
+};
diff --git a/src/operators/midjourney/index.ts b/src/operators/midjourney/index.ts
new file mode 100644
index 0000000..47497e4
--- /dev/null
+++ b/src/operators/midjourney/index.ts
@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './models';
+export * from './operator';
diff --git a/src/operators/midjourney/models.ts b/src/operators/midjourney/models.ts
new file mode 100644
index 0000000..080c1b7
--- /dev/null
+++ b/src/operators/midjourney/models.ts
@@ -0,0 +1,47 @@
+export interface IMidjourneyChannel {
+  icon: string;
+  apiId: string;
+  name: string;
+  displayName: string;
+}
+
+export interface IMidjourneyPreset {
+  model?: string;
+  ratio?: string;
+  version?: string;
+  stylize?: string;
+  chaos?: string;
+}
+
+export enum MidjourneyImagineAction {
+  GENERATE = 'generate',
+  UPSAMPLE1 = 'upsample1'
+}
+
+export enum MidjourneyImagineState {
+  PENDING = 'pending',
+  GENERATING = 'generating',
+  FINISHED = 'finished',
+  FAILED = 'failed'
+}
+
+export interface IMidjourneyImagineRequest {
+  action: MidjourneyImagineAction;
+  prompt: string;
+  image_id?: string;
+}
+
+export interface IMidjourneyImagineResponse {
+  task_id: string;
+  progress: number;
+  image_id: string;
+  image_url: string;
+  actions: MidjourneyImagineAction[];
+}
+
+export interface IMidjourneyImagineOptions {
+  stream?: (response: IMidjourneyImagineResponse) => void;
+  token: string;
+  endpoint: string;
+  path: string;
+}
diff --git a/src/operators/midjourney/operator.ts b/src/operators/midjourney/operator.ts
new file mode 100644
index 0000000..bc22834
--- /dev/null
+++ b/src/operators/midjourney/operator.ts
@@ -0,0 +1,32 @@
+import axios, { AxiosResponse } from 'axios';
+import { IMidjourneyImagineOptions, IMidjourneyImagineRequest, IMidjourneyImagineResponse } from './models';
+
+class MidjourneyOperator {
+  async imagine(
+    data: IMidjourneyImagineRequest,
+    options: IMidjourneyImagineOptions
+  ): Promise<AxiosResponse<IMidjourneyImagineResponse>> {
+    return await axios.post(options.path, data, {
+      headers: {
+        authorization: `Bearer ${options.token}`,
+        accept: 'application/x-ndjson',
+        'content-type': 'application/json'
+      },
+      baseURL: options.endpoint,
+      responseType: 'stream',
+      onDownloadProgress: (event) => {
+        const response = event.target.response;
+        const lines = response.split('\r\n').filter((line: string) => !!line);
+        const lastLine = lines[lines.length - 1];
+        if (lastLine) {
+          const jsonData = JSON.parse(lastLine);
+          if (options?.stream) {
+            options?.stream(jsonData as IMidjourneyImagineResponse);
+          }
+        }
+      }
+    });
+  }
+}
+
+export const midjourneyOperator = new MidjourneyOperator();
diff --git a/src/pages/midjourney/Index.vue b/src/pages/midjourney/Index.vue
index b87d0b5..4d0b67e 100644
--- a/src/pages/midjourney/Index.vue
+++ b/src/pages/midjourney/Index.vue
@@ -1,20 +1,131 @@
 <template>
   <div class="page">
     <div class="presets">
-      <preset-panel />
+      <channel-selector v-model="channel" />
+      <preset-panel v-model="preset" />
+    </div>
+    <div class="main">
+      <prompt-input v-model="prompt" class="mb-4" />
+      <elements-selector v-model="elements" class="mb-4" />
+      <ignore-selector v-model="ignore" class="mb-4" />
+      <el-button type="primary" @click="onGenerate"> 生成 </el-button>
+      <p>
+        <imagine-preview v-model="response" :state="state" />
+      </p>
     </div>
-    <div class="main"></div>
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 import PresetPanel from '@/components/midjourney/PresetPanel.vue';
+import PromptInput from '@/components/midjourney/PromptInput.vue';
+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,
+  MidjourneyImagineAction,
+  IMidjourneyImagineResponse,
+  IMidjourneyPreset,
+  MIDJOURNEY_CHANNEL_FAST,
+  applicationOperator,
+  midjourneyOperator,
+  MidjourneyImagineState
+} from '@/operators';
+
+interface IData {
+  channel: IMidjourneyChannel;
+  preset: IMidjourneyPreset;
+  prompt: string;
+  elements: string[];
+  ignore: string;
+  initializing: boolean;
+  applied: boolean | undefined;
+  application: IApplication | undefined;
+  response: IMidjourneyImagineResponse | undefined;
+  state: MidjourneyImagineState | undefined;
+}
 
 export default defineComponent({
   name: 'MidjourneyIndex',
   components: {
-    PresetPanel
+    ChannelSelector,
+    PresetPanel,
+    PromptInput,
+    ElementsSelector,
+    IgnoreSelector,
+    ElButton,
+    ImaginePreview
+  },
+  data(): IData {
+    return {
+      application: undefined,
+      channel: MIDJOURNEY_CHANNEL_FAST,
+      preset: {},
+      prompt: '',
+      elements: [],
+      ignore: '',
+      initializing: false,
+      applied: undefined,
+      response: undefined,
+      state: undefined
+    };
+  },
+  mounted() {
+    this.onFetchChannel();
+  },
+  methods: {
+    async onFetchChannel() {
+      this.initializing = true;
+      const { data: applications } = await applicationOperator.getAll({
+        user_id: this.$store.state.user.id,
+        api_id: this.channel.apiId
+      });
+      this.initializing = false;
+      if (!applications || applications?.items?.length === 0) {
+        this.applied = false;
+        return;
+      }
+      this.application = applications.items[0];
+    },
+    async onGenerate() {
+      this.state = MidjourneyImagineState.PENDING;
+      const token = this.application?.credential?.token;
+      const endpoint = this.application?.api?.endpoint;
+      const path = this.application?.api?.path;
+      if (!token || !endpoint || !this.prompt || !path) {
+        console.error('no token or endpoint or question');
+        return;
+      }
+      midjourneyOperator
+        .imagine(
+          {
+            prompt: this.prompt,
+            action: MidjourneyImagineAction.GENERATE
+          },
+          {
+            token,
+            endpoint,
+            path,
+            stream: (response: IMidjourneyImagineResponse) => {
+              console.log(response);
+              this.state = MidjourneyImagineState.GENERATING;
+              this.response = response;
+            }
+          }
+        )
+        .then((res) => {
+          this.state = MidjourneyImagineState.FINISHED;
+          console.log(res);
+        })
+        .catch(() => {
+          this.state = MidjourneyImagineState.FAILED;
+        });
+    }
   }
 });
 </script>
@@ -32,6 +143,11 @@ export default defineComponent({
   }
   .main {
     flex: 1;
+    padding: 15px;
+    .title {
+      font-size: 14px;
+      margin-bottom: 10px;
+    }
   }
 }
 </style>
diff --git a/src/store/index.ts b/src/store/index.ts
index 4ff5e14..4de96d0 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -10,8 +10,7 @@ const store = createStore({
     return {
       user: {},
       token: {
-        access:
-          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjk2NjQ2NjMxLCJqdGkiOiI4ODc1NzhhOTgyYjU0ZjBmODQ4NmU2ODFiYTZhYmVkMCIsInVzZXJfaWQiOiJlOGRjYWUyNC0yMmQwLTQ3MTItOTIxNy0zN2MyMzc0MTIwM2EiLCJwZXJtaXNzaW9ucyI6WyJhZGRfbG9nZW50cnkiLCJjaGFuZ2VfbG9nZW50cnkiLCJkZWxldGVfbG9nZW50cnkiLCJ2aWV3X2xvZ2VudHJ5IiwiYWRkX2ludml0YXRpb24iLCJjaGFuZ2VfaW52aXRhdGlvbiIsImRlbGV0ZV9pbnZpdGF0aW9uIiwidmlld19pbnZpdGF0aW9uIiwiYWRkX3Ntc2NvZGUiLCJjaGFuZ2Vfc21zY29kZSIsImRlbGV0ZV9zbXNjb2RlIiwidmlld19zbXNjb2RlIiwiYWRkX3VzZXIiLCJjaGFuZ2VfdXNlciIsImRlbGV0ZV91c2VyIiwidmlld191c2VyIiwiYWRkX3dlY2hhdGluZm8iLCJjaGFuZ2Vfd2VjaGF0aW5mbyIsImRlbGV0ZV93ZWNoYXRpbmZvIiwidmlld193ZWNoYXRpbmZvIiwiYWRkX2dyb3VwIiwiY2hhbmdlX2dyb3VwIiwiZGVsZXRlX2dyb3VwIiwidmlld19ncm91cCIsImFkZF9wZXJtaXNzaW9uIiwiY2hhbmdlX3Blcm1pc3Npb24iLCJkZWxldGVfcGVybWlzc2lvbiIsInZpZXdfcGVybWlzc2lvbiIsImFkZF90b2tlbiIsImNoYW5nZV90b2tlbiIsImRlbGV0ZV90b2tlbiIsInZpZXdfdG9rZW4iLCJhZGRfdG9rZW5wcm94eSIsImNoYW5nZV90b2tlbnByb3h5IiwiZGVsZXRlX3Rva2VucHJveHkiLCJ2aWV3X3Rva2VucHJveHkiLCJhZGRfY29udGVudHR5cGUiLCJjaGFuZ2VfY29udGVudHR5cGUiLCJkZWxldGVfY29udGVudHR5cGUiLCJ2aWV3X2NvbnRlbnR0eXBlIiwiYWRkX3Nlc3Npb24iLCJjaGFuZ2Vfc2Vzc2lvbiIsImRlbGV0ZV9zZXNzaW9uIiwidmlld19zZXNzaW9uIl0sImlzX3N1cGVydXNlciI6dHJ1ZSwiaW52aXRlcl9pZCI6bnVsbCwiaXNfdmVyaWZpZWQiOnRydWUsInJlYWxuYW1lIjoiXHU1ZDE0XHU1ZTg2XHU2MjRkIiwicGhvbmUiOiIxNzYwMDE1NTU2NyIsImlkY2FyZCI6IjM3MDc4MTE5OTQwNjI5MzI3MSJ9.3866OMRcmExhw_7PD4OK_3zU58azknDSUNLvFxFSvbM',
+        access: import.meta.env.VITE_ACCESS_TOKEN?.toString(),
         refresh: undefined
       },
       setting: {