diff --git a/source/entryjs/blocks/2024-04-17-ai-block.md b/source/entryjs/blocks/2024-04-17-ai-block.md new file mode 100644 index 00000000..208ece40 --- /dev/null +++ b/source/entryjs/blocks/2024-04-17-ai-block.md @@ -0,0 +1,479 @@ +--- +layout: page +title: 인공지능 블록 +type: entryjs +category: '고급 기능 블록' +order: 1 +keywords: +genre: +description: +thumbnail: +author: Entrylabs +date: 2024-04-17 +updated: 2024-04-17 +--- + +인공지능(AI) 블록은 EntryJS에서 제공하는 고급 기능 블록 중 하나로, 사용자가 자신의 프로젝트에 인공지능 기술을 쉽게 통합할 수 있게 해줍니다. 이 블록들은 프로젝트에 AI의 강력한 기능을 추가하여, 예를 들어 이미지 인식, 음성 인식, 텍스트 분석 및 기계 학습과 같은 기능을 구현할 수 있습니다. + + +### 현재의 한계 +수정과 추가를 위해 EntryJS 소스 코드를 직접 수정하고 빌드해야 한다는 점입니다. + +> 추후 개선을 통해 외부에서 동적으로 인공지능 블록을 컨트롤 할수 있게 수정할 예정입니다. + +## 공통 + +[initOption](/entryjs/typedef/2024-03-11-init-options.html)으로 `aiUtilizeDisable` 값을 `true`로 전달하면 인공지능 블록 기능이 동작하지 않습니다. + +```js +Entry.init(container, { + //... options + aiUtilizeDisable: true, //인공지능 블록 기능 off +}); +``` + +또는 인공지능 블록을 추가 및 제거하려면 아래의 소스코드를 수정한 후 빌드해야 합니다. +[src/class/AIUtilize.js](https://github.com/entrylabs/entryjs/blob/develop/src/class/AIUtilize.js) + +```js +import '../playground/blocks/block_ai_utilize_audio'; +import '../playground/blocks/block_ai_utilize_tts'; +import '../playground/blocks/block_ai_utilize_translate'; +import '../playground/blocks/block_ai_utilize_video'; +import '../playground/blocks/block_ai_utilize_gesture_recognition'; +import '../playground/blocks/block_ai_utilize_pose_landmarker'; +import '../playground/blocks/block_ai_utilize_face_landmarker'; +import '../playground/blocks/block_ai_utilize_object_detector'; + +// 음성인식, 읽어주기 제거 하고 싶은경우 +import '../playground/blocks/block_ai_utilize_translate'; +import '../playground/blocks/block_ai_utilize_video'; +import '../playground/blocks/block_ai_utilize_gesture_recognition'; +import '../playground/blocks/block_ai_utilize_pose_landmarker'; +import '../playground/blocks/block_ai_utilize_face_landmarker'; +import '../playground/blocks/block_ai_utilize_object_detector'; +``` + +인공지능 카테고리까지 제거하고 싶은경우 [static.js](/entryjs/api/2024-03-05-static.html)에서 `getAllBlocks`의 `ai_utilize`항목을 제거하면 됩 합니다. + +다른방법의 카테고리 및 블록 제거 방법은 [핵심 API](/entryjs/api/2024-02-29-api.html#Entry-playground-blockMenu-banClass)를 참고하시면 됩니다. + +### META DATA +기본적으로 블록마다 메타데이터를 가지게 됩니다. 개발하는 블록마다 다른 메타데이터를 가지기도 하시면 공통적으로 필요한 메타데이터가 있습니다. + +|프로퍼티|타입|설명| +|---|---|---| +|name|string|인공지능 블록의 이름| +|imageName|string|인공지능 블록의 이미지| +|category|'general'\|'video'\|'audio'|general=기본
video=비디오 감지
audio=오디오 감지| +|title|Lang|인공지능 블록의 다국어 이름| +|titleKey|string|인공지능 블록의 다국어 키
예) template.voice_title_text = window.Lang.template.voice_title_text| +|descriptionKey|string|인공지능 블록의 다국어 키| +|api|string|해당 인공지능 블록을 호출할 api의 url| + +### 팝업 관리 +기본적으로는 [팝업 aiUtilize](/entryjs/api/2024-02-29-popup.html#aiUtilize)의 기능으로 인공지능 블록을 팝업에 띄울수 있습니다. +블록 메뉴에서 `인공지능 블록 불러오기`버튼 클릭시 `openAIUtilizeBlockManager`이벤트가 발생하고 이때 [popup.show](/entryjs/api/2024-02-29-popup.html#show) 를 이용해 팝업을 띄울수 있습니다. + +```js +Entry.addEventListener('openAIUtilizeBlockManager', () => { + // EntryJS load가 정상적이라면 + // 전역 Entry의 AI_UTILIZE_BLOCK_LIST 확장 블록 리스트가 들어 있습니다. + tool.popup.show('aiUtilize', Object.values(Entry.AI_UTILIZE_BLOCK_LIST)); +}); +``` + +## 번역 + +[소스](https://github.com/entrylabs/entryjs/blob/develop/src/playground/blocks/block_ai_utilize_translate.js) + +파파고를 이용하여 다른 언어로 번역할 수 있는 블록 모음입니다. + +해당 블록을 사용하기 위해선 AI API 서버 구축이 필요합니다. +> 현재 엔트리에서는 AI API는 papago을 이용하고 있습니다. +> 각 블록의 func를 상황에 맞도록 수정해서 사용하면 됩니다. + +### get_translated_string +입력한 문자값을 선택한 언어로 번역 블록. + +```js +func(sprite, script) { + const textObj = checkText(script.getStringValue('TEXT', script)); + if (!textObj.result) { + return textObj.message; + } + + const type = Entry.AI_UTILIZE_BLOCK.translate.apiType; + const params = { + text: textObj.message, + target: script.getField('TARGET', script), + source: script.getField('SOURCE', script), + }; + + if (params.target == params.source) { + return params.text; + } + + return translate(params, type, Lang.Blocks.unknown_sentence); +} +``` + +### check_language +입력된 문자값의 언어를 감지 블록. + +```js +func(sprite, script) { + const text = script.getStringValue('TEXT', script); + const textObj = checkText(text); + if (!textObj.result) { + return textObj.message; + } + + return checkLang(textObj.message, Lang.Blocks.unknown_sentence); +} +``` + +## 읽어주기 + +[소스](https://github.com/entrylabs/entryjs/blob/develop/src/playground/blocks/block_ai_utilize_tts.js) + +nVoice 음성합성 기술로 다양한 목소리로 문장을 읽는 블록모음 입니다. + +해당 블록을 사용하기 위해선 AI API 서버 구축이 필요합니다. +> 현재 엔트리에서는 AI API는 clova를 이용하고 있습니다. +> 각 블록의 func를 상황에 맞도록 수정해서 사용하면 됩니다. + +### read_text +입력한 문자값을 설정된 목소리로 읽는 블록. + +```js +func(sprite, script) { + const { result, message, hash } = checkText(script.getStringValue('TEXT', script)); + if (result) { + const prop = sprite.getVoiceProp(); + read({ + message, + hash, + prop, + }); + } + return script.callReturn(); +} +``` +### read_text_wait_with_block +입력한 문자값을 읽어준 후 다음 블록을 실행하는 블록. + + +```js +async func(sprite, script) { + const { result, message, hash } = checkText(script.getStringValue('TEXT', script)); + const prop = sprite.getVoiceProp(); + if (result) { + await read({ + message, + hash, + prop, + }); + return script.callReturn(); + } +} +``` +### set_tts_property +선택한 목소리가 선택한 속도와 선택한 음높이로 설정하는 블록. + +```js +func(sprite, script) { + const speaker = script.getField('SPEAKER', script); + const speed = script.getField('SPEED', script); + const pitch = script.getField('PITCH', script); + const volume = 1; + sprite.setVoiceProp({ speaker, speed, pitch, volume }); + return script.callReturn(); +} +``` +## 사람 인식 + +[소스](https://github.com/entrylabs/entryjs/blob/develop/src/playground/blocks/block_ai_utilize_pose_landmarker.js) + +카메라를 이용하여 사람의 신체를 인식하는 블록들의 모음입니다. + +해당 블록은 API 구축이 필요하지 않습니다. + +### when_pose_landmarker +사람을 인식하면 아래에 연결된 블록들을 실행하는 블록. + +### pose_landmarker +사람 인식을 시작하거나 중지하는 블록. + +### draw_detected_pose +인식한 사람의 형태를 실행 화면에 보이게 하거나 숨기는 블록. + +### check_detected_pose +사람이 인식된 경우 '참'으로 판단하는 블록. + +### count_detected_pose +인식한 사람의 수 블록. + +### locate_to_pose +오브젝트가 선택한 사람의 신체 부위로 이동하는 블록. + +### locate_time_to_pose +오브젝트가 입력한 시간에 걸쳐 선택한 사람의 신체 부위로 이동하는 블록. + +### axis_detected_pose +입력한 순서의 사람의 선택한 신체 부위의 위치 블록. + +## 사물 인식 + +[소스](https://github.com/entrylabs/entryjs/blob/develop/src/playground/blocks/block_ai_utilize_object_detector.js) + +카메라를 이용하여 사물을 인식하는 블록들의 모음입니다. + +해당 블록은 API 구축이 필요하지 않습니다. + +### when_object_detector +사물을 인식하면 아래에 연결된 블록들을 실행하는 블록. + +### object_detector +사물 인식을 시작하거나 중지하는 블록. + +### draw_detected_object +인식한 사물의 위치와 순서를 실행 화면에 보이게 하거나 숨기는 블록. + +### check_detected_object +사물이 인식된 경우 '참'으로 판단하는 블록. + +### count_detected_object +인식한 사물의 수 블록. + +### is_detected_among_objects +선택한 사물이 인식된 경우 '참'으로 판단하는 블록. + +## 손 인식 + +[소스](https://github.com/entrylabs/entryjs/blob/develop/src/playground/blocks/block_ai_utilize_gesture_recognition.js) + +카메라를 이용하여 손을 인식하는 블록들의 모음입니다. + +해당 블록은 API 구축이 필요하지 않습니다. + +### when_hand_detection +손을 인식하면 아래에 연결된 블록들을 실행하는 블록. + +### hand_detection +손 인식을 시작하거나 중지하는 블록. + +### draw_detected_hand +인식한 손의 형태를 실행 화면에 보이게 하거나 숨기는 블록. + +### check_detected_hand +손을 인식한 경우 '참'으로 판단하는 블록. + +### count_detected_hand +인식한 손의 개수 블록. + +### locate_to_hand +오브젝트가 선택한 손의 부위로 이동하는 블록. + +### locate_time_to_hand +오브젝트가 입력한 시간에 걸쳐 선택한 손의 부위로 이동하는 블록. + +### axis_detected_hand +입력한 순서의 손에서 선택한 부위의 위치 값 블록. + +### is_which_hand +입력한 순서의 손이 선택한 손이라면 '참'으로 판단하는 블록. + +### get_which_hand +입력한 순서의 손이 오른손인지, 왼손인지를 반환하는 블록. + +### is_which_gesture +입력한 순서의 손이 선택한 모양이라면 '참'으로 판단하는 블록. + +### get_which_gesture +입력한 순서의 손이 어떤 모양인지를 반환하는 블록. + +## 얼굴 인식 + +[소스](https://github.com/entrylabs/entryjs/blob/develop/src/playground/blocks/block_ai_utilize_face_landmarker.js) + +카메라를 이용하여 얼굴을 인식하는 블록들의 모음입니다. + +해당 블록은 API 구축이 필요하지 않습니다. + +### when_face_landmarker +얼굴을 인식하면 아래에 연결된 블록들을 실행하는 블록. + +### face_landmarker +얼굴을 인식하면 아래에 연결된 블록들을 실행하는 블록. + +### draw_detected_face +인식한 얼굴의 형태를 실행 화면에 보이게 하거나 숨기는 블록. + +### check_detected_face +얼굴이 인식된 경우 '참'으로 판단하는 블록. + +### count_detected_face +인식한 얼굴의 수 블록. + +### locate_to_face +오브젝트가 선택한 얼굴의 부위로 이동하는 블록. + +### locate_time_to_face +오브젝트가 입력한 시간에 걸쳐 선택한 얼굴의 부위로 이동하는 블록. + +### check_detected_gender +선택한 얼굴이 선택한 성별이면 '참'으로 판단하는 블록. + +### check_compare_age +선택한 얼굴의 나이가 입력한 수식에 해당한다면 '참'으로 판단하는 블록. + +### check_detected_emotion +선택한 얼굴이 선택한 감정이면 '참'으로 판단하는 블록. + +### axis_detected_face +입력한 순서의 얼굴 중 선택된 얼굴 부위의 위치값 블록. + +### get_detected_face_value +입력한 순서의 얼굴의 성별/나이/감정의 추정값 블록. + +## 음성 인식 + +[소스](https://github.com/entrylabs/entryjs/blob/develop/src/playground/blocks/block_ai_utilize_audio.js) + +마이크를 이용하여 음성을 인식하는 블록들의 모음입니다. + +해당 블록을 사용하기 위해선 AI API 서버 구축이 필요합니다. +> 현재 엔트리에서는 AI API는 clova를 이용하고 있습니다. +> 각 블록의 func를 상황에 맞도록 수정해서 사용하면 됩니다. + +### check_microphone +컴퓨터에 마이크가 연결되어 있는 경우 '참'으로 판단하는 블록. + +```js +async func(sprite, script) { + try { + if (!AudioUtils.isInitialized) { + await AudioUtils.initialize(); + } + return AudioUtils.audioInputList.length > 0; + } catch (err) { + return false; + } +} +``` +### get_microphone_volume +마이크에 입력되는 소리의 크기 값 블록. + +```js +async func(sprite, script) { + if (!AudioUtils.isInitialized) { + await AudioUtils.initialize(); + } + return AudioUtils.currentVolume; +}, +``` + +### speech_to_text_convert +마이크를 통해 녹음된 음성을 인식하는 블록. + +```js +async func(sprite, script) { + if (!AudioUtils.isInitialized) { + await AudioUtils.initialize(); + } + if (AudioUtils.isRecording) { + return; + } + try { + const language = script.getField('LANG', script); + if (language === 'Kor') { + Entry.container.sttValue.setName( + `${Lang.template.voice_title_text}:${Lang.Blocks.korean_s}` + ); + } else if (language === 'Eng') { + Entry.container.sttValue.setName( + `${Lang.template.voice_title_text}:${Lang.Blocks.english_s}` + ); + } else if (language === 'Jpn') { + Entry.container.sttValue.setName( + `${Lang.template.voice_title_text}:${Lang.Blocks.japan_s}` + ); + } + AudioUtils.isRecording = true; + Entry.container.enableSttValue(); + const result = await AudioUtils.startRecord(60 * 1000, language); + Entry.dispatchEvent('audioRecordingDone'); + Entry.container.setSttValue(result || '-'); + } catch (e) { + Entry.container.setSttValue('-'); + throw e; + } +} +``` +### timed_speech_to_text_convert +입력한 시간 동안 마이크를 통해 녹음된 음성을 선택한 언어로 인식하는 블록. + +```js +async func(sprite, script) { + if (!AudioUtils.isInitialized) { + await AudioUtils.initialize(); + } + if (AudioUtils.isRecording) { + return; + } + try { + const time = _clamp(script.getNumberValue('TIME'), 1, 60); + + const language = script.getField('LANG', script); + if (language === 'Kor') { + Entry.container.sttValue.setName( + `${Lang.template.voice_title_text}:${Lang.Blocks.korean_s}` + ); + } else if (language === 'Eng') { + Entry.container.sttValue.setName( + `${Lang.template.voice_title_text}:${Lang.Blocks.english_s}` + ); + } else if (language === 'Jpn') { + Entry.container.sttValue.setName( + `${Lang.template.voice_title_text}:${Lang.Blocks.japan_s}` + ); + } + AudioUtils.isRecording = true; + Entry.container.enableSttValue(); + const result = await AudioUtils.startTimedRecord(time * 1000, language); + Entry.dispatchEvent('audioRecordingDone'); + Entry.container.setSttValue(result || '-'); + } catch (e) { + Entry.container.setSttValue('-'); + throw e; + } +} +``` +### set_visible_speech_to_text +인식한 음성을 실행 화면에 보이게 하거나 숨기는 블록. + +```js +func(sprite, script) { + const action = script.getField('ACTION'); + const sttValue = Entry.container.sttValue; + + if (!sttValue) { + return script.callReturn(); + } else if (action === 'SHOW') { + sttValue.setVisible(true); + } else { + sttValue.setVisible(false); + } + + return script.callReturn(); +} +``` +### speech_to_text_get_value +사람의 목소리를 문자로 변환한 값 블록. + +```js +func(sprite, script) { + return Entry.container.getSttValue(); +} +```