From 4e3be226aade9d988e012fe5ef1f5296c248b840 Mon Sep 17 00:00:00 2001 From: allence Date: Wed, 12 Apr 2023 18:05:15 +0800 Subject: [PATCH 1/2] feat: use laf AI to generate code --- web/public/locales/en/translation.json | 2 +- web/src/components/Editor/CodeViewer.tsx | 253 ++++++++++++++++++ .../FunctionPanel/CreateModal/PromptModal.tsx | 56 ++-- 3 files changed, 280 insertions(+), 31 deletions(-) create mode 100644 web/src/components/Editor/CodeViewer.tsx diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json index 9ff22281c3..4773a56d35 100644 --- a/web/public/locales/en/translation.json +++ b/web/public/locales/en/translation.json @@ -159,7 +159,7 @@ "ID": "ID", "IDTip": "Please enter a valid ID number", "Name": "Real name", - "Registered": "Regist", + "Registered": "RegTime", "SendCode": "Send Code", "Tel": "Mobile", "TelTip": "Please enter a valid Mobile phone number", diff --git a/web/src/components/Editor/CodeViewer.tsx b/web/src/components/Editor/CodeViewer.tsx new file mode 100644 index 0000000000..753f9c1832 --- /dev/null +++ b/web/src/components/Editor/CodeViewer.tsx @@ -0,0 +1,253 @@ +import SyntaxHighlighter from "react-syntax-highlighter"; + +type CodeViewerProps = { + code: string; + language: string; + showNumber?: boolean; + colorMode?: string; +}; + +const CodeViewerStyle: any = { + hljs: { + display: "block", + overflowX: "auto", + padding: "0.5em", + color: "#000", + background: "#f8f8ff", + }, + "hljs-comment": { + color: "#408080", + fontStyle: "italic", + }, + "hljs-quote": { + color: "#408080", + fontStyle: "italic", + }, + "hljs-keyword": { + color: "#954121", + }, + "hljs-selector-tag": { + color: "#954121", + }, + "hljs-literal": { + color: "#954121", + }, + "hljs-subst": { + color: "#954121", + }, + "hljs-number": { + color: "#b0caa4", + }, + "hljs-string": { + color: "#0451a5", + }, + + "hljs-selector-id": { + color: "#19469d", + }, + "hljs-selector-class": { + color: "#19469d", + }, + "hljs-section": { + color: "#19469d", + }, + "hljs-type": { + color: "#19469d", + }, + "hljs-params": { + color: "#00f", + }, + "hljs-title": { + color: "#458", + fontWeight: "bold", + }, + "hljs-tag": { + color: "#000080", + fontWeight: "normal", + }, + "hljs-name": { + color: "#000080", + fontWeight: "normal", + }, + "hljs-attr": { + color: "#a31515", + fontWeight: "normal", + }, + "hljs-attribute": { + color: "#000080", + fontWeight: "normal", + }, + "hljs-variable": { + color: "#008080", + }, + "hljs-template-variable": { + color: "#008080", + }, + "hljs-regexp": { + color: "#b68", + }, + "hljs-link": { + color: "#b68", + }, + "hljs-symbol": { + color: "#990073", + }, + "hljs-bullet": { + color: "#990073", + }, + "hljs-built_in": { + color: "#0086b3", + }, + "hljs-builtin-name": { + color: "#0086b3", + }, + "hljs-meta": { + color: "#999", + fontWeight: "bold", + }, + "hljs-deletion": { + background: "#fdd", + }, + "hljs-addition": { + background: "#dfd", + }, + "hljs-emphasis": { + fontStyle: "italic", + }, + "hljs-strong": { + fontWeight: "bold", + }, +}; + +const JSONViewerDarkStyle: any = { + hljs: { + display: "block", + overflowX: "auto", + padding: "0.5em", + color: "#000", + background: "#f8f8ff", + }, + "hljs-comment": { + color: "#408080", + fontStyle: "italic", + }, + "hljs-quote": { + color: "#408080", + fontStyle: "italic", + }, + "hljs-keyword": { + color: "#954121", + }, + "hljs-selector-tag": { + color: "#954121", + }, + "hljs-literal": { + color: "#954121", + }, + "hljs-subst": { + color: "#954121", + }, + "hljs-number": { + color: "#b0caa4", + }, + "hljs-string": { + color: "#ce9178", + }, + + "hljs-selector-id": { + color: "#19469d", + }, + "hljs-selector-class": { + color: "#19469d", + }, + "hljs-section": { + color: "#19469d", + }, + "hljs-type": { + color: "#19469d", + }, + "hljs-params": { + color: "#00f", + }, + "hljs-title": { + color: "#458", + fontWeight: "bold", + }, + "hljs-tag": { + color: "#000080", + fontWeight: "normal", + }, + "hljs-name": { + color: "#000080", + fontWeight: "normal", + }, + "hljs-attr": { + color: "#9bdcfe", + fontWeight: "normal", + }, + "hljs-attribute": { + color: "#000080", + fontWeight: "normal", + }, + "hljs-variable": { + color: "#008080", + }, + "hljs-template-variable": { + color: "#008080", + }, + "hljs-regexp": { + color: "#b68", + }, + "hljs-link": { + color: "#b68", + }, + "hljs-symbol": { + color: "#990073", + }, + "hljs-bullet": { + color: "#990073", + }, + "hljs-built_in": { + color: "#0086b3", + }, + "hljs-builtin-name": { + color: "#0086b3", + }, + "hljs-meta": { + color: "#999", + fontWeight: "bold", + }, + "hljs-deletion": { + background: "#fdd", + }, + "hljs-addition": { + background: "#dfd", + }, + "hljs-emphasis": { + fontStyle: "italic", + }, + "hljs-strong": { + fontWeight: "bold", + }, +}; +export default function CodeViewer(props: CodeViewerProps) { + const { code, language, colorMode = "light" } = props; + const lightTheme = { background: "#fdfdfe" }; + const darkTheme = { + background: "#202631", + color: "#f0f0f0", + }; + + return ( +
+ + {code} + +
+ ); +} diff --git a/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/PromptModal.tsx b/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/PromptModal.tsx index c7e458040c..16afb3fb80 100644 --- a/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/PromptModal.tsx +++ b/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/PromptModal.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; import { @@ -27,10 +27,10 @@ import { import { useMutation } from "@tanstack/react-query"; import axios from "axios"; -import FunctionEditor from "@/components/Editor/FunctionEditor"; +import CodeViewer from "@/components/Editor/CodeViewer"; +// import FunctionEditor from "@/components/Editor/FunctionEditor"; import InputTag from "@/components/InputTag"; import { SUPPORTED_METHODS } from "@/constants"; -import request from "@/utils/request"; import { useCreateFunctionMutation, useUpdateFunctionMutation } from "../../../service"; import useFunctionStore from "../../../store"; @@ -51,16 +51,26 @@ const PromptModal = (props: { functionItem?: any; children?: React.ReactElement let source = CancelToken.source(); const { colorMode } = useColorMode(); + const [aiGenerateCode, setAiGenerateCode] = useState(""); + const { data: generateCodeRes, ...generateCode } = useMutation((params: any) => { - return request("https://zbkzzm.laf.dev/prompt-functions", { + return axios({ + url: "https://itceb8.laf.run/laf-gpt", method: "POST", data: params, cancelToken: source.token, + responseType: "stream", + onDownloadProgress: function (progressEvent) { + const xhr = progressEvent.event.target; + + const { responseText } = xhr; + setAiGenerateCode(responseText.replace("```ts", "").replace("```", "")); + const ele = document.querySelector("#scroll_footer"); + if (ele) ele.scrollIntoView(); + }, }); }); - let _aiGenerateCode = ((generateCodeRes as any)?.sources || [])[0]?.code; - const defaultValues = { name: functionItem?.name || "", description: functionItem?.desc || "", @@ -95,18 +105,10 @@ const PromptModal = (props: { functionItem?: any; children?: React.ReactElement const updateFunctionMutation = useUpdateFunctionMutation(); const onSubmit = async (data: any) => { - let res: any = {}; - if (isEdit) { - res = await updateFunctionMutation.mutateAsync({ - ...data, - code: _aiGenerateCode, - }); - } else { - res = await createFunctionMutation.mutateAsync({ - ...data, - code: _aiGenerateCode, - }); - } + let res: any = await createFunctionMutation.mutateAsync({ + ...data, + code: aiGenerateCode, + }); if (!res.error) { showSuccess(isEdit ? "update success" : "create success"); @@ -205,8 +207,9 @@ const PromptModal = (props: { functionItem?: any; children?: React.ReactElement isLoading={generateCode.isLoading} onClick={async () => { generateCode.reset(); + setAiGenerateCode(""); await generateCode.mutateAsync({ - purpose: getValues("description"), + value: getValues("description"), }); }} > @@ -234,15 +237,8 @@ const PromptModal = (props: { functionItem?: any; children?: React.ReactElement ) : null} - {_aiGenerateCode && ( - + {aiGenerateCode !== "" && ( + )}