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

Используя API Clarifai, мы можем легко создать собственное приложение для обнаружения изображений. Clarifai — это платформа для распознавания изображений и видео, которая предоставляет модели машинного обучения разработчикам и предприятиям. Он предлагает прогнозы содержимого изображений в реальном времени, позволяя автоматизировать различные приложения, такие как визуальный поиск, рекомендации и модерация.

Вот десять простых шагов для интеграции API Clarifai в приложение React:

  1. Зарегистрируйтесь для учетной записи Clarifai API, чтобы получить токен личного доступа (PAT).
  2. На портале 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 станет отличной отправной точкой для вашего следующего проекта.

Спасибо за чтение. Удачного кодирования!