ECO-WEB

Eco-web v1.0

정부/ 공공기관 웹사이트 저전력 웹페이지 구축 서비스
개발기간: 2024.09 ~ 2024.11

배포주소

개발 버전 : [http://carbonara.kr:5000)

Team Info

고병수	허세진	한동규

@eclipse1228	@jelly1500	@dongkyu20
동아대학교 컴퓨터공학과 3학년	동아대학교 컴퓨터공학과 3학년	동아대학교 컴퓨터공학과 3학년

프로젝트 소개

웹사이트의 탄소 배출량을 측정하고 평가하여 필요시 탄소저감 솔루션을 제공하는 서비스입니다. 현재 공공기관과 정부를 대상으로 서비스를 제공할 예정이며, LLM과 ML 기술을 통해 코드와 이미지를 각각 최적화하여 제공합니다.

시작 가이드

Requirements

For building and running the application you need:

Python 3.10.12
Lighthouse 9.1.1
other libraries in requirements.txt

Installation

github repo

$ git clone https://github.com/CarbonAra-CBA/ecoweb.git
$ cd ecoweb

ollama & llm

install ollama -> https://ollama.com/

$ ollama pull llama3.2:latest

Backend

$ cd ecoweb/app
$ python -m venv venv
$ source venv/bin/activate
$ pip install -r requirements.txt

Node.js & gulp 설치

Node.js 설치(20 버전 이상 설치 필수) -> https://nodejs.org/en
gulp cli 설치

$ npm install --global gulp-cli

실행 명령어

$ python run.py

Stacks

Environment

Config

Development

Cloud

Communication

화면 구성

메인 페이지

탄소배출량 페이지

정밀분석 페이지

코드 최적화 페이지

이미지 최적화 페이지

인증마크 생성 페이지

주요 기능

⭐️ 탄소발자국 분석, 계산

Scratch, Python 2개 강좌 및 각 강좌마다 10개 가량의 강의 영상 제공
추후 지속적으로 강좌 추가 및 업로드 예정

⭐️ 공기관 별 비교분석

웹 표준에 의거한 분류, 빅데이터에 의거한 분류
시뮬레이션 (Before & After)

⭐️ 솔루션(ML-Classification, LLM Code spliting )

머신러닝 분류 모델 제공
코드 스플리팅 모델 제공

아키텍쳐

핵심 기능

웹사이트 탄소 배출량 분석
- 사용자에게 입력받은 URL을 기반으로 해당 웹페이지의 탄소 배출량을 분석합니다. 웹 페이지의 데이터를 수집하고 이를 탄소 배출량 수치로 환산합니다.
사용자 결과 피드백
- 사용자가 URL을 입력하면 분석이 시작되며, 분석이 완료되면 탄소 배출량 결과를 사용자에게 즉시 제공합니다.
탄소 배출 등급확인
- 웹사이트의 탄소 배출량을 특정 등급으로 분류하여, 사용자에게 해당 웹페이지가 환경에 미치는 영향을 이해할 수 있도록 이해하기 쉽게 안내합니다.
평균 대비 위치 확인 기능
- 분석된 탄소 배출량을 다른 웹사이트와 비교하여 평균 대비 현재 위치를 사용자에게 보여줍니다. 이를 통해 사용자가 자신의 웹사이트가 어느 정도의 환경 영향을 미치는지 시각적으로 파악할 수 있습니다.
SVG 그래픽 활용
- 에너지 소비 및 탄소 배출량의 시각적 표현을 위해 SVG 그래픽을 사용하여 데이터 시각화를 최적화하고, 이미지 사용을 최소화하여 환경 친화적인 웹 페이지 구현을 목표로 합니다.
친환경 웹 디자인(지속가능한 웹 디자인) 원칙 준수
- 사이트의 전반적인 디자인과 구조는 친환경 웹 디자인 원칙에 맞추어 최소한의 에너지를 소비하도록 최적화되어 있습니다.

동작방식(로직 순서)/데이터 흐름

User가 분석하고 싶은 URL을 사용자 요청 서버에게 전달
전달받은 URL을 Google Lighthouse로 분석
Google Lighthouse 분석 결과를 사용자 요청 서버와 MongoDB에 전달
사용자 요청 서버에서 최적화 서버에 URL을 전달
최적화 서버에서 URL을 토대로 가져온 웹페이지 코드를 Llama3에게 전달
웹페이지 코드를 Llama3가 읽고 W3C 지속가능한 웹개발 가이드라인 준수 여부를 보고서로 작성하고 최적화 서버에 전달
최적화 서버에서 웹페이지 파일 구조와 코드를 구문 분석 도구에 입력으로 전달
구문 분석 도구는 입력 코드를 AST 형식으로 만든 다음 최적화를 진행, 그 결과를 최적화 서버에 전달
최적화 서버에서 URL을 토대로 가져온 이미지들을 이미지 최적화 모델에게 전달
이미지들을 분류하고 최적화한 이미지 파일들과 절감 수치를 최적화 서버에게 전달
최적화 서버에서 사용자 요청 서버에게 가이드라인 보고서, 최적화된 코드 파일, 최적화된 이미지 파일을 전달
사용자 요청 서버는 탄소배출량 계산값, W3C 지속가능한 웹개발 가이드라인 보고서, 압축된 코드, 최적화된 이미지 파일을 User에게 전달

프로젝트 목표

저희의 목표는 공공부문의 디지털 탄소량을 50% 저감을 목표입니다. 이 목표를 달성하게 된다면 7,342대의 자동차가 한 달간 배출하는 탄소배출량을 절감할 수 있습니다!

사용자 뱃지 시스템 동작방식

주의할 점 :

데이터 전송 및 서버 부하를 줄이기 위해 배지는 사용자의 기기에 결과를 캐시하고 배지가 삽입된 각 페이지에 대해 하루에 최대 한 번만 API를 호출합니다. 즉, 사이트를 점진적으로 개선하는 경우 결과가 변경될 때까지 기다려야 합니다.
배지의 캐시 타이밍은 이 웹사이트의 캐시와 다르므로 배지와 웹사이트는 해당 테스트가 수행된 시간에 따라 다른 결과를 표시할 수 있습니다.

디렉토리 구조

├───── README.md
│       
├───── ecoweb
|       ├───── app (Flask server)
|       │       ├───── templates   
|       │       ├───── routes.py   (Flask 라우팅)
|       │       ├───── static      
|       │       ├───── __init__.py 
|       │       ├───── config.py   
|       │       ├───── utils       
|       │       ├───── data        (crawling data)
|       │       ├───── lighthouse  (LightHouse code)
|       │       ├───── services    (service code)
|       │       ├───── run.py      (execute Flask)
├───── urls        (url list)
├───── report.json (LightHouse result)
├───── venv        (virtual environment)
├───── virtualenv.md (virtual environment setting)
├───── __init__.py

# .gitignore 
venv/
linux_venv/
node_modules/
ecoweb/app/Image_Classification/image_classifier_model_6.h5
ecoweb/images/
images/
ecoweb_images/

Files

README.md

Latest commit

History