From bcdd9bd7f4d8b960d5452fcacda5d02381847171 Mon Sep 17 00:00:00 2001 From: Kota-Yamaguchi Date: Mon, 7 Oct 2024 17:03:43 +0900 Subject: [PATCH 1/8] Add i18n file for internationalization support - en-US - ja-JP - zh-Hans --- web/i18n/en-US/app-debug.ts | 14 ++++++++++++++ web/i18n/ja-JP/app-debug.ts | 14 ++++++++++++++ web/i18n/zh-Hans/app-debug.ts | 14 ++++++++++++++ 3 files changed, 42 insertions(+) diff --git a/web/i18n/en-US/app-debug.ts b/web/i18n/en-US/app-debug.ts index 3156c9f6cc534..9bce9daf12dd7 100644 --- a/web/i18n/en-US/app-debug.ts +++ b/web/i18n/en-US/app-debug.ts @@ -199,6 +199,20 @@ const translation = { }, }, }, + codegen: { + title: 'Code Generator', + description: 'The Code Generator uses configured models to generate high-quality code based on your instructions. Please provide clear and detailed instructions.', + instruction: 'Instructions', + instructionPlaceholder: 'Enter detailed description of the code you want to generate.', + generate: 'Generate', + generatedCodeTitle: 'Generated Code', + loading: 'Generating code...', + apply: 'Apply', + applyChanges: 'Apply Changes', + resTitle: 'Generated Code', + overwriteConfirmTitle: 'Overwrite existing code?', + overwriteConfirmMessage: 'This action will overwrite the existing code. Do you want to continue?', + }, generate: { title: 'Prompt Generator', description: 'The Prompt Generator uses the configured model to optimize prompts for higher quality and better structure. Please write clear and detailed instructions.', diff --git a/web/i18n/ja-JP/app-debug.ts b/web/i18n/ja-JP/app-debug.ts index e9ee765435727..0ba4c35b0daf3 100644 --- a/web/i18n/ja-JP/app-debug.ts +++ b/web/i18n/ja-JP/app-debug.ts @@ -199,6 +199,20 @@ const translation = { }, }, }, + codegen: { + title: 'コードジェネレーター', + description: 'コードジェネレーターは、設定されたモデルを使用して指示に基づいて高品質なコードを生成します。明確で詳細な指示を提供してください。', + instruction: '指示', + instructionPlaceholder: '生成したいコードの詳細な説明を入力してください。', + generate: '生成', + generatedCodeTitle: '生成されたコード', + loading: 'コードを生成中...', + apply: '適用', + applyChanges: '変更を適用', + resTitle: '生成されたコード', + overwriteConfirmTitle: '既存のコードを上書きしますか？', + overwriteConfirmMessage: 'この操作は既存のコードを上書きします。続行しますか？', + }, generate: { title: 'プロンプト生成器', description: 'プロンプト生成器は、設定済みのモデルを使って、高品質で構造的に優れたプロンプトを作成するための最適化を行います。具体的で詳細な指示をお書きください。', diff --git a/web/i18n/zh-Hans/app-debug.ts b/web/i18n/zh-Hans/app-debug.ts index 62ef300f4dd0d..e1957962d9c21 100644 --- a/web/i18n/zh-Hans/app-debug.ts +++ b/web/i18n/zh-Hans/app-debug.ts @@ -199,6 +199,20 @@ const translation = { }, }, }, + codegen: { + title: '代码生成器', + description: '代码生成器使用配置的模型根据您的指令生成高质量的代码。请提供清晰详细的说明。', + instruction: '指令', + instructionPlaceholder: '请输入您想要生成的代码的详细描述。', + generate: '生成', + generatedCodeTitle: '生成的代码', + loading: '正在生成代码...', + apply: '应用', + applyChanges: '应用更改', + resTitle: '生成的代码', + overwriteConfirmTitle: '是否覆盖现有代码？', + overwriteConfirmMessage: '此操作将覆盖现有代码。您确定要继续吗？', + }, generate: { title: '提示词生成器', description: '提示词生成器使用配置的模型来优化提示词，以获得更高的质量和更好的结构。请写出清晰详细的说明。', From 6e5310de9a47f51223eeb993f6c3a2ed914eceba Mon Sep 17 00:00:00 2001 From: Kota-Yamaguchi Date: Mon, 7 Oct 2024 17:05:42 +0900 Subject: [PATCH 2/8] Create API call and type for rule code generation - Add generateRuleCode function to handle API request - Define CodeGenRes type for the response - Implement POST request to '/rule-code-generate' endpoint --- web/service/debug.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/web/service/debug.ts b/web/service/debug.ts index 38068cad6e5ed..3770c4d398d18 100644 --- a/web/service/debug.ts +++ b/web/service/debug.ts @@ -9,6 +9,11 @@ export type AutomaticRes = { opening_statement: string error?: string } +export type CodeGenRes = { + code: string + language: string[] + error?: string +} export const sendChatMessage = async (appId: string, body: Record, { onData, onCompleted, onThought, onFile, onError, getAbortController, onMessageEnd, onMessageReplace }: { onData: IOnData @@ -71,6 +76,11 @@ export const generateRule = (body: Record) => { body, }) } +export const generateRuleCode = (body: Record) => { + return post('/rule-code-generate', { + body, + }) +} export const fetchModelParams = (providerName: string, modelId: string) => { return get(`workspaces/current/model-providers/${providerName}/models/parameter-rules`, { From 8cdbf8a9f842be99142b2c369c3ffd0080058229 Mon Sep 17 00:00:00 2001 From: Kota-Yamaguchi Date: Mon, 7 Oct 2024 17:08:28 +0900 Subject: [PATCH 3/8] Add code generator button and modal - Create button to trigger code generation - Implement modal for code generation interface - Add functionality to display generated code - Include options for code language selection - Integrate with existing code generation API --- .../code-generator/get-code-generator-res.tsx | 200 ++++++++++++++++++ .../components/code-generator-button.tsx | 48 +++++ 2 files changed, 248 insertions(+) create mode 100644 web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx create mode 100644 web/app/components/workflow/nodes/_base/components/code-generator-button.tsx diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx new file mode 100644 index 0000000000000..b2d45d273366a --- /dev/null +++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx @@ -0,0 +1,200 @@ +import type { FC } from 'react' +import React from 'react' +import cn from 'classnames' +import useBoolean from 'ahooks/lib/useBoolean' +import { useTranslation } from 'react-i18next' +import ConfigPrompt from '../../config-prompt' +import { languageMap } from '../../../../workflow/nodes/_base/components/editor/code-editor/index' +import { generateRuleCode } from '@/service/debug' +import type { CodeGenRes } from '@/service/debug' +import { ModelModeType } from '@/types/app' +import type { AppType, Model } from '@/types/app' +import Modal from '@/app/components/base/modal' +import Button from '@/app/components/base/button' +import { Generator } from '@/app/components/base/icons/src/vender/other' +import Toast from '@/app/components/base/toast' +import Loading from '@/app/components/base/loading' +import Confirm from '@/app/components/base/confirm' +import type { CodeLanguage } from '@/app/components/workflow/nodes/code/types' +export type IGetCodeGeneratorResProps = { + mode: AppType + isShow: boolean + codeLanguages: CodeLanguage + onClose: () => void + onFinished: (res: CodeGenRes) => void +} + +export const GetCodeGeneratorResModal: FC = ( + { + mode, + isShow, + codeLanguages, + onClose, + onFinished, + + }, +) => { + const { t } = useTranslation() + const [instruction, setInstruction] = React.useState('') + const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false) + const [res, setRes] = React.useState(null) + const isValid = () => { + if (instruction.trim() === '') { + Toast.notify({ + type: 'error', + message: t('common.errorMsg.fieldRequired', { + field: t('appDebug.code.instruction'), + }), + }) + return false + } + return true + } + const model: Model = { + provider: 'openai', + name: 'gpt-4o-mini', + mode: ModelModeType.chat, + completion_params: { + temperature: 0.7, + max_tokens: 0, + top_p: 0, + echo: false, + stop: [], + presence_penalty: 0, + frequency_penalty: 0, + }, + } + const isInLLMNode = true + const onGenerate = async () => { + if (!isValid()) + return + if (isLoading) + return + setLoadingTrue() + try { + const { error, ...res } = await generateRuleCode({ + instruction, + model_config: model, + no_variable: !!isInLLMNode, + code_language: languageMap[codeLanguages] || 'javascript', + }) + setRes(res) + if (error) { + Toast.notify({ + type: 'error', + message: error, + }) + } + } + finally { + setLoadingFalse() + } + } + const [showConfirmOverwrite, setShowConfirmOverwrite] = React.useState(false) + + const renderLoading = ( +
+ +
{t('appDebug.codegen.loading')}
+
+ ) + + return ( + +
+
+
+
{t('appDebug.codegen.title')}
+
{t('appDebug.codegen.description')}
+
+
+
+
{t('appDebug.codegen.instruction')}
+