feat: add generate prompt button and improve code formatting in index.vue

ui/src/workflow/nodes/image-understand/index.vue

@@ -26,7 +26,8 @@
             <div class="flex-between w-full">
               <div>
                 <span
-                  >{{ t('views.applicationWorkflow.nodes.imageUnderstandNode.model.label')
+                >{{
+                    t('views.applicationWorkflow.nodes.imageUnderstandNode.model.label')
                   }}<span class="color-danger">*</span></span
                 >
               </div>
@@ -68,6 +69,14 @@
                   <AppIcon iconName="app-warning" class="app-warning-icon ml-4"></AppIcon>
                 </el-tooltip>
               </div>
+              <el-button
+                type="primary"
+                link
+                @click="openGeneratePromptDialog(form_data.model_id)"
+                :disabled="!form_data.model_id"
+              >
+                <AppIcon iconName="app-generate-star"></AppIcon>
+              </el-button>
             </div>
           </template>
           <MdEditorMagnify
@@ -91,7 +100,8 @@
             <div class="flex align-center">
               <div class="mr-4">
                 <span
-                  >{{ $t('views.application.form.prompt.label')
+                >{{
+                    $t('views.application.form.prompt.label')
                   }}<span class="color-danger">*</span></span
                 >
               </div>
@@ -142,7 +152,8 @@
           }"
         >
           <template #label
-            >{{ $t('views.applicationWorkflow.nodes.imageUnderstandNode.image.label')
+          >{{
+              $t('views.applicationWorkflow.nodes.imageUnderstandNode.image.label')
             }}<span class="color-danger">*</span></template
           >
           <NodeCascader
@@ -179,6 +190,7 @@
       </el-form>
     </el-card>
     <AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam"/>
+    <GeneratePromptDialog @replace="replace" ref="GeneratePromptDialogRef"/>
   </NodeContainer>
 </template>
 
@@ -192,6 +204,8 @@ import AIModeParamSettingDialog from '@/views/application/component/AIModeParamS
 import {t} from '@/locales'
 import {useRoute} from 'vue-router'
 import {loadSharedApi} from '@/utils/dynamics-api/shared-api'
+import GeneratePromptDialog from "@/views/application/component/GeneratePromptDialog.vue";
+
 const getApplicationDetail = inject('getApplicationDetail') as any
 const route = useRoute()
 
@@ -261,6 +275,7 @@ const form_data = computed({
 })
 
 const application = getApplicationDetail()
+
 function getSelectModel() {
   const obj =
     apiType.value === 'systemManage'
@@ -296,6 +311,16 @@ function refreshParam(data: any) {
   set(props.nodeModel.properties.node_data, 'model_params_setting', data)
 }
 
+const GeneratePromptDialogRef = ref<InstanceType<typeof GeneratePromptDialog>>()
+const openGeneratePromptDialog = (modelId: string) => {
+  if (modelId) {
+    GeneratePromptDialogRef.value?.open(modelId, id)
+  }
+}
+const replace = (v: any) => {
+  set(props.nodeModel.properties.node_data, 'system', v)
+}
+
 onMounted(() => {
   getSelectModel()
 

ui/src/workflow/nodes/video-understand/index.vue

@@ -26,7 +26,8 @@
             <div class="flex-between w-full">
               <div>
                 <span
-                  >{{ t('views.applicationWorkflow.nodes.videoUnderstandNode.model.label')
+                >{{
+                    t('views.applicationWorkflow.nodes.videoUnderstandNode.model.label')
                   }}<span class="color-danger">*</span></span
                 >
               </div>
@@ -68,6 +69,14 @@
                   <AppIcon iconName="app-warning" class="app-warning-icon ml-4"></AppIcon>
                 </el-tooltip>
               </div>
+              <el-button
+                type="primary"
+                link
+                @click="openGeneratePromptDialog(form_data.model_id)"
+                :disabled="!form_data.model_id"
+              >
+                <AppIcon iconName="app-generate-star"></AppIcon>
+              </el-button>
             </div>
           </template>
           <MdEditorMagnify
@@ -91,7 +100,8 @@
             <div class="flex align-center">
               <div class="mr-4">
                 <span
-                  >{{ $t('views.application.form.prompt.label')
+                >{{
+                    $t('views.application.form.prompt.label')
                   }}<span class="color-danger">*</span></span
                 >
               </div>
@@ -100,6 +110,7 @@
                 <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
               </el-tooltip>
             </div>
+
           </template>
           <MdEditorMagnify
             @wheel="wheel"
@@ -142,7 +153,8 @@
           }"
         >
           <template #label
-            >{{ $t('views.applicationWorkflow.nodes.videoUnderstandNode.image.label')
+          >{{
+              $t('views.applicationWorkflow.nodes.videoUnderstandNode.image.label')
             }}<span class="color-danger">*</span></template
           >
           <NodeCascader
@@ -179,6 +191,7 @@
       </el-form>
     </el-card>
     <AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam"/>
+    <GeneratePromptDialog @replace="replace" ref="GeneratePromptDialogRef"/>
   </NodeContainer>
 </template>
 
@@ -192,6 +205,8 @@ import AIModeParamSettingDialog from '@/views/application/component/AIModeParamS
 import {t} from '@/locales'
 import {useRoute} from 'vue-router'
 import {loadSharedApi} from '@/utils/dynamics-api/shared-api'
+import GeneratePromptDialog from "@/views/application/component/GeneratePromptDialog.vue";
+
 const getApplicationDetail = inject('getApplicationDetail') as any
 const route = useRoute()
 
@@ -261,6 +276,7 @@ const form_data = computed({
 })
 
 const application = getApplicationDetail()
+
 function getSelectModel() {
   const obj =
     apiType.value === 'systemManage'
@@ -291,6 +307,15 @@ const openAIParamSettingDialog = (modelId: string) => {
     AIModeParamSettingDialogRef.value?.open(modelId, id, form_data.value.model_params_setting)
   }
 }
+const GeneratePromptDialogRef = ref<InstanceType<typeof GeneratePromptDialog>>()
+const openGeneratePromptDialog = (modelId: string) => {
+  if (modelId) {
+    GeneratePromptDialogRef.value?.open(modelId, id)
+  }
+}
+const replace = (v: any) => {
+  set(props.nodeModel.properties.node_data, 'system', v)
+}
 
 function refreshParam(data: any) {
   set(props.nodeModel.properties.node_data, 'model_params_setting', data)