베하~!! 안녕하세요!! 1-Tier팀 입니다.
이번 포스팅에서는 그동안 ToutubeAPI를 활용해서 만들었던 Youtube VOC 제작 결과를 한번 정리해 보려고 합니다.
먼저 소스 트리 입니다.
Code
static 파일
static - font : 고담 폰트를 사용했습니다.
static - video : 메인 페이지의 배경 영상과 차트, 데이터 리스트 화면의 배경 이미지가 포함되어 있습니다.
static : css파일들이 있으며 공통적으로 반영되는 *, html, ul, li 태그 와 class 들이 포함되어 있는 main 과 페이지 별 css 파일들이 모여있습니다.
html 파일
chart : 차트를 생성하는 파일들이 포함되어 있으며 chart_list ( like 순위 출력 ), chart_list _pi ( view 순위 출력 ), chart_list_gpt ( gpt 점수 순위 출력 ) chart_mng ( 차트 선택 화면 출력 ) 의 역할을 합니다.
add : 데이터 추가 페이지
index : 메인 페이지
search_list : 저장되어 있는 데이터를 확인할 수 있는 페이지
search_mng : 저장되어 있는 데이터를 표로 출력하는 부분
python 파일
main : flask 구동 파일
db_select : DB연결 구문 파일
youtube_config : API Key, DB 계정 정보가 포함된 파일
youtube_v3_Insert : 동영상 데이터 입력 파일 *
youtube_v4_Update : 동영상 데이터 업데이트 파일 *
youtube_v5_Comment : 동영상 코멘트 데이터 수집 파일 *
youtube_v6_Grade : Chat GPT 구동 파일
* 표시 파일은 main.py 에 작성되어 있어 구동 시 페이지나 시간에 따라 자동 실행 됨
다음은 DB 테이블 정보 입니다.
DB
comment_list : 동영상 댓글 저장 테이블
gpt_rank : Chat GPT가 동영상에 점수를 부여한 데이터를 저장하는 테이블
search_text : 사용자의 검색어만 저장하는 테이블
video_list : 동영상 정보 저장 테이블
Web Page
main
배경은 다양한 도형이 움직이는 애니메이션 배경이며 좌측 큰 박스의 메뉴에 마우스를 hover하면 불투명으로 바뀌면서 배경과 폰트 색상이 변경됩니다.
우측에는 현재 DB에 저장되어 있는 동영상의 총 갯수가 출력됩니다.
List Search
DB에 저장되어 있는 동영상의 정보를 볼 수 있고 Pagenation으로 데이터 가독성을 높이고 검색어 기준으로 상단의 검색창을 통해 검색할 수 있습니다.
헤더 부분 우측에 있는 ADD 버튼으로 키워드를 입력하여 새로운 키워드에 대해 동영상을 추가 수집할 수 있습니다.
Rank
특정 키워드에 대한 상위 10개의 동영상을 확인할 수 있는 페이지 입니다.
Like = 특정 키워드에 대한 동영상의 좋아요 순위
View = 특정 키워드에 대한 동영상의 조회수 순위
Grade = 특정 키워드에 대한 동영상에 Chat GPT 가 부여한 점수 순위
예시
아이폰15에 대한 좋아요 수 상위 영상
아이폰15에 대한 조회수 상위 영상
아이폰15에 대한 GPT점수 상위 영상
좋아요와 조회수에 대한 동영상 순위 차이는 크게 다르지 않지만, GPT 점수 순위는 크게 달라지는 것을 볼 수 있습니다.
추후 계획
일단, 기능 구현에만 신경을 쓰다보니 디자인, 특히 사용자 편의성을 위해 UI/UX 개편이 필요하다고 계속 느낍니다..
UI/UX 개편과 함께 제목, 키워드 검색 뿐만 아니라 다양한 기준의 검색 기능을 추가하고자 합니다.
그리고 jquery나 Javascript 파일이 딱히 길지 않고 html에서 script태그로 작성했는데 개인적인 불편함은 없지만 따로 분리를 할까 합니다.
'IT KNOWLEDGE' 카테고리의 다른 글
RAG에서의 Embedding과 Vector (1) | 2023.12.22 |
---|---|
SVG 파일 넌 누구니? (1) | 2023.12.22 |
NLP, NLU, NLG (0) | 2023.11.24 |
Chart.js로 데이터 시각화 하기 (0) | 2023.11.21 |
OOM(Out Of Memory) (1) | 2023.11.20 |
댓글