VocabVids 프로젝트

⭐ 개발 동기 및 사회적 이슈

<aside> <img src="/icons/crayon_gray.svg" alt="/icons/crayon_gray.svg" width="40px" /> 코로나19로 인해 영유아의 전자기기 사용이 급증하면서 언어 및 인지 기능 저하 문제가 심각해졌습니다. 이로 인해 창의력 감소와 스스로 생각하는 능력이 저하되는 사례가 증가하고 있습니다. 이러한 문제를 해결하고자 하는 동기에서 영유아의 창의력 및 언어·인지 기능 향상을 돕는 AI 기반 동화책 생성 프로젝트를 구상하게 되었습니다.

</aside>

⭐ 주제

유아의 창의력 및 언어·인지 기능 향상을 위한 AI 기반 동화책 동영상 생성 플랫폼 구축

⭐ 개발 계획

VocabVid 개발 계획서

⭐ 사용한 SW

<aside> <img src="https://www.drupal.org/files/project-images/nextjs-icon-dark-background.png" alt="https://www.drupal.org/files/project-images/nextjs-icon-dark-background.png" width="40px" /> Next.js_PageRoute V14 [프론트엔드 구현, Node.js/React.js 기반] - SpeechSynthesisUtterance (TTS)

webkitSpeechRecognition (STT)

next/router (페이지 전환)

react/useEffect, useState, useRef (특정 작업 실행, 값 저장, 값 보관)

html5 canvas (동영상 터치시 빨간원 그리기 및 캡쳐)

SpeechSynthesisUtterance (TTS)

webkitSpeechRecognition (STT)

next/router (페이지 전환)

react/useEffect, useState, useRef (특정 작업 실행, 값 저장, 값 보관)

html5 canvas (동영상 터치시 빨간원 그리기 및 캡쳐)

</aside>

<aside> <img src="https://cdn.icon-icons.com/icons2/2389/PNG/512/flask_logo_icon_145276.png" alt="https://cdn.icon-icons.com/icons2/2389/PNG/512/flask_logo_icon_145276.png" width="40px" /> Python 3.10 [동영상 제작 처리 웹서버 구현, flask 기반] -

Flask (마이크로 웹 프레임워크)

flask_cors (flask cors 관련 에러 해결)

BytesIO (바이너리 데이터 관리)

Python-dotenv (api key 보안관리)

Pillow (이미지 편집{자막 추가})

moviepy.editor (이미지 클립들과 음성을 합쳐 영상 파일로 제작)

gtts (TTS)

tempfile (TTS 음성 파일 임시 저장)

OpenAI (dall-e api 사용)

deepl (영어로 번역)

</aside>

<aside> <img src="https://cdn.icon-icons.com/icons2/2699/PNG/512/expressjs_logo_icon_169185.png" alt="https://cdn.icon-icons.com/icons2/2699/PNG/512/expressjs_logo_icon_169185.png" width="40px" /> Express.js [인공지능 Gemini 언어모델 웹서버 + 가상 데이터베이스 구현, node.js 기반] -

express/router (Get/Post 게이트웨이 생성)

MongoDB (입력값/반환값 저장**·수정·**반환)

dotenv (api key 보안관리)

@google/generative-ai (Gemini-Pro 1.0, Gemini-Flash 1.5 모델 사용)

인메모리 데이터베이스 (맵 구조 사용, 메모리에 저장되며 휘발성을 띰)

</aside>

Python 3.10 [로컬 동영상 메이커 소프트웨어 구현, pygame 기반] -

Pygame (멀티미디어 표현, UI 구현)

BytesIO (바이너리 데이터 관리)

Python-dotenv (api key 보안관리)

Pillow (이미지 편집{자막 추가})

moviepy.editor (이미지 클립들과 음성을 합쳐 영상 파일로 제작)

gtts (TTS)

tempfile (TTS 음성 파일 임시 저장)

OpenAI (dall-e api 사용)

deepl (영어로 번역)

</aside>

⭐ 주요 기능 및 모듈

<aside> <img src="/icons/arrow-right_gray.svg" alt="/icons/arrow-right_gray.svg" width="40px" /> Type 1 (전체 웹앱 방식)

ㅁㄴㅇ.png

동영상 제작 프롬포트 입력/구체화 과정

아이가 말하는 자신의 상상을 STT로 텍스트화
텍스트화된 상상을 구글 언어모델 인공지능 Gemini Pro를 사용해 확장
확장된 텍스트를 구글 언어모델 인공지능 Gemini Pro가 읽고, 요약하여 확장된 내용이 아이의 의도와 같은지 질문하는 글 생성
질문을 TTS로 송출
아이가 답변을 말하면 STT로 받아들이고 구글 언어모델 인공지능 Gemini Pro가 긍정의 답변인지 부정의 답변인지 확인하여 긍정일시엔 4번으로, 부정일시엔 1번으로 되먹임
확장된 텍스트를 구글 언어모델 인공지능 Gemini Pro를 사용해 장면 구분이 된 동화의 형태로 변환

프롬포트 바탕 동영상 생성

각 장면을 Dall·E로 동화 같은 그림체로 이미지 생성
파이썬을 사용해 각 이미지와 장면 텍스트를 합치고, TTS가 포함된 영상으로 변환

동영상 송출 및 후처리

화면에 동영상을 송출
장면 송출 중 화면을 터치 시 해당 장면의 터치한 부분을 표시한 이미지와 해당 장면의 내용을 구글 언어모델 인공지능 Gemini Pro로 요약한 글을 구글 이미지인식 및 언어모델 인공지능 Gemini Pro Vision을 사용하여 해당 부분이 무엇을 뜻하는 것인지 알려주는 글을 생성, TTS로 송출 </aside>

<aside> <img src="/icons/arrow-right_gray.svg" alt="/icons/arrow-right_gray.svg" width="40px" /> Type 2 (부분 웹앱 방식)

ㅁㄴㅇ - 복사본.png

동영상 제작 프롬포트 입력/구체화 과정

아이가 말하는 자신의 상상을 STT로 텍스트화
텍스트화된 상상을 구글 언어모델 인공지능 Gemini Pro를 사용해 확장
확장된 텍스트를 구글 언어모델 인공지능 Gemini Pro가 읽고, 요약하여 확장된 내용이 아이의 의도와 같은지 질문하는 글 생성
질문을 TTS로 송출
아이가 답변을 말하면 STT로 받아들이고 구글 언어모델 인공지능 Gemini Pro가 긍정의 답변인지 부정의 답변인지 확인하여 긍정일시엔 4번으로, 부정일시엔 1번으로 되먹임
확장된 텍스트를 구글 언어모델 인공지능 Gemini Pro를 사용해 장면 구분이 된 동화의 형태로 변환

프롬포트 바탕 동영상 생성

각 장면을 Dall·E로 동화 같은 그림체로 이미지 생성
파이썬을 사용해 각 이미지와 장면 텍스트를 합치고, TTS가 포함된 영상으로 변환

동영상 송출 및 후처리

화면에 동영상을 송출
장면 송출 중 화면을 터치 시 해당 장면의 터치한 부분을 표시한 이미지와 해당 장면의 내용을 구글 언어모델 인공지능 Gemini Pro로 요약한 글을 구글 이미지인식 및 언어모델 인공지능 Gemini Pro Vision을 사용하여 해당 부분이 무엇을 뜻하는 것인지 알려주는 글을 생성, TTS로 송출 </aside>

⭐ 자기주도적으로 연구한 분야

<aside> ⚠️ 구현 중 어려웠던 점 (Type 1과 Type 2로 나뉘게된 계기)

</aside>

<aside> 💰 동영상 제작시 발생하는 기술적 비용과 예상 서비스 비용

</aside>

<aside> 🚨 부적절한 컨텐츠 기술적 제한

</aside>