feat: support multiple tencent ocr regions

Author: geekdada

src/pages/Background/common/ocr-client.ts renamed to src/common/ocr-client.ts

@@ -2,6 +2,17 @@ import defaultsDeep from 'lodash-es/defaultsDeep'
 import { SHA256, HmacSHA256, enc } from 'crypto-js'
 import axios from 'axios'
 
+export const OcrRegions = {
+  'ap-shanghai': '华东地区(上海)',
+  'ap-beijing': '华北地区(北京)',
+  'ap-guangzhou': '华南地区(广州)',
+  'ap-hongkong': '港澳台地区(中国香港)',
+  'ap-seoul': '亚太东北(首尔)',
+  'ap-singapore': '亚太东南(新加坡)',
+  'na-toronto': '北美地区(多伦多)',
+}
+export type OcrRegionKeys = keyof typeof OcrRegions
+
 export class TcRequestError extends Error {
   code?: string
 
@@ -16,7 +27,7 @@ export class OcrClient {
   private config: {
     secretId: string
     secretKey: string
-    region: string
+    region: OcrRegionKeys
   }
   private requestConfig = {
     host: 'ocr.tencentcloudapi.com',
@@ -31,7 +42,11 @@ export class OcrClient {
     signedHeaders: 'content-type;host',
   }
 
-  constructor(config: { secretId: string; secretKey: string; host?: string }) {
+  constructor(config: {
+    secretId: string
+    secretKey: string
+    region?: OcrRegionKeys
+  }) {
     this.config = defaultsDeep({}, config, {
       region: 'ap-shanghai',
     })

src/common/types.ts

@@ -1,11 +1,13 @@
 import { supportedLanguages, supportedRegions } from './constant'
+import { OcrRegionKeys } from './ocr-client'
 
 export interface Config {
   token: string
   targetLang: SupportLanguageKeys
   region: APIRegions
   ocrSecretId?: string
   ocrSecretKey?: string
+  ocrRegion?: OcrRegionKeys
   hoverButton?: boolean
 }
 

src/pages/Background/common/server.ts

@@ -4,7 +4,7 @@ import { createServer } from 'connect.io'
 import Client from '../../../common/api'
 import logger from '../../../common/logger'
 import { Config } from '../../../common/types'
-import { OcrClient } from './ocr-client'
+import { OcrClient } from '../../../common/ocr-client'
 import { Handler } from './types'
 import { cropImage } from './utils'
 
@@ -107,6 +107,7 @@ const onOCR: Handler<{
     const client = new OcrClient({
       secretId: config.ocrSecretId,
       secretKey: config.ocrSecretKey,
+      region: config.ocrRegion,
     })
     const data = await client.request({ dataUrl: payload.dataUrl })
 

src/pages/Options/Options.tsx

@@ -11,6 +11,7 @@ import { useSnackbar } from 'notistack'
 
 import Client from '../../common/api'
 import { supportedLanguages, supportedRegions } from '../../common/constant'
+import { OcrRegionKeys, OcrRegions } from '../../common/ocr-client'
 import {
   APIRegions,
   Config,
@@ -29,6 +30,7 @@ const Options: React.FC = () => {
   const [region, setRegion] = useState<APIRegions>('default')
   const [ocrSecretId, setOCRSecretId] = useState('')
   const [ocrSecretKey, setOCRSecretKey] = useState('')
+  const [ocrRegion, setOCRRegion] = useState<OcrRegionKeys>('ap-shanghai')
   const [hoverButton, setHoverButton] = useState(true)
   const { enqueueSnackbar } = useSnackbar()
 
@@ -41,6 +43,7 @@ const Options: React.FC = () => {
         region,
         ocrSecretId,
         ocrSecretKey,
+        ocrRegion,
         hoverButton,
       })
 
@@ -76,6 +79,7 @@ const Options: React.FC = () => {
       if (config.ocrSecretId !== undefined) setOCRSecretId(config.ocrSecretId)
       if (config.ocrSecretKey !== undefined)
         setOCRSecretKey(config.ocrSecretKey)
+      if (config.ocrRegion !== undefined) setOCRRegion(config.ocrRegion)
       if (config.hoverButton !== undefined) setHoverButton(config.hoverButton)
     })
   }, [])
@@ -113,7 +117,7 @@ const Options: React.FC = () => {
           onSubmit={onSubmit}
           tw="flex flex-col justify-between flex-1 overflow-hidden">
           <div tw="space-y-6 p-5 overflow-auto">
-            <OptionSection title={'目标语言'}>
+            <OptionSection title={'默认目标语言'}>
               <select
                 tw="px-4 pl-3 pr-8 rounded-md"
                 css={css`
@@ -181,6 +185,25 @@ const Options: React.FC = () => {
                   />
                 </div>
 
+                <div>
+                  <select
+                    tw="px-4 pl-3 pr-8 rounded-md"
+                    css={css`
+                      background-position: right 0.3rem center;
+                    `}
+                    name="ocr-region"
+                    value={ocrRegion}
+                    onChange={(e) =>
+                      setOCRRegion(e.target.value as OcrRegionKeys)
+                    }>
+                    {Object.keys(OcrRegions).map((region, index) => (
+                      <option value={region} key={index}>
+                        {OcrRegions[region as OcrRegionKeys]}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
                 <div tw="text-sm text-gray-600">
                   可不填，填入后可使用 OCR 识别文字翻译。
                 </div>