Вот еще один эпизод, демонстрирующий удивительный потенциал веб-разработки в сочетании с интерфейсом прикладного программирования (API).
Используя API Clarifai, мы можем легко создать собственное приложение для обнаружения изображений. Clarifai — это платформа для распознавания изображений и видео, которая предоставляет модели машинного обучения разработчикам и предприятиям. Он предлагает прогнозы содержимого изображений в реальном времени, позволяя автоматизировать различные приложения, такие как визуальный поиск, рекомендации и модерация.
Вот десять простых шагов для интеграции API Clarifai в приложение React:
- Зарегистрируйтесь для учетной записи Clarifai API, чтобы получить токен личного доступа (PAT).
- На портале Clarifai нажмите на свой профиль и выберите Аутентификация в раскрывающемся меню. Создайте новый PAT в окне аутентификации.
3. Изучите множество моделей Clarifai здесь. В этой демонстрации мы будем использовать модель face-sentiment, созданную сообществом Clarifai.
4. Введите выражение лица в строку поиска и нажмите Enter, чтобы открыть окно модели.
5. Следующим шагом будет использование модели и нажатие кнопки Вызов по API.
6. Поскольку мы работаем в среде React, которая представляет собой библиотеку Javascript, мы скопируем код Javascript и вставим его в наш исходный код. Вот фрагмент моего исходного кода:
import React from "react"; export default function ImageLinkForm() { const [input, setStateInput] = React.useState(""); const [faceSentiment, setFaceSentiment] = React.useState(''); function onInputChange(event) { setStateInput(event.target.value); } function onButtonSubmit() { console.log("click"); const raw = JSON.stringify({ "user_app_id": { "user_id": "facebook", "app_id": "detic" }, "inputs": [ { "data": { "image": { "url": input } } } ] }); const apiKey = 'Key 33fc33ad7cc042618addc502b9db110f' //replace the key string with your PAT TOKen const requestOptions = { method: 'POST', headers: { 'Accept': 'application/json', 'Authorization': apiKey }, body: raw }; fetch(`https://api.clarifai.com/v2/models/face-sentiment-recognition/versions/a5d7776f0c064a41b48c3ce039049f65/outputs`, requestOptions) .then(response => response.json()) .then(result => { const data = result.outputs[0].data.concepts; let highestProbability = 0; let highestProbabilitySentiment = ''; data.forEach(concept => { if (concept.value > highestProbability) { highestProbability = concept.value; highestProbabilitySentiment = concept.name; } }); setFaceSentiment(highestProbabilitySentiment); }) .catch(error => console.log('error', error)); } return( <div> <p className="sent f3"> {faceSentiment || 'This AI will detect emotions in your pictures'} </p> <div className="center"> <div className="form center pa4 br3 shadow-5"> <input placeholder="Paste image link" type="text" className="f4 pa2 w-70 center" onChange={onInputChange} /> <button type="submit" className="w-30 grow f4 link ph3 pv2 dib white bg-light-purple" onClick={onButtonSubmit}> Detect </button> </div> </div> <div className="center ma"> <div> <img src={input} alt="image" height='auto' width='250px' className="link-img"/> </div> </div> </div> ) }
В заключение отметим, что Clarifai API — это мощный инструмент для разработчиков и компаний, желающих добавить в свои приложения возможности распознавания изображений и видео.
Хотите ли вы создать визуальную поисковую систему, систему модерации контента или что-то совершенно новое, Clarifai API станет отличной отправной точкой для вашего следующего проекта.
Спасибо за чтение. Удачного кодирования!