eSearch

https://github.com/xushengfeng/esearch
Admin
eSearch is a cross-platform application for screen capture, OCR, translation, and more, offering...
Tokens:21,780
Snippets:52
Trust Score:8.6
License:GPL-3.0
Update:1 year ago
Show doc for...
Tokens:
Raw
### Build and Run eSearch

Source: https://github.com/xushengfeng/esearch/blob/master/README.md

Instructions for cloning the eSearch repository, installing dependencies, and building or running the application from source.

```shell
git clone https://github.com/xushengfeng/eSearch.git
cd eSearch
npm install
# Compile
npm run dist
# Will produce installation packages and unpacked directories in the build directory

# Run
npm run start
# Debug
npm run dev
```

--------------------------------

### eSearch Installation

Source: https://github.com/xushengfeng/esearch/blob/master/README_en.md

Instructions for downloading and installing eSearch on various platforms, including direct downloads, AUR for ArchLinux, and winget for Windows.

```text
Download from the website [eSearch](https://esearch-app.netlify.app/#download)

or open the [releases](https://github.com/xushengfeng/eSearch/releases) tab on the right, select the package that suits your system, and download and install it.

For users in China, you can use [GitHub Proxy](https://ghfast.top/) to accelerate the download.

For ArchLinux, you can search and install `e-search` or `e-search-git` from the AUR.

Using winget: `winget install esearch`
```

--------------------------------

### Electron Project Setup and Configuration

Source: https://github.com/xushengfeng/esearch/blob/master/docs/develop/overview.md

Configuration for building and packaging an Electron application using electron-builder. It also includes details on project structure and asset management.

```JavaScript
electron-builder.config.js: electron-builder 配置文件，用于打包
```

```JavaScript
assets: 程序图标
```

```JavaScript
src: 项目源码
```

```JavaScript
src/main/main.ts: 主进程 处理 cli，窗口管理
```

```JavaScript
src/renderer/assets: 渲染进程资源，如图标
```

```JavaScript
src/renderer/browser_bg: 主页面浏览器错误提示
```

```JavaScript
src/renderer/clip: 截屏界面
```

```JavaScript
src/renderer/css: 样式文件
```

```JavaScript
src/renderer/ding: 贴图界面，贴图屏幕翻译
```

```JavaScript
src/renderer/editor: 主页面，编辑器，OCR、以图搜图和二维码识别也在此运行
```

```JavaScript
src/renderer/photoEditor: 高级图片编辑器
```

```JavaScript
src/renderer/recorder: 录屏提示栏、录屏编辑
```

```JavaScript
src/renderer/recorderTip: 录屏框选、光标和按键提示
```

```JavaScript
src/renderer/root: 初始化样式，保持各个页面的统一
```

```JavaScript
src/renderer/screenShot: 简单封装的截屏库，用于 cli 截屏、截屏界面截屏和屏幕翻译截屏
```

```JavaScript
src/renderer/setting: 设置界面
```

```JavaScript
src/renderer/translate: 主页面翻译，封装了常用 API
```

```JavaScript
src/renderer/translator: 实时屏幕翻译
```

```JavaScript
src/renderer/videoEditor: 高级录屏编辑器
```

```JavaScript
src/renderer/capture.html: 截屏页面
```

--------------------------------

### Build and Run eSearch

Source: https://github.com/xushengfeng/esearch/blob/master/README_en.md

Instructions for cloning the eSearch repository, installing dependencies, compiling the project, and running it in development or production mode.

```shell
git clone https://github.com/xushengfeng/eSearch.git
cd eSearch
npm install
# Compile
npm run dist
# The install package and unpacked directory will be created in the build directory
```

```shell
# Run
npm run start
# Debug
npm run dev
```

--------------------------------

### Vocabulary Book Template Example

Source: https://github.com/xushengfeng/esearch/blob/master/docs/use/translate.md

Demonstrates how to format output for the vocabulary book using template variables. The example shows a simple string format for displaying the original text, translated text, and the translation engine used.

```Template
${fromT} -> ${toT} (${engine})
```

--------------------------------

### Baidu OCR Setup

Source: https://github.com/xushengfeng/esearch/blob/master/docs/use/ocr.md

Instructions for setting up Baidu OCR by obtaining API Key and Secret Key from Baidu Cloud OCR documentation and entering them into eSearch settings. Mentions potential free service offerings.

```APIDOC
Baidu OCR Setup:
  Obtain API Key and Secret Key from Baidu Cloud OCR documentation (https://cloud.baidu.com/doc/OCR/s/dk3iqnq51).
  Enter obtained keys into eSearch settings.
  Note: Baidu OCR may offer free service trials (as of Jan 2022).
```

--------------------------------

### Scrolling Screenshot Logic Example

Source: https://github.com/xushengfeng/esearch/blob/master/docs/develop/clip.md

Provides a conceptual example of how scrolling screenshots are handled, particularly for pages with fixed elements and scrolling content, using a '目' (eye) shaped structure as an analogy.

```English
Consider a page structure resembling '目'. If the first and third '口' (mouth) are fixed elements and the second '口' is the scrollable content, the goal is a long screenshot preserving the fixed elements. The second '口' is cropped as a template and matched against the previous screenshot. If the displacement is downwards, the second and third '口' are overlaid onto the previous screenshot, retaining the first '口', extending with the second, and covering the third. This logic extends to four-directional scrolling using a nine-grid approach.
```

--------------------------------

### Youdao OCR Setup

Source: https://github.com/xushengfeng/esearch/blob/master/docs/use/ocr.md

Instructions for setting up Youdao OCR by obtaining an Application ID and Secret Key from Youdao AI documentation. Specifies selecting 'Optical Character Recognition Service - General Text Recognition' and 'API' as access method.

```APIDOC
Youdao OCR Setup:
  Refer to Youdao AI documentation (https://ai.youdao.com/doc.s#guide).
  When creating an application, select 'Optical Character Recognition Service - General Text Recognition' for service.
  Select 'API' for access method.
  Obtain Application ID and Secret Key.
  Enter obtained credentials into eSearch settings.
```

--------------------------------

### JavaScript Canvas Clipping with Masking

Source: https://github.com/xushengfeng/esearch/blob/master/test/clip.html

This snippet sets up a canvas element and its 2D rendering context. It defines functions to generate random rectangular areas and to draw masking layers on the canvas to isolate a specific region. The code also includes performance benchmarking for two different masking approaches.

```javascript
const clipCanvas = document.createElement("canvas");
document.body.appendChild(clipCanvas);
const clipCtx = clipCanvas.getContext("2d");
clipCanvas.width = 1980 * 2;
clipCanvas.height = 1080 * 2;
const 遮罩颜色 = '#0005';
let finalRect;

function get() {
  const x = Math.floor(Math.random() * (1980 * 2));
  const y = Math.floor(Math.random() * (1080 * 2));
  const width = Math.floor(Math.random() * (1980 * 2 - x));
  const height = Math.floor(Math.random() * (1080 * 2 - y));
  finalRect = [x, y, width, height];
}

function drawClipRect() {
  const cw = clipCanvas.width;
  const ch = clipCanvas.height;
  clipCtx.clearRect(0, 0, cw, ch);
  const x = finalRect[0];
  const y = finalRect[1];
  const width = finalRect[2];
  const height = finalRect[3];
  clipCtx.fillStyle = 遮罩颜色;
  const topMaskHeight = y;
  const leftMaskWidth = x;
  const rightMaskWidth = cw - (x + width);
  const bottomMaskHeight = ch - (y + height);
  clipCtx.fillRect(0, 0, cw, topMaskHeight);
  clipCtx.fillRect(0, y, leftMaskWidth, height);
  clipCtx.fillRect(x + width, y, rightMaskWidth, height);
  clipCtx.fillRect(0, y + height, cw, bottomMaskHeight);
}

function drawClipRect2() {
  const cw = clipCanvas.width;
  const ch = clipCanvas.height;
  clipCtx.clearRect(0, 0, cw, ch);
  const x = finalRect[0];
  const y = finalRect[1];
  const width = finalRect[2];
  const height = finalRect[3];
  clipCtx.fillStyle = 遮罩颜色;
  clipCtx.fillRect(0, 0, cw, ch);
  clipCtx.clearRect(x, y, width, height);
}

const n = 100000;

performance.mark('start');
for (let i = 0; i < n; i++) {
  get();
  drawClipRect();
}
performance.mark('end');
performance.measure('clip', 'start', 'end');
console.log(performance.getEntriesByName('clip'));

performance.mark('start2');
for (let i = 0; i < n; i++) {
  get();
  drawClipRect2();
}
performance.mark('end2');
performance.measure('clip2', 'start2', 'end2');
console.log(performance.getEntriesByName('clip2'));

```

--------------------------------

### eSearch CLI Usage

Source: https://github.com/xushengfeng/esearch/blob/master/docs/use/main.md

Demonstrates the basic usage of the eSearch command-line interface, including help and version commands.

```Shell
e-search --help
e-search -v
```

--------------------------------

### Custom Translation URLs

Source: https://github.com/xushengfeng/esearch/blob/master/docs/use/translate.md

Provides examples of custom URLs for various translation services that can be used for homepage translation in eSearch. These allow opening external translation pages with pre-filled text.

```URL
Google, https://translate.google.com/?op=translate&text=%s
Deepl, https://www.deepl.com/translator#any/any/%s
金山词霸, http://www.iciba.com/word?w=%s
百度, https://fanyi.baidu.com/#auto/auto/%s
腾讯, https://fanyi.qq.com/?text=%s
```

--------------------------------

### eSearch Launch Shortcut

Source: https://github.com/xushengfeng/esearch/blob/master/README_en.md

Information on how to launch eSearch and its default keyboard shortcut for activation.

```text
Open eSearch from your launcher, and it will appear in the system tray.

The default shortcut key is <kbd>Alt</kbd>+<kbd>C</kbd> (you can also set the shortcut key in the settings).
```

--------------------------------

### OCR Text Formatting Example

Source: https://github.com/xushengfeng/esearch/blob/master/docs/use/ocr.md

Illustrates how OCR might interpret text with automatic line breaks as separate paragraphs, and how the 'automatic line break removal' feature can correct this by analyzing ending symbols and adding spaces for Latin characters.

```text
比如这是一个段落。但
由于显示软件的自动换
行，视觉上显示为多行，
OCR把他们视为5个段
落。
```

--------------------------------

### eSearch CLI Display Text

Source: https://github.com/xushengfeng/esearch/blob/master/docs/use/main.md

Shows how to use the eSearch CLI to open the main page and display specified text, with options to search or translate.

```Shell
e-search --text="Hello World" --trans
```

--------------------------------

### Screenshot Implementation Notes

Source: https://github.com/xushengfeng/esearch/blob/master/docs/develop/clip.md

Discusses the challenges and approaches for taking screenshots in Node.js, particularly on Wayland platforms and for ARM64 architectures. It highlights the use of external screenshot software and image reading for capturing screen content.

```English
On Wayland platforms, screenshotting via node-screenshot involves invoking desktop screenshot software and then reading the image, which can be slow. For Linux Arm64, where the library is not supported, a similar approach is mimicked by reading commands from settings and calling external screenshot software, followed by image reading.
```

--------------------------------

### AI Backend Options for OCR

Source: https://github.com/xushengfeng/esearch/blob/master/docs/use/ocr.md

Details the AI backend options for running OCR models, including CPU, CUDA, CoreML (macOS), and DirectML (Windows). It advises users to switch to the CPU backend if errors occur with other options.

```text
CPU
CUDA
CoreML (mac)
DirectML (Windows)
```

--------------------------------

### eSearch CLI Save Functionality

Source: https://github.com/xushengfeng/esearch/blob/master/docs/use/main.md

Illustrates how to use the eSearch CLI to save captured content, with options for specifying a path or saving to the clipboard, and including delay options.

```Shell
e-search --save --path /path/to/save
e-search -s --clipboard
e-search --save --path /path/to/save --delay 500
```

--------------------------------

### eSearch CLI Batch Save

Source: https://github.com/xushengfeng/esearch/blob/master/docs/use/main.md

Shows how to perform batch saves using the eSearch CLI, specifying the number of captures and the interval between them.

```Shell
# Batch capture 3 times with a 500ms interval, saving to /path/to/save/default_filename folder, using sequential numbering for filenames
e-search --save --path /path/to/save -n 3 --dt 500
```

--------------------------------

### WebCodecs VideoDecoder and VideoEncoder Usage

Source: https://github.com/xushengfeng/esearch/blob/master/docs/develop/superRecorder.md

Demonstrates the basic usage of VideoDecoder and VideoEncoder from the WebCodecs API. It shows how to configure the decoder and encoder, process frames using `decode` and `encode` methods, and handle asynchronous operations with `flush`. Proper management of `VideoFrame` objects by calling `close` is emphasized.

```TypeScript
const decoder = new VideoDecoder({
  output: (frame: VideoFrame) => {
    // Decode, process, and encode the frame
    const nFrame = transformX(frame);
    encoder.encode(nFrame);
    nFrame.close();
  },
  error: (e) => console.error("Decode error:", e),
});

// Example of decoding a chunk
decoder.decode(chunk);

// Flushing the decoder to ensure all pending frames are processed
await decoder.flush();

// Flushing the encoder to ensure all encoded data is written
await encoder.flush();
```

```TypeScript
await decoder.flush();
for (let i = keyFrameIndex; i <= thisIndex; i++) {
  decoder.decode(chunks[i]);
}
await decoder.flush();
```

```TypeScript
for (const chunk of src) {
  decoder.decode(chunk);
}
await decoder.flush();
await encoder.flush();
```

```TypeScript
for (const chunk of src) {
  if (chunk.type === "key") {
    await decoder.flush();
    await encoder.flush();
  }
  decoder.decode(chunk);
}
await decoder.flush();
await encoder.flush();
```

--------------------------------

### Custom Settings Store Library

Source: https://github.com/xushengfeng/esearch/blob/master/docs/develop/overview.md

A custom settings storage library written in TypeScript, inspired by electron-store but without the dependency on ajv. It leverages TypeScript for type definitions.

```TypeScript
lib/store: 自己写的设置存储库，参考了`electron-store`，但直接使用 ts 进行类型定义，不依赖`ajv`
```

--------------------------------

### eSearch CLI Paste Functionality

Source: https://github.com/xushengfeng/esearch/blob/master/docs/use/main.md

Demonstrates the command to paste an image at the cursor's current position using the eSearch CLI.

```Shell
e-search --ding
```

--------------------------------

### eSearch CLI Image Search

Source: https://github.com/xushengfeng/esearch/blob/master/docs/use/main.md

Explains how to use the eSearch CLI for image-based searches, with similar parameter options as OCR functionality.

```Shell
e-search --img --engine default --trans
```

--------------------------------

### Coordinate System: Mathematical vs. Pixel

Source: https://github.com/xushengfeng/esearch/blob/master/docs/develop/clip.md

Explains the two coordinate systems used: mathematical coordinates (integer points at pixel vertices) and pixel coordinates (representing a single pixel). It details how these are used for different interactions like selection, element positioning, and color picking, and the conversion logic between them.

```English
Canvas coordinates are consistent with mathematics, with the top-left pixel being (0, 0) for a 1x1 rectangle. Integer coordinates describe intersections of integer grids. Mathematical coordinates are crucial for box selection and element positioning. Pixel coordinates are needed for color pickers, representing a single pixel or a 1x1 rectangle, often approximated as n.5 values. eSearch prioritizes pixel coordinates for user interaction, especially when zoomed, as pixels are more apparent than vertices. Code processing uses mathematical coordinates, requiring conversion for drawing selection boxes.
```

--------------------------------

### UI Framework - dkh-ui

Source: https://github.com/xushengfeng/esearch/blob/master/docs/develop/overview.md

The project uses a custom-built UI library called dkh-ui, which is described as a rudimentary imitation of jQuery. The developer notes a preference for direct DOM manipulation over modern frameworks like Vue or React.

```JavaScript
框架：

使用自己开发的[dkh-ui](https://github.com/xushengfeng/dkh-ui)，只是对 JQuery 的拙劣模仿。我学不会`vue`和`react`，搞不懂 hook，ref 这些概念，所以你可以在代码里看到直接使用`document`和`HTML`的操作，当然也在逐步转为 dkh。
```

--------------------------------

### eSearch CLI OCR Functionality

Source: https://github.com/xushengfeng/esearch/blob/master/docs/use/main.md

Details the usage of the eSearch CLI for Optical Character Recognition (OCR), including specifying the OCR engine and the action to perform (search or translate) upon opening the main page.

```Shell
e-search --ocr --engine default --trans
```

--------------------------------

### Anki Network Vocabulary Book Configuration

Source: https://github.com/xushengfeng/esearch/blob/master/docs/use/translate.md

Provides the configuration details for integrating the vocabulary book with Anki using AnkiConnect. This includes the URL for the AnkiConnect server and the JSON request body structure for adding new notes.

```JSON
{
  "action": "addNote",
  "version": 6,
  "params": {
    "note": {
      "deckName": "你的牌组",
      "modelName": "类型名称",
      "fields": {
        "Front": "${fromT}",
        "Back": "${toT}"
      },
      "options": {
        "allowDuplicate": false
      }
    }
  }
}
```

--------------------------------

### Developer Output Indicators

Source: https://github.com/xushengfeng/esearch/blob/master/lib/translate/readme.md

This explains the console output indicators for developers. Red text/background signifies undefined languages in source.json, while blue text/background indicates untranslated content.

```markdown
一般地，若 source.json 没有定义语言，在 console 控制台以红色 🟥 字体和背景输出，若未翻译，以蓝色 🟦 字体和背景

In general, if source.json does not have a defined language, it will be output in red 🟥 font and background on the console, and in blue 🟦 font and background if not translated.
```

--------------------------------

### eSearch Screen Recording Features

Source: https://github.com/xushengfeng/esearch/blob/master/README_en.md

Capabilities for screen recording, including custom size, camera integration, cursor/keystroke indication, and virtual backgrounds.

```text
Record screen, custom size, camera

Can indicate cursor position and keyboard keystrokes

Can set a virtual background
```

--------------------------------

### PaddleOCR Model File Structure

Source: https://github.com/xushengfeng/esearch/blob/master/docs/use/ocr.md

Explains the file structure for downloaded PaddleOCR models, including detection models ('det'), recognition models ('rec'), and dictionary files ('.txt'). Users can add custom models by specifying these files.

```APIDOC
PaddleOCR Model Loading:
  Downloaded models consist of detection ('det') models, recognition ('rec') models, and dictionary files ('.txt').
  When adding a custom OCR model in eSearch settings:
    - Specify the detection model file (if available, leave blank to use default).
    - Specify the recognition model file.
    - Specify the dictionary file.
```

--------------------------------

### External Screenshot Tool Configuration

Source: https://github.com/xushengfeng/esearch/blob/master/docs/use/clip.md

Configure eSearch to use an external screenshot tool, such as Flameshot, by specifying the command to capture the screen and save it to a designated path. eSearch will automatically detect and open the captured image.

```shell
flameshot full -p /dev/shm/esearch-img.png
```

--------------------------------

### Mouse Event Coordinate Handling

Source: https://github.com/xushengfeng/esearch/blob/master/docs/develop/clip.md

Addresses the inaccuracies in mouse events and how coordinates are handled, especially concerning scaling. It explains how mouse event coordinates are rounded to mathematical coordinates and how to calculate high-precision mathematical coordinates when the canvas is scaled.

```English
Mouse event coordinates are integers, likely rounded mathematical coordinates (e.g., (1.5, 2.5) mapped to 2). Direct use is suitable for integer mathematical coordinates when canvas scale is 1. When scale is not 1, especially >1, accurate pixel position calculation is needed. This involves getting mouse coordinates on the screen (offsetX approximates this on a scaled canvas) and converting them via the scale factor to obtain high-precision mathematical coordinates, which can then be floored or ceiled to get pixel coordinates.
```

--------------------------------

### PaddleOCR Language Support

Source: https://github.com/xushengfeng/esearch/blob/master/docs/use/ocr.md

Lists the pre-trained OCR models available through PaddleOCR, which eSearch utilizes for offline OCR. Users can download these models to add support for various languages.

```text
- 中英混合
- 中文繁体
- 英文
- 韩文
- 日文
- 泰卢固文
- 卡纳达文
- 泰米尔文
- 拉丁文
- 阿拉伯字母
- 斯拉夫字母
- 梵文字母
```

--------------------------------

### TypeScript Type Definitions for Cross-Process Communication

Source: https://github.com/xushengfeng/esearch/blob/master/docs/develop/overview.md

Defines types for configuration and inter-process communication (IPC) between the main and renderer processes in a multi-page Electron application.

```TypeScript
ShareTypes.d.ts: 配置类型定义，主进程和渲染进程 ipc 时类型定义，在这种多页面的项目中很方便
```

--------------------------------

### eSearch Screen Overlay Features

Source: https://github.com/xushengfeng/esearch/blob/master/README_en.md

Functionality for screen overlays, including zoom, opacity control, auto-repositioning, mouse transparency, and CSS-based filters.

```text
Scroll zooming, opacity, auto repositioning, mouse transparency

Supports magnifying images without changing window size to prevent obscuring other content

Can set filters and transformations (such as mirroring) through CSS
```

--------------------------------

### PaddleOCR Text Detection and Recognition

Source: https://github.com/xushengfeng/esearch/blob/master/docs/develop/ocr.md

Explains the two main stages of PaddleOCR: text detection to find text coordinates and text recognition to identify characters. Text detection outputs a binary image, and text recognition uses cropped images and probability arrays to determine characters.

```APIDOC
PaddleOCR Analysis:
  - Text Detection (det):
    - Input: Image
    - Output: Binary image indicating text presence per pixel.
    - Process: Uses OpenCV to find contours and determine bounding boxes.
  - Text Recognition (rec):
    - Input: Cropped image of detected text.
    - Output: Array of characters with associated probabilities.
    - Process: Maps probability indices to characters based on a dictionary, identifying the most likely character for each position.
```

--------------------------------

### Local LLM Translation Configuration (Ollama)

Source: https://github.com/xushengfeng/esearch/blob/master/docs/use/translate.md

Shows how to configure eSearch to use a local LLM for translation via the OpenAI API compatibility. It specifies the URL for the local LLM server and the configuration object including the model name.

```JSON
{
  "model": "你的模型"
}
```
Tokens:
Raw