perf: generate python

Author: wangdan-fit2cloud

ui/src/components/codemirror-editor/index.vue

@@ -18,6 +18,12 @@
     </div>
     <!-- Codemirror 弹出层 -->
     <el-dialog v-model="dialogVisible" :title="title" append-to-body fullscreen>
+      <template #title>
+        <div class="flex-between">
+          <h4>{{ title }}</h4>
+          <slot name="header-extra"> </slot>
+        </div>
+      </template>
       <form @submit.prevent>
         <Codemirror
           v-model="cloneContent"
@@ -161,6 +167,13 @@ watch(dialogVisible, (bool) => {
   }
 })
 
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    cloneContent.value = newValue
+  },
+)
+
 const openCodemirrorDialog = () => {
   cloneContent.value = props.modelValue
   dialogVisible.value = true

ui/src/locales/lang/en-US/views/tool.ts

@@ -7,6 +7,11 @@ export default {
   importTool: 'Import Tool',
   settingTool: 'Set Tool',
   updatedVersion: 'Updated Version',
+  generateCodeDialog: {
+    generatePrompt: 'Generate Python Code',
+    placeholder: 'Please enter the topic',
+    title: 'Python code will be displayed here',
+  },
   toolWorkflow: {
     creatToolWorkflow: 'Create Workflow',
     toActiveTip: 'Unable to enable. Please publish the workflow first.',

ui/src/locales/lang/zh-CN/views/application.ts

@@ -130,7 +130,7 @@ export default {
     continue: '继续生成',
     replace: '替换',
     exit: '确认退出并舍弃 AI 生成的内容吗？',
-    loading: '生成中...',
+    loading: '生成中',
   },
   dialog: {
     addKnowledge: '添加关联知识库',

ui/src/locales/lang/zh-CN/views/tool.ts

@@ -6,10 +6,15 @@ export default {
   importTool: '导入工具',
   settingTool: '设置工具',
   updatedVersion: '更新版本',
+  generateCodeDialog: {
+    generatePrompt: '生成 Python 代码',
+    placeholder: '请输入主题',
+    title: 'python 代码显示在这里',
+  },
   toolWorkflow: {
     creatToolWorkflow: '创建工作流',
     toActiveTip: '无法启用，请先发布工作流。',
-    debugResult:'调试结果'
+    debugResult: '调试结果',
   },
   dataSource: {
     title: '数据源',

ui/src/locales/lang/zh-Hant/views/tool.ts

@@ -6,6 +6,11 @@ export default {
   importTool: '匯入工具',
   settingTool: '設定工具',
   updatedVersion: '更新版本',
+  generateCodeDialog: {
+    generatePrompt: '生成 Python 代码',
+    placeholder: '請輸入主題',
+    title: 'python 代码顯示在這裡',
+  },
   toolWorkflow: {
     creatToolWorkflow: '創建工作流',
     toActiveTip: '無法啓用，請先發布工作流。',

ui/src/views/tool/ToolFormDrawer.vue

@@ -170,19 +170,15 @@
         </el-table-column>
       </el-table>
 
-      <div class="flex-between">
-        <h4 class="title-decoration-1 mb-16">
+      <div class="flex-between mb-16">
+        <h4 class="title-decoration-1">
           {{ $t('views.tool.form.param.code') }}
           <span class="color-danger" style="margin-left: -10px">*</span>
           <el-text type="info" class="color-secondary">
             {{ $t('views.tool.form.param.paramInfo2') }}
           </el-text>
         </h4>
-        <el-button
-          type="primary"
-           @click="openGenerateCodeDialog"
-          link
-        >
+        <el-button type="primary" @click="openGenerateCodeDialog" link>
           <AppIcon iconName="app-generate-star" class="mr-4"></AppIcon>
           {{ $t('views.application.generateDialog.label') }}
         </el-button>
@@ -193,7 +189,15 @@
           :title="$t('views.tool.form.param.code')"
           v-model="form.code"
           @submitDialog="submitCodemirrorEditor"
-        />
+          :replaceCode="replaceCode"
+        >
+          <template #header-extra>
+            <el-button type="primary" link @click="openGenerateCodeDialog">
+              <AppIcon iconName="app-generate-star" class="mr-4"></AppIcon>
+              {{ $t('views.application.generateDialog.label') }}
+            </el-button>
+          </template>
+        </CodemirrorEditor>
       </div>
       <h4 class="title-decoration-1 mb-16 mt-16">
         {{ $t('common.param.outputParam') }}
@@ -227,7 +231,7 @@
     <FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
     <UserFieldFormDialog ref="UserFieldFormDialogRef" @refresh="refreshInitFieldList" />
     <EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshTool" />
-    <GenerateCodeDialog ref="GenerateCodeDialogRef" :toolData="form" @replace="replaceCode"/>
+    <GenerateCodeDialog ref="GenerateCodeDialogRef" :toolData="form" @replace="replaceCode" />
   </el-drawer>
 </template>
 
@@ -248,7 +252,7 @@ import { useRoute } from 'vue-router'
 import useStore from '@/stores'
 import permissionMap from '@/permission'
 import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
-import GenerateCodeDialog from "@/views/tool/component/GenerateCodeDialog.vue";
+import GenerateCodeDialog from '@/views/tool/component/GenerateCodeDialog.vue'
 const route = useRoute()
 
 const props = defineProps({

ui/src/views/tool/component/GenerateCodeDialog.vue

@@ -2,17 +2,17 @@
   <el-dialog
     align-center
     v-model="dialogVisible"
-    style="width: 600px"
+    style="width: 800px"
     append-to-body
     :close-on-click-modal="true"
     :close-on-press-escape="true"
     :before-close="handleDialogClose"
   >
     <template #title>
       <div class="flex-between">
-        <div class="flex">生成Python代码</div>
-        <div class="flex">
-          <div>{{ $t('views.application.form.aiModel.label') }}</div>
+        <h4>{{ $t('views.tool.generateCodeDialog.generatePrompt') }}</h4>
+        <div class="flex align-center">
+          <div class="mr-4 lighter">{{ $t('views.application.form.aiModel.label') }}</div>
           <ModelSelect
             v-model="model_id"
             :placeholder="$t('views.application.form.aiModel.placeholder')"
@@ -21,14 +21,10 @@
             @submitModel="getSelectModel"
             showFooter
             :model-type="'LLM'"
-            style="width: 200px;"
+            style="width: 200px"
           >
           </ModelSelect>
-          <el-button
-            class="ml-8"
-            @click="openAIParamSettingDialog"
-            :disabled="!model_id"
-          >
+          <el-button class="ml-8" @click="openAIParamSettingDialog" :disabled="!model_id">
             <el-icon>
               <Operation />
             </el-icon>
@@ -51,14 +47,14 @@
             </div>
             <p v-else-if="loading" shadow="always" style="margin: 0.5rem 0">
               <el-icon class="is-loading color-primary mr-4">
-                <Loading/>
+                <Loading />
               </el-icon>
               {{ $t('views.application.generateDialog.loading') }}
               <span class="dotting"></span>
             </p>
             <p v-else class="flex align-center">
               <AppIcon iconName="app-generate-star" class="color-primary mr-4"></AppIcon>
-              {{ $t('生成python代码') }}
+              {{ $t('views.tool.generateCodeDialog.title') }}
             </p>
           </el-scrollbar>
 
@@ -93,7 +89,7 @@
               v-model="inputValue"
               :autosize="{ minRows: 1, maxRows: 10 }"
               type="textarea"
-              :placeholder="$t('views.application.generateDialog.placeholder')"
+              :placeholder="$t('views.tool.generateCodeDialog.placeholder')"
               :maxlength="100000"
               class="chat-operate-textarea"
               @keydown.enter="handleSubmit($event)"
@@ -120,7 +116,7 @@
         </div>
       </div>
     </div>
-    <AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshForm"/>
+    <AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshForm" />
   </el-dialog>
 </template>
 
@@ -131,13 +127,13 @@ import { MsgConfirm } from '@/utils/message'
 import { t } from '@/locales'
 import useStore from '@/stores'
 import { copyClick } from '@/utils/clipboard'
-import { loadSharedApi } from "@/utils/dynamics-api/shared-api.ts";
-import { groupBy } from "lodash";
-import AIModeParamSettingDialog from "@/views/application/component/AIModeParamSettingDialog.vue";
-import SendIcon from "@/components/logo/SendIcon.vue";
+import { loadSharedApi } from '@/utils/dynamics-api/shared-api.ts'
+import { groupBy } from 'lodash'
+import AIModeParamSettingDialog from '@/views/application/component/AIModeParamSettingDialog.vue'
+import SendIcon from '@/components/logo/SendIcon.vue'
 
 const emit = defineEmits(['replace'])
-const {user} = useStore()
+const { user } = useStore()
 const route = useRoute()
 
 const chatMessages = ref<Array<any>>([])
@@ -261,7 +257,7 @@ const continueStreaming = () => {
  */
 const getWrite = (reader: any) => {
   let tempResult = ''
-  const middleAnswer = reactive({content: '', role: 'ai'})
+  const middleAnswer = reactive({ content: '', role: 'ai' })
   chatMessages.value.push(middleAnswer)
 
   // 初始化状态并
@@ -276,7 +272,7 @@ const getWrite = (reader: any) => {
    * @param done  是否结束
    * @param value 值
    */
-  const write_stream = ({done, value}: { done: boolean; value: any }) => {
+  const write_stream = ({ done, value }: { done: boolean; value: any }) => {
     try {
       if (done) {
         // 流数据接收完成，但定时器继续运行直到显示完所有内容
@@ -285,7 +281,7 @@ const getWrite = (reader: any) => {
         return
       }
       const decoder = new TextDecoder('utf-8')
-      let str = decoder.decode(value, {stream: true})
+      let str = decoder.decode(value, { stream: true })
       // 这里解释一下 start 因为数据流返回流并不是按照后端chunk返回 我们希望得到的chunk是data:{xxx}\n\n 但是它获取到的可能是 data:{ -> xxx}\n\n 总而言之就是 fetch不能保证每个chunk都说以data:开始 \n\n结束
       tempResult += str
       const split = tempResult.match(/data:.*}\n\n/g)
@@ -351,7 +347,7 @@ function generatePrompt(inputValue: any) {
   isApiComplete.value = false
   loading.value = true
   const workspaceId = user.getWorkspaceId() || 'default'
-  chatMessages.value.push({content: inputValue, role: 'user'})
+  chatMessages.value.push({ content: inputValue, role: 'user' })
   const requestData = {
     messages: chatMessages.value,
     prompt: promptTemplates.INIT_TEMPLATE,
@@ -361,7 +357,7 @@ function generatePrompt(inputValue: any) {
     model_params_setting: model_params_setting.value,
   }
 
-  loadSharedApi({type: 'tool', systemType: apiType.value})
+  loadSharedApi({ type: 'tool', systemType: apiType.value })
     .generateCode(requestData)
     .then((response: any) => {
       nextTick(() => {
@@ -423,21 +419,20 @@ const insertNewlineAtCursor = (event?: any) => {
   })
 }
 
-
 function getSelectModel() {
   loading.value = true
 
   const obj =
     apiType.value === 'systemManage'
       ? {
-        model_type: 'LLM',
-        // todo workspace_id
-        workspace_id: ''
-      }
+          model_type: 'LLM',
+          // todo workspace_id
+          workspace_id: '',
+        }
       : {
-        model_type: 'LLM',
-      }
-  loadSharedApi({type: 'model', systemType: apiType.value})
+          model_type: 'LLM',
+        }
+  loadSharedApi({ type: 'model', systemType: apiType.value })
     .getSelectModelList(obj)
     .then((res: any) => {
       modelOptions.value = groupBy(res?.data, 'provider')
@@ -459,11 +454,7 @@ const model_change = (modelId: string) => {
 
 const openAIParamSettingDialog = () => {
   if (model_id.value) {
-    AIModeParamSettingDialogRef.value?.open(
-      model_id.value,
-      '',
-      model_params_setting.value,
-    )
+    AIModeParamSettingDialogRef.value?.open(model_id.value, '', model_params_setting.value)
   }
 }
 
@@ -534,7 +525,7 @@ watch(
   () => {
     handleScroll()
   },
-  {deep: true, immediate: true},
+  { deep: true, immediate: true },
 )
 
 onMounted(() => {