I Have a WordPress website. I want to create an Paraphrasing tool on this website with fully frontend and Backend. Currently I Have a frontend on my website written in HTML, CSS and JavaScript with these features. 
 Here are the features:

1: There is Two boxes on the Page in the first page user enter its paragraph or line which he want to paraphrase and in the second box the paraphrased graph or line is show up.
2: There is A button with name of "Paraphrase" which user click to paraphrase the content which he has summited in the first box. 
3: The both Boxes are Along side with each other and the button is under the First Box.
4: The UI and UX are advance use in it and the interface is good. 

Now you need to develop the backend for this tool which use NLP Algorithms, Machine Learning and paraphrasing algorithm. In the Backend I want these features: 

1: the User enter the paragraph or line in the first box of front end and then front end give this paragraph or line to the backend and backend performs paraphrasing on it. After doing all this the Backend give paraphrased content or line to the frontend to display on the second box which show to the user. 
2: The user can easily copy the paraphrased content from the second box
I am Giving you the code which I used to develop the frontend. I will provide you Codes in this sequence. I firstly provide you HTML, Then CSS and at last JavaScript. 

here Is the HTML Code:

 Paraphrasing Tool
 
 
 Paraphrasing Tool
=================
 
 
 Original Text
 
 
 
 Paraphrased Text
 
 

 Paraphrase
 
 

Here is the CSS use:

\* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

body {
 font-family: sans-serif;
}

.container {
 max-width: 800px;
 margin: 0 auto;
 padding: 50px;
}

.row {
 display: flex;
 flex-wrap: wrap;
 margin: 20px 0;
}

.col {
 flex: 1;
 margin-right: 20px;
}

textarea {
 width: 100%;
 height: 200px;
 padding: 10px;
 margin-bottom: 20px;
 border: 1px solid #ccc;
 border-radius: 5px;
 resize: vertical;
}

button {
 background-color: #007bff;
 color: #fff;
 border: none;
 border-radius: 5px;
 padding: 10px 20px;
 cursor: pointer;
 transition: background-color 0.3s ease;
}

button:hover {
 background-color: #0069d9;
}
Here is the JavaScript:

const paraphraseBtn = document.getElementById("paraphrase-btn");
const originalText = document.getElementById("original-text");
const paraphrasedText = document.getElementById("paraphrased-text");

paraphraseBtn.addEventListener("click", () => {
 const apiUrl = "/paraphrase.php";
 const data = new FormData();
 data.append('text', originalText.value);
 
 fetch(apiUrl, {
 method: 'POST',
 body: data
 })
 .then(response => response.json())
 .then(data => {
 paraphrasedText.value = data.paraphrasedText;
 })
 .catch(error => {
 console.error(error);
 });
});

// Load the T5 model
const model = await tf.loadGraphModel('path/to/t5/model.json');

// Load the tokenizer
const tokenizer = new Tokenizer();

// Paraphrase the input text
const inputText = 'This is the input text to be paraphrased.';
const tokenizedText = tokenizer.encode(inputText);
const inputIds = tf.tensor2d(tokenizedText, [1, tokenizedText.length], 'int32');
const outputs = await model.executeAsync({
 input\_ids: inputIds,
 max\_length: 50,
 num\_beams: 10,
 early\_stopping: true,
 return\_tensors: true
});
const paraphrasedText = tokenizer.decode(outputs[0].dataSync());
console.log(paraphrasedText);
워드프레스 웹사이트가 있습니다. 이 웹사이트에 완전한 프론트엔드와 백엔드를 갖춘 패러프레이징 도구를 만들고 싶습니다. 현재 제 웹사이트에는 다음과 같은 기능이 있는 HTML, CSS 및 JavaScript로 작성된 프론트엔드가 있습니다. 
 기능은 다음과 같습니다:

1 : 첫 번째 페이지의 페이지에 사용자가 의역하려는 단락이나 줄을 입력하면 두 번째 상자에 의역 된 그래프 또는 줄이 표시됩니다.
2 : 사용자가 첫 번째 상자에 요약 한 내용을 의역하기 위해 클릭하는 "의역"이라는 이름의 버튼이 있습니다. 
3: 두 상자가 서로 나란히 있고 버튼은 첫 번째 상자 아래에 있습니다.
4 : UI와 UX는 사전 사용이며 인터페이스가 좋습니다. 

이제 NLP 알고리즘, 기계 학습 및 의역 알고리즘을 사용하는이 도구의 백엔드를 개발해야합니다. 백엔드에는 다음과 같은 기능이 필요합니다: 

1 : 사용자가 프론트 엔드의 첫 번째 상자에 단락이나 줄을 입력 한 다음 프론트 엔드는이 단락이나 줄을 백엔드에 제공하고 백엔드는이를 의역합니다. 이 모든 작업을 수행 한 후 백엔드는 의역 된 콘텐츠 또는 줄을 프런트 엔드에 제공하여 사용자에게 표시되는 두 번째 상자에 표시합니다. 
2: 사용자는 두 번째 상자에서 의역된 콘텐츠를 쉽게 복사할 수 있습니다.
프론트엔드를 개발하는 데 사용한 코드를 제공합니다. 이 순서대로 코드를 제공하겠습니다. 먼저 HTML을 제공 한 다음 CSS와 마지막으로 JavaScript를 제공합니다. 

여기 HTML 코드가 있습니다:

 패러프레이징 도구
 
 
 패러프레이징 도구
=================
 
 
 원본 텍스트
 
 
 
 의역된 텍스트
 
 

 패러프레이즈
 
 

다음은 CSS 사용 예시입니다:

\* {
 상자 크기: 테두리 상자;
 margin: 0;
 padding: 0;
}

body {
 글꼴 가족: 산세리프;
}

.container {
 최대 너비: 800px;
 여백: 0 자동;
 padding: 50px;
}

.row {
 디스플레이: 플렉스;
 플렉스-랩: 랩
 여백: 20px 0;
}

.col {
 flex: 1;
 여백-우측: 20px;
}

textarea {
 너비: 100%;
 높이: 200px;
 패딩: 10px;
 여백-하단: 20px;
 테두리: 1px 솔리드 #ccc;
 테두리-반경: 5px;
 크기: 세로;
}

버튼 {
 배경색 #007bff;
 color: #fff;
 테두리: 없음
 테두리-반경: 5px;
 패딩: 10px 20px;
 커서: 포인터
 전환: 배경색 0.3초 쉬움;
}

button:hover {
 background-color: #0069d9;
}
다음은 자바스크립트입니다:

const paraphraseBtn = document.getElementById("paraphrase-btn");
const originalText = document.getElementById("original-text");
const paraphrasedText = document.getElementById("paraphrased-text");

paraphraseBtn.addEventListener("click", () => {})
 const apiUrl = "/paraphrase.php";
 const data = new FormData();
 data.append('text', originalText.value);
 
 fetch(apiUrl, {
 method: 'POST',
 body: data
 })
 .then(response => response.json())
 .then(data => {
 paraphrasedText.value = data.paraphrasedText;
 })
 .catch(error => {
 console.error(error);
 });
});

// T5 모델 로드
const model = await tf.loadGraphModel('path/to/t5/model.json');

// 토큰라이저 로드
const tokenizer = new Tokenizer();

// 입력 텍스트를 의역
const inputText = '이것은 의역할 입력 텍스트입니다.';
const tokenizedText = tokenizer.encode(inputText);
const inputIds = tf.tensor2d(tokenizedText, [1, tokenizedText.length], 'int32');
const outputs = await model.executeAsync({
 input\_ids: inputIds,
 max\_length: 50,
 num\_beams: 10,
 early\_stopping: true,
 return\_tensors: true
});
const paraphrasedText = tokenizer.decode(outputs[0].dataSync());
console.log(paraphrasedText);