개발 관련 기타/ML (15) 썸네일형 리스트형 [ML][React] 나는 솔로 테스트 - 출연하면 나의 이름은? AI 모델 teachable machine (로고 만들기, 다시하기 버튼) - Part 5 작업 과정 1. 로고 만들기 1-1. 로고 사이트 사용해서 로고 이미지 만들기 1-2. 로고 이미지를 AppBar 에 넣기 2. 다시하기 버튼 만들기 2-1. 다시하기 버튼 UI 만들기 2-2. 버튼 누르면 결과화면 없어지고 사진 올리는 화면 보여주기 과정 1. 로고 만들기 1-1. 로고 사이트 사용해서 로고 이미지 만들기 - wix.com 사용 1-2. 로고 이미지를 AppBar 에 넣기 - 관련 코드 const MyNavbar = () => { return ( Home About Contact ); } 과정 2. 다시하기 버튼 만들기 2-1. 다시하기 버튼 UI 만들기 - 관련 코드 {hidden && ( )} // 위 코드는 버튼 보여줄지 말지 정할 때 // 아래 코드는 버튼 UI return ( .. [ML][React] 나는 솔로 테스트 - 출연하면 나의 이름은? AI 모델 teachable machine (카카오톡 공유 개선, 화면 개선) - Part 4 진행 과정 1. 카카오톡 공유 개선 1-1. 공유 이미지 클릭 시 결과 이미지 확대해서 보여주기 1-2. 앱 제목 변경 1-3. 공유 버튼으로 자세히 보기랑 나도 해보기 넣기 2. 화면 개선 2-1. 제목 색상 변경 2-2. 공유 버튼 위치 변경 2-3. 설명 색상 변경 2-4. 로딩 동그라미 여백 2-5. 업로드 버튼 색상 2-6. 컬러 테마 설정 1. 카카오톡 공유 개선 1-1. 공유 이미지 클릭 시 결과 이미지 확대해서 보여주기 방법: - 공유 메시지 내 접속 URL에 이미지 URL을 get paramter로 추가 // ... .then(function(response) { var prob = Math.round(props.result[0]["probability"] * 100).toString().. [ML][React] 나는 솔로 테스트 - 출연하면 나의 이름은? AI 모델 teachable machine (카카오톡 공유 javascript sdk) - Part 3 현재까지 진행 완료 된 사항 1. 결과화면을 html2canvas 이용하여 이미지로 추출 2. 추출된 이미지를 서버에 임시 hosting 작업 과정 3. 카카오톡 공유 (javascript sdk) 3-1. 공유 버튼 넣기 3-2. 공유 버튼 기능 테스트 과정 3. 카카오톡 공유 (javascript sdk) 3-1. 공유 버튼 넣기 - container 생성 후 제공되는 createDefaultButton 호출하면된다 - 내 사이트에 적용 문제 발생: createDefaultButton 누르기 전 이미지가 업로드되어 createDefaultButton 시 set되는 url이 이미 생성되어있어야함. 하지만 버튼을 그리기 위해서는 createDefaultButton이 먼저 호출되어야함. Workaround.. [ML][React] 나는 솔로 테스트 - 출연하면 나의 이름은? AI 모델 teachable machine (html2canvas, 이미지 hosting) - Part 2 현재까지 진행된 상황 - 나는 솔로 이름 테스트 할 이미지 업로드 - 업로드된 이미지를 teachable machine 을 사용하여 분석 - 분석 결과 나오면 결과화면으로 출력 작업 목적 - 결과화면을 카카오톡 공유를 통해서 공유 - 이때, 카카오톡 공유 할 때 이미지 주소를 넣게 되어있음 - 이때, 결과를 이미지로 만들어서 이미지로 넣고 - 카카오톡 공유 할 때 클릭 시 이동할 주소를 넣을 수 있는데 - 이때, 이동할 주소로 자신도 테스트 할 수 있도록 나는 솔로 테스트 주소 넣을 예정 작업 과정 1. 결과화면을 html2canvas 이용하여 이미지로 추출 2. 추출된 이미지를 서버에 hosting 3. 카카오톡 공유 (part 3) 과정 1. 결과화면을 html2canvas 이용하여 이미지로 추출 현.. [ML] 나는 솔로 테스트 - 출연하면 나의 이름은? AI 모델 teachable machine (reactjs, mui) - Part 1 과정: - 모델 생성 - 화면 기획 - 화면 구현 - 모델 연결 - 결과 뿌리기 모델 생성: - https://teachablemachine.withgoogle.com/ 사용 화면 기획: - figma 사용 화면 구현: - reactjs - mui 모델 연결: - https://teachablemachine.withgoogle.com/ 예제 코드 사용 결과 뿌리기: - linear progress (mui) 소스코드: import './App.css'; import * as React from 'react'; import {useState} from 'react'; import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; impor.. React) [주소 검색] 서울 빌라 적정 월세 구하기 react-daum-postcode (mobile, responsive) - part 1 기획: 1. figma 작성 - 기본 틀만 그림 - 기본 글자만 적음 - 1차적으로 모바일만 - 데스크탑은 모바일에서 조금 변형해서 구현 예정 (responsive) 2. 이미지 설명: - title이 있음 - 각 각 input field - 결과 보기는 button - 전용 면적은 select bar. drag 시 평으로 자동 변환해서 옆에 적어줌 (modal) - 층수, 건축년도는 select box (modal) - 결과 보기 누르면 아래에 결과가 뜸 구현 설계: - 구현 과정 나열: 1. create-react-app 2. title mui 3. textfield mui 4. react-daum-postcode 적용: 팝업 띄워서 주소 textfield 로 동까지 결과 넣어줄 예정 5. 결과 보기.. ML) [scikit-learn] 서울 다세대 (연립) 빌라 실거래가 통해서 동 별 적정 월세 계산 - RandomForestRegressor (with data, jupyter notebook) 과정: 1. 데이터 준비 2. 데이터 전처리 3. 모델 학습 4. 모델 평가 1. 데이터 준비: - 실거래가 공개시스템에서 다운로드 (http://rtdown.molit.go.kr/) - 다세대(연립) - 2022년도 - 2023년도 1월~6월 - 2023년도 7월, 8월 (26일까지) 2. 데이터 전처리: - train: 2022년도, 2023년도 1월~6월 - validate: 2023년도 7월, 8월 (26일까지) - train 데이터 합치기 - 데이터 중 전세 제거 - 보증금 column 에서 comma 제거 - 시군구 column 데이터는 labelencoder 로 값 부여 - drop nan data - 월세 column 에서 str 골라내서 comma 제거 및 int로 type 변경 3. 모.. 이전 1 2 다음
