인지 서비스

Cognitive Services는 Microsoft가 인공 지능(AI) 분야의 문제를 해결하기 위해 개발한 일련의 기계 학습 알고리즘입니다. Cognitive Services의 목표는 개발자가 자신의 앱에서 쉽게 사용할 수 있는 개별 구성 요소로 패키징하여 AI를 민주화하는 것입니다.

나는 최근에 동일한 방법으로 응용 프로그램 - Azura을 만들었습니다.

Seek4samurai / 아주라

예.! 아주라 가지고 놀아요. Microsoft의 @Azure-cognitive-service-computer-vision으로 구동됩니다. 웹 애플리케이션과 브라우저 확장으로 모두 사용할 수 있습니다.

아주라

예.! 아주라

아주라란?🚀

이것은 우리가 브라우저에 설치한 것과 같은 확장 기능이자 일종의 검색 도구로, 이미지 URL을 입력으로 받아 Microsoft Azure의 컴퓨터 비전을 사용하여 처리하고 이미지가 무엇인지 설명합니다. 이것은 기본적으로 컴퓨터 비전의 한 가지 용도를 설명하기 위해 존재하는 도구입니다.

라이브 데모 🌏

웹사이트는 https://azura-website.vercel.app/에서 운영 중입니다.
그러나 더 나은 사용자 경험과 이미지 설명을 읽어주는 텍스트 음성 변환 기능으로 확장 프로그램도 확인하십시오.

사용방법은 연장으로 🧑🏼‍💻

다음 저장소인 zip으로 복제하거나 다운로드합니다. https://github.com/seek4samurai/azura

브라우저에 추가 중 📝

이 확장 프로그램을 추가하려면 브라우저 >> 확장 프로그램으로 이동하세요.
먼저 개발자 모드를 켜야 합니다.

이 작업이 완료되면 이제 확장 프로그램을 가져올 수 있습니다.
딸깍 하는 소리…

View on GitHub

컴퓨터 비전에 익숙하다면 작동 방식을 알아야 합니다. 이것은 우리가 기계의 시각을 훈련시켜 현실 세계의 물체와 유사한 것을 인식하도록 훈련시키는 기술입니다. 물체는 사람의 얼굴이나 동물을 인식하는 것과 같은 살아있는 것일 수도 있습니다.

Microsoft Azure는 인지 서비스 API를 무료로 사용하여 이러한 컴퓨터 비전 기반 애플리케이션을 생성할 수 있도록 제공합니다.

시작하기

Azure 리소스 생성

리소스에서 컴퓨터 비전을 선택한 다음 리소스를 만듭니다.


리소스를 만든 후.



API 클라이언트 사용
이전 단계를 모두 올바르게 수행했으면 작업 공간을 시작할 수 있습니다.

서버 설정
nodejsnpm init -y를 사용하여 서버 생성을 시작합니다. 초기화한 후에는 다음 패키지와 라이브러리를 설치해야 합니다.

{
  "name": "azura-backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./src/index.js",
    "start": "node ./src/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@azure/cognitiveservices-computervision": "^8.1.0",
    "cors": "^2.8.5",
    "dotenv": "^16.0.0",
    "express": "^4.17.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

여기에서는 Express를 사용하여 서버를 생성합니다. 그리고 우리가 설치한 Azure 인지 서비스를 사용하기 위해npm i @azure/cognitiveservices-computervisionsrc 폴더와 index.js 파일을 만들어 서버를 시작하고 그 안에 있는 기본 경로를 처리합니다.

const express = require("express");
const dotenv = require("dotenv");
const cors = require("cors");

dotenv.config();

const imageController = require("./controller");

const app = express();
app.use(cors({
  origin: "*"
}));
app.use(express.json());

// Routes
app.use("/", imageController);

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => {
  console.log(`App running or port ${PORT}`);
});

이 작업이 완료되면 응용 프로그램에 컴퓨터 비전 클라이언트를 사용할 controller.js 파일을 만듭니다.

const express = require("express");
const ComputerVisionClient =
  require("@azure/cognitiveservices-computervision").ComputerVisionClient;
const ApiKeyCredentials = require("@azure/ms-rest-js").ApiKeyCredentials;

const router = express.Router();

router.post("/describe", async (req, res) => {
  const KEY = process.env.KEY;
  const ENDPOINT = process.env.ENDPOINT;

  // Create a new Client
  const computerVisionClient = new ComputerVisionClient(
    new ApiKeyCredentials({ inHeader: { "Ocp-Apim-Subscription-Key": KEY } }),
    ENDPOINT
  );

  if (!req.body.imageUrl) {
    return res.send("Image url is not set! Please provide an image!");
  }
});

module.exports = router;

로컬 작업 공간에 .env 파일을 생성하고 API 키와 엔드포인트를 붙여넣고 이를 사용하려면 dotenv 패키지를 사용해야 합니다(이해할 수 있기를 바랍니다). 우리는 클라이언트를 초기화했으며 /describe 로 리디렉션하라는 요청을 게시하면 클라이언트에 도달해야 합니다. Postman을 사용하여 이 API 호출을 확인할 수 있습니다.
그리고 마지막 줄에서 요청이 비어 있는지 확인한 다음 빈 URL 메시지를 반환합니다.

이 모든 작업이 끝나면 계속해서 try-catch 블록을 만들고 다음을 사용할 수 있습니다.

  try {
    // Describe and Image Url
    const descUrl = req.body.imageUrl;
    const caption = (await computerVisionClient.describeImage(descUrl))
      .captions[0];

    res.send(
      `This maybe ${caption.text} (confidence ${caption.confidence.toFixed(2)})`
    );
  } catch (error) {
    console.log(error);
    res.send(error.message)
  }

여기서는 프런트엔드에서 req.body.imageUrl를 가져오고 해당 URL을 클라이언트에 사용합니다. 그리고 응답을 반환하고 프런트 엔드로 다시 보냅니다.

프런트엔드 개요

이 튜토리얼에서는 프런트엔드가 초점이 아니므로 간략하게 살펴보겠습니다.
사용자로부터 입력을 받고 해당 URL이 백엔드로 전송됩니다. 그 목적으로 Axios를 사용하고 있습니다.

const res = await axios.post(
      "https://YourURL/describe",
      {
        imageUrl,
      }
    );

YourURL 대신 서버의 URL을 붙여넣습니다.

응답을 인쇄하거나 콘솔에 로그인하도록 확인할 수 있습니다. 이것은 이미지의 URL을 수락하고 이미지에 대한 설명을 반환합니다.

읽어 주셔서 감사합니다.