feature: translateBtn

package.json

@@ -16,10 +16,12 @@
     "@fal-ai/serverless-client": "^0.8.6",
     "@mui/icons-material": "^5.15.14",
     "@mui/material": "^5.15.14",
+    "crypto-js": "^4.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@types/crypto-js": "^4.2.2",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^7.0.2",

src/AIModels/SDXLLightning.tsx

@@ -8,6 +8,7 @@ import styleCss from './SDXLLightning.module.less'
 import {PromptDemoComponent} from "../Layout/PromptDemoComponent.tsx";
 import {addPicture} from "../api/image.ts";
 import CloseIcon from "@mui/icons-material/Close";
+import {toTranslate} from "../api/translate.ts";
 
 
 
@@ -33,6 +34,11 @@ export function SDXLLightning() {
       })
     }
   }
+
+  const onTranslate = async () => {
+    const result = await toTranslate()
+    console.log(result)
+  }
   const onChange= (e:React.ChangeEvent<HTMLTextAreaElement>) => {
     setCurrentPrompt(e.target.value)
   }
@@ -60,6 +66,7 @@ export function SDXLLightning() {
       </Button>
       <div className={styleCss.textAreaContainer}>
         <textarea
+          placeholder={'请输入提示词.例如：一个小猫'}
           rows={8}
           className={styleCss.textArea}
           defaultValue={currentPrompt}
@@ -71,6 +78,7 @@ export function SDXLLightning() {
           variant={'contained'}
           onClick={onClick}>创建</Button>
         <Button
+          onClick={onTranslate}
           className={styleCss.translateBtn}>翻译</Button>
       </div>
 

src/api/translate.ts

@@ -0,0 +1,45 @@
+import * as CryptoJS from 'crypto-js';
+
+const appKey = '37e8e17e5abd2b1a';
+const key = 'a7XDXPoIqbFYKNaB5TC4f9DqXwoQMDh6';
+const from = 'zh-CHS';
+const to = 'en';
+
+
+function truncate(q:any){
+  const len = q.length;
+  if(len<=20) return q;
+  return q.substring(0, 10) + len + q.substring(len-10, len);
+}
+
+
+const salt = (new Date).getTime();
+const currentTime = Math.round(new Date().getTime()/1000);
+const query = '您好，欢迎再次使用有道智云文本翻译API接口服务';
+const str1 = appKey + truncate(query) + salt + currentTime + key;
+const sign = CryptoJS.SHA256(str1).toString(CryptoJS.enc.Hex);
+const vocabId =  '您的用户词表ID';
+
+const data = {
+  q: query,
+  appKey: appKey,
+  salt: salt,
+  from: from,
+  to: to,
+  sign: sign,
+  signType: "v3",
+  currentTime: currentTime,
+  vocabId: vocabId,
+}
+
+export async function  toTranslate() {
+  return  fetch('/translate', {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json'
+    },
+    body: JSON.stringify(data),
+  }).then(response => response.json()).then(data => {
+    console.log(data)
+  })
+}

vite.config.ts

@@ -7,4 +7,18 @@ export default defineConfig({
     target: ['es2015', 'edge88', 'firefox78', 'chrome87', 'safari14'],
   },
   plugins: [react()],
+
+  server: {
+    host: '0.0.0.0',
+    open: false,
+    port: 3000,
+    proxy: {
+      '/translate': {
+        target: 'https://openapi.youdao.com/api', // 远程服务
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/translate/, ''),
+      },
+
+    },
+  },
 })