DARAM BLOG

웹에서 input 데이터를 API Gateway 로 보내려고 AJAX를 사용했다.

아래 코드는 웹에서 클릭 버튼을 눌렀을때, input 데이터들을 api 로 전달해주고 + output 데이터들을 받아오는 Funtion 이다

index.js

function clickclick(){
    let form = $("#ajax-upload-form");
    let formData = new FormData(form[0]);

    formData.append('inputdata_one', $("#inputdata_one").val());
    formData.append('inputdata_two', $("#inputdata_two").val());
	//formData 에 전달해줄 INPUT 데이터값들을 추가로 붙여준다. 

    this.result = []
    $.ajax({
    type: "POST",
    url: 'https://vvvvvv.execute-api.us-east-1.amazonaws.com/pp/predict',  //api gateway URL
    header: {
        "Content-Type": "application/json",	//Content-Type 설정
        "X-HTTP-Method-Override": "POST",
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'POST',
        'Access-Control-Allow-Headers': '*',
        'Access-Control-Allow-Age': 3600
    },
    dataType: "json",
    data: formData,
    AccessControlAllowOrigin: '*',
    crossDomain: true,
    contentType: false,
    async: false,
    enctype: 'multipart/form-data',
    processData: false,

    success: function (data, status) { //람다에서 제대로 잘 돌아왔을때,
        let result = data['body'] //API 에서 건너온값 data 중 'body'부분만 솎아낸다
        result = result.replace("\"", ""); 
        result = result.split('&');  //result가 여러개라 &로 구분하였기 때문에 끊어줌
        
        console.log("data : ", data) //잘들어온건지 확인하고 싶어서
        console.log(result[0]) //잘나눠졌는지 확인하고 싶어서
    },
    error: function (e) {
        console.log("ERROR : ", e);
        $("#btnSubmit").prop("disabled", false);
        alert(e.message);
    }
    });
}

index.html 일부 (파일올리고 제출하는 부분)

                    <form method="POST" enctype="multipart/form-data" id="ajax-upload-form" name="upload-form">
                        <input type="file" name="upload-file" id="upload-file" onchange="loadFile(this)" required>
                        <input type="button" value="Submit" id='ajax-submit'>
                    </form>

이렇게 웹에서 input 데이터들을 api 를 통해서 람다에서 받아보면 아래처럼 data가 들어온다.

body = "------WebKitFormBoundaryWvqm9JrHYYK3TJSv\r\nContent-Disposition: form-data; name=\"upload-file\"; filename=\"sample.json\"\r\nContent-Type: application/json\r\n\r\n[{\"A\":1278.751,\"B\":7.168,\"C\":4025.032,\"D\":9.056,\"E\":56.962,\"F\":4646.806}]\r\n------WebKitFormBoundaryWvqm9JrHYYK3TJSv\r\nContent-Disposition: form-data; name=\"inputdata_one\"\r\n\r\nGGGGGGGG\r\n------WebKitFormBoundaryWvqm9JrHYYK3TJSv\r\nContent-Disposition: form-data; name=\"inputdata_two\"\r\n\r\n3333333\r\n------WebKitFormBoundaryWvqm9JrHYYK3TJSv--"

위는 data['body'] 부분이다.

인풋파일3개 (json 파일1개, 입력값2개) 가 잘 들어있는지 확인해보자면,

[{\"A\":1278.751,\"B\":7.168,\"C\":4025.032,\"D\":9.056,\"E\":56.962,\"F\":4646.806}] 이부분은 input 파일인 sample.json 안의 내용이다.

그외에 두가지 인풋이 더 있었는데 잘 살펴보면

inputdata_one : GGGGGGGG

inputdata_two : 3333333

로 들어가있음을 확인할수 있다.

해당 인풋파일 3개를 추출해내기 위해서 사용한 파싱방법

    json_feature = json.loads(body[body.find('['): body.rfind(']')+1]) 
    // json 파일안의 내용 뽑아내기
    
    body = body.replace('\n',"")
    body = body.replace('\r',"")
    body = body.replace('-',"")
	
    INPUTTWO = (body[body.find('inputdata_one')+14: body.rfind('WebKitFormBoundary')])
    body = (body[: body.rfind('WebKitFormBoundary')])
    INPUTONE = int(body[body.find('inputdata_one')+14: body.rfind('WebKitFormBoundary')])

1. EFS 사용

- 람다 저장소안에 패키지며 필요한 파일들 전부넣기보다 EFS를 활용하는 방법

- EFS안에 필요한 패키지들(파이썬,텐서플로우,넘피 등등) 세팅 + 필요한 파일들(트레이닝된 DL 모델) 등등 세팅해놓는다

- EFS 세팅은 EC2 인스턴스에서 EFS 마운트한다음에 해주면 된다 ( EC2 인스턴스 종료하고 다시켜면 또 마운트해서 연결해줘야한다. 인스턴스 종료안하고 계속 켜두면 계속 연결된 상태로 있다)

- 람다에서 프로비저닝해준다음 api 배포 해주면 끝

2.  ECR (Container) 사용

- 도커로 이미지를 만들어서 사용하는 방법이다.

- 필요한 패키지들은 requirements.txt에 지정,  필요한 파일들은 깃클론해서 복사(COPY로 옮겨준다) , app.py (람다에서 실행될 코드) 등등 세팅해준다음 이미지로 만들어준다

- ECR 에서 이미지로 만들고 배포

- 람다에서 새로 하나 만드는데 이미지로 만들기 선택하고, ECR 에서 배포한 이미지를 선택해주면 된다.

- EFS 에 비해 프로비저닝 비용이 들지 않는다

# python3.8 lambda base image
FROM public.ecr.aws/lambda/python:3.8

# copy requirements.txt to container
# 설치할 패키지들을 requirements.txt 에 기재
COPY requirements.txt ./   

# installing dependencies
RUN pip3 install --upgrade --ignore-installed pip setuptools
RUN pip3 install -r requirements.txt
RUN yum install git -y

# Copy function code to container
COPY feature_info.py ./   # host 에서 Container 로 file copy
COPY app.py ./            # host 에서 Container 로 file copy
RUN git clone https://github.com/ ~~~  # 사용할 파일들 불러오기

# setting the CMD to your handler file_name.function_name
CMD [ "app.lambda_handler" ]  # app.py 에서 handler 함수를 시작하도록 세팅

https://gallery.ecr.aws/

ㄴ람다 베이스 이미지는 여기서 불러와 서 사용할수 있다.

- 람다에서 기본적인 파일위치는 /tmp

- 작업 디렉토리 접근 경로 /var/task (Lambda Container 사용시)

작업 디렉터리(Working directory)에 함수에 대한 작업 디렉터리의 전체 경로를 입력합니다. 다음 예제에서는 Lambda의 AWS 기본 이미지에 대한 작업 디렉터리를 보여줍니다 (참조 https://docs.aws.amazon.com/ko_kr/lambda/latest/dg/lambda-dg.pdf )

COPY app.js package.json /var/task/

ㄴ DOCKERFILE 에서 다음과 같이 파일들을 /var/task 로 옮겨야한다.

model_dnn = tf.keras.models.load_model(f"/var/task/model_dnn")
# 람다에서 모델을 불러올땐 이런식으로 모델을 불러와야한다

추가 참조 : https://alestic.com/2014/11/aws-lambda-environment/

- trained 모델은 pb 형태로 저장하고 불러와야 에러가 안남 

람다에서 이와같은 에러가 났을경우,  일반구성 -> 메모리 용량을 늘리면 해결된다.

발표 : https://docs.google.com/presentation/d/1_U-JbhRpzpbLiOJhf2lk0tDj_Kb7cLMFT4OvCrmXLxw/edit?usp=sharing

AJAX

• 자바스크립트의 라이브러리중 하나
• 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다. (https://velog.io/@surim014/AJAX란-무엇인가)
• 단순히 웹화면에서 무언갈 부르거나 데이터를 조회하고 싶을때 페이지전체를 새로고침하지않기위해 사용한다.
• 기본적으로 HTTP 프로토콜은 클라이언트쪽에서 Request를 보내고 서버쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response를 하며 페이지 전체를 갱신하게 된다. 하지만 이렇게 할 경우, 엄청난 자원낭비와 시간낭비를 초래 → ajax를 사용
• 서버에서 데이터를 http get, post, json 의 모든방식으로 전송한후 서버측 응답을 받으럐때 사용, http get방식으로 전송한후 서버측 응답을 json형식으로 받을떄는 $get.JSON 을 사용한다.

var serverAddress = 'https://hacker-news.firebaseio.com/v0/topstories.json';

// jQuery의 .get 메소드 사용
$.ajax({
    url: ,
    type: 'GET',
    success: function onData (data) {
        console.log(data);
    },
    error: function onError (error) {
        console.error(error);
    }
});

<script>

$(document).ready(function() {
     jQuery.ajax({
           type:"GET",
           url:"/test",
           dataType:"JSON", // 옵션이므로 JSON으로 받을게 아니면 안써도 됨
           success : function(data) {
                 // 통신이 성공적으로 이루어졌을 때 이 함수를 타게 된다.
                 // TODO
           },
           complete : function(data) {
                // 통신이 실패했어도 완료가 되었을 때 이 함수를 타게 된다.
                 // TODO
           },
           error : function(xhr, status, error) {
                 alert("에러발생");
           }
     });
});
</script>

출처: https://marobiana.tistory.com/77 [Take Action]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko"  xml:lang="ko">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <head>
  <script src="./js/jquery-1.11.3.min.js"></script>
  <script type="text/javascript">
	$(document).ready(function() {
		$("#btn1").click(function() {
			$.ajax({
				type:"post",
				url:"./list.json",
				dataType:"text",
				success:function(data) {					
					$.each(JSON.parse(data), function(index, entry) {
						console.log("menu : " + entry["menu"] + ", page " + entry["page"]);
						$("#" + entry["menu"]).html( entry["menu"] + ", page " + entry["page"]);
					});
			}});
		});
	});
  </script>
 </head>
 <body>
	<div id="human"></div>
	<div id="animal"></div>
	<div id="fruit"></div>
	<button id="btn1">button</button>
 </body>
</html>


출처: https://leojin.tistory.com/entry/Ajax-로-json-파일-내용-읽기

• 헤더추가 https://thiago6.tistory.com/11

header:{"Content-Type":"application/json"}

ajax로 서버에 데이터를 보낼때 header 중 content-type이 존재하는데 이를 설정하지않으면 디폴트값으로 application/x-www-form-urlencoded; charset=UTF-8 타입으로 지정됨.

그래서 json형태의 데이터를 주고싶을떄는 위의 헤더를 지정해주어야함.

문제 → request안에 포함된 json형태의 데이터를 받았을때 보통 vo,dto에서 담아 다시 사용하는데, ajax는 데이터를 문자열화해주지않아서 보낼 데이터를 json.stringfy()로 감싸주어야함

그렇지않을경우 json데이터를 인식을 못함

• processData : false https://okayoon.tistory.com/entry/ajax-이슈-파라미터-값이-안-보내져요-processData

기본값은 true, 기본적을 key,value 값을 쿼리 스트링을 변환해서 보내줌. 이게 False 로 지정되어있으면 쿼리 String으로 설정하지않음 , 이것은 파일 전송시에 사용한다고함

• cors 에러 : 외부자료를 가져올때 발생함
• corssDomain:true https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=hongjae83&logNo=150145549779

전제조건 : 내가보고있는 페이지에서 다른페이지의 rest api를 호출해서 데이터를 json으로 가져오려고함. 내가 이용하는 페이지주소랑 데이터를 가지고 오기위한 서버 도메인이 서로 다를경우 crossdomain이라고 부름.

• formData

비동기 업로드를 위해 ajax formData를 사용함. 평소엔 안쓰임 , 이미지를 ajax로 업로드할때 필요함.

• *** 비동기?
  • 비동기 처리 ? 특정 코드의 연산이 끝날떄까지 코드의 실행을 멈추지않고 다음코드를 먼저 실행하는 자바스크립트의 특성을 의미함. → 제이쿼리의 ajax를 많이씀.

  • function getData() {
    	var tableData;
    	$.get('https://domain.com/products/1', function(response) {
    		tableData = response;
    	});
    	return tableData;
    }
    
    console.log(getData()); // undefined
    
    // get 부분이 ajax로 통신을 하는 부분임. http~ 에 get 요처응ㄹ 날려서 product정보를 요청함. 
    // 한마디로 쉽게 말하면 지정된 url에 데이터를 하나 보내주세요 라는 요청을 날리는것과 같음. 
    // http 서버에서 받아온 데이터를 respose 인자에 담김
    // getdata는 뭐임?? undefined 왜? 왜냐 이전에 미리 return 해줘서 그럼. 기다려주지않고 바로
    리턴해버려서 undefined를 출력하게됨. 
    // 이런식으로 특정로직의 실행이 끝날떄까지 기다려주지않고 나머지 코드를 먼저 실행해버리는게 비동기처리라는것임

    콜백함수로 비동기처리 방식의 문제점 해결하기

  • function getData(callbackFunc) {
    	$.get('https://domain.com/products/1', function(response) {
    		callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
    	});
    }
    
    getData(function(tableData) {
    	console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
    });

중요 : ajax formData 사용시에 contentTYpe, processData 옵션을 false로 설정해야함 !!!

사용법은 두가지가있음

(1) form 에 작성된 전체데이터 보내기 (2) form 에 작성된것 중 필요한것만 선택해서 보내기

//후자 (2)  방법
var formData = new formData();
formData.append([key],[value]);
//append는 전체데이터중에 필요한것만 선택해서 보낼때를 의미함. 더해준다는 의미가 아님.

formData.append('username', 'Chris'); //이런식으로 쓰인다~

<form id="myForm" name="myForm">
  <div>
    <label for="username">Enter name:</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="useracc">Enter account number:</label>
    <input type="text" id="useracc" name="useracc">
  </div>
  <div>
    <label for="userfile">Upload file:</label>
    <input type="file" id="userfile" name="userfile">
  </div>
  <input type="submit" value="Submit!">
</form>

/////////////////////////////////////////////////////////////////////////////

let myForm = document.getElementById('myForm');
let formData = new FormData(myForm);

• document.getElementById

id 로 요소를 찾고 이를 나타내는 elements 객체를 반환

• param(obj)

폼 요소들의 값을 변환해서 직렬화한 문자열로 표현함.

• datatype

내가보는 데이터타입 아님, 서버가 응답(response)할떄 보내줄 데이터타입임. 이는 success function에 전달될 argument의 형태를 지정하는데 사용된다고 한다

→ 한마디로 서버측에서 전송받은 데이터의 형식

• processData

일반적으로 서버에 전달되는 데이터는 query string이라는 형태로 전달된다. data 파라미터로 전달된 데이터를 내부적으로 query string으로 만드는데 파일전송의 경우 이렇게 하면안된다.

-기본값은 true

-해당값이 true →> data 값들이 쿼리 스트링 형태인 Key=value & key2=value2 형태로 전달이된다. 하지만 리헌식으로 진행하면 file값들이 제대로 전달되지않음

-해당값이 false → { key1 : 'value1', key2 : 'value2' } 형태로 전달

• contentType

디폴트값은 "application/x-www-form-urlencoded; charset=UTF-8" 인데 , multipart/form-data로 전송이 되게 false로 넣어줌.

• data

http 요청후 return하는 값임

• url

요청이 전송되는 url 이 포함되는 문자열

• type

http 요청방식 (Get/Post)

• async

요청시 동기유무를 선택할수 있다 ( true/False)

• stringfy / parse 정리 https://rwd337.tistory.com/172 참조

.ajax 에서 string으로 보내서 전송하고,

success 후에는 돌려받은걸 다시 json파일로 변환해서 출력한다

• enctype1. application/www-form-urlencoded2. multipart/form-data3. text/plain출처: https://dydals5678.tistory.com/113
• 이 형식은 인코딩을 하지 않은 문자 상태로 전송한다.
• 파일이나 이미지를 서버로 전송할 경우 이 방식을 사용한다. 그렇게 하지 않으면 웹 서버로 데이터를 넘길때 파일의 경로명만 전송되고 파일 내용이 전송되지 않기 때문이다. 그리고 이떄 메소드는 post값으로 지정해줘야 한다 (핵중요)
• 디폴트값이다. enctype을 따로 설정하지 않으면 이 값이 설정된다. 폼데이터는 서버로 전송되기 전에 URL-Encode 된다.
• enctype 은 다음 3가지값을 지정가능

JSON 메모

• JSON.stringify(value)

→ 인수로 전달받은 자바스크립트 객체를 문자열로 변환해서 반환해줌

예제1

<html>
<body>
	<p id="json"></p>
	<script>
		var dog = {name: "식빵", family: "웰시코기", age: 1, weight: 2.14};	// 자바스크립트 객체
		
		var data = JSON.stringify(dog);	// 자바스크립트 객체를 문자열로 변환함.
		document.getElementById("json").innerHTML = data; // json 데이터 불러옴

	</script>
</body>
</html>
//output : {"name":"식빵","family":"웰시코기","age":1,"weight":2.14}ㅁ

예제2

var obj = { name: "John", age: 30, city: "New York" }; 
var myJSON = JSON.stringify(obj); 
document.getElementById("demo").innerHTML = myJSON; 
//결과값 {"name":"John","age":30,"city":"New York"}

• JSON.parse(text)

→인수로 전달받은 문자열을 자바스크립트 객체로 변환해서 반환해줌

<html>
<head>
	<title>parse</title>      
</head>
<body>
	<p id="json"></p>
	<script>
		// JSON 형식의 문자열
		var data = '{"name": "식빵", "family": "웰시코기", "age": 1, "weight": 2.14}';
		
		var dog = JSON.parse(data);	// JSON 형식의 문자열을 자바스크립트 객체로 변환함.
		document.getElementById("json").innerHTML = dog + "<br>";
		document.getElementById("json").innerHTML += dog.name + ", " + dog.family;
	</script>
</body>
</html>

//결과 
[object Object]
식빵, 웰시코기

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.result);
// expected output: true

• toJSON()

→ 자바스크립트의 Date 객체를 Json 형식의 문자열로 반환해서 변환

예제1

추가 참조 :  https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=mk1126sj&logNo=221016837263

https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

https://grip.news/archives/1397

https://galid1.tistory.com/398

<그래프 두개로 그리기>

- 안 붙은 그래프

바그래프 가로길이 0.36 반띵하면0.18

i 를 x축 중심 이라고 하면 바1은 -0.18 ,바2는 +0.18 해서 두 그래프가 딱붙어서 출력

x= [ i-0.20 for i in range(7)]
x2= [ i+0.20 for i in range(7)]
x_middle= [ i for i in range(7)]

plt.bar(x, original,color='darkgray',width=0.36,label='label1', edgecolor='black')
plt.bar(x2, (a+b+c+d)/4 ,color='white',width=0.36,label='lable2',edgecolor='black',hatch='/')

- 붙은 그래프

바그래프 가로길이 0.36 반띵하면 .018

i 를 x축 중심 이라고 하면 바1은 -0.20 ,바2는 +0.20 해서 두 그래프두개 0.4 띄워서  출력

x= [ i-0.18 for i in range(7)]
x2= [ i+0.18 for i in range(7)]
x_middle= [ i for i in range(7)]

plt.bar(x, original,color='darkgray',width=0.36,label='label1', edgecolor='black')
plt.bar(x2, (a+b+c+d)/4 ,color='white',width=0.36,label='lable2',edgecolor='black',hatch='/')

<화살표 그리기>

- 바가 7개면 7번 for 문돌려주고

- plt.arrow ( 시작하는점x, 시작하는점 y , 시작점에서 x축방향으로 이동할만큼, 시작점에서 y축방향으로 이동할만큼  )

- head_width (화살표머리 가로) , head_length(화살표머리 세로) 

- fc, ec : 화살표머리랑 화살표대 색깔 

- width : 화살표대 넓이 (설정안하면 실선)

for i in range(7):
    plt.arrow(i+0.20, original[i], 0, -((original-(a+b+c+d)/4))[i]+0.8, head_width = 0.18, 
             head_length = 0.8,fc="k", ec="k",width=.06)
plt.show

<라벨달기>

- 바그래프안에 label = 'label1' 이런식으로 라벨달아주고

plt.bar(x, original,color='darkgray',width=0.36,label='label1', edgecolor='black')
plt.bar(x2, (a+b+c+d)/4 ,color='white',width=0.36,label='lable2',edgecolor='black',hatch='/',yerr=[(0,0,0,0,0,0,0),(original-(a+b+c+d)/4)] ,error_kw=dict(lw=2, capsize=0, capthick=2))

- 바그래프에 달아준 라벨을 표시해준다.

loc ( 그래프안에서 x , 그래프안에서 y )

plt.legend(fontsize=62,loc=(0.005,0.86))

<바그래프 칠하기,선긋기,테두리선>           

- edgecolor :바 테두리선 색 (안해주면 색없음)

- inewidth : 바 테두리선 두께

-  hatch : 빗금  ('/' , '//', '\\' 'x' ...)

- color : 바안에 칠하기 (검색ㄱ)

plt.bar(x, original,color='darkgray',width=0.36,label='label1', edgecolor='black',linewidth=0.5)
plt.bar(x2, (a+b+c+d)/4 ,color='white',width=0.36,label='lable2',edgecolor='black',linewidth=0.5,hatch='/',yerr=[(0,0,0,0,0,0,0),(original-(a+b+c+d)/4)] )

<x 축 돌리기>

- rotation = 95 (수직으로)

- rotation=0 (안돌림)

plt.xticks(x_middle,['a','b','c','d','e','f','g'])
plt.xticks(rotation=90,fontsize=80,ha="right")
# ha는 오른쪽을 기준으로 맞추라는뜻

<바그래프 위에 텍스트 표시>

o= ['%','%','%','%','%','%','%']
for i, v in enumerate(x2):
    plt.text(v, original[i], str (round(((original-(a+b+c+d)/4)/original*100)[i],1))+o[i] ,                 
             fontsize = 60, 
             color='black',
             #weight="bold",
             horizontalalignment='center',
             verticalalignment='bottom')

<바그래프 사이에 간격 표시하기>

- yerr=[(0,0,0,0,0,0,0), 간격 ] ,error_kw=dict(lw=2, capsize=3, capthick=2))

- capsize : 가로축 길이 (0으로 하면 걍 실선으로 표시됨)

- capthick : 가로축 두께

plt.bar(x, original,color='darkgray',width=0.36,label='label1', edgecolor='black')
plt.bar(x2, (a+b+c+d)/4 ,color='white',width=0.36,label='lable2',edgecolor='black',hatch='/',yerr=[(0,0,0,0,0,0,0),(original-(a+b+c+d)/4)] ,error_kw=dict(lw=2, capsize=0, capthick=2))

- yerr=[1,1,1,1,1,1,1] 로 바꾸면

<바그래프 x 축 rotation 위치 조정하기>

https://stackoverflow.com/questions/43152502/how-can-i-rotate-xticklabels-in-matplotlib-so-that-the-spacing-between-each-xtic  참조

1. 일단 opencv로 동영상을 잘라준다

2. yolo 적용해서 object detection 감지 ( 아래 사이트 참조)

* yoloc3.weighs 는 아래에서 다운로드받아서 쓰기 

mp4_cctv_list=[]
for i in file_list:
    # 현재 디렉토리에 있는 모든 파일 리스트를 가져온다
    
    path = "./task1/"+str(i)
    file_listttt = os.listdir(path)
    mp4_cctv = [file for file in file_listttt if file.endswith(".mp4")]
    mp4_cctv_list.append(mp4_cctv)


for j in range(1,len(file_list)):
    mp4_cctv = "./task1/"+str(file_list[j-1])+"/"+str(mp4_cctv_list[j-1][0])

    try : 
        # -------------------- 동영상 쪼개기 ------------------------------------------------------------   
        import cv2
        n=119  #동영상을 119개로 쪼개줄것임

        vidcap = cv2.VideoCapture(mp4_cctv)     
        total_frames = vidcap.get(cv2.CAP_PROP_FRAME_COUNT)
        frames_step = total_frames//n
        for i in range(n):
            #here, we set the parameter 1 which is the frame number to the frame (i*frames_step)
            vidcap.set(1,i*frames_step)
            success,image = vidcap.read()  
            #save your image
            globals()['col{}.jpg'.format(i)]= image
            #cv2.imwrite(globals()['./col{}.jpg'.format(i)],image)
            
            # 저장해줄 위치 지정해줌
            cv2.imwrite('./new2/col'+str(i)+'.jpg',image)
        vidcap.release()
        
        # -------------------- yolo ------------------------------------------------------------
        # Yolo 로드
        net = cv2.dnn.readNet("yolov3.weights", "yolov3.cfg")
        classes = []
        with open("coco.names", "r") as f:
            classes = [line.strip() for line in f.readlines()]
        layer_names = net.getLayerNames()
        output_layers = [layer_names[i[0] - 1] for i in net.getUnconnectedOutLayers()]
        colors = np.random.uniform(0, 255, size=(len(classes), 3))

        for k in range(119):  #수정 119로
            # 이미지 가져오기
            print('사진' ,k)
            img = cv2.imread("./new2/col"+str(k)+".jpg")
            img = cv2.resize(img, None, fx=0.4, fy=0.4)
            height, width, channels = img.shape

            # Detecting objects
            blob = cv2.dnn.blobFromImage(img, 0.00392, (416, 416), (0, 0, 0), True, crop=False)
            net.setInput(blob)
            outs = net.forward(output_layers)

            # 정보를 화면에 표시

            class_ids = []
            confidences = []
            boxes = []
            for out in outs:
                for detection in out:
                    scores = detection[5:]
                    class_id = np.argmax(scores)
                    confidence = scores[class_id]
                    if confidence > 0.5:
                        # Object detected
                        center_x = int(detection[0] * width)
                        center_y = int(detection[1] * height)
                        w = int(detection[2] * width)
                        h = int(detection[3] * height)
                        # 좌표
                        x = int(center_x - w / 2)
                        y = int(center_y - h / 2)
                        boxes.append([x, y, w, h])
                        confidences.append(float(confidence))
                        class_ids.append(class_id)

            indexes = cv2.dnn.NMSBoxes(boxes, confidences, 0.5, 0.4)

            font = cv2.FONT_HERSHEY_PLAIN
            label_lists=[]
            for i in range(len(boxes)):
                if i in indexes:
                    x, y, w, h = boxes[i]
                    label = str(classes[class_ids[i]])
                    color = colors[i]
                    cv2.rectangle(img, (x, y), (x + w, y + h), color, 2)
                    cv2.putText(img, label, (x, y + 30), font, 3, color, 3)
                    label_lists.append(label)

            cv2.imshow("Image", img) 
            cv2.waitKey(1)
            cv2.destroyAllWindows()
            print(label_lists)
            df['mp4'][:][k]=label_lists


        #맥에서 opencv 안닫힐때 꿀팁
        cv2.destroyAllWindows()
        cv2.waitKey(1)
        cv2.waitKey(1)
        cv2.waitKey(1)
        cv2.waitKey(1)

 
    except :
        print('exept',file_list[j-1],j-1)

#맥에서 opencv 팝업창 안닫힐때 꿀팁
cv2.destroyAllWindows()
cv2.waitKey(1)
cv2.waitKey(1)
cv2.waitKey(1)
cv2.waitKey(1)

출처 : https://stackoverflow.com/questions/6116564/destroywindow-does-not-close-window-on-mac-using-python-and-opencv

• adcanced details - user data 부분에 sh파일 넣어주면된다
• sh 파일안에 pip3 install -r requirements.txt 이걸 넣어주면 올인원에 끝내줄수있음
• 그러면 터미널에서 일일이 Pip3 ~~ 안깔아줘도 됨

https://arifulislam-ron.medium.com/flask-web-application-to-classify-image-using-vgg16-d9c46f29c4cd

ERROR : 크롬, 사파리에서 안열림, 네이버 웨일에서는 열림

# 시작코드

export FLASK_APP=main.py

flask run --host=0.0.0.0 --port=5000

velog.io/@wlsdud2194/-Docker-%EB%8F%84%EC%BB%A4-%EA%B8%B0%EB%B3%B8-%EB%AA%85%EB%A0%B9%EC%96%B4-%EB%AA%A8%EC%9D%8C

->  기본 명령어 참조하기

<텍스트파일 생성후 저장>

[학번@linux-pplab ~]$ cat << END > file.txt

> Hello!

> My job is student.

> Good bye.

> END

[학번@linux-pplab ~]$ cat file.txt

혹은 touch 파일이름

<파일삭제>

>rm 파일이름

**sudo rm-rf / 포맷수준 삭제

rm -r home/     #디렉토리 삭제

<작성하던 텍스트파일 나가기>

vim/ vi로 파일열기~~~

Esc + shift키 + ;키

 q (그냥나가기)변경사항없을떄

Wq(저장후나가기)

 q! 변경사항무시하고 그냥 나가기(저장x) 이렇게해줘야 다음에들어갈떄 안물어봄

<파일수정>

i 수정

i ->ctrl->dd 한줄삭제

<ls>

ls-al은 ls-a이랑 ls-l를 동시에 사용하기위한 명령어

ls -a 는 숨김파일도 보여주는 -a

ls -l은 https://www.leafcats.com/137     ,

http://www.incodom.kr/Linux/%EA%B8%B0%EB%B3%B8%EB%AA%85%EB%A0%B9%EC%96%B4/ls참조

ls-h -h는 스위치옵션이라고 kb/mb/gb 단위로 쉽게 파일사이즈 확인이 가능

<디렉터리, 파일생성>

mkdir dir

ls -ld dir

rm file1.txt.    # 파일삭제