[ML][teachable machine] 나는 솔로 테스트 - 남자 편 만들기 ref. 동물상 테스트 (여자편 / 남자편 변경 react state로 관리)

말머리

과정 소개:

1. model training 용 이미지 다운로드
2. model training 진행
3. 여자편 / 남자편 변경 react state로 관리 --- 현재 글

과정 3. 여자편 / 남자편 변경 react state로 관리

진행 순서:

1. model 내보내기
2. 고려 사항 분석 및 설계
3. react state 선언
4. react state 변경 방식 정하기
5. react state 값 component에 적용

1. model 내보내기

 

2. 고려 사항 분석 및 설계

고려 사항:

• 기본 domain 으로 접속하였을 때 어떤 버전을 보여줄지
  • 버전: 남자편 OR 여자편
• 공유 결과를 타고 들어왔을 때 어떻게 공유 한 버전과 같은 버전을 보여줄 

설계 결과:

• 기존에 사용하던 get parameter에 version을 추가해서 사용
  • 공유 링크에 get parameter로 원하는 버전을 version을 이용해서 명시

3. react state 선언

관련 코드:

function App() {

  let query = new URLSearchParams(useLocation().search);
  let version = query.get("version");

  if (!version) version = 'female';

  const [gender, setGender] = useState(version);

4. react state 변경 방식 정하기

변경 방식:

• button
  • "(여자 편)" 글씨를 버튼으로 만들어 눌렀을 때 "(남자 편)" 으로 변경

 

관련 코드:

const ThirdTitle = (props) => {

  var text ='';
  if (props.gender === 'female') {
    text = "나는 여자 출연자"
  } else if (props.gender === 'male') {
    text = "나는 남자 출연자"
  } else {
    text = "나는 여자 출연자"
  }

  const handleClick = () => {
    if (props.gender === 'female') {
      props.setGender('male');
    } else if (props.gender === 'male') {
      props.setGender('female');
    } else {
      props.setGender('female');
    }
  }

  return (
      <Button aria-describedby="change gender button" variant="outlined" onClick={handleClick}>
        <Typography 
          color="secondary"
          align="center"
        >
          {text}
        </Typography>
      </Button> 
  );
};

5. react state 값 component에 적용

바뀌어야 하는 값:

• model URL
• 공유하기 눌렀을 때 나도 해보기 시 공유된 성별로 띄우기

관련코드 (model URL):

const UploadButton = (props) => {

  var URL;

  if (props.gender === 'male') {
    URL = "https://teachablemachine.withgoogle.com/models/_kZ3asqTP/";
  } else {
    URL = "https://teachablemachine.withgoogle.com/models/TbtO4Hcl2/";
  }

// ...

관련코드 (공유하기):

            // ...
            
            var hostUrl = 'https://iamsolo.page.place/'
              var imgUrl =  response.infos.original.url
              var webUrl = hostUrl + '?img=' + imgUrl + '&version=' + props.gender

              var shareUrl = hostUrl + '?version=' + props.gender

              kakao.Share.sendDefault({
                objectType: 'feed',
                content: {
                  title: title,
                  imageUrl:
                    imgUrl,
                  link: {
                    mobileWebUrl: webUrl,
                    webUrl: webUrl,
                  },
                },
                buttons: [
                  {
                    title: '자세히 보기',
                    link: {
                      mobileWebUrl: webUrl,
                      webUrl: webUrl,
                    },
                  },
                  {
                    title: '나도 해보기',
                    link: {
                      mobileWebUrl: shareUrl,
                      webUrl: shareUrl,
                    },
                  },
                  
                // ...