본문 바로가기

분류 전체보기

 (192)
[ML][React] teachable machine 으로 만든 나는 솔로 테스트 (개인정보처리방침 보여주기, MUI Dialog) - Part 2 지난 과정 - 개인정보처리방침 페이지에 사용할 내용 작성해두었음 작업 과정 1. 개인정보처리방침 을 위한 공간 만들기 2. 공간 내 내용 붙여넣기 과정 1. 개인정보처리방침을 위한 공간 만들기 & 과정 2. 공간 내 내용 붙여넣기 과정 내용: - 내가 만드는 서비스는 SPA로 기존에 보여주던 내용 Component 대신 개인정보처리방침을 보여줄 Component를 보여주어야 함 - 이를 위해서는 MUI Dialog 를 사용하는 것이 가장 좋다고 판단 진행 방향: - 개인정보처리방침을 보여주기 위해 MUI Dialog 사용 - MUI Dialog 의 open 여부는 react state 사용 - footer에서 state와 setState를 props 로 받음 - DialogTitle 에 제목 - Dial..
[ML][마케팅][수정] teachable machine 으로 만든 나는 솔로 테스트 (홍보 글 업로드 및 피드백 반영) - Part 1 작업 과정 - 홍보 글 업로드 및 피드백 수령 - 피드백 반영 - 홍보 글 재업로드 과정 1. 홍보 글 업로드 및 피드백 수령 - 1차: 고파스에 글 업로드 받은 피드백: 신뢰 할 수 없다 - 2차: DC인사이드에 글 업로드 피드백 못 받음: 글이 삭제됨 광고를 올릴 수 없음 - 3차: 구글 adsense 가입 신청 받은 피드백: 아직 완성되지 않은 홈페이지 같음 ABOUT, CONTACT 메뉴 눌러도 아무것도 안됨 - 자체 피드백: 피드백: 어떻게 하면 더 많은 사람들에게 알릴 수 있을까 트위터 페이스북 지인 공유 기사 작성 및 공유 과정 2. 피드백 반영 피드백 1. 신뢰 할 수 없다 해결 방법: 업로드 하는 사진이 어디에 사용되는지 소개 구체적 소개 방법: "분석을 위해 ~" 문구 추가 "사진을 올..
[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. 결과 보기..

티스토리툴바