project/personal
-
Canvas API를 활용한 동영상 재생바 마커 및 텍스트 남기기project/personal 2024. 4. 19. 10:59
- Canvas api란 Canvas API는 JavaScript와 HTML 엘리먼트를 통해서 그래픽을 그리기위한 수단을 제공을 합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용이 됩니다. - 개발 내용 - 비디오 및 캔버스 생성 - useEffect를 통한 이벤트 핸들링 - 상호작용 캔버스 클릭 시 텍스트를 추가하는 로직을 구현 프롬프트 창을 통해 표시할 텍스트를 입력, 해당 텍스트를 캔버스에 그리고 관련 정보를 상태에 저장 - 재생 제어 - 마커와 진행 상태 바 비디오의 특정 시점을 나타내는 마커를 추가, 마커를 클릭할 경우 해당 시점으로 비디오를 이동시키는 기능을 구현 - 개발 결과물 1. 텍스트 입력 기능 2. 마커 클릭 이동 기능
-
오픈소스를 활용한 text to video 만들기project/personal 2024. 4. 1. 10:49
사용한 오픈소스 및 모델 그외 정보 사용한 오픈 소스 : ByteDance/AnimateDiff-Lightning 사용한 모델 : (기본설정모델) emilianJR/epiCRealism 2. 후기 프론트엔드 개발자로 AI에 관심이 많아서 처음에는 open AI로 챗봇을 만들고, 흥미가 생겨 달리를 이용해서 txt to img로 생성했습니다. txt to video도 시도하고 싶은 마음으로, 가벼운 오픈 소스를 활용하여, 파이썬으로 플라스크로 API 통신으로 했습니다. 간단하고 쉽게 사용이 가능하며, 간단한 설정으로 text to video를 만들 수 있었습니다. 3. 깃주소 파이썬 코드의 경우 공유가 안되어 있지만 오픈소스에 플라스크를 이용한 api 통신으로 만들면 됩니다. https://github.c..
-
개인 포트폴리오 사이트 만들기project/personal 2023. 11. 8. 10:47
1. 개요 프로젝트명 : 포트폴리오 만들기 기술 스택 : Scss, JS, React.JS 프로젝트 기간 : 2023.11.04 ~ 2023.11.07 (4일) - 프로젝트 설명 포트폴리오 사이트 만들기 포트폴리오 배포하기(네트리파이) - 프로젝트 문제 해결 문제 CONTACT 섹션에서 그림자 애니메이션이 딜레이가 발생 이벤트 핸들러가 과도하게 실행되어 성능이 저하 해결 GSAP 라이브러리를 활용하여 그림자 애니메이션을 개선 코드를 더 간결하게 작성하여 성능을 향상 - 기존 코드 - 개선 코드 2. GIT GitHub - SIM-TOO/portfolio2023 Contribute to SIM-TOO/portfolio2023 development by creating an account on GitHub...
-
개인 포트폴리오 프로젝트project/personal 2023. 9. 22. 16:36
1. 개요 프로젝트명 : 포트폴리오 만들기 기술 스택 : HTML, CSS, JS, VITA 프로젝트 기간 : 2023.08.14 ~ 2023.08.17 (4일) - 프로젝트 설명 포트폴리오 연습 사이트 만들기 2. GIT GitHub - SIM-TOO/vite-portfolio Contribute to SIM-TOO/vite-portfolio development by creating an account on GitHub. github.com 3. 결과영상