add image generation

frontend/src/pages/lab/Home.vue

@@ -47,6 +47,13 @@ export default {
           summary_text: 'Respone based on multi turn messages ',
           icon_picture: '',
           cover_picture: cover_picture
+        },
+        {
+          path: 'image-generation',
+          title_text: 'image generation',
+          summary_text: 'Generate a image based on user prompt',
+          icon_picture: '',
+          cover_picture: cover_picture
         }
       ]
     }

frontend/src/pages/lab/openai/ImageGeneration.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="input_containter">
+      <input class="input_text" type="text" v-model="input_text" @keyup.enter="image_generation($event)" />
+      <img class="responded_image" :src="responded_image"/>
+    </div>
+  </template>
+  <script>
+  import { LabApi } from '@/utils/index'
+  export default {
+    name: 'ImageGeneration',
+    components: {},
+    computed: {},
+    mounted() { },
+    methods: {
+      image_generation($event) {
+        LabApi.image_generation(this.input_text)
+          .then((response) => {
+            this.responded_image = response.data
+          })
+          .catch((error) => {
+            this.mnx_backendErrorHandler(error)
+          })
+      }
+    },
+    data() {
+      return {
+        input_text: null,
+        responded_image: null
+      }
+    }
+  }
+  </script>
+    
+  <style scoped lang="scss">
+  .input_containter {
+    @extend .container;
+    @extend .m-3;
+  }
+  
+  .input_text {
+    @extend .w-100;
+  }
+  
+  .responded_image {
+    @extend .w-100;
+  }
+  </style>
+    

frontend/src/plugins/router/router.js

@@ -68,6 +68,8 @@ import LabHome from '@/pages/lab/Home.vue'
 import TranslationHome from '@/pages/lab/translation/Home.vue'
 import TaskCompletion from '@/pages/lab/openai/TaskCompletion.vue'
 import MultiturnChat from '@/pages/lab/openai/MultiturnChat.vue'
+import ImageGeneration from '@/pages/lab/openai/ImageGeneration.vue'
+
 const router = createRouter({
   history: createWebHistory(),
   routes: [
@@ -402,7 +404,14 @@ const router = createRouter({
       path: '/multiturn-chat',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
       components: { default: MultiturnChat, footer: FooterUser, header: HeaderUser }
-    }],
+    },
+    {
+      name: 'image-generation',
+      path: '/image-generation',
+      meta: { requiredRoles: [userRoleEnum.PERSONAL] },
+      components: { default: ImageGeneration, footer: FooterUser, header: HeaderUser }
+    }
+  ],
 
   linkActiveClass: 'active'
   /*    scrollBehavior(_, _2, savedPosition) {

frontend/src/utils/backend/lab.js

@@ -27,6 +27,19 @@ class LabApi {
     )
     return request
   }
+  static image_generation(prompt) {
+    let jwt = userUtils.getJwtToken()
+    const request = backendAxios.post(
+      '/api/lab/generate-image',
+      {
+        user_prompt: prompt
+      },
+      {
+        headers: { Authorization: `Bearer ${jwt}` }
+      }
+    )
+    return request
+  }
 
   static multiturn_chat(messages) {
     let jwt = userUtils.getJwtToken()