최근 인공지능 학습을 하면서 텐서 보드 코드 넣기가 귀찮아서 터미널로만 loss를 봐왔습니다.

 학습속도가 너무 느려서 학습이 되는지 안 되는 지도 구별이 안될 지경이라, 그래프를 플롯 하기로 했습니다.

 대체로 텐서보드를 많이 사용해서 텐서 보드들 추가하려 했습니다만, 학습은 대부분 원격으로 서버에서 돌리고, 텐서 보드는 로컬에서만 돌아 온라인으로 접속할 수 없더군요. 검색으로는 포트 포워딩을 통해서 연결하는 방법이 있었지만, 모바일이나 여타 환경에서는 번거롭다고 생각이 되었습니다. (포트 포워딩이 아닌 자체적으로 지원하는 다른 방법이 있는지까지는 검색해보지 않았습니다..)

 최근에 파이썬으로 간단한 프로그램 제작이 편리하다는걸 느껴서, 연습 겸 파이썬으로 loss를 플롯 할 수 있는 웹서버를 만들기로 했습니다.

 간단히 html + js + canvas.js로 웹 코드를 짜고, 서버에서 돌아가는 프로그램에서는 서버에 저장된 loss.plot 파일을 읽어 html 소스에 추가한 후, 브라우저에서 요청이 있을 때마다 이 소스를 보내주도록 하였습니다.

 웹개발은 해본 적이 없어 짜깁기로. py 파일 안에 마구잡이로 넣어 만들어서 잘 설명하기가 힘듭니다...

대충 사용 예시는 다음과 같습니다.

서버에서는 웹서버 코드인 WGPServer.py를 실행시킵니다. 파이썬 3.7이상에서만 동작합니다.

(윈도우, 우분투 모두 동작합니다.)

 서버 구동시 사용 가능한 옵션으로는 접속 시 사용되는 비밀번호를 변경하는 -P, 포트를 변경하는 -p, 서버 아이피를 변경하는 -I (로컬 혹은 공인) 이 있습니다.

 IP를 자동으로 잡을 수 있도록 코드를 짰는데, 우분투에서는 로컬이 기본으로 잡혀 -I를 통해 직접 지정해주어야 하는 것 같습니다.

-p와 -P로 패스워드와 포트를 지정하지 않을경우 비밀번호 1234와 포트 8080이 기본으로 지정됩니다.

 공인 아이피로도 접근할 수 있지만, 포스팅을 위해 내부망으로만 테스트했습니다. 현재 서버의 IP는 192.168.1.2이고 포트는 8080입니다.

WGPServer.py는 항상 켜져있어야 그래프를 볼 수 있습니다.

이제 해당 주소 192.168.1.4:8080을 브라우저에 입력하면 웹서버에 접속합니다.

 아래는 웹서버에 접속시 메인 화면입니다. 대충 내용으로는 웹서버 내의 .plot 파일의 경로를 주소창에 입력하라는 것입니다. 또한 .plot파일에 그래프 데이터를 어떻게 저장해야 하는지 예시 또한 설명하고 있습니다.

저는 예시로 실제 학습 결과인 voice_loss.plot 파일을 불러오도록 하겠습니다. 아래는 서버 컴퓨터에 저장된 voice_loss.plot 파일입니다. 대략 {x:인덱스, y:값}, {x:인덱스, y:값}... 식으로 만들면 됩니다.

현재 voice_loss.plot 파일은  /home/yjc133/PycharmProjects/WaveNet/voice_loss.plot 경로에 존재합니다. 이 경로를 주소 옆에 이어서 붙여주면 됩니다.

단 우분투일 경우 192.168.1.4:8080//home/yjc133/PycharmProjects/WaveNet/voice_loss.plot 처럼 home 앞의 '/' 또한 경로에 포함되고 윈도우일 경우에는 192.168.1.4:8080/C:/PycharmProjects/WaveNet/voice_loss.plot 처럼 '/'를 한 개만 사용하여도 됩니다.

주소에 입력할경우 다음과 같이 로그인 창이 뜹니다. 서버를 실행할 때 설정한 비밀번호를 입력하여줍니다. 이 예시에서는 기본값인 1234입니다.

비밀번호를 입력하고 로그인을 하면 다음과같이 voice_loss.plot 파일을 읽어 실시간으로 그래프를 나타내어 줍니다.

차트의 제목은 .plot파일의 이름을 나타냅니다.

또한 그래프는 무조건 인덱스 1부터 나타내기 때문에 데이터의 인덱스가 1보다 작으면 안 됩니다. 그렇지 않게 할 수 있지만, loss 보는 것을 목표로 하기 때문에 편의상 epoch의 시작인 1로 고정해두었습니다.

Refresh 버튼을 통해 새로고침 할 수 있으며, Auto Refresh를 켜거나 끌 수 있어, 주기적으로 그래프를 다시 불러올 수 있습니다. 다시 불러오기는 Refresh Time에 적힌 숫자의 초마다 실행됩니다.

로스밖에 볼 수 없기에 텐서 보드보다는 기능이 떨어지지만, 포트 포워딩 없이 주소만 입력하면 모바일이나 PC 어디에서도 확인할 수 있기에 편리하게 사용하고 있습니다. 또한 브라우저의 새로운 탭에 주소 뒤의 파일 경로만 변경하여 입력하면 여러 개의 플롯을 한 번에 볼 수 있습니다.

github에 코드를 올려두었으니 자유롭게 사용하셔도 됩니다.

github.com/jeongchanYu/WebGraphPlotServer

WGPServer.py : 서버에서 실행 (python 3.7 이상)

graph.plot : 동작 테스트 및 .plot 양식 확인용 예시 파일

plotgen.py : .plot 파일 생성에 필요한 함수 (단순 파일 쓰기임, 직접 구현하여도 됨)