chore: replace all cn comments of fe to en version by volc api (#320)

frontend/packages/agent-ide/chat-background-shared/__tests__/util.test.ts

@@ -75,9 +75,9 @@ describe('should compute position correctly', () => {
       width: 20,
     })),
   };
-  // 使用 vi.spyOn 模拟 createRef 的行为
+  // Using vi.spyOn to simulate the behavior of createRef
   const createRefSpy = vi.spyOn(React, 'createRef').mockReturnValue(cropperRef);
-  // 手动设置 cropperRef.current 的值
+  // Manually set the value of cropperRef.current
   cropperRef.current = {
     cropper: cropperMock,
   };
@@ -97,7 +97,7 @@ describe('should compute position correctly', () => {
   const result = computePosition(mode, cropperRef);
   expect(result.left).toBe(0.03);
   expect(result.right).toBe(0.92);
-  // 恢复 createRef 的原始行为
+  // Restore the original behavior of createRef
   createRefSpy.mockRestore();
 });
 

frontend/packages/agent-ide/chat-background-shared/src/hooks/use-background-content.ts

@@ -63,7 +63,7 @@ export const useBackgroundContent = (props?: UseBackgroundContentProps) => {
   );
 
   const botId = useBotInfoStore(s => s.botId);
-  //最新的 静图与动图 未读 - 生成中/成功/失败，展示原点状态
+  //The latest static and dynamic graphs, unread-generating/success/failure, show the origin state
   const showDot = getShowDot(imageDotStatus, gifDotStatus);
 
   const hasDotType =
@@ -89,12 +89,12 @@ export const useBackgroundContent = (props?: UseBackgroundContentProps) => {
   const markRead = async () => {
     if (showDot) {
       setGenerateBackgroundModalByImmer(state => {
-        // 设置当前tab
+        // Set the current tab
         state.activeKey =
           imageDotStatus !== DotStatus.None
             ? GenerateType.Static
             : GenerateType.Gif;
-        // 设置已读状态：失败/成功需要设置已读，进行中/无状态 不需要
+        // Set read status: Failure/success requires setting read, in progress/stateless, not required
         if (
           imageReadExpression(imageDotStatus) &&
           hasDotType === PicType.BackgroundStatic
@@ -119,14 +119,14 @@ export const useBackgroundContent = (props?: UseBackgroundContentProps) => {
   };
 
   const handleEdit = () => {
-    // 打开编辑弹窗
+    // Open the editing pop-up window
     openConfig?.();
   };
 
   const handleRemove = async () => {
-    // 存在进行中的任务时
+    // When there is an ongoing task
     if (generatingType) {
-      // 取消继续生成
+      // Cancel to continue generating
       const generatingTaskId = messageList.find(
         item => item.type === generatingType,
       )?.id;
@@ -145,9 +145,9 @@ export const useBackgroundContent = (props?: UseBackgroundContentProps) => {
         state.generatingTaskId = '';
       });
     }
-    // 有状态的标记已读
+    // A stateful tag has been read
     await markRead();
-    // 清空当前渲染的背景图
+    // Clear the background cover of the current render
     setBackgroundImageInfoList?.([]);
   };
 

frontend/packages/agent-ide/chat-background-shared/src/hooks/use-crop-image.ts

@@ -56,7 +56,7 @@ export const useCropperImg = ({
     handleGradientPosition();
   }, [url]);
 
-  // 设置最大缩放比例
+  // Set the maximum zoom ratio
   const onZoom = () => {
     const {
       width = 0,
@@ -78,7 +78,7 @@ export const useCropperImg = ({
         });
       }
     }
-    // TODO:因没有缩放end事件，缩放实时获取主题色大图卡顿严重，故此场景临时先不获取主题色，修改交互or尝试webworker解决此问题
+    // TODO: Because there is no zoom end event, the zoom gets the theme color in real time. The large picture card is serious, so the scene does not get the theme color temporarily, modify the interaction or try webworker to solve this problem.
     // await handleThemeColor();
   };
 
@@ -95,12 +95,12 @@ export const useCropperImg = ({
     }
     const canvasData = cropperObj?.getCanvasData();
     const imgData = cropperObj?.getImageData();
-    // 图片下边缘 距离 裁剪区下边缘的偏移距离
+    // Image lower edge, distance, offset distance of lower edge of crop area
     const scaleTop = imgData.height + canvasData.top - size.height;
-    // 图片左边缘 距离 裁剪区左 边缘的偏移距离
+    // Image left edge, distance, offset distance from the left edge of the crop area
     const scaleLeft = ceil(imgData.left + canvasData?.left, 2);
 
-    // 图片上下拖拽不能有超出图片容器外
+    // Drag the picture up and down, it cannot exceed the picture container.
     if (y < 0) {
       cropperRef.current?.cropper.setCanvasData({
         top: 0,
@@ -112,7 +112,7 @@ export const useCropperImg = ({
       });
     }
 
-    // 产品需求： 左右拖动不能超过 固定“对话气泡容器” left or right 80%
+    // Product requirements: Drag left and right cannot exceed, fix "dialogue bubble container" left or right 80%
     const maxRightOffset = floor(
       (size.width - centerWidth) / 2 + centerWidth * 0.4,
       2,
@@ -137,9 +137,9 @@ export const useCropperImg = ({
 
   const handleThemeColor = async () => {
     const cropperObj = cropperRef.current?.cropper;
-    // 大图move卡顿优化方案：move停止时获取到主题色前 禁止移动
+    // Large picture move card optimization scheme: move is prohibited before the theme color is obtained when the move stops
     cropperObj?.disable();
-    // 为了加载快一些，设置图片质量中等
+    // To load faster, set the picture quality to medium
     const corp = cropperObj?.getCroppedCanvas()?.toDataURL('image/webp', 0.7);
     if (corp) {
       const color = await getImageThemeColor(corp);

frontend/packages/agent-ide/chat-background-shared/src/hooks/use-submit-cropped-image.ts

@@ -121,7 +121,7 @@ export const useSubmitCroppedImage = ({
     const notPass = Boolean(res?.check_not_pass);
     onAuditCheck(notPass);
     if (notPass) {
-      // 机审未通过，就不执行下面回调
+      // If the machine review fails, the following callback will not be executed
       return;
     }
 
@@ -148,7 +148,7 @@ export const useSubmitCroppedImage = ({
         fileList.current = [currentOriginImage.fileInstance];
         uploadFileList(fileList.current);
       } else {
-        // 回填文件时 不需要存原图
+        // When backfilling the document, there is no need to save the original image.
         handleUploadAllSuccess();
       }
     } catch (error) {

frontend/packages/agent-ide/chat-background-shared/src/utils/index.ts

@@ -31,7 +31,7 @@ import {
 } from '@coze-arch/bot-api/developer_api';
 
 const MIN_HEIGHT = 640;
-// 图片上传限制宽高的函数，如果符合条件返回true，否者返回false
+// The function that limits the width and height of the image upload, returns true if the conditions are met, false if not
 export const checkImageWidthAndHeight = (file: Blob): Promise<boolean> =>
   new Promise((resolve, reject) => {
     const fileReader = new FileReader();
@@ -97,7 +97,7 @@ export const getInitBackground = ({
   return {};
 };
 
-// 计算阴影位置
+// Calculate shadow position
 export const computePosition = (
   mode: 'pc' | 'mobile',
   cropperRef: RefObject<ReactCropperElement>,
@@ -114,15 +114,15 @@ export const computePosition = (
   const canvasData = cropperObj?.getCanvasData();
   const imgData = cropperObj?.getImageData();
 
-  // 图片左边缘 距离 裁剪区左 边缘的偏移距离
+  // Image left edge, distance, offset distance from the left edge of the crop area
   const imgToScreenLeft = imgData.left + canvasData?.left;
-  // 图片距离右侧屏幕的距离， > 0 时，右侧未充满图片
+  // The distance of the picture from the right screen, > 0, the right side is not full of pictures
   const imgToScreenRight = cropperWidth - imgData.width - imgToScreenLeft;
 
-  // 左侧渲染的渐变需要的left值: 左侧有空隙时渲染left，否则无需
+  // Left value required for gradual change of left rendering: render left when there is a gap on the left, otherwise no need
   const leftPercent = floor(imgToScreenLeft / cropperWidth, 2);
 
-  // 右侧渲染的渐变需要的right值
+  // The right value required for gradual change of right rendering
   const rightPercent = floor(imgToScreenRight / cropperWidth, 2);
 
   return {
@@ -141,13 +141,13 @@ export const canvasPosition = (
     'height',
   ]);
 
-// 计算主题色
+// Calculate theme color
 export const computeThemeColor = (
   cropperRefList: RefObject<ReactCropperElement>[],
 ): Promise<string[]> =>
   new Promise((resolve, reject) => {
     const promises: Promise<string>[] = [];
-    // 处理每个canvas元素
+    // Process each canvas element
     cropperRefList.forEach(cropperEle => {
       promises.push(
         new Promise<string>((resolveColor, rejectColor) => {