반응형

시작하기 전!

나는 파이썬을 잘 모른다. 아직 입 출력도 잘 모른다. 그러므로 이 내용이 정확하지 않을 수도 있으니 주의!

(선생님들은 내가 파이썬을 잘한다고 하는데.. 이해력과 끈기만 좋을 뿐 전혀 파이썬을 모른다.)

 

만약 아나콘다와 비쥬얼 스튜디오 코드와 쿠다가 깔렸다면 아래로

https://cheongpark.tistory.com/7

 

YOLOV5 윈도우로 돌리기 Part.2 (Anaconda, Visual Studio Code 기본 설정)

시작하기 전! 나는 파이썬을 잘 모른다. 아직 입 출력도 잘 모른다. 그러므로 이 내용이 정확하지 않을 수도 있으니 주의! (선생님들은 내가 파이썬을 잘한다고 하는데.. 이해력과 끈기만 좋을 뿐

cheongpark.tistory.com

 

1. 일단! YOLOV5란

YOLO는 "You only look once"의 약자다! "인생은 오직 한번뿐" 이라는 뜻을 가지고 있다.

(한번에 보고 찾는 그런 느낌인 것 같다;;)

 

V5는 아마 버전일꺼다! (V6는 언제 나오누..?)

 

어쨌든 YOLOV5는 Object Detection Algorithms(객체 감지 알고리즘)으로 유명한 알고리즘이니 더 많은 문서는 아래 링크에서 보기 바람!

https://docs.ultralytics.com/

 

YOLOv5 Documentation

Introduction To get started right now check out the Quick Start Guide What is YOLOv5 YOLO an acronym for 'You only look once', is an object detection algorithm that divides images into a grid system. Each cell in the grid is responsible for detecting objec

docs.ultralytics.com

 

 

2. YOLOV5가 좀 짜증났다..?

일단 돌리기 전.. 나의 힘든 과정을 풀어야겠다..

파이썬을 진짜 거의 처음으로 돌렸던 2021년 8월 쯤 YOLOV5를 했었는데당시에는 유튜브를 찾거나 크롬을 찾더라도 윈도우로 돌리는 방법이 안나오고 거의 다 코랩에서 돌리는 글들만 나왔었다.

 

내가 코랩으로도 해봤지만.. 코랩에서 지원하는 그래픽카드는 내꺼에 비해 속도를 많이 내 주지 못 하였고 나는 컴퓨터도 좋고 내 컴퓨터로 직접 돌려보고 싶어서 계속해서 도전했다. (RTX 3080TI임)

 

그러다가 계속 구글링도 하며 찾아보며 어떤 오류가 발견이 됬었는데 CP949였다. 인코더 문제 같은데 리눅스에선 정상적으로 돌아가고 윈도우에서만 이 오류로 안돌아 갔었던 것 같다. 그래서 나는 CP949해결 방법을 블로그에서 찾아 비슷한 구문에 모두 "UTF-8"을 넣어서 대입해서 2개의 오류를 찾고 해결했었다.. 흐윽...

 

근데 그저께 해보니깐.. 음.. 새로 설치했는데도 잘되네.. 하하하 왜 이제야 해결해준거니...

 

3. 먼저 개발환경 준비!

나는 AnacondaVisual Studio Code로 작업할 것이다!

https://www.anaconda.com/

https://code.visualstudio.com/

먼저 이 2개를 깔면 된다!

 

아나콘다는 가상 환경을 만들기 위해 쓸 것이고

Visual Studio Code는 개발을 할 때 쓸 꺼기 때문에 필요하다!

(만약 딱히 자세하게 하고 싶지 않다면 Visual Studio Code는 딱히 필요없다. 그냥 아나콘다에서 명령어만 치면 되서)

 

그래픽카드가 별로 좋지 않거나 그래픽카드가 없는 경우 이 부분은 넘어가주세요!

그래픽카드가 있다고 해서 무조건 했다가.. 메모리 부족 그런걸로.. 전혀 진행이 안될 수 있으니.. 조심!

 

https://developer.nvidia.com/cuda-downloads?target_os=Windows&target_arch=x86_64&target_version=11&target_type=exe_local 

이 곳에 접속하여

Download (2.5 GB)를 눌러 다운받고 설치합니다.

오래 걸리니 아나콘다와 같이 설치해주세요! 왜냐! 둘다 엄청 걸리거든요!

 

다음은 Anaconda와 Visual Studio Code 기본 설정입니다!

반응형
반응형

보기 귀찮으면

Visual Studio Code에서 Ctrl + Shift + P을 눌르고 나온 검색창에 "Default Profile" 을 입력 그 후 나오는 창을 눌러 그 아래 리스트 중 Command Prompt 를 클릭하여 설정

 

문제점

아나콘다로 가상환경을 만들고 난 후 Visual Studio Code에서 파이썬을 아나콘다 가상환경으로 설정 후 파이썬 파일을 실행하면 Python이나 PowerShell으로 실행되어 아나콘다 가상환경에 진입하지 못하는 경우가 있다.

(학교 친구들 2명이 물어봤었음)

(근데 난 자동으로 설정 됬었는데... 뭐지)

 

해결방법

이 경우 터미널의 기본 종류를 변경해야하는데 변경 방법은

Ctrl + Shift + P를 눌러 검색창을 연다.

 

Ctrl + Shift + P를 눌르면 나오는 창

이 검색 창에 Default Profile을 검색해보자 / 검색창에 검색되는 건 ">Default Profile"이다

 

이런식으로 나온다. 그리고 저 아래 뜨는 것을 클릭한다.

그 후 여러가지가 나오는데 보통 PowerShell이나 Command Prompt가 나올 것이다.

 

파이썬 파일을 실행하면 아나콘다 가상환경에 들어갈 수 있게 해야함으로 Command Prompt로 변경한다.

그 후 실행하면 정상적으로 아나콘다 가상환경에 자동으로 들어가서 파일을 실행한다.

파일을 실행하자마자 자동으로 바뀐거

(맥은 모름 비슷할 것 같긴 함)

 

반응형
반응형

 

유튜브

어느 날 알고리즘에 이 영상이 올라왔다.

수학을 못하는 나.. 코딩은 자신 있으니 엑셀이 아닌 C++로 만들어보고 싶었다.

(근데 수업 때 이런걸로 수업해주셨으면.. 수학에 관심 있었을텐데..)

 

준비

일단 제작 방법을 생각해보자!

2중 포문으로 100 * 100의 블럭을 출력하면 될 것 같다.

2중 포문에선 먼저 계산을 해서 배열에 저장하고 나중에 출력하면 될 것 같다.

 

그리고 색까지 넣어서 이쁘게 꾸미는 것을 목표로 한다.

 

제작

#include <iostream>
#include <math.h>
#include <windows.h>
#include <algorithm>

#define x 101 //가로 캔버스 크기
#define y 101 //세로 캔버스 크기
#define outline 15 //아웃라인 색깔

using namespace std;

void textcolor(int color); //텍스트 컬러 지정
void top_bottom_block(int color); //위쪽 아래쪽 아웃라인 블럭 지정
void left_right_blck(int color); //왼쪽 오른쪽 아웃라인 블럭 지정

double a[x][y] = {};

int main() {
	ios::sync_with_stdio(false);
	cout.tie(NULL);

	for (int i = 0; i < x; i++)
		for (int j = 0; j < y; j++)
			a[i][j] = sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2)); //식 입력

	top_bottom_block(outline); //15는 흰색

	for (int i = 0; i < x; i++) {
		left_right_blck(15); //15는 흰색
		for (int j = 0; j < y; j++) {
			textcolor(a[i][j]);
			cout << "■";
		}
		left_right_blck(15); //15는 흰색
		cout << endl;
	}

	top_bottom_block(outline); //15는 흰색
}


void textcolor(int color) {
	SetConsoleTextAttribute(GetStdHandle(STD_OUTPUT_HANDLE), color);
}

void top_bottom_block(int color) {
	textcolor(color);

	for (int i = 0; i < x + 2; i++)
		cout << "■";
	cout << endl;
}

void left_right_blck(int color) {
	textcolor(color);
	cout << "■";
}

일단 기본 적인 구조는 만들어 보았다.

캔버스의 크기가 101로 되어있는 이유는 100으로 하게 되면 원의 중심점이 제대로 잡혀지지 않기 때문에 101 홀수로 맞춰서 잡아주었다.

 

 

sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2))

식 입력 부분에 위 코드를 집어넣으니 원이 출력되었다.

어떤 원리인진 자세하게는 모르겠지만 어쨌든 신기하다!

 

그 다음은 영상에서 나온 원과 배경을 구분하여 출력하는 것이다.

min((double)1, max((double)0, 25 - sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2))))

나는 일단 색은 그대로 두었다. 만약 이 색이 마음에 안들면 출력 2중 포문 안쪽 textcolor(a[i][j]); 에서 a[i][j] 뒤에 + 5 이런걸로 해서 색을 지정하든지 일정 값마다 색을 다르게 하는 코드를 추가해서 해보면 될 것 같다.

 

어쨌든 다음!

min((double)1, max((double)0, 25 + 15 * cos(5 * atan2(j - (x / 2), i - (y / 2))) - sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2))))

신기한건 수학의 식은 한줄이며 이 식만 길어지는 것 뿐인데 그냥 코딩으로 하나씩 포문 여러번 돌리면서 문제를 해결하는 것보다 짧게 되서 수학에 약간 관심이 있어지는 것 같기도..??

 

또 다음!

min((double)1, max((double)0, 20 + 20 * pow((0.5 + 0.5 * cos(5 * atan2(j - (x / 2), i - (y / 2)))), 0.3) - sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2))))

계속 식을 적으면서 불편한 것은.. 영상에서 나온 엑셀의 식을 C++에 적용을 하기 위해 제곱을 pow로 하고 하는 과정들이 조금 불편하지만.. 오우 너무 근데.. 신기하다..

 

다음!

min((double)1, max((double)0, 20 + 20 * pow((0.5 + 0.5 * cos(5 * atan2(j - (x / 2), i - (y / 2)))), 0.3) - sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2)))) + min((double)1, max((double)0, 19 - sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2))))

으어어어... 길다..

 

다음!

min((double)1, max((double)0, 20 + 20 * pow((0.5 + 0.5 * cos(5 * atan2(j - (x / 2), i - (y / 2)))), 0.3) - sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2)))) + min((double)1, max((double)0, 19 - sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2)))) - 2 * min((double)1, max((double)0, 2 - abs(4 - sqrt(pow(abs(j - 50) - 6, 2) + pow(i - 45, 2)) * min((double)1, max((double)0, 46 - i))))) - 2 * min((double)1, max((double)0, 2 - abs(8 - sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2))))) * min(max(i - 50, 0), 1)

드디어 완성!!

영상과는 꽃잎의 회전이 조금 다르지만.. 어쨌든! 성공했다..

으어ㅓㅓㅓ 코드가 너무 길어..!!

 

글을 쓰면서 코드를 적는데 너무 보기도 힘들고 어렵지만.. 다행히 식은 나와있어서.. 다행이였던 것 같다..

내가 혼자 식 만들어서 하라하면.. 절대 못할 듯..

 

어쨌든 추가로 테스트를 더 해봤다.

아래 것 들은 수학을 잘 모르는 상태에서 아무 값이나 이리저리 넣어보면서 테스트 한 것이니.. 뭐라하지 마시길...

 

sqrt(i * j)
tan(i * j)

 

tan(i + j)
20 + 20 * pow((0.5 + 0.5 * cos(5 * atan2(j - (x / 2), i - (y / 2)))), 0.3) - sqrt(pow(j - (x / 2), 2) + pow(i - (y / 2), 2))
cos(i * j)
cos(i + j) * sin(i * j)

내가 테스트로 해본 식들은 그냥 내가 아무거나 식을 적어서 넣어서 출력해본 것이다.

굳이 따지진 말기~

 

근데 진짜 수업시간에 매번 어떻게 쓰는지도 잘 모르는 수학 식으로 수업하는 것보다.. 이렇게 눈으로 그려보면서 수업하는 것도 재밌을 것 같다..

우리 학교는 안해주나...

 

어쨌든 끝입니다!

감사합니다! (2022-05-26 오후 9시 20분 작성완료)

반응형
반응형

주의 전문적인 지식이 없이 진행하기 때문에 이 내용은 확실하지 않을 수 있습니다!

네이버엔 가사를 입력해 음악을 찾을 수 있는 서비스가 있다.

 

 


일단 왜 이것을 하게 되었는지 부터...

저번에 어떤 친구가 네이버 가사 검색 API를 가져와서 쓰고 싶다고 나한테 물어봤다.

 

이때 여러가지 생각이 들었다. 일단 난 고등학생이며 HTML를 고등학교 1학년 때 처음으로 배우고 그 뒤로는 찾아보며 한 것 때문에 기본 지식이 별로 없었고, API에 대한 개념이나 하는 방법을 거의 전혀 모르고 있었다. 

 

학교에선 반 학생들은 나에게 어떤 프로젝트를 진행할 때 많이 물어보곤 한다. 해본 것이 많기 때문에 그리고 나는 그것을 해결해준다. 대부분의 문제들을 해결 할 수 있었다. (분명 난 검색 능력이 좋아서 찾아보고 코드를 이해하고 도와주는 것일 뿐인데.. 왜 거의 다 해결되는거지..)

진짜 신기하긴 하다. 내가 어떤 목표로 잡은 것은 어떻게든 검색하여 찾아서 해볼려고 한다. 그걸로 고 1 6월 달 전엔 몰랐던 파이썬, 헤로쿠, 아나콘다 등등을 12월에 거의 다 사용할 수 있게 되었었다.

 

어쨌든

나는 이 난감에 어떻게든 이 문제를 해결해보고 싶었다.

그가 아닌 나를 위해... (아 물론 다 해결한 후 어떻게 했는진 비밀로 함)


 

1. 어떻게 동작하는지 이해해보며 API를 찾아보자!

일단.. 요즘 내가 듣는 음악.. 잘 된다.

여기서 난 과연 어떻게 동작할 지 생각해 보았다.

분명 API로 가사를 보내서 데이터를 가져올 것 같다.. 라 생각했다.

 

그래서 나는 네이버 디벨로퍼에서 API를 찾아보았다. 음.. 없다!

그래서 여기서 위험한 짓을 했다.. 

소스코드를 뜯어보자..

 

F12 개발자 모드를 열어 하나하나씩 다 확인해보았다 Ctrl + U 키로 전체 소스코드도 확인해보았다.

소스코드를 확인해보다가 가사 검색의 종료 지점에 스크립트 하나가 숨겨져 있었다.

가사 검색이라는 말이 있는 것이 보니.. 이 것이 맞는 것 같았다..!

 

대충 소스코드를 보니 (Visual Studio Code에서 자동 정렬 시켰다.) 참고로 난 이 글을 쓰는 날에도 아직 JS를 잘 사용하지 못한다.

jquery의 ajax를 사용하여 api로 값을 보내서 가져오는 것 같았다.

 

나는 바로 이것을 API 테스트 하는 곳인 POST MAN에서 써보자라는 생각이 떠올랐다.

그래서 바로 시도해보았다.

일단 이렇게 넣어봤다. 그냥 진짜 순서대로 넣은 것이다. Get은 값을 가져와야하기 때문에 저렇게 한 것..

쿼리 파라미터로 일단 모든 값을 보내보았다.

값은 일단 음.. 실패인가..

일단 affordanceLink라는게 보인다.. 내가 생각하기엔 저기서 검색을 하는 것 같다..

직접 주소 창에 치니깐..

잘 나온다..;;

어쨌든 이게 목표가 아니고..

그래서 그 당시 생각했던 방법이.. 왜 가사검색 뒤에 띄어쓰기가 있는지 고민해보았다.

그래서 여기에 가사를 넣어보니.. 뚜둔

신기하게.. 제대로 작동한다..

일단 여기에서 필요없는 파라미터가 있을 테니 일단 하나씩 빼보자.. 

그리고 난 pkid, u1, u2, u3, u4를 모두 뺐다. 그래도 동작해서..

저게 뭔진 나도 잘 모른다.

어쨌든 되는 것을 확인했으므로 이것을 구현해보자 웹에서 쓸 수 있게!

 

2. 구현!

여러 AJAX 사용법을 찾아보며 테스트로 코드를 만들어봤다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <script
            src="https://code.jquery.com/jquery-3.4.1.js"
            integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
            crossorigin="anonymous"></script>

        <div id="result"></div>
        <script>
            $
                .ajax({
                    method: "GET",
                    url: "https://m.search.naver.com/p/csearch/content/qapirender.nhn?where=nexearch&key=LyricsSearchResult&",
                    data: {
                        q: "가사검색 화장은 치열하게 머리는"
                    }
                })
                .done(function (msg) {
                    $("#result").text(JSON.stringify(msg));
                });
        </script>
    </body>
</html>

일단 js를 이용하여 ajax를 사용하기 위한 jquery를 불러오고 ajax를 이용하여 API를 가져오는 코드를 만들어봤다.

파라미터는 바뀔 것이 q 뿐이므로 나머지 파라미터는 미리 입력해줬다.

그리고 값이 출력되면 msg에 넣어서  <div id="result"></div> 이 곳의 텍스트로 json을 출력해보았다.

그랬더니..

json 형태로 나오는 건 맞는 것 같은데.. html요소도 보인다.. 네이버에서 이걸 바로 쓸 수 있게 html코드와 함께 보내는 것 같았다.

나는 그래서 여기에서

가사라고 영어로 되어있는 부분쪽의 텍스트만 출력해보기로 했다.

var e = $(msg.current.html).find('.lyrics');
$("#result").text(e[0].innerText);

2줄의 코드만 일단 테스트 해봤다. 클래스 lyrics를 찾고 그 안에서

API 값을 가져와 lyrics 부분을 추출했을 때 json의 값이다. (아마)

0: p.lyrics를 보았고 그 안에는 innerText라는 값이 있고 그 안에 가사가 있었다. 그리고 이 코드를 실행하면

이런식으로 잘도 나오게 된다. 그리고 여기에서 제일 중요한건 가사가 아닌 제목이기 때문에 제목도 뽑아보자.

 

일단.. 당시엔 안해본 것이기 때문에 글을 쓰면서 테스트해보는데 제목이 안뽑힌다.. 

<a nocr onclick=\"return goOtherCR(this, 'a=nco_xfc*1.title&r=1&i=801980af_00000099223C&u=' + urlencode(this.href));\" href=\"https://vibe.naver.com/track/3810383\" target=\"_blank\">Bad Girls</a>

class가 따로 안보였기 때문에.. 난 이것을 어떻게 뽑는지 잘 모른다.. 그래서 보다가보니 music_title에 모든 정보가 담겨있는 것을 보았다.

 

그래서 출력해본 결과

이런식으로 제대로 출력이 되었다.. 나는 여기서 개행을 하거나 그러고 싶지는 않기 때문에 도전할 분들은 직접 js에서 해보시길..

어쨌든 제대로 출력되니 코드를 보자.

var music = $(msg.current.html).find('music_title');
$("#result").text(music.prevObject[0].innerText);

설명은 잘 못하겠지만.. music이라는 변수에 music_title 클래스를 찾아 그 코드에 있는 innerText 값을 div의 아이디 result 값에 텍스트로 넣는 것이다. 이렇게 해보니 저 위의 사진 처럼 나왔다.

 

이제 이 것을 계속 커스텀으로 입력할 수 있어야 했다.

그렇기 때문에 또 계속 해보았다.

 

 

최종결과!

위에서 검색어 창에 입력 후 오른쪽 조그만 박스를 눌르면 바로 아래 여러 텍스트로 뜬다.

나는 여기서 더 이상 진행하지 않으며 여기까지만 만들 것이다. 코드는 아래에 올리고 나머지 작업은 직접 시도해보길!

(근데 이거 보고 과연 따라하는 사람이 있을까?)

 

사실 이 시도 후에 검색하다가 musixmatch 이걸 찾았었다. 그리고.. API를 사용하여 가져오는 방법도 있었고 훨씬 많은 음악을 지원하며 API 지원도 잘 되어있었다..

어쨌든 이 이후에 musix match도 해서 출력했었었다. 이 과정은 나중에 업로드 할 것임!

 

어쨌든 저 처럼 노가다 안하실 분은.. musix match로!

 

코드

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <script
            src="https://code.jquery.com/jquery-3.4.1.js"
            integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
            crossorigin="anonymous"></script>

        <input type="text" id="search" placeholder="검색할 가사"/>
        <button id="bt">검색</button>
        <div id="result"></div>
        <script>
            document
                .getElementById("bt")
                .addEventListener('click', getmusic);
            function getmusic() {
                $
                    .ajax({
                        method: "GET",
                        url: "https://m.search.naver.com/p/csearch/content/qapirender.nhn?where=nexearch&key" +
                                "=LyricsSearchResult&",
                        data: {
                            q: "가사검색 " + document
                                .getElementById("search")
                                .value
                        }
                    })
                    .done(function (msg) {
                        var music = $(msg.current.html).find('music_title');
                        $("#result").text(music.prevObject[0].innerText);
                    });
            }
        </script>
    </body>
</html>

직접 해보실 분은 아래에서 테스트 해보세요!

Document

 

음 참고로 줄 이상한건 자동 정렬때문에 그런거..

 

어쨌든 끝! (2022-05-26 오전 12시 42분 작성 완료)

 

 

반응형

+ Recent posts