[React.js+DJANGO] 웹페이지 만들기 1. 소개

프로젝트 소개 : 하늘 사진을 통한 태양광 발전량 예측 모델 웹 서비스 

참여인원 (총 6명) - [github ID]

- 데이터 분석 (2명) : sosomm20141212(PL), damhyang

- 프론트앤드 (2명)  :  whrkdud, SSunkist

- 풀스택 (2명)  :  notrowing, kty0910

 

필요기능

- 메인 페이지 : 사진 업로드 페이지 이동 , 프로젝트 간단 소개 

- 사진 업로드 페이지 : 사진 업로드 , 사진 변경 (어안렌즈 필터) 사이트 이동 버튼

- 결과 페이지 : 카테고리 별 일사량 도출, 생산되는 에너지를 건전지 개수로 도출

 

아쉬웠던 부분

- 모델 재학습을 위해 DB를 연결하고자 하였으나 짧은 기간으로 실행하지 못함

- 이미지 어안 필터 기능 제공을 외부사이트가 아닌 우리가 제공하지 못한점

- 로그인 기능을 활용하여 자신이 입력한 사진의 결과와 기록을 볼 수 있게 하고 싶음

- 하늘 사진 이외의 다른 이미지 업로드가 불가하게 하고싶음

- 맑은 밤하늘의 사진을 맑은 하늘이라고 인식하는 점

 

💚나의 역할 : Full-Stack 💚

 

- 메인페이지

 

• FullPageScroll.js : 풀페이지 스크롤 기능 
  • 전체 페이지가 스크롤 되는 기능 

• 하늘 백그라운드 애니메이션 
  • 이미지를 축소하고 확대하는 애니메이션을 삽입해 실제 하늘이 이동하는 것 처럼 보이게 함
• Header.js
  •  프로젝트의 로고를 제시함
• Footer.js 
  • 깃허브 주소 및 팀원의 아이디 기재

- 사진 업로드 페이지 : CSS (기여도 100%)

• Selectpicture.js 
  • 사진 입력 : 클릭 및 드로그앤 드롭 입력 가능 하도록 작성함

    

    사진 업로드 페이지

  • 이미지 파일 입력시 image 관련 확장자가 아니면 alert 표시로 "파일의 형식을 확인해주세요" 발생
  • 이미지 파일 입력시 jpg , 1500너비의 1500높이로 입력되도록 이미지를 정제함
  • sessionStorage를 사용하여 사진 입력시 미리보기 기능을 제공함
  • 사진 입력이 되어있다면 (uploadedInfo에 정보가 null 이 아니라면) 미리보기 이미지와 함께 이미지 하단의 결과보기 버튼을 제시하였음
• Inputpicture.js
  • 사진 파일 입력 방식에 대한 설명을 작성함
  • 어안렌즈로 촬영된 하늘 사진이 결과의 정확도를 높여주므로 어안렌즈 사진으로 변경할 수 있는 사이트를 버튼에 연결하여 제시하였음

 

 

 

- 결과페이지 : CSS (기여도 100%)

 

•  Result.js
  • 충전가능한 건전지의 개수 범위를 계산하여 제시함
  • 입력된 사진의 일사량 범위를 계산하여 나타냄
  • 데이터셋의 유사한 데이터의 사진을 함께 제시함

 

사용 DataSet

🔎Kaggle "Solar Energy Forecasting using Low-Res Sky Images" https://www.kaggle.com/datasets/maksboralessa/solar-energy-forecasting-using-low-res-sky-images

Solar Energy Forecasting using Low-Res Sky Images

 

메인 화면의 동작은 다음과 같습니다.

 

사진 업로드 및 결과 동작은 다음과 같습니다! 

 

맡았던 부분에 대한 설명은 다음 게시물로 이어집니다. 

팀프로젝트 관련 자료는 아래 깃헙 링크를 확인해주세요! 

 

[링크]

https://github.com/sosomm20141212/Sky_to_Solar

GitHub - sosomm20141212/Sky_to_Solar: KepcoA Sprint II 1조 / 하늘사진을 통한 태양광 에너지 생산량 예측 딥