윅스 (Wix) 코딩 강의 고급 (Advanced) - 이미지 키워드 찾기 (Detect Image Labels) - 통합 (Integrations)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 이미지 키워드 찾기 (Detect Image Labels) - 통합 (Integrations)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 이미지 키워드 찾기 (Detect Image Labels) - 통합 (Integrations)

강의 내용 요약

다음의 예제는 Wix 윅스 무료 홈페이지 만들기의 자바스크립트 (Javascript) 코딩 기능을 활용할 수 있는 Corvid by Wix (윅스 코딩 - 콜비드) 를 활용하여 만듭니다.

 

웹사이트 내에 이미지를 업로드할 떄 그에 맞는 키워드들을 추출하는 기능을 만듭니다.

 

예제 보러가기 (View Example)

Home | Vision NPM S

 

예제 에디터 확인하기 (Edit Now)

Log In | Wix

 

 

강의 내용 만드는법

만들고자 하는 윅스 사이트에 다음과 같은 구성 요소들이 필요합니다.

 

코드 (Code)

Home

import { getLabels } from 'backend/vision.jsw';

$w.onReady(function () {

	$w('#repeater').data = [];

	$w('#dataset1').onAfterSave(async (itemBeforeSave, itemAfterSave) => {

		$w('#repeater').data = [];
		const { description, image } = itemAfterSave;
		$w('#image').src = image;
		const response = await getLabels(image);

		const imageLabels = [];
		response.forEach((item, index) => {
			imageLabels[index] = { label: item, _id: String(index) };
		})

		if (imageLabels.length > 0) {
			$w('#repeater').onItemReady(($item, itemData, index) => {
				$item('#label').text = itemData.label;
			});
			$w('#repeater').data = imageLabels;
		}
	})
})

 

vision.jsw

import { getSecret } from 'wix-secrets-backend';
import vision from '@google-cloud/vision';
import _ from 'lodash';

export async function getLabels(image) {

	// get client from vision api
	const credentials = JSON.parse(await getSecret('credentials'));
	const client = new vision.ImageAnnotatorClient({ projectId: 'corvid-api', credentials: credentials });

	// create image url
	const convertRegex = new RegExp(/image:\/\/v1\/([^\/]+)\/(.*)$/);
	const matches = image.match(convertRegex);
	const url = `https://static.wixstatic.com/media/${matches[1]}`;

	// call image recognition api and return labels
	const [result] = await client.labelDetection(url);
	const labels = await result.labelAnnotations.map((label) => label.description);
	return _.uniq(labels);
}

 

API

Wix Secrets Backend API

$w.Repeater API

 

Corvid by Wix (윅스 코딩 - 콜비드) 개발자 모드/도구 활성화하는 방법

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

 

 

연관된 토픽)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 이미지 숨기기 보이기 (Hide and Show an Image) - 상호작용 (Interaction)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 이미지 및 텍스트 애니메이션 (Image and Text Animation) - 상호작용 (Interactions)

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

콜비드 - 윅스 코딩 (Corvid - Wix coding)

Detect Image Labels | Corvid by Wix Examples | Wix.com