Рубрики
Без рубрики

Как построить сайт предсказательного машинного обучения с помощью React и Python (часть третья: разработка фронта)

Что мы будем строить. Мы будем создавать фронт реагирования машинного обучения, который будет предсказать … Tagged Python, React, MachineLearning, Fastapi.

Как построить сайт предсказательного машинного обучения с помощью React и Python (серия 3 частей)

Что мы будем строить.

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

Введение

Развитие фронта оказалось незаменимым за эти годы. Оглядываясь назад на дисковую революцию и то, как на терминале использовались программы на основе командной строки, мы стали оценить фронт и то, как это заставило население наслаждаться программными продуктами.

Интерфейсы прикладного программирования (API) были бы бесполезны, если бы не простота, которую разработка фронта принесла в наши приложения. Крупные технологические компании, такие как Facebook, Twitter, Apple, Windows и Google, все создали свой бизнес вокруг парадигм разработки солидных фронтов. Лучше всего сказать, что без развития фронта не будет никакой красоты и удовольствия от какого -либо технического продукта.

Предпосылка

Чтобы раздавить этот урок, вам нужна хорошая команда следующих инструментов.

  • Реагировать
  • CSS
  • Менеджер пакетов пряжи
  • Часть вторая этого урока

Что такое разработка фронта

Прежде чем мы определим приведенный выше термин, давайте разберем некоторые концепции, связанные с развитием фронта. Мы хотим знать, что такое Frondend, прежде чем определить разработку фронта.

Что такое Frontend? Фронт является визуальной стороной программного обеспечения или приложения. Он включает в себя все элементы, которые составляют интерфейс приложения. Например, всякий раз, когда вы посещаете и взаимодействуете с веб -страницей, вы видите, является лидером. Когда вы открываете свой Mac или ПК, красивый интерфейс, который вы видите, – это то, что мы называем Frontend.

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

Frontend и API Интерфейс Frontend и Application Programming – это комбинация, которая предоставила разработчикам программного обеспечения PAT на спине. Его можно сравнить с браком с вашей долгожданной родственной душой с далекой земли. Сочетание фронта и API – это обновление, от которого разработчики никогда не смогут восстановиться.

В то время как API предоставляет фронт сочные ресурсы, такие как безопасность, база данных и хранилище, Frontend потребляет эти ресурсы и представляет их пользователю понятным образом. Frondend может потреблять ресурсы из одного или многих API, размещенных в разных доменах в Интернете. Frondend нужны ресурсы, поступающие из этих API, потому что он не может компенсировать все ресурсы. Например, Frontend не может предоставить масштабируемые функции безопасности и базы данных, поэтому он полагается на бэкэнд (API) для этих услуг и многое другое.

Зачем подключать фронт с API Как кратко обсуждалось выше, комбинация Frontend + API обеспечивает следующие преимущества и многое другое.

  • Он обеспечивает масштабируемый выбор базы данных.
  • Он предоставляет масштабируемые параметры хранения.
  • Он обеспечивает масштабируемые механизмы безопасности.
  • Он обеспечивает децентрализованную архитектуру программного обеспечения.
  • Он обеспечивает разделение заботы для инженеров -программистов.
  • Несколько приложений Frontend могут совместно использовать один и тот же API.

Фронт с React React, или ReactJS – это фреймворк/библиотека JavaScript, поставляется с набором функций, стиля и конфигурации кода, которые обеспечивают намного проще разработку приложений переднего фронта. Обратите внимание, что большинство фронтальных фреймворков построены на языке программирования JavaScript.

ReactJS облегчает жизнь разработчикам фронта из -за его простого стиля реализации. ReactJS был разработан и поддерживается командой Facebook, и она предназначена для решения своих проблем, и сегодня она теперь предоставлена в качестве библиотеки с открытым исходным кодом и в настоящее время используется миллионами разработчиков по всему миру.

ReactJS объединяет силу HTML, CSS, и JavaScript Для создания приложения и, как таковое, потребуется хорошее понимание вышеуказанных программных стеков, чтобы быть продуктивными.

Создание фронта прогнозного машинного обучения

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

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

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

  • Отправляйтесь в Nodejs сайт и установите версию ОС.
  • Откройте терминал и установите ReactJs со следующей командой. npm i -g create-react-app
  • Создайте или перейдите в папку существующих проектов.
  • В папке Projects создайте новое приложение React под названием прогнозирующий Анкет
  • Скопируйте модель и API каталог в корне прогнозирующей папки. Структура вашего проекта должна выглядеть так.

  • Открытый терминал один, перейдите к API каталог и запустите команду ниже Python main.py

  • Установите пакет Axios NPM для API Communications. пряжа добавить Axios

  • Откройте второй терминал и запустите ниже команду пряжа старт

  • Откройте браузер и посетите Localhost: 3000

Структура вашего проекта должна находиться в сравнении с изображением ниже.

Фантастика, давайте перейдем к разработке стеклянного компонента.

Разработка стеклянного компонента Создайте два файла Glass.js и Glass.css В каталоге компонентов и вставьте коды ниже. Смотрите Git Repo для справки.

https://gist.github.com/Daltonic/7234bfca81ded249724b00fe3d236735

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

Кроме того, давайте посмотрим, как мы поглотили наш бэкэнд API.

const handleSubmit = (e) => {
    e.preventDefault()
    // Parameters
    const params = { gender, bsc, workex, etest_p, msc }
    axios
      .post('http://localhost:8080/prediction', params)
      .then((res) => {
        const data = res.data.data
        const parameters = JSON.stringify(params)
        const msg = `Prediction: ${data.prediction}\nInterpretation: ${data.interpretation}\nParameters: ${parameters}`
        alert(msg)
        reset()
      })
      .catch((error) => alert(`Error: ${error.message}`))
  }

Когда мы заполняем форму приведенными выше параметрами и нажимаем кнопку «Отправить», метод выше отправляет Http Запрос на наше прогнозное машинное обучение API и возвращает ответ. Этот ответ показывает, будет ли кандидат нанять или нет.

Настройка структуры приложения Главный App.js Файл должен содержать следующие коды.

import Glass from './components/Glass'
function App() {
  return (
    
); } export default App;

Вставьте следующие коды на index.css файл.

https://gist.github.com/Daltonic/8a62a60b2ef93d6d50a3579d124e86d6

Поздравляю, вы сделали это, вы раздавили этот проект, теперь вы завершили весь учебник. Ваш проект должен выглядеть так.

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

Вывод

В заключение мы увидели, как комбинация модели машинного обучения, API и фронта может решить бизнес -проблемы нашего дня. Fastapi и React сделали это так легко реализовать. В будущем, я считаю, что алгоритмы машинного обучения будут работать на границах всех онлайн -бизнеса.

Об авторе

Евангелие Дарлингтон – удаленный Fullstack Веб -разработчик, плодовитый с такими технологиями, как Vuejs , Угловой , Reactjs и API Development Анкет Он проявляет огромный интерес к разработке высококлассных и отзывчивых веб-приложений.

Евангелие Дарлингтон в настоящее время работает как Фрилансер разрабатывает приложения и написание учебников которые учат других разработчиков, как интегрировать программные продукты в свои проекты.

Он проводит свое свободное время коучинг молодых людей о том, как добиться успеха в жизни. Его хобби включают изобретение новых рецептов, написание книг, написание песен и пение. Вы можете связаться со мной на Веб-сайт , LinkedIn , Twitter , Facebook , или GitHub для любого обсуждения.

Как построить сайт предсказательного машинного обучения с помощью React и Python (серия 3 частей)

Оригинал: “https://dev.to/daltonic/how-to-build-a-predictive-machine-learning-site-with-react-and-python-part-three-frontend-development-57m8”