Создайте SaaS-инструмент для перефразирования текста с помощью React

Weekly SaaS, Идея 1: Давайте научимся создавать программное обеспечение вашей мечты SaaS.

Привет всем! Сегодня мы будем создавать инструмент перефразирования с использованием react js, который позволит вам легко переписывать, перефразировать, изменять и преобразовывать синтаксис и структуру входного текста. Этот инструмент поддерживает более 50 языков, включая английский, французский, немецкий, испанский, итальянский, арабский и китайский с автоматическим определением языка.

Это означает, что если вы хотите перефразировать китайское предложение, вам нужно будет только скопировать и вставить его в перефразировщик, и этот инструмент сделает эту работу за вас.

Примечание. Я буду писать руководства по созданию различных типов приложений, машинному обучению и многому другому. И если вы хотите, чтобы ваша идея была единой, поделитесь со мной своей идеей здесь, [email protected]

Предварительный просмотр рабочего приложения

Что вы узнаете

Создать реактивный проект
Обработка API
Реагировать на крючки

Оглавление

Создание и установка необходимых пакетов
Чистка приложения
Создание компонентов и дизайн приложения
Создание и подключение к API
"Заключение"

Начнем… :)

Создание и установка необходимых пакетов

Откройте терминал на рабочем столе или в любом другом месте, где вы хотите создать это приложение. И создайте новую папку в каталоге с именем paraphrasing_tool и измените каталог на папку.

mkdir paraphrasing_tool 
cd paraphrasing_tool

Теперь создайте новое приложение для реагирования, используя команду создания нового приложения для реагирования.

npx create-react-app .

После успешного создания приложения установите пакеты Axios с помощью команды npm. Axios полезен для нас, чтобы соединиться с API.

npm i axios

Очистка приложения

Откройте папку в vscode.

code .

Теперь пришло время очистить приложение, здесь мы удалим ненужные файлы и очистим App.js.
Удалите следующие файлы App.css, App.test.js и logo.svg.

Теперь откройте файл App.js, удалите все в файле и с помощью ярлыка vscode rafce создайте в файле новую чистую функцию.

Далее запустите приложение с помощью команды npm start, приложение должно запуститься без ошибок.

Создание компонентов и разработка приложения

Что ж, конечно, в простом блоге мы не можем часами писать CSS, поэтому я просто попрошу вас скопировать и вставить следующий код CSS в файл index.css.

Откройте файл index.css в vscode, скопируйте и вставьте этот код CSS.

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

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.text_box {
  width: 80%;
  display: flex;
}
.text_box textarea {
  width: 50%;
  height: 300px;
  margin: 10px;
  padding: 5px;
  font-size: 17px;
  outline: none !important;
  border: 2px solid #e0e0e0 ;
  border-radius: 3px;
  box-shadow: 0 0 5px #719ECE;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}

.text_box textarea:focus {
  outline: none !important;
  border: 3px solid #00b0ff  ;
  box-shadow: 0 0 5px #719ECE;

}
.button_box {
  width: 80%;
  display: flex;
  justify-content: space-between;
}
.button_box button, .button_box p {
  margin: 10px;
}
.button_box button {
  border: 2px solid #00b0ff;
  background-color: #00b0ff;
  color: #eee;
  font-size: 17px;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}
.button_box button:hover {
  background-color: #fff;
  color: #00b0ff;
}
.button_box p {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.button_box p span {
  color: #00b0ff;
}

Теперь откройте файл App.js, здесь мы создадим структуру приложения. Мы создадим обернутый контейнер и две строки div в контейнере, как показано ниже.

Вот чистый HTML-код, необходимый для запуска приложения.

        <div className='container'>
            <div className="text_box">
                <textarea ></textarea>
                <textarea class="loading" disabled ></textarea>
            </div>
            <div className="button_box">
                <button>Paraphrase</button>
                <p>similarity: <span>0.22</span></p>
            </div>
        </div>

В этот момент, если вы зайдете в приложение в браузере, вы увидите приложение, как мы и хотели.

Далее вам нужно импортировать useState из react js. И создайте 4 разных состояния, которые необходимы для этого приложения.

Загрузка: для загрузки показываем экран загрузки, пока не получим возвращенные данные
input: здесь мы будем хранить введенный пользователем текст
Сходство: это сходство текста, ввода и вывода. Мы также получаем это из API
Результат: это выходные перефразированные данные, возвращаемые из API.

Используйте следующий набор кодов, чтобы настроить это.

    const [loadin, setLoading] = useState(true)
    const [input, setinput] = useState("")
    const [similarity, Setsimilarity] = useState(0)
    const [result, SetResult] = useState("")

Это все, что нам нужно для хранения данных для этого приложения. Далее мы создадим функцию для обработки щелчка.

В основном, что произойдет после того, как вы нажмете кнопку «Перефразировать»

Создайте имя функции handleClick, которая будет принимать пользовательский ввод в качестве периметра, и эта функция будет устанавливать загрузку и выходные данные.

    const handleClick = async input => {
        setLoading(true)
        // CALL API HERE

        setLoading(false)
        SetResult("balh balh") 
        Setsimilarity("blah balh") 
 
    }

Теперь мы должны показать данные нашему пользователю, то есть мы должны добавить эти переменные в возвращенный html-документ. В дальнейшем.

return (
    <div className='container'>
        <div className="text_box">
            <textarea onChange={e => setinput(e.target.value)} >{input}</textarea>
            { 
                loadin ? 
                ( <textarea class="loading" disabled ></textarea>) 
                :
                (
                    <textarea value={result}>{result}</textarea>
                )
            }
        </div>
        <div className="button_box">
            <button onClick={() => {handleClick(input)}}>Paraphrase</button>
            {similarity > 0 ? (<p>similarity: <span>{similarity}</span></p>): null}
        </div>
    </div>
)

Создание API и подключение к нему

Сегодня мы будем использовать Rapidapi в качестве поставщика услуг API, поэтому вам нужно будет посетить https://rapidapi.com/ и создать учетную запись.

После успешного создания учетной записи вам нужно будет бесплатно подписаться на API paraphraser1, посетив https://rapidapi.com/vidanov-PTkl1skiJB3/api/paraphraser1.

После этого процесса вернитесь к vscode и создайте имя папки apis внутри папки src, затем создайте имя файла Api.js и откройте файл.

В этом файле мы установим соединение с нашим API, используя следующий код.

import axios from 'axios'

const Api = async text => {
    const options = {
        method: 'POST',
        url: 'https://paraphraser1.p.rapidapi.com/',
        headers: {
          'content-type': 'application/json',
          'X-RapidAPI-Key': 'YOUR_API_KEY_HERE',
          'X-RapidAPI-Host': 'paraphraser1.p.rapidapi.com'
        },
        data: {
          input: text
        }
    }
    try {
        const response = await axios.request(options)
        console.log(response.data)
        return response.data
    } catch (err) {
        console.log(err)
    }
}

export default Api

Затем импортируйте этот файл внутрь файла app.js, и давайте начнем вызывать API и собирать из него данные.

Импорт API

import Api from './Apis/Api

Мы будем вызывать API внутри функции handleclick, а также одновременно обновлять данные. Итак, давайте обновим эту функцию следующим образом.

    const handleClick = async input => {
        setLoading(true)
        const res = await Api(input)
        
        setLoading(false)
        SetResult(res.output) 
        Setsimilarity(res.similarity) 
 
    }

Теперь приложение должно работать так, как мы ожидали. Без каких-либо ошибок и должен перефразировать текст.

Урааааааа. Мы реализовали нашу первую идею...

Заключение

Я надеюсь, что вы получили много знаний из этого поста, в целом это очень простое приложение, в будущем мы будем создавать более продвинутые приложения, поскольку я получаю больше идей от читателей.

Вы можете поделиться со мной своими идеями здесь: https://www.instagram.com/nafiu.dev

ссылка на репозиторий GitHub: https://github.com/nafiu-dev/react_parapharaser_saas

Спасибо за чтение.

Вы можете связаться со мной здесь:

https://www.instagram.com/nafiu.dev

Linkedin: https://www.linkedin.com/in/nafiu-nizar-93a16720b

Другие мои сообщения:

Замечательные проекты веб-разработки, которые я создал, которые вы также можете попробовать
Привет всем, этот пост будет немного другим, в этом посте я расскажу о некоторых удивительной сети…medium.com

Создание расширенного внутреннего API с нуля с использованием Node.js;
Привет всем, добро пожаловать в комплексный проект полного стека (серверная часть, внешний интерфейс) с искусственным интеллектом и машинами… medium.com

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .