# data[].attributes.body
1. 역량진단평가 시스템 접속

2. 그룹코드 87274P

3. 개인아이디 순서대로 입력

4. 빨강파랑 로고선택

5. 역량진단평가 선택 후, 진행

# data[].attributes.body
제목 : 자기이름

내용 : 웹앱 링크

# data[].attributes.body
share.gemini.google/EAIjNnk9xYjf

# data[].attributes.body
function doPost(e) {

try {

var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

var data = JSON.parse(e.postData.contents);

// 첫 행에 헤더가 없는 경우 자동으로 생성합니다.

if (sheet.getLastRow() === 0) {

sheet.appendRow(["ID", "작성일자", "제안자 이름", "학교 및 학년", "분야(카테고리)", "아이디어 제목", "상세 내용", "공감(좋아요) 수", "진행 상태"]);

}

// 신규 아이디어 행 추가

sheet.appendRow([

data.id || new Date().getTime(),

data.date || new Date().toLocaleDateString(),

data.author,

data.school,

data.category,

data.title,

data.content,

data.likes || 1,

data.status || "검토 진행 중"

]);

return ContentService.createTextOutput(JSON.stringify({ result: "success" }))

.setMimeType(ContentService.MimeType.JSON);

} catch (err) {

return ContentService.createTextOutput(JSON.stringify({ result: "error", error: err.toString() }))

.setMimeType(ContentService.MimeType.JSON);

}

}

# data[].attributes.body
share.gemini.google/hxE26SAOncFl

# data[].attributes.body
제목 : 자기이름

내용 : 웹앱 링크

# data[].attributes.body
(페르소나지정) 너는 웹앱을 전문으로 개발하고 그래픽을 고급스럽게 디자인 할 줄 아는 프로그래머야.

(목적) 입력으로 사용자의 현재 위치를 받으면, ai모델이 해당 지역이 열섬 현상이 일어나는 지역인지 판단하는 서비스를 수행해서 열섬현상이 발생한 지역의 경우 가까운 대피소나 행동 요령을 시각적으로 알아보기 쉽게 출력되도록 하는 웹앱을 만들고싶어.

(단계별요펑)

첫번째로 입렵으로 사용자의 현재 위치를 받았을 때, 전체적인 지도에서부터 세밀한 정밀지도의 위치가 표시되어 위치파악이 시각적으로 표현될 수 있도록 하고,

두번째로는 그 지역의 당일 온도, 습도, 조도 등의 날씨 정보를 확인하여 표시하며,

세번째로는 날씨정보와 열섬현상의 알맞은 가까운 대피소와 행동요령 등을 시각적으로 알아보기 쉽게 표시해주는 웹앱을 만들고싶어.

(첨부자료) 전체적인 화면배치는 내가 첨부한 이미지를 참고해줬음 좋겠어.

(전체적인 화면의 분위기) 다크/네온 스타일로 하되 데이터들은 명확하고 눈에 알아보기 쉬운 형태로 디자인 하고싶어.

# data[].attributes.body
(프르소나):너는 웹앱을 전문으로 개발하고, 그래픽을 고급스럽게 디자인 할 수 아는 프로그래머야

(목적):입력으로 사용자의 현재 위치를 받으면, ai모델이 해당지역이 열섬현상이 일어나는지역인지 판단하는 서비스를 수행해서 열섬현상이 발생한 지역의 경우, 가까운 대피소나 행동요령을 시각적으로 알아보기 쉽게 출력되도록 하는 웹앱을 만들고 싶어.

(단계별 요청)

첫번째로는 입력으로 사용자의 현재 위치을 받았을때, 전체적인 지도예서부터 세밀한 정밀지도의 위치가 표시되어 위치 파악이 시각적으로 표현될 수 있도록 하고,

두번째로는 그 지역의 당일 온도, 습도, 조도 등의 날씨정보을 확인하여, 표시하며

셋번째로는 날씨정보와 열섬현상에 알맞은 가까운 대피소와 행동용요령들을 시각적으로 알아보기 쉽게 표시해주는 웹앱을 만들고 싶어.

(첨부자료)전체적인 화면 배치는 내가 첨부한 이미지를 참고 해줬으면 좋겠어,

(전체적인 화면의 분위기)모던하면서 미니멀리즘스타일로 만들되, 데이터들은 정확하고, 명확하게 한 눈에 알아보기 쉬운형태로 디자인하고 싶어

# data[].attributes.body
(페르소나) 너는 웹앱을 전문으로 개발하고, 그래픽을 고급스럽게 디자인 할줄 아는 프로그래머야.

(목적)입력으로 사용자의 현재 위치를 받으면, AI모델이 해당지역이 열섬현상이 일어나는 지역인지 판단하는 서비스를 수행해서 열섬현상이 발생한 지역의 경우, 가까운 대피소나 행동요령을 시각적으로 알아보기 쉽게 출력하는 웹앱을 만들고 싶어.

(단계별 요청)

첫번째로 입력으로 사용자의 현재위치를 받았을때, 전체적인 지도에서 부터 세밀한 정밀지도의 위치가 표시되어 위치파악이 시각적으로 표현될 수 있도록 하고,

두번째로는 그 지역의 당일 온도, 습도, 조도 등의 날씨정보를 확인 하여 표시하며,

세번째로는 날씨정보와 열섬현상에 알맞은 가까운 대피소와 행동요령 등을 시각적으로 알아보기 쉽게 표시해주는 웹앱을 만들고 싶어.

(첨부 자료) 전체적인 화면 배치는 내가 첨부한 이미지를 참고 해줬으면 좋겠어.

(전체적인 화면 분위기)다크 모드 & 네온 바이보 (Dark Mode & Cyberpunk/Neon)하고 클레이모피즘 (Claymorphism)한 스타일로 만들되, 데이터들은 정확하고 한 눈에 알아보기쉬운 형태로 디자인 하고 싶어.

# data[].attributes.body
(프르소나):너는 웹앱을 전문으로 개발하고, 그래픽을 고급스럽게 디자인 할 수 아는 프로그래머야

(목적):입력으로 사용자의 현재 위치를 받으면, ai모델이 해당지역이 열섬현상이 일어나는지역인지 판단하는 서비스를 수행해서 열섬현상이 발생한 지역의 경우, 가까운 대피소나 행동요령을 시각적으로 알아보기 쉽게 출력되도록 하는 웹앱을 만들고 싶어.

(단계별 요청)

첫번째로는 입력으로 사용자의 현재 위치을 받았을때, 전체적인 지도예서부터 세밀한 정밀지도의 위치가 표시되어 위치 파악이 시각적으로 표현될 수 있도록 하고,

두번째로는 그 지역의 당일 온도, 습도, 조도 등의 날씨정보을 확인하여, 표시하며

셋번째로는 날씨정보와 열섬현상에 알맞은 가까운 대피소와 행동용요령들을 시각적으로 알아보기 쉽게 표시해주는 웹앱을 만들고 싶어.

(첨부자료)전체적인 화면 배치는 내가 첨부한 이미지를 참고 해줬으면 좋겠어,

(전체적인 화면의 분위기)클레이모피즘에 파스텔 톤에 소프트톤으로 만들되, 데이터들은 정확하고, 명확하게 한 눈에 알아보기 쉬운형태로 디자인하고 싶어

# data[].attributes.body
(페르소나) 너는 웹앱을 전문으로 개발하고, 그래픽을 고급스럽게 디자인할 줄아는 프로그래머야.

(목적) 입력으로 사용자의 현재위치를 받으면, AI모델이 해당지역이 열섬현상이 일어나는지역인지 판단하는 서비스를 수행해서 열섬현상이 발생한 지역의 경우, 가까운 대피소나 행동요령을 시각적으로 알아보기 쉽게 출력되도록 하는 웹앱을 만들고 싶어.

(단계별요청)

첫번째로 입력으로 사용자의 현재위를 받았을때, 전체적인 지도에서부터 세밀한 정밀지도의 위치가 표시되어 위치파악이 시각적으로 표현될 수 있도록 하고,

두번째로는 그 지역의 당일 온도,습도,조도 등의 날씨정보를 확인하여 표시하며,

세번째로는 날씨정보와 열섬현상에 알맞은 가까운 대피소와 행동요령 등을 시각적으로 알아보기 쉽게 표시해주는 웹앱을 만들고 싶어

(첨부자료) 전체적인 화면배치는 내가 첨부한 이미지를 참고해줬으면 좋겠어.

(전체적인 화면의 분위기) 미니멀리즘 스타일로 만들되, 데이터들은 정확하고, 명확하게 한 눈에 알아보기 쉬운 형태로 디자인하고 싶어

# data[].attributes.body
(페르소나지정)너는 웹앱을 전문으로 개발하고, 그래픽을고급스럽게디자인할줄아는프로그래머야

(목적)입력으로 사용자의 위치를 받으면, Al모델이 해당지역이 열섬현상이 일어나는 지역인지 판단하는 서비스를 수행해서 열섬현상이 발생한 지역의 경우, 가까운 대피소나 행동요령을 시각적으로 알아보기쉽게 출력되도록 하는 웹앱을 만들고 싶어

(단계별요청)

첫번째로 입력으로 사용자의 현재위치를 받았을때, 전체적인 지도에서 세밀한 정밀지도의 위치가 표시되어 위치파악이 시각적으로 표현할 수 있도록 하고,

두번째로는 그 지역의 당일 온도, 습도, 조도 등의 날씨정보를 확인하여 표현하며,

세번째로는 날씨정보와 열섬현상에 알맞은 가까운 대피소와 행동요령 등을 시각적으로 알아보기 쉽게 표시해주는 웹앱을 만들고 싶어.

(첨부자료)전체적인 화면배치는 내가 첨부한 이미지를 참고해줬으면 좋겠어.

(전체적인 화면의 분위기)모던하고 하이테크 스타일로 만들되, 데이터를 정확하고,명확하게 한 눈에 알아보기 쉬운 형태로 디자인하고 싶어

# data[].attributes.body
(페르소나지정) 너는 웹앱을 전문으로 개발하고 그래픽을 고급스럽게 디자인 할 줄 아는 프로그래머야.

(목적) 입력으로 사용자의 현재 위치를 받으면, ai모델이 해당 지역이 열섬 현상이 일어나는 지역인지 판단하는 서비스를 수행해서 열섬현상이 발생한 지역의 경우 가까운 대피소나 행동 요령을 시각적으로 알아보기 쉽게 출력되도록 하는 웹앱을 만들고싶어.

(단계별요펑)

첫번째로 입렵으로 사용자의 현재 위치를 받았을 때, 전체적인 지도에서부터 세밀한 정밀지도의 위치가 표시되어 위치파악이 시각적으로 표현될 수 있도록 하고,

두번째로는 그 지역의 당일 온도, 습도, 조도 등의 날씨 정보를 확인하여 표시하며,

세번째로는 날씨정보와 열섬현상의 알맞은 가까운 대피소와 행동요령 등을 시각적으로 알아보기 쉽게 표시해주는 웹앱을 만들고싶어.

(첨부자료) 전체적인 화면배치는 내가 첨부한 이미지를 참고해줬음 좋겠어.

(전체적인 화면의 분위기) 3D느낌이 나며 찰흙같은 렌더링을 넣되 색은 밝은 색으로 해주며 데이터들은 명확하고 눈에 알아보기 쉬운 형태로 디자인 하고싶어.

# data[].attributes.body
(페르소나지정)너는 웸앱을 전문으로 개발하고, 그래픽을 고급스럽게디자인할 줄 아는 프로그래머야.

(목적)입력으로 사용자의 현재위치를 받으면, AI모델이 해당지역이 열섬현상이 일어나는지역인지 판단하는 서비스를 수행해서 열섬현상이 발생한 지역의 경우, 가까운 대피소나 행동요령을 시각적으로 알아보기 쉽게 출력되도록 하는 웹앱을 만들고 싶어.

(단계별요청)

첫번째로 입력으로 사용자의 현재위치를 받았을때, 전체적인 지도에서부터 세밀한 정밀지도의 위치가 표시되어 위치파악이 시각적으로 표현될 수 있도록 하고,

두번째로는 그 지역의 당일 온도,습도,조도 등의 날씨정보를 확인하여 표시하며,

세번째로는 날씨정보와 열섬현상에 알맞은 가까운 대피소와 행동요령 등을 시각적으로 알아보기 쉽게 표시해주는 웹앱을 만들고 싶어

(첨부자료) 전체적인 화면배치는 내가 첨부한 이미지를 참고해줬으면 좋겠어.

(전체적인 화면의 분위기)모던하고 하이테크스타일로 만들되, 데이터들은 정확하고, 명확하게 한 눈에 알아보기 쉬운 형태로 디자인하고 싶어

# data[].attributes.body
(페르소나지정) 너는 웹앱을 전문으로 개발하고, 그래픽을 고급스럽게 디자인할 줄아는 프로그래머야.

(목적) 입력으로 사용자의 현재위치를 받으면, AI모델이 해당지역이 열섬현상이 일어나는지역인지 판단하는 서비스를 수행해서 열섬현상이 발생한 지역의 경우, 가까운 대피소나 행동요령을 시각적으로 알아보기 쉽게 출력되도록 하는 웹앱을 만들고 싶어.

(단계별요청)

첫번째로 입력으로 사용자의 현재위치를 받았을때, 전체적인 지도에서부터 세밀한 정밀지도의 위치가 표시되어 위치파악이 시각적으로 표현될 수 있도록 하고,

두번째로는 그 지역의 당일 온도,습도,조도 등의 날씨정보를 확인하여 표현하며,

세번째로는 날씨정보와 열섬현상에 알맞은 가까운 대피소와 행동요령 등을 시각적으로 알아보기 쉽게 표시해주는 웹앱을 만들고 싶어

(첨부자료) 전체적인 화면배치는 내가 첨부한 이미지를 참고해줬으면 좋겠어.

(전체적인 화면의 분위기) 모던하고 하이테크 스타일로 만들되, 데이터들은 정확하고, 명확하게 한 눈에 알아보기 쉬운 형태로 디자인하고 싶어

# data[].attributes.body
(페르소나) 너는 웹앱을 전문으로 개발하고 그래픽을 고급스럽게 디자인 할줄 아는 프로그래머야.

목적. 입력으로 사용자의 현재 위치를 받으면 AI모델이 해당지역이 열섬 현상이 일어나는 지역인지 판단하는 서비스를 수행해서 열섬 현상이 발생한 지역의 경우 가까운 대피소나 행동요령을 시각적으로 알아보기 쉽게 출력되도록 하는 웹앱을 만들고 싶어.

단계별 요청

첫번째로 입력으로 사용자의 위치를 받았을 때, 전체적인 지도에서 부터 세밀한 정밀지도의 위치가 표시되어 위치파악이 시각적으로 표현할 수 있도록 하고,

두번째로는 그 지역의 당일 온도, 습도, 조도 등의 날씨 정보를 확인하여 표현하며,

세번째로는 날씨정보와 열섬현상이에 알맞은 가까운 대피소와 행동요령 등을 시각적으로 알아보기 쉽게 표시해주는 웹앱을 만들고 싶어.

(첨부자료) 전체적인 화면 배치는 내가 첨부한 이미지를 참고해주면 좋겠어.

전체적인 화면의 분위기. 글래스모피즘하고 네오 브루탈리즘한 스타일로 만들고 데이터는 정확하고 명확하게 한눈에 알아보기 쉬운 형태로 디자인 하고싶어

# data[].attributes.body
[페르소나] 너는 웹 앱을 전문으로 개발하고 그래픽을 고급스럽게 디자인할 줄 아는 프로그래머야.

[목적] 입력으로 사용자의 현재위치를 받으면 ai모델이 해당 지역이 열섬 현상이 일어나는 지역인지 판단하는 서비스를 수행해서 열섬현상이 발생한 지역의 경우, 가까운 대피소나 행동요령을 시각적으로 알아보기 쉽게 출력되도록 하는 웹앱을 만들고 싶어.

[단계별 조건]

1. 입력으로 사용자의 현재위치를 받았을 때, 전체적인 지도에서 부터 세밀한 정밀지도의 위치가 표시되어 위치파악이 시각적으로 표현될 수 있도록 한다. 이때 시각적으로 표현되는 것은 만 5세 이하의 아이 또한 이해할 수 있는 지도여야 한다.

2. 그 지역의 당일 온도, 습도, 조도 등의 날씨 정보를 확인하여 표시하며

3. 날씨정보와 열섬현상이 알맞은 가까운 대피소와 행동요령 등을 시각적으로 알아보기 쉽게 표시해주는 웹앱을 만들고 싶다. 이때는 위와 같은 시각자료는 만 5세 이하의 아이또한 이해할 수 있는 시각자료여야 한다.

[첨부자료] 전체적인 화면 배치는 내가 첨부한 이미지를 참고해줬으면 좋겠어.

전체적인 분위기는 뉴모피즘,파스텔&소프트톤,유로모피즘 스타일로 만들되 데이터들은 정확하게 명확하게 시각자료에서 한 눈에 알아보기 수월한 형태로 디자인하고 싶어.

# data[].attributes.body
(목적) 학교 열섬현상 데이터를 분석하는 중학생용 웹 대시보드를 만들고 싶어.

(디자인 화면구성조건)

1.상단-프로젝트 제목이 있어야 함.

2.중앙-각 장소별 온도와 조도 그래프, 오른쪽에는 열섬 가능성이 높은 장소 목록이 표시되어야 함.

3.하단-학생들이 해결 아이디어를 적는 게시판영역을 배치하고 싶음.

# data[].attributes.body
목적:학교 열섬현장 데이터르 분석하는 중학생용 웹 대시보드를 만들고 싶어.

디자인 화면 구성 조건:

1. 상단-프로젝트 제목이 있어야 함.

2. 중앙-각 장소별 온도와 조도 그래프, 오른쪽에는 열섬 가성이 높은 장소 목록이 표시되어야 함.

3. 하단-학생들이 해결 아이디어를 적는 게시판영역을 배치하고 싶음.

# data[].attributes.body
목적: 학교 열섬 현상 데이터를 분석하는 중학생용 웹 대시보드를 만들고 싶어.

(디자인 화면 구성조건)

1. 상단-프로젝트 제목이 있어야 함

2. 중앙-각 장소별 온도와 조도 그래프, 오른쪽에는 열섬 가능성이 높은 장소목록이 표시되어야 함.

3. 하단-학생들이 해결 아이디어를 적는 게시판 영역을 배치하고 싶음

# data[].attributes.body
학교 열섬 현상 데이터를 분석하는 중학생용 웹 대시보드를 만들고 싶어.(목적)

(디자인 화면 구성 조건)

1. 상단-프로젝트 제목이 있어야 함.(중요한 것이니까 밑줄과 굵은 글씨로 부각되게 해야해)

2. 중앙-각 장소별 온도와 조도 그래프, 오른쪽에는 열섬 가능성이 높은 장소 목록이 표시되어야 함.(잘 보이는 색상으로 그려줘)

3. 하단-학생들이 해결 아이디어를 적는 게시판영역을 배치하고 싶음.

# data[].attributes.body
(목적 ) 학교 열섬현상 데이터를 분석하는 중학생용 웹 대시보드를 만들고 싶어.

(디자인 화면구성조건)

1.상단-프로젝트 제목이 있어야 함.

2-중앙-각 장소별 온도와 조도 그래프,오른쪽에는 열섬 가능성이 높은 장소 목록이 표시되어야 함.

3.하단-학생들이 해결 아이디어를 적는 게시판영역을 배치하고 싶음.

# data[].attributes.body
목적:학교 열섬 현상 데이터를 분석하는 중학생용 웹 대시보드를 만들고 싶어.

(디자인 화면구성조건)

1.상단-프로젝트 제목이 있어야 함.

2.중앙-각 장소별 온도와 조도 그래프, 오른쪽에는 열섬 가능성이 높은 장소 목록이 표시되어야함.

3.하단-학생들이 해결 아이디어를 적는 게 게시판영역을 배치하고 싶음

# data[].attributes.body
목적. 학교 열섬현상 데이터를 분석하는 중학생용 웹 대시보드를 만들고 싶어.

디자인 화면 구성 조건

1. 상단 프로젝트 제목이 있어야 함.

2. 중앙 각 장소별 온도와 조도 그래프, 오른쪽에는 열섬 가능성이 높은 장소 목록이 표시되어야 함.

3. 하단 학생들이 해결 아이디어를 적는 게시판 영역을 배치하고 싶음.

# data[].attributes.body
(목적) 학교 열섬현상데이터를 분석하는 중학생용 웹 대시보드를 만들고 싶어.

(디자인 화면 구성 조건)

1.상단- 프로젝트 제목이 있어야함.

2.중앙- 각 장소별 온도와 조도 그래프, 오른쪽에는 열섬 가능성이 높은 장고 목록이 표시되어야 함.

3.하단- 학생들이 해결 아이디어를 적는 게시판영역을 배치하고 싶음.

# data[].attributes.body
(목적) 학교 열섬현상 데이터를 분석하는 중학생용 웹 대시보드를 만들고 싶어.

(디자인 화면구성조건)

1.상단-프로젝트 제목이 있어야 함

2.중앙-각 장소별 온도와 조도 그래프, 오른쪽에는 열섬 가능성이 높은 장소 목록이 표시되어야 함.

3.하단-학생들이 해결 아이디어를 적는 게시판영역을 배치하고 싶음.

# data[].attributes.body
(목적) 학교 열섬현상 데이터를 분석하는 중학생용 웹 대시보드를 만들고 싶어.

(디자인 화면구성조건)

1.상단-프로젝트 제목이 있어야 함.

2.중앙-각 장소별 온도와 조도 그래프, 오른쪽에는 열섬 가능성이 높은 장소 목록이 표시되어야 함.

3.하단-학생들이 해결 아이디어를 적는 게시판영역을 배치하고 싶음.

# data[].attributes.body
(목적)학교 열섬 현상 데이터를 분석하는 중학생용 웹 대시보드를 만들고싶어.

(디자인화면구성조건)

1.상단-프로젝트 제목이 있어야 함.

2.중앙-각 장소별 온도와 조도그래프, 오른쪽에는 열섬 가능성이 높은 장소 목록이 표시되어야 함.

3.하단-학생들이 해결 아이디어를 적는 게시판 영역을 배치하고싶음.

# data[].attributes.body
제목 : 자기이름

내용 : 내용

# data[].attributes.body
제목 : 자기이름

내용 : 내용

# data[].attributes.body
제목 : 자기이름

내용 : 웹앱 링크

# data[].attributes.body
제목 : 자기이름

내용 : 웹앱 링크

# data[].attributes.body
제목 : 자기이름

내용 : 이미지

# data[].attributes.body
<div>Teachable Machine Image Model</div>

<button type="button" onclick="init()">Start</button>

<div id="webcam-container"></div>

<div id="label-container"></div>

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script>

<script type="text/javascript">

// More API functions here:

// https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image

// the link to your model provided by Teachable Machine export panel

const URL = "https://teachablemachine.withgoogle.com/models/bE2YuxN-Y/";

let model, webcam, labelContainer, maxPredictions;

// Load the image model and setup the webcam

async function init() {

const modelURL = URL + "model.json";

const metadataURL = URL + "metadata.json";

// load the model and metadata

// Refer to tmImage.loadFromFiles() in the API to support files from a file picker

// or files from your local hard drive

// Note: the pose library adds "tmImage" object to your window (window.tmImage)

model = await tmImage.load(modelURL, metadataURL);

maxPredictions = model.getTotalClasses();

// Convenience function to setup a webcam

const flip = true; // whether to flip the webcam

webcam = new tmImage.Webcam(200, 200, flip); // width, height, flip

await webcam.setup(); // request access to the webcam

await webcam.play();

window.requestAnimationFrame(loop);

// append elements to the DOM

document.getElementById("webcam-container").appendChild(webcam.canvas);

labelContainer = document.getElementById("label-container");

for (let i = 0; i < maxPredictions; i++) { // and class labels

labelContainer.appendChild(document.createElement("div"));

}

}

async function loop() {

webcam.update(); // update the webcam frame

await predict();

window.requestAnimationFrame(loop);

}

// run the webcam image through the image model

async function predict() {

// predict can take in an image, video or canvas html element

const prediction = await model.predict(webcam.canvas);

for (let i = 0; i < maxPredictions; i++) {

const classPrediction =

prediction[i].className + ": " + prediction[i].probability.toFixed(2);

labelContainer.childNodes[i].innerHTML = classPrediction;

}

}

</script>

# data[].attributes.body
제목 : 자기이름

내용 : 자바스크립트 코드

# data[].attributes.attachment_link.description
Train a computer to recognize your own images, sounds, & poses. A fast, easy way to create machine learning models for your sites, apps, and more – no expertise or coding required.

# data[].attributes.body
제목 : 자기이름

내용 : 모델링 링크

# data[].attributes.attachment_link.description
Stitch generates UIs for mobile and web applications, making design ideation fast and easy.

# data[].attributes.body
share.gemini.google/1bCstSO8gbGb

# data[].attributes.body
제목 : 자기이름

내용 : 모델링 링크

# data[].attributes.attachment_link.title
AI동행_중등_사진데이터

# data[].attributes.body
import warnings

import pandas as pd

import numpy as np

import matplotlib.pyplot as plt

import seaborn as sns

from sklearn.model_selection import train_test_split

from sklearn.preprocessing import StandardScaler

from sklearn.linear_model import LogisticRegression

from sklearn.metrics import accuracy_score, classification_report, confusion_matrix, roc_curve, auc

# =====================================================================

# [0] 환경 설정 및 경고 메시지 차단

# =====================================================================

warnings.filterwarnings('ignore')

# =====================================================================

# [1] 데이터 로드 및 전처리 (1번 코드 영역)

# =====================================================================

file_path = "diabetes_dataset.csv"

try:

df = pd.read_csv(file_path)

except FileNotFoundError:

# 실습 및 테스트 시 파일이 없을 경우를 대비한 가상 데이터 생성 로직 (데모용)

print(f"⚠️ '{file_path}' 파일을 찾을 수 없어 데모용 가상 데이터를 생성하여 실행합니다.")

np.random.seed(42)

n_samples = 1000

demo_data = {

'age': np.random.randint(20, 80, n_samples),

'bmi': np.random.uniform(18.5, 40.0, n_samples),

'waist_to_hip_ratio': np.random.uniform(0.7, 1.1, n_samples),

'systolic_bp': np.random.randint(90, 180, n_samples),

'diastolic_bp': np.random.randint(60, 110, n_samples),

'cholesterol_total': np.random.randint(150, 300, n_samples),

'hdl_cholesterol': np.random.randint(30, 80, n_samples),

'ldl_cholesterol': np.random.randint(70, 190, n_samples),

'triglycerides': np.random.randint(50, 300, n_samples),

'glucose_fasting': np.random.randint(70, 200, n_samples),

'glucose_postprandial': np.random.randint(90, 300, n_samples),

'insulin_level': np.random.uniform(5.0, 50.0, n_samples),

'hba1c': np.random.uniform(4.5, 9.0, n_samples),

'diagnosed_diabetes': np.random.choice([0, 1], size=n_samples, p=[0.7, 0.3])

}

df = pd.DataFrame(demo_data)

# 사용할 핵심 변수 및 타겟 지정

features = [

'age', 'bmi', 'waist_to_hip_ratio', 'systolic_bp', 'diastolic_bp',

'cholesterol_total', 'hdl_cholesterol', 'ldl_cholesterol', 'triglycerides',

'glucose_fasting', 'glucose_postprandial', 'insulin_level', 'hba1c'

]

target = 'diagnosed_diabetes'

# 결측치 제거 및 데이터 정제

df_clean = df[features + [target]].dropna()

X = df_clean[features]

y = df_clean[target].astype(int)

# 데이터 분할 (훈련 데이터 70%, 평가 데이터 30%)

X_train, X_test, y_train, y_test = train_test_split(

X, y, test_size=0.30, random_state=42, stratify=y

)

# 데이터 스케일링 (버전 호환성을 위해 DataFrame 구조 직접 유지)

scaler = StandardScaler()

X_train_scaled = pd.DataFrame(

scaler.fit_transform(X_train),

columns=X_train.columns,

index=X_train.index

)

X_test_scaled = pd.DataFrame(

scaler.transform(X_test),

columns=X_test.columns,

index=X_test.index

)

# 로지스틱 회귀 모델 생성 및 학습 (70%의 학습 데이터 사용)

model = LogisticRegression(random_state=42, max_iter=1000)

model.fit(X_train_scaled, y_train)

# 진행 상황 출력

print("=" * 70)

print(" 🎉 [1단계] 모델 학습(Training)이 성공적으로 완료되었습니다!")

print("=" * 70)

print(f" ㆍ 원본 데이터 개수 : {len(df):,}개")

print(f" ㆍ 결측치 제거 후 데이터 : {len(df_clean):,}개")

print(f" ㆍ 학습용 데이터 개수 (70%) : {X_train_scaled.shape[0]:,}개")

print(f" ㆍ 평가용 데이터 개수 (30%) : {X_test_scaled.shape[0]:,}개")

print("=" * 70)

print("💡 모든 버전 호환성을 완벽하게 준수하여 학습을 마쳤습니다.")

print("=" * 70)

print()

# =====================================================================

# [2] 모델 평가 및 시각화 (2번 코드 영역)

# =====================================================================

# 30% 테스트 데이터를 활용하여 예측 수행

y_pred = model.predict(X_test_scaled)

y_pred_proba = model.predict_proba(X_test_scaled)[:, 1] # ROC 커브용 양성(1) 확률 추출

# 콘솔에 텍스트 평가지표 출력 (정확도, 정밀도, 재현율 등)

accuracy = accuracy_score(y_test, y_pred)

print("=" * 70)

print(" 📊 [2단계] 테스트 데이터(30%) 평가 지표 결과")

print("=" * 70)

print(f" 🎯 예측 정확도: {accuracy:.4f} ({accuracy*100:.2f}%)")

print("-" * 70)

print(classification_report(y_test, y_pred, target_names=['Normal (0)', 'Diabetes (1)']))

print("=" * 70)

print()

# 시각화 영역 설정 (혼동 행렬과 ROC 커브를 한눈에 보기 좋게 2분할 배치)

fig, ax = plt.subplots(1, 2, figsize=(14, 5.5))

# --- [시각화 1] 혼동 행렬 (Confusion Matrix) ---

cm = confusion_matrix(y_test, y_pred)

sns.heatmap(

cm, annot=True, fmt='d', cmap='Blues', cbar=False,

xticklabels=['Normal (0)', 'Diabetes (1)'],

yticklabels=['Normal (0)', 'Diabetes (1)'],

ax=ax[0], annot_kws={"size": 14, "weight": "bold"}

)

ax[0].set_title('Confusion Matrix', fontsize=14, pad=15, weight='bold')

ax[0].set_ylabel('Actual (True) Label', fontsize=12)

ax[0].set_xlabel('Predicted Label', fontsize=12)

# 각 칸에 의미(TN, FP, FN, TP)를 나타내는 서브 텍스트 추가

labels = np.array([['TN', 'FP'], ['FN', 'TP']])

for i in range(2):

for j in range(2):

ax[0].text(

j + 0.5, i + 0.75, f"({labels[i, j]})",

ha='center', va='center', color='dimgray', fontsize=10, weight='bold'

)

# --- [시각화 2] ROC 커브 & AUC 점수 ---

# 오타 수정 완료: roc_curve 사용

fpr, tpr, thresholds = roc_curve(y_test, y_pred_proba)

roc_auc = auc(fpr, tpr)

ax[1].plot(fpr, tpr, color='darkorange', lw=2.5, label=f'ROC Curve (AUC = {roc_auc:.4f})')

ax[1].plot([0, 1], [0, 1], color='navy', lw=1.5, linestyle='--', label='Random Guess (0.5)') # 기준선

ax[1].set_xlim([0.0, 1.0])

ax[1].set_ylim([0.0, 1.05])

ax[1].set_xlabel('False Positive Rate (1 - Specificity)', fontsize=12)

ax[1].set_ylabel('True Positive Rate (Sensitivity / Recall)', fontsize=12)

ax[1].set_title('Receiver Operating Characteristic (ROC) Curve', fontsize=14, pad=15, weight='bold')

ax[1].legend(loc="lower right", fontsize=11)

ax[1].grid(True, linestyle='--', alpha=0.5)

plt.tight_layout()

plt.show()

# =====================================================================

# [3] 웹앱 배포용 프롬프트 생성 (3번 코드 영역)

# =====================================================================

# 학습된 모델 및 스케일러 파라미터 추출

weights = model.coef_[0]

intercept = model.intercept_[0]

means = scaler.mean_

stds = scaler.scale_

feature_names = features

print("=" 35 + " COPY BELOW THIS LINE " + "=" 35)

print("[역할] 너는 뛰어난 풀스택 웹 개발자야.")

print("아래 제공된 [로지스틱 회귀 모델 파라미터]를 자바스크립트 수식으로 이식하여, ")

print("서버 없이 로컬 웹브라우저에서 단독으로 당뇨병 발병 확률을 예측해 주는 세련된 HTML/JS 단일 파일 웹앱을 개발해 줘.")

print()

print("### 📋 로지스틱 회귀 모델 파라미터 정보")

# 파라미터 값들을 포맷팅하여 출력

print(f"1. 변수 목록 (Features): {feature_names}")

print(f"2. 가중치 (Weights/Coefficients): {weights.tolist()}")

print(f"3. 절편 (Intercept): {intercept}")

print(f"4. 스케일러 평균 (Scaler Means): {means.tolist()}")

print(f"5. 스케일러 표준편차 (Scaler STDs): {stds.tolist()}")

print('''

### 🛠️ 구현 가이드라인 (JavaScript 구현 로직)

1. 사용자가 웹 화면의 입력 폼에 원본 값(예: BMI에 '25.3')을 입력하면, 자바스크립트 함수가 이 값을 받아 아래 공식으로 먼저 표준화(Standardization)를 해야 함:

Standardized_Value = (Original_Value - Scaler_Mean) / Scaler_STD

2. 표준화된 모든 변수들과 각각의 가중치를 곱하고 절편을 더해 z값을 구함:

z = (Standardized_Value_1 Weight_1) + (Standardized_Value_2 Weight_2) + ... + Intercept

3. 구해진 z값을 시그모이드(Sigmoid) 함수에 대입하여 최종 당뇨병 확률(0 ~ 100%)을 계산함:

Probability = 1 / (1 + Math.exp(-z))

### 🎨 디자인 요구사항

- Bootstrap 또는 Tailwind CSS를 사용하여 현대적이고 깔끔한 대시보드 스타일로 UI를 꾸며줘.

- 당뇨병 고위험군(예: 70% 이상)일 경우 붉은색 경고 디자인, 안전할 경우 녹색 디자인을 직관적으로 보여줘.

- 각 입력 필드 옆에 적절한 단위(세, kg/m², mmHg 등)와 기본 예시값(Placeholder)을 적어줘.

''')

print("=" 35 + " COPY ABOVE THIS LINE " + "=" 35)