From 52b140fae0e6a24f1f59aa9e17f8941085c52e8f Mon Sep 17 00:00:00 2001
From: ZeYi Lin <944270057@qq.com>
Date: Fri, 6 Sep 2024 14:26:58 +0800
Subject: [PATCH 1/2] docs: update api docs

---
 README.md      |   5 ++-
 README_EN.md   |   4 +-
 docs/api_CN.md | 119 +++++++++++++++++++++++++++++++++++++++++++++++++
 docs/api_EN.md | 119 ++++++++++++++++++++++++++++++++++++++++++++++++-
 4 files changed, 242 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index ab21726..c05da47 100644
--- a/README.md
+++ b/README.md
@@ -134,8 +134,11 @@ python inference.py -t generate_layout_photos -i ./idhoto_ab.jpg -o ./idhoto_lay
 python deploy_api.py
 ```
 
+
 ## 请求 API 服务 - Python Request
 
+> 请求方式请参考 [API 文档](docs/api_CN.md)，含 [cURL](docs/api_CN.md#curl-请求示例)、[Python](docs/api_CN.md#python-请求示例)、[Java](docs/api_CN.md#java-请求示例)、[Javascript](docs/api_CN.md#javascript-请求示例) 请求示例。
+
 ### 1. 证件照制作
 
 输入 1 张照片，获得 1 张标准证件照和 1 张高清证件照的 4 通道透明 png
@@ -194,8 +197,6 @@ response = requests.post(url, files=files, data=data).json()
 print(response)
 ```
 
-更多请求方式请参考 [API 文档](docs/api_CN.md)，含 Python 脚本请求、Python Request 请求、Java 请求。
-
 <br>
 
 # 🐳 Docker 部署
diff --git a/README_EN.md b/README_EN.md
index 31cde08..f963411 100644
--- a/README_EN.md
+++ b/README_EN.md
@@ -132,6 +132,8 @@ python deploy_api.py
 
 ## Request API Service - Python Request
 
+> Please refer to the [API documentation](docs/api_EN.md) for request methods, including cURL, Python, Java, and JavaScript request examples.
+
 ### 1. ID Photo Creation
 
 Input 1 photo, receive 1 standard ID photo and 1 high-definition ID photo in 4-channel transparent PNG format.
@@ -190,8 +192,6 @@ response = requests.post(url, files=files, data=data).json()
 print(response)
 ```
 
-For more request methods, please refer to the [API documentation](docs/api_EN.md), including Python script requests, Python Request requests, and Java requests.
-
 <br>
 
 # 🐳 Docker deployment
diff --git a/docs/api_CN.md b/docs/api_CN.md
index 7047710..eceedd7 100644
--- a/docs/api_CN.md
+++ b/docs/api_CN.md
@@ -4,10 +4,12 @@
 
 - [开始之前：开启后端服务](#开始之前开启后端服务)
 - [接口功能说明](#接口功能说明)
+- [cURL 请求示例](#curl-请求示例)
 - [Python 请求示例](#python-请求示例)
   - [Python Requests 请求方法](#1️⃣-python-requests-请求方法)
   - [Python 脚本请求方法](#2️⃣-python-脚本请求方法)
 - [Java 请求示例](#java-请求示例)
+- [Javascript 请求示例](#javascript-请求示例)
 
 ## 开始之前：开启后端服务
 
@@ -49,6 +51,40 @@ python delopy_api.py
 
 <br>
 
+
+## cURL 请求示例
+
+cURL 是一个命令行工具，用于使用各种网络协议传输数据。以下是使用 cURL 调用这些 API 的示例。
+
+### 1. 生成证件照(底透明)
+
+```bash
+curl -X POST "http://127.0.0.1:8080/idphoto" \
+-F "input_image=@demo/images/test.jpg" \
+-F "height=413" \
+-F "width=295"
+```
+
+### 2. 添加背景色
+
+```bash
+curl -X POST "http://127.0.0.1:8080/add_background" \
+-F "input_image=@test.png" \
+-F "color=638cce" \
+-F "kb=200"
+```
+
+### 3. 生成六寸排版照
+
+```bash
+curl -X POST "http://127.0.0.1:8080/generate_layout_photos" \
+-F "input_image=@test.jpg" \
+-F "height=413" \
+-F "width=295" \
+-F "kb=200"
+```
+
+
 ## Python 请求示例
 
 ### 1️⃣ Python Requests 请求方法
@@ -431,3 +467,86 @@ public class Test {
 }
 
 ```
+
+## JavaScript 请求示例
+
+在JavaScript中，我们可以使用`fetch` API来发送HTTP请求。以下是如何使用JavaScript调用这些API的示例。
+
+### 1. 生成证件照(底透明)
+
+```javascript
+async function generateIdPhoto(inputImagePath, height, width) {
+    const url = "http://127.0.0.1:8080/idphoto";
+    const formData = new FormData();
+    formData.append("input_image", new File([await fetch(inputImagePath).then(res => res.blob())], "test.jpg"));
+    formData.append("height", height);
+    formData.append("width", width);
+
+    const response = await fetch(url, {
+        method: 'POST',
+        body: formData
+    });
+
+    const result = await response.json();
+    console.log(result);
+    return result;
+}
+
+// 示例调用
+generateIdPhoto("images/test.jpg", 413, 295).then(response => {
+    console.log(response);
+});
+```
+
+### 2. 添加背景色
+
+```javascript
+async function addBackground(inputImagePath, color, kb) {
+    const url = "http://127.0.0.1:8080/add_background";
+    const formData = new FormData();
+    formData.append("input_image", new File([await fetch(inputImagePath).then(res => res.blob())], "test.png"));
+    formData.append("color", color);
+    formData.append("kb", kb);
+
+    const response = await fetch(url, {
+        method: 'POST',
+        body: formData
+    });
+
+    const result = await response.json();
+    console.log(result);
+    return result;
+}
+
+// 示例调用
+addBackground("test.png", "638cce", 200).then(response => {
+    console.log(response);
+});
+```
+
+### 3. 生成六寸排版照
+
+```javascript
+async function generateLayoutPhotos(inputImagePath, height, width, kb) {
+    const url = "http://127.0.0.1:8080/generate_layout_photos";
+    const formData = new FormData();
+    formData.append("input_image", new File([await fetch(inputImagePath).then(res => res.blob())], "test.jpg"));
+    formData.append("height", height);
+    formData.append("width", width);
+    formData.append("kb", kb);
+
+    const response = await fetch(url, {
+        method: 'POST',
+        body: formData
+    });
+
+    const result = await response.json();
+    console.log(result);
+    return result;
+}
+
+// 示例调用
+generateLayoutPhotos("test.jpg", 413, 295, 200).then(response => {
+    console.log(response);
+});
+```
\ No newline at end of file
diff --git a/docs/api_EN.md b/docs/api_EN.md
index ec7e852..b4244cf 100644
--- a/docs/api_EN.md
+++ b/docs/api_EN.md
@@ -4,10 +4,12 @@
 
 - [Before You Start: Launch the Backend Service](#before-you-start-launch-the-backend-service)
 - [Interface Function Descriptions](#interface-function-descriptions)
+- [cURL Request Example](#curl-request-examples)
 - [Python Request Example](#python-request-example)
   - [Python Requests Method](#1️⃣-python-requests-method)
   - [Python Script Method](#2️⃣-python-script-request-method)
 - [Java Request Example](#java-request-example)
+- [Javascript Request Example](#javascript-request-examples)
 
 ## Before You Start: Launch the Backend Service
 
@@ -49,6 +51,39 @@ The `Generate 6-inch Layout Photo` interface logic involves sending an RGB image
 
 <br>
 
+
+## cURL Request Examples
+
+cURL is a command-line tool used to transfer data using various network protocols. Below are examples of how to use cURL to call these APIs.
+
+### 1. Generate ID Photo (Transparent Background)
+
+```bash
+curl -X POST "http://127.0.0.1:8080/idphoto" \
+-F "input_image=@demo/images/test.jpg" \
+-F "height=413" \
+-F "width=295"
+```
+
+### 2. Add Background Color
+
+```bash
+curl -X POST "http://127.0.0.1:8080/add_background" \
+-F "input_image=@test.png" \
+-F "color=638cce" \
+-F "kb=200"
+```
+
+### 3. Generate Six-Inch Layout Photo
+
+```bash
+curl -X POST "http://127.0.0.1:8080/generate_layout_photos" \
+-F "input_image=@test.jpg" \
+-F "height=413" \
+-F "width=295" \
+-F "kb=200"
+```
+
 ## Python Request Example
 
 ### 1️⃣ Python Requests Method
@@ -430,5 +465,87 @@ public class Test {
         }
     }
 }
-
 ```
+
+## JavaScript Request Examples
+
+In JavaScript, we can use the `fetch` API to send HTTP requests. Below are examples of how to call these APIs using JavaScript.
+
+### 1. Generate ID Photo (Transparent Background)
+
+```javascript
+async function generateIdPhoto(inputImagePath, height, width) {
+    const url = "http://127.0.0.1:8080/idphoto";
+    const formData = new FormData();
+    formData.append("input_image", new File([await fetch(inputImagePath).then(res => res.blob())], "test.jpg"));
+    formData.append("height", height);
+    formData.append("width", width);
+
+    const response = await fetch(url, {
+        method: 'POST',
+        body: formData
+    });
+
+    const result = await response.json();
+    console.log(result);
+    return result;
+}
+
+// Example call
+generateIdPhoto("images/test.jpg", 413, 295).then(response => {
+    console.log(response);
+});
+```
+
+### 2. Add Background Color
+
+```javascript
+async function addBackground(inputImagePath, color, kb) {
+    const url = "http://127.0.0.1:8080/add_background";
+    const formData = new FormData();
+    formData.append("input_image", new File([await fetch(inputImagePath).then(res => res.blob())], "test.png"));
+    formData.append("color", color);
+    formData.append("kb", kb);
+
+    const response = await fetch(url, {
+        method: 'POST',
+        body: formData
+    });
+
+    const result = await response.json();
+    console.log(result);
+    return result;
+}
+
+// Example call
+addBackground("test.png", "638cce", 200).then(response => {
+    console.log(response);
+});
+```
+
+### 3. Generate Six-Inch Layout Photo
+
+```javascript
+async function generateLayoutPhotos(inputImagePath, height, width, kb) {
+    const url = "http://127.0.0.1:8080/generate_layout_photos";
+    const formData = new FormData();
+    formData.append("input_image", new File([await fetch(inputImagePath).then(res => res.blob())], "test.jpg"));
+    formData.append("height", height);
+    formData.append("width", width);
+    formData.append("kb", kb);
+
+    const response = await fetch(url, {
+        method: 'POST',
+        body: formData
+    });
+
+    const result = await response.json();
+    console.log(result);
+    return result;
+}
+
+// Example call
+generateLayoutPhotos("test.jpg", 413, 295, 200).then(response => {
+    console.log(response);
+});
+```
\ No newline at end of file

From b8c5e8132130ac5292335bfbe7a8fac63f067c10 Mon Sep 17 00:00:00 2001
From: ZeYi Lin <944270057@qq.com>
Date: Fri, 6 Sep 2024 14:27:46 +0800
Subject: [PATCH 2/2] Update README_EN.md

---
 README_EN.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README_EN.md b/README_EN.md
index f963411..5cd51cf 100644
--- a/README_EN.md
+++ b/README_EN.md
@@ -132,7 +132,7 @@ python deploy_api.py
 
 ## Request API Service - Python Request
 
-> Please refer to the [API documentation](docs/api_EN.md) for request methods, including cURL, Python, Java, and JavaScript request examples.
+> Please refer to the [API documentation](docs/api_EN.md) for the request method, including examples of requests using [cURL](docs/api_EN.md#curl-request-example), [Python](docs/api_EN.md#python-request-example), [Java](docs/api_EN.md#java-request-example), and [Javascript](docs/api_EN.md#javascript-request-example).
 
 ### 1. ID Photo Creation