1-16[Ajax, formData] Ajax를 이용한 이미지 데이터 전송

오늘 할 일 (계획)

1. 머신러닝 프로젝트

 

2. Django 강의 시작

 

오늘 한 일 (회고)

1.  머신러닝 프로젝트

- Teachable machine 기반의 프로젝트 구조를 개조

- 프론트엔드에서 모든 것을 작업하던 구조에서 백엔드에서 모델을 불러오는 구조로 변경

- ajax 클라이언트 부분에서 이미지 데이터 보내지 못한 것 해결 formdata 이용

- server에서 모델 predict처리 후 json형식이 아니어서 보내지 못한 것 해결

pred_json = pd.Series(pred[0]).to_json(orient='values')

2. 생활 코딩 강의 학습 일시 중단

 

* form data를 이용한 ajax 통신 요약

 

async function predict() {
    // 파일의 인풋값을 #file-input에서 받아서 저장
    let fileInput = $('#file-input')[0].files[0]
    // form_data를 생성
    let form_data = new FormData();
    // append로 붙여서 전송 준비 키값은 file_give
    await form_data.append("file_give", fileInput)

    $.ajax({
        type: "POST",
        url: "/api/predict",
        // url 값이 같은 곳과 POST ajax 통신
        data: form_data,
        cache: false,
        contentType: false,
        processData: false,
        // data, cache, contentType, processData 설정 중요
        success: function (response) {

async, await를 이용하여 동기식으로 구성한점과 type url data cache contentType processData 설정등을 유심히 볼 필요가 있음

@app.route('/api/predict', methods=['POST'])
def give_model():
    try:
        # 디렉토리를 검색하여 값이 있을시 지우는 조건문
        if os.path.exists(f'static/img/pokemon/'):
            for file in os.scandir(f'static/img/pokemon/'):
                os.remove(file.path)
    except:
        return

    else:
        # try except은 try가 잘돌아가면 else를 실행
        # request 문으로 file_give키로 되어있는 값을 받아옴
        file = request.files['file_give']

서버단에서는 받아온 form data를 이용하는데 예제에서 사용한 방식을 거의 사용하지만 디렉토리에 값이 있을때 비우고 시작하게 하여서 똑같은 값이 계속 나오는 문제를 해결함 

 

nmdkims/16team_pokeman_AI (github.com)

GitHub - nmdkims/16team_pokeman_AI

내일 할 일

1. 머신러닝 프로젝트 - 마무리 작업

 

2. Django 강의 시작