자비스 AI 시뮬레이션

자비스 AI 시뮬레이션,

아이언맨의 자비스 인공지능은 정말 엄청나죠!
오늘은 약간 재미있는 주제로 자비스같은 AI 시뮬레이션을 만들어보았습니다.

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

먼저 클로드를 사용해보았는데요.
무료 사용제한이 있지만 그래도 꽤 잘만들어 줍니다.

자바스크립트로 자비스같은 AI 시뮬레이터를 만들어줘. 
3D환경에서 홀로그램같은 효과르 넣어줘

만들어준 설명을 보니 '안녕'같은 단어를 타이핑하면 응답하는 것 같습니다.
시뮬레이션이라 단어가 몇개 없지만요

목소리 인식을 하고 싶어졌습니다.

음성 인식 기능을 넣어줘. 적절한 곳에 마이크 아이콘을 넣고 누르면 인식을 토글해줘

마이크가 너무 작아.  5배 정도 키워주고 위치를 우측 하단에 고정 위치로 항상 띄워줘

이제 마이크를 누르고 말하면 목소리를 인식합니다.
다만 클로드 미리보기 창에서는 음성인식이 안되기 때문에 윈드서프를 열어 복붙해서 웹에서 실행해보았지요.

아무래도 몇개 단어만 있다보니 chatGPT API 를 붙이면 답변을 하긴 하지만,
다른걸 하고 싶어졌습니다.
채팅 단어에 대해 유튜브를 검색해서 슬라이드로 보여주는 것이지요.

그 다음 지시를 내리니 한도 초과가 뜨네요. 무료 유저라 아무래도 한계입니다.

이제 윈드서프로 작업을 넘길 차례입니다.
코드를 윈드서프에 넣었는데, 잠깐 코드를 확인해보니 이런 멋진걸 만들어 놓고,
채팅창에 가려서 안 보이게 해놓았더라구요.
위치, 투명도를 약간 손코딩으로 조정했습니다.

chatGPT API를 이용하면 채팅이나 음성 내용에 실제 응답하게 할 순 있지만.. 
과금 이슈가 있기 때문에 좀 다른걸 구상해서 아래와 같이 지시했습니다.

기존 채팅 단어 외 다른 단어를 말하면 유튜브 검색 API를 이용해 10건 검색하고 
결과를 오른쪽에서 왼쪽으로 슬라이드해줘. 
유튜브는 자동 재생되게 해줘. api-key 는 내가 수동으로 입력할께.
컨텍스트가 크면 2~3k 단위로 점진적으로 작업해.

참고로 코드량이 꽤 크기 때문에 아래 문구를 넣어주어야 잘 작업합니다.

컨텍스트가 크면 2~3k 단위로 점진적으로 작업해.

유튜브 API-KEY 를 발급받으면 하루에 유투브 검색을 10,000번 사용할 수 있는데요.
발급을 희망하시면 아래 '남쪽마을 밤송이'님의 블로그 글을 참조해 주세요.
https://s0n9h2.tistory.com/78

화면 우측에 이런 창을 만들었군요. API KEY 를 넣고 저장하였습니다.

그리고 음성으로 입력하니, 동영상이 뜨긴 뜨는데 약간 아쉬운 부분이 있어서 하나 더 요청하였습니다.

슬라이드가 오른쪽에서 왼쪽으로 흘러가듯아 이동하게 해줘. 
동영상 목록이 깜박이는데 한번만 로딩해줘.

오우~ 영상이 일정시간 간격으로 하나씩 스크롤 되는데 꽤 부드럽습니다.
자동 재생도 되구요. 다만 웹브라우저 정책에 따라 소리가 나오지 않게 만들어 주었네요.

영상의 소리가 재생되게 바꾼 후 아래와 같이 지시하였습니다.

mute를 없앴어. 가운데 영상만 소리가 나오게 해줘.

가운데 영상만 소리가 나옵니다. 나이스!

유튜브 창을 닫기 위해 아래 지시를 했습니다.

'클로즈'라 입력하면 유튜브 슬라이더를 삭제해줘

잘 닫혀지긴 하는데 소리가 계속 나네요.

소리가 계속 나오는데 영상을 완전히 지워줘

잘 됩니다!

욕심쟁이 크레이는 하나 더 프롬프트를 날렸습니다.
참고로 TTS는 URL 주소가 https 일때만 작동하는데요.
전에 게시글에 소개해드린 cafe24 호스팅이면 잘 작동할 겁니다.

동영상 검색시 "'입력내용'에 대해 조사한 결과입니다."라고 TTS로 읽어줘,.

뭐 이건 여러번 해봐서 잘 되더라구요 ㅎㅎ

오늘의 결과물 URL입니다. ( 좀 더 업그레이드! )

https://cray7.mycafe24.com/cavis/

아래 단어를 기본 인식하구요. 다른 단어는 유튜브를 검색해 보여줍니다.

'안녕','자기소개','날씨','시간','도움말','종료','음악','뉴스','검색','클로즈,'테스트'

응답은 뭐 시뮬레이션이라서 전혀 안 맞습니다 ㅎㅎ
클로즈 단어는 유튜브 영상을 닫는 기능을 하구요.

유튜브 기능은 API 키를 발급 받아 입력해야 작동하니 입력 후 저장 버튼을 눌러주시면 됩니다.
내 PC나 스마트폰 기기에 저장되는 방식입니다.

 

오늘은 바이브코딩 과정을 공유해드렸는데요.
윈드서프를 연습해보셨으면 따라하실수도 있을 겁니다.

아무쪼록 독자님들의 어그로(?)를 끌기에 부족함은 없었는지요.
오늘도 방문해 주셔서 감사합니다.