<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.2">Jekyll</generator><link href="https://hanjiyong.github.io/feed.xml" rel="self" type="application/atom+xml" /><link href="https://hanjiyong.github.io/" rel="alternate" type="text/html" /><updated>2023-01-06T23:52:16+09:00</updated><id>https://hanjiyong.github.io/feed.xml</id><title type="html">Vivid Dream</title><subtitle>Today I Learned</subtitle><author><name>Han Ji Yong</name></author><entry><title type="html">[web] python flask-02:data 전송</title><link href="https://hanjiyong.github.io/python%20web/post-web-python-flask-02/" rel="alternate" type="text/html" title="[web] python flask-02:data 전송" /><published>2023-01-06T00:00:00+09:00</published><updated>2023-01-06T20:50:00+09:00</updated><id>https://hanjiyong.github.io/python%20web/post-%5Bweb%5D%20python%20flask-02</id><content type="html" xml:base="https://hanjiyong.github.io/python%20web/post-web-python-flask-02/">&lt;p&gt;Pytorch model을 웹에 서빙하기 위한 web 공부&lt;/p&gt;

&lt;p&gt;server와 client 간의 데이터 이동&lt;/p&gt;

&lt;h3 id=&quot;server-to-client&quot;&gt;Server to client&lt;/h3&gt;
&lt;p&gt;python 파일에서 html을 띄우는 renter_template에 argument를 추가하여 보내면 됩니다.&lt;/p&gt;

&lt;div class=&quot;language-python highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c1&quot;&gt;# app.py
&lt;/span&gt;&lt;span class=&quot;kn&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;flask&lt;/span&gt; &lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Flask&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;render_template&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;request&lt;/span&gt;

&lt;span class=&quot;c1&quot;&gt;#Flask 객체 인스턴스 생성
&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;app&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Flask&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;__name__&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;

&lt;span class=&quot;o&quot;&gt;@&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;app&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;route&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'/'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;methods&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'GET'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'POST'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;))&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;# 접속하는 url
&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;index&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;():&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;request&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;method&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;==&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;POST&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;c1&quot;&gt;# user=request.form['user'] # 전달받은 name이 user인 데이터
&lt;/span&gt;        &lt;span class=&quot;k&quot;&gt;print&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;request&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;form&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;get&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'user'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;))&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;# 안전하게 가져오려면 get
&lt;/span&gt;        &lt;span class=&quot;n&quot;&gt;user&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;request&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;form&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;get&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'user'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;data&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'level'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;60&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'point'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;360&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'exp'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;45000&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;render_template&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'index.html'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;user&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;user&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;elif&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;request&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;method&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;==&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;GET&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;user&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&quot;지용&quot;&lt;/span&gt;
        &lt;span class=&quot;n&quot;&gt;data&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'level'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;60&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'point'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;360&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;'exp'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;45000&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;render_template&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'index.html'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;user&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;user&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;__name__&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;==&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;__main__&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;n&quot;&gt;app&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;debug&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;bp&quot;&gt;True&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;c1&quot;&gt;# host 등을 직접 지정하고 싶다면
&lt;/span&gt;  &lt;span class=&quot;c1&quot;&gt;# app.run(host=&quot;127.0.0.1&quot;, port=&quot;5000&quot;, debug=True)
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;ul&gt;
  &lt;li&gt;client가 server에 data를 보내는 방식에 따라 get방식과 post방식으로 나뉠 수 있습니다.&lt;/li&gt;
  &lt;li&gt;client의 요청 데이터는 request를 통해 전송되기 때문에 request를 참조하여야 합니다.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3 id=&quot;client-data처리&quot;&gt;client data처리&lt;/h3&gt;

&lt;div class=&quot;language-html highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;cp&quot;&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;html&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;lang=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;en&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;meta&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;charset=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;UTF-8&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;title&amp;gt;&lt;/span&gt;Title&lt;span class=&quot;nt&quot;&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;link&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;rel=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;stylesheet&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;href=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;대문 페이지&lt;span class=&quot;nt&quot;&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
    이름 : 
    레벨 : 
    포인트 : 
    경험치 : 

   &lt;span class=&quot;nt&quot;&gt;&amp;lt;form&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;action=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;/&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;method=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;post&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
        다음 이름 : &lt;span class=&quot;nt&quot;&gt;&amp;lt;input&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;type=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;text&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;name=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;user&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;input&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;type=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;submit&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;value=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;전송하기&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
   &lt;span class=&quot;nt&quot;&gt;&amp;lt;/form&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;ul&gt;
  &lt;li&gt;flask는 jinja2 템플릿 엔진을 사용합니다.&lt;/li&gt;
  &lt;li&gt;변수를 가져오는 템플릿은  입니다.&lt;/li&gt;
  &lt;li&gt;key로 value를 가져올 땐 입니다.
client에서 server로 데이터 전송 시 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;name&lt;/code&gt;은 server에서 사용할 변수명 또는 키 값이 됩니다.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4 id=&quot;get-post-차이&quot;&gt;get, post 차이&lt;/h4&gt;
&lt;p&gt;&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;get&lt;/code&gt; 방식은 캐시가 가능하고, 브라우저 히스토리에 남습니다다. get 요청에는 길이 제한이 있기에, 보통 데이터를 요청할때만 사용된다.
&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;post&lt;/code&gt; 방식은 캐시되지 않고, 브라우저 히스토리에 남지 않습니다. post 요청에는 길이 제한도 없기에 보안이 필요한 전송에서는 post 방식을 사용해야 합니다.&lt;/p&gt;

&lt;h3 id=&quot;server-구동&quot;&gt;Server 구동&lt;/h3&gt;

&lt;p&gt;File directory는 다음과 같습니다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://velog.velcdn.com/images/jyong0719/post/17fe9359-aaba-4544-a683-8cb6fa9757d5/image.png&quot; width=&quot;20%&quot; /&gt;&lt;/p&gt;

&lt;h4 id=&quot;stylecss&quot;&gt;style.css&lt;/h4&gt;
&lt;p&gt;&lt;img src=&quot;https://velog.velcdn.com/images/jyong0719/post/6ea1f520-0971-4729-8f66-29da67ec0134/image.png&quot; width=&quot;35%&quot; /&gt;&lt;/p&gt;

&lt;h4 id=&quot;indexhtml&quot;&gt;index.html&lt;/h4&gt;
&lt;p&gt;&lt;img src=&quot;https://velog.velcdn.com/images/jyong0719/post/91ca0cad-55e0-48a0-8520-77331cf41f8e/image.png&quot; width=&quot;70%&quot; /&gt;&lt;/p&gt;

&lt;h4 id=&quot;apppy&quot;&gt;app.py&lt;/h4&gt;
&lt;p&gt;&lt;img src=&quot;https://velog.velcdn.com/images/jyong0719/post/be7b8747-ba87-4b1a-b0e9-882d0fac9def/image.png&quot; width=&quot;70%&quot; /&gt;&lt;/p&gt;

&lt;h3 id=&quot;python-실행&quot;&gt;python 실행&lt;/h3&gt;
&lt;p&gt;&lt;img src=&quot;https://velog.velcdn.com/images/jyong0719/post/75511245-dd2a-4936-b1de-92b4a9484808/image.png&quot; width=&quot;70%&quot; /&gt;&lt;/p&gt;

&lt;h4 id=&quot;실행-화면&quot;&gt;실행 화면&lt;/h4&gt;
&lt;p&gt;&lt;img src=&quot;https://velog.velcdn.com/images/jyong0719/post/ca6b8409-cefd-4553-bc3b-8f2f4414eed0/image.png&quot; width=&quot;70%&quot; /&gt;&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;새로운 이름 전송하기&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;img src=&quot;https://velog.velcdn.com/images/jyong0719/post/0bd2a8c1-7f94-4419-93dd-db74b8865f21/image.png&quot; width=&quot;70%&quot; /&gt;&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;결과&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;img src=&quot;https://velog.velcdn.com/images/jyong0719/post/f3c21687-0cf8-4d89-bb96-9aa6e9b41f5d/image.png&quot; width=&quot;70%&quot; /&gt;&lt;/p&gt;</content><author><name>Han Ji Yong</name></author><category term="python web" /><category term="python" /><category term="web" /><category term="flask" /><summary type="html">Pytorch model을 웹에 서빙하기 위한 web 공부</summary></entry><entry><title type="html">[web] python flask-01:basic</title><link href="https://hanjiyong.github.io/python%20web/post-web-python-flask-01/" rel="alternate" type="text/html" title="[web] python flask-01:basic" /><published>2022-12-16T00:00:00+09:00</published><updated>2022-12-16T15:05:00+09:00</updated><id>https://hanjiyong.github.io/python%20web/post-%5Bweb%5D%20python%20flask-01</id><content type="html" xml:base="https://hanjiyong.github.io/python%20web/post-web-python-flask-01/">&lt;p&gt;Pytorch model을 웹에 서빙하기 위한 web 공부&lt;/p&gt;

&lt;p&gt;학습한 딥러닝 모델들을 웹 상에서 서빙하기 위해 flask 공부를 시작했습니다.&lt;/p&gt;

&lt;h3 id=&quot;install&quot;&gt;Install&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-linux&quot;&gt;pip install flask
&lt;/code&gt;&lt;/pre&gt;

&lt;h3 id=&quot;project-directory&quot;&gt;Project directory&lt;/h3&gt;
&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;project root
├─ app.py
├─ templates
│     └─ index.html
└─ static
    ├─ js
    │   └─ main.js
    └─ css
        └─ style.css
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;Flask project는 [templates, static] 폴더, python file로 구성합니다.
templates 는 web 상에서 띄울 html 파일들을 모아놓는 폴더입니다.
static은 필요한 css,js파일들, 정적 파일들을 모아놓을 폴더입니다.&lt;/p&gt;

&lt;h3 id=&quot;apppy-생성&quot;&gt;app.py 생성&lt;/h3&gt;

&lt;p&gt;실행하여 server를 가동시킬 python 파일을 생성합니다.&lt;/p&gt;

&lt;div class=&quot;language-python highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;kn&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;flask&lt;/span&gt; &lt;span class=&quot;kn&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Flask&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;render_template&lt;/span&gt;

&lt;span class=&quot;c1&quot;&gt;#Flask 객체 인스턴스 생성
&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;app&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;Flask&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;__name__&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;

&lt;span class=&quot;o&quot;&gt;@&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;app&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;route&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'/'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;# 접속하는 url
&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;index&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;():&lt;/span&gt;
	&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;render_template&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;'index.html'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;__name__&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;==&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;__main__&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;
	&lt;span class=&quot;n&quot;&gt;app&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;debug&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;bp&quot;&gt;True&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;c1&quot;&gt;# host 등을 직접 지정하고 싶다면
&lt;/span&gt;    &lt;span class=&quot;c1&quot;&gt;# app.run(host=&quot;127.0.0.1&quot;,port=&quot;5000&quot;, debug=True)
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;ul&gt;
  &lt;li&gt;웹 페이지를 하나씩 추가할 때마다 decorator &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;@app.route()&lt;/code&gt;를 추가하고 아래 함수를 작성해야합니다.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3 id=&quot;stylecss-생성&quot;&gt;style.css 생성&lt;/h3&gt;
&lt;ul&gt;
  &lt;li&gt;index.html을 꾸미는 css 코드 생성
    &lt;div class=&quot;language-css highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nt&quot;&gt;h1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;color&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;blue&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;    &lt;/div&gt;
    &lt;h3 id=&quot;indexhtml-생성&quot;&gt;index.html 생성&lt;/h3&gt;
    &lt;p&gt;```html
&amp;lt;!DOCTYPE html&amp;gt;&lt;/p&gt;
  &lt;/li&gt;
&lt;/ul&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;title&gt;Title&lt;/title&gt;
  	&lt;link rel=&quot;stylesheet&quot; href=&quot;&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;대문 페이지&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;p&gt;```&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;서버 구동 후 front에서 표시해줄 web 페이지 입니다.&lt;/li&gt;
  &lt;li&gt;head tag 안에서 static파일을 참조하는 경우
   식으로 작성합니다.
예 :&lt;/li&gt;
&lt;/ul&gt;

&lt;h3 id=&quot;server-구동&quot;&gt;Server 구동&lt;/h3&gt;

&lt;p&gt;File directory는 다음과 같습니다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://velog.velcdn.com/images/jyong0719/post/17fe9359-aaba-4544-a683-8cb6fa9757d5/image.png&quot; width=&quot;20%&quot; /&gt;&lt;/p&gt;

&lt;h4 id=&quot;stylecss&quot;&gt;style.css&lt;/h4&gt;
&lt;p&gt;&lt;img src=&quot;https://velog.velcdn.com/images/jyong0719/post/6ea1f520-0971-4729-8f66-29da67ec0134/image.png&quot; width=&quot;35%&quot; /&gt;&lt;/p&gt;

&lt;h4 id=&quot;indexhtml&quot;&gt;index.html&lt;/h4&gt;
&lt;p&gt;&lt;img src=&quot;https://velog.velcdn.com/images/jyong0719/post/9940c8d1-c169-49ed-b5a4-8dce2d09e0dc/image.png&quot; width=&quot;70%&quot; /&gt;&lt;/p&gt;

&lt;h4 id=&quot;apppy&quot;&gt;app.py&lt;/h4&gt;
&lt;p&gt;&lt;img src=&quot;https://velog.velcdn.com/images/jyong0719/post/e9935756-306f-4c66-b163-cd16145d1955/image.png&quot; width=&quot;70%&quot; /&gt;&lt;/p&gt;

&lt;h3 id=&quot;python-실행&quot;&gt;python 실행&lt;/h3&gt;

&lt;p&gt;&lt;img src=&quot;https://velog.velcdn.com/images/jyong0719/post/75511245-dd2a-4936-b1de-92b4a9484808/image.png&quot; width=&quot;70%&quot; /&gt;&lt;/p&gt;

&lt;h4 id=&quot;실행-화면&quot;&gt;실행 화면&lt;/h4&gt;
&lt;p&gt;&lt;img src=&quot;https://velog.velcdn.com/images/jyong0719/post/45e717c9-0d90-4c3a-a71c-39a54b548276/image.png&quot; width=&quot;70%&quot; /&gt;&lt;/p&gt;</content><author><name>Han Ji Yong</name></author><category term="python web" /><category term="python" /><category term="web" /><category term="flask" /><summary type="html">Pytorch model을 웹에 서빙하기 위한 web 공부</summary></entry><entry><title type="html">논문리뷰-DINO</title><link href="https://hanjiyong.github.io/%EB%85%BC%EB%AC%B8%20%EB%A6%AC%EB%B7%B0/post-%EB%85%BC%EB%AC%B8%EB%A6%AC%EB%B7%B0-DINO/" rel="alternate" type="text/html" title="논문리뷰-DINO" /><published>2022-12-06T00:00:00+09:00</published><updated>2022-12-08T02:52:00+09:00</updated><id>https://hanjiyong.github.io/%EB%85%BC%EB%AC%B8%20%EB%A6%AC%EB%B7%B0/post-%5B%EB%85%BC%EB%AC%B8%EB%A6%AC%EB%B7%B0%5DDINO</id><content type="html" xml:base="https://hanjiyong.github.io/%EB%85%BC%EB%AC%B8%20%EB%A6%AC%EB%B7%B0/post-%EB%85%BC%EB%AC%B8%EB%A6%AC%EB%B7%B0-DINO/">&lt;h1 id=&quot;emerging-properties-in-self-supervised-vision-transformers&quot;&gt;Emerging Properties in Self-Supervised Vision Transformers&lt;/h1&gt;

&lt;p&gt;본 논문은 2021년 ICCV에 Facebook AI Research팀에서 발표한 논문입니다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://velog.velcdn.com/images/jyong0719/post/4aa82fdc-3e00-4492-bc49-b121e281f792/image.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;해당 논문에서는 Self-&lt;strong&gt;di&lt;/strong&gt;stillation with &lt;strong&gt;no&lt;/strong&gt; labels -&amp;gt;DINO 라는 학습 방법을 제시 합니다.&lt;/p&gt;

&lt;p&gt;위 그림은 Dino를 적용한 ViT 모델의 attention map으로 각 Image에서 feature를 정교하게 추출하는 모습을 보이고 있습니다.&lt;/p&gt;

&lt;h3 id=&quot;intro&quot;&gt;Intro&lt;/h3&gt;

&lt;p&gt;연구의 시작은 SSL(Self-Supervised Learning)을 ViT에 적용해보면 어떨까 라는 질문에서 시작되었다고 말하고 있습니다. 
Transformer는 NLP뿐만 아니라 Vision 분야에서도 CNN을 대체하는 네트워크로 많이 사용되고 있지만, 연산량도 더 높고 학습을 위해서도 더 많은 데이터가 필요할 뿐만 아니라 학습 후 추출된 feature에 대해서도 명확한 특성을 알기 쉽지 않습니다.
때문에 저자들은 NLP분야에서 SOTA를 달성한 BERT나 GPT모델이 Self-supervised pretraining 기법을 사용한 것을 동기 삼아 ViT모델에 SSL을 적용하였습니다.&lt;/p&gt;

&lt;h3 id=&quot;knowledge-distillation&quot;&gt;Knowledge distillation&lt;/h3&gt;

&lt;p&gt;&lt;img src=&quot;https://velog.velcdn.com/images/jyong0719/post/b59d0466-38f7-4b16-96da-6e3807b3a88e/image.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;DINO(self distillation with no labels)에 적용되는 Knowledge distillation은 모델 경량화와 관련된 개념으로 큰 모델(Teacher network)을 사용하여 작은 모델(Student network)에서도 teacher network와 비슷한 성능을 낼 수 있도록 하는 목적을 갖고 있습니다.&lt;/p&gt;

&lt;h3 id=&quot;ssl-with-knowledge-distillation--dino&quot;&gt;SSL with Knowledge Distillation : DINO&lt;/h3&gt;

&lt;p&gt;논문에서는 제안하는 framework를 DINO라고 칭하고 있습니다. DINO는 일반적인 knowledge-distillation 구조와는 다르게 Teacher network의 output을 student model의 output이 직접적으로 예측하는 간소화된 구조를 띄고 있습니다.&lt;/p&gt;

&lt;p&gt;즉 DINO framework는 SSL과 knowledge-distillation 방법론을 띄고 있습니다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://velog.velcdn.com/images/jyong0719/post/e4f8f5a2-b994-452e-9ee8-f2015a5243c8/image.png&quot; alt=&quot;&quot; /&gt;
전체적인 DINO framework의 illustration과 pytorch pseudo code 입니다.&lt;/p&gt;

&lt;p&gt;Key idea는 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;cross entropy&lt;/code&gt;,&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;multi crop strategy&lt;/code&gt;,&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;momentum teacher&lt;/code&gt;,&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;centering&lt;/code&gt;,&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;sharpening&lt;/code&gt; 입니다. 
전체적인 흐름에 대해 살펴 보면, 같은 네트워크 구조를 갖는 model student와 teacher를 구성하고 teacher의 gradient는 동결하여 학습하지 않습니다.
하나의 sample x에 대해서 서로 다른 augmentation기법을 적용한 x1,x2를 각각 생성 후 student와 teacher에 통과시키고 두 모델의 softmax 확률 값을 cross entropy loss로 최적화 하는 흐름입니다.&lt;/p&gt;

&lt;h4 id=&quot;multi-crop-strategy&quot;&gt;Multi-crop strategy&lt;/h4&gt;

&lt;p&gt;&lt;img src=&quot;https://velog.velcdn.com/images/jyong0719/post/7846d1ec-9be2-44e3-900c-99a00e335076/image.png&quot; alt=&quot;&quot; /&gt;
Augmentation에서 사용되는 multi crop의 경우 global view와 local view로 나눠집니다. Global view는 sample의 원래 크기에서 50% 이상의 크기로 crop후 resize, local view는 50%이하로 crop해서 resize하는 방법입니다. Global view 같은 경우 2개의 sample을 만들고, local view는 여러개의 sample을 생성하였다고 합니다. 
생성한 각 data를 teacher network에서는 global view만 사용하고 student network는 모든 view를 사용합니다.&lt;/p&gt;

&lt;h3 id=&quot;momentum-teacher&quot;&gt;Momentum teacher&lt;/h3&gt;

&lt;p&gt;일반적인 knowledge distllation과는 다르게 DINO에서 Teacher network는 student에 비해 이전에 학습된 parameter를 사용하고 있지 않습니다. Student network를 먼저 생성하여 같은 구조의 모델을 사용하되 teacher network의 gradient는 동결시킨 후, student의 parameter를 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;EMA(Exponential moving average)&lt;/code&gt; 기법을 적용하여 parameter update을 진행합니다. EMA는 가중치를 주어서, 과거의 정보도 영향력을 행사하도록 고려한 방법입니다.
Update 방법은 $\theta_t &amp;lt;- \lambda\theta_t + (1-\lambda)\theta_s$ 입니다. $\lambda$는 hyper parameter로 저자들은 0.996~1이 되도록 cosine schedule을 사용하였습니다.
이런 방식으로 teacher model의 parameter를 업데이트 하면 결국 학습 단계에서 봤던 student model들의 parameter의 평균이 되는 것과 유사한데, 이는 모델 앙상블의 효과를 갖을 수 있습니다.&lt;/p&gt;

&lt;h3 id=&quot;avoiding-collapse&quot;&gt;Avoiding collapse&lt;/h3&gt;

&lt;p&gt;DINO에서는 여느 SSL 연구들과 마찬가지로 발생할 수 있는 collapse가 존재하는데 여러 SSL 연구에서는 contrastive loss, clustering constraints, predictor or batch normalization과 같은 방법들을 사용하였습니다.&lt;/p&gt;

&lt;p&gt;DINO에서는 centering과 sharpening을 적용해서 학습에서 생길 수 있는 문제점을 보완하고 있습니다. Sharpening은 network의 output 확률 분포를 조절 하는 방법으로 &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;temperature&lt;/code&gt; 라는 hyper parameter로 model의 출력값을 나눈 후 softmax를 취하는 방법입니다.&lt;/p&gt;

&lt;p&gt;Temperature는 1보다 작은 값을 사용할 때, 0에 가까울 수록 더욱 돋보이는 확률 값으로 분포가 변화됩니다.&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Sharpening : $P_s(x)^{(i)} = \frac{exp(g_{\theta_{s}}(x)^{(i)}/ \tau_s)}{\sum_{k=1}^{K}exp(g_{\theta_{s}}(x)^{(k)}/\tau_s))}$
$\tau_s$: temperature of student
$\tau_t$: temperature of teacher&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;img src=&quot;https://velog.velcdn.com/images/jyong0719/post/a7ec50b8-b03e-4f90-a854-59358ea374e4/image.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Student model에서 temperature는 0.1, teacher model에서의 temperature는 0.04를 사용하였습니다.&lt;/p&gt;

&lt;p&gt;Centering은 $g_t(x) &amp;lt;- g_t(x)+c$ 로 teacher model output에 $c$라는 bias term을 추가한 효과를 냅니다. $c$의 초기값은 첫번째 batch의 output 평균 값으로 이후에는 m(hyper parameter)이라는 0보다 큰 비율로 업데이트를 합니다.&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;$c \leftarrow mc + (1-m)\frac{1}{B}\sum_{B}^{i=1}g_{\theta_t}(x_i)$&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Centering은 모델의 출력이 하나의 차원으로만 직결되는 상화을 막을 수 있지만, 반대로 출력값의 분포가 uniform distribution을 따르도록 하는 문제점을 야기합니다. 
Sharpening은 centering과 반대의 효과를 주기에, 두 기법을 모두 사용하여 학습함으로써 적절한 벨런스를 유지할 수 있었다고 말합니다.&lt;/p&gt;

&lt;h3 id=&quot;results&quot;&gt;Results&lt;/h3&gt;
&lt;p&gt;&lt;img src=&quot;https://velog.velcdn.com/images/jyong0719/post/762f643c-aa87-4fb2-b742-60a5e98d298c/image.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;결과 평가를 위해 같은 네트워크에서 DINO기법을 적용해보고, 여러 모델에 여러기 법을 합쳐서 학습한 결과를 비교합니다. Resnet-50을 ViT와 비교하는데, 파라미터수, 연산 시간, Imagenet의 성능이 유사하기때문에 비교 모델로 선정했다고 합니다. Resnet-50에 DINO 기법을 적용한 것이 가장 좋은 성능을 기록했으며, ViT에서도 DINO를 사용한 성능이 가장 높음을 보이고 있습니다.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://velog.velcdn.com/images/jyong0719/post/7dbc4372-dcfe-49fb-bd1d-2218628cba4b/image.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;일반적인 학습 방법보다도 DINO framwork에서의 feature extraction이 더 정교함을 보이고 있습니다.&lt;/p&gt;

&lt;p&gt;BERT 계열의 모델에서 SSL이 key point가 될 수 있었던 것처럼 ViT에서도 SSL의 효과를 볼 수 있었습니다.&lt;/p&gt;</content><author><name>Han Ji Yong</name></author><category term="논문 리뷰" /><category term="논문 리뷰" /><category term="Deeplearning" /><category term="Self-supervised learning" /><summary type="html">Emerging Properties in Self-Supervised Vision Transformers</summary></entry><entry><title type="html">Post: Posting Practice</title><link href="https://hanjiyong.github.io/post%20formats/post-practice/" rel="alternate" type="text/html" title="Post: Posting Practice" /><published>2022-11-01T00:00:00+09:00</published><updated>2022-11-02T02:34:02+09:00</updated><id>https://hanjiyong.github.io/post%20formats/post-practice</id><content type="html" xml:base="https://hanjiyong.github.io/post%20formats/post-practice/">&lt;p&gt;This post has been updated and should show a modified date if used in a layout.&lt;/p&gt;

&lt;p&gt;All children, except one, grow up. They soon know that they will grow up, and the way Wendy knew was this. One day when she was two years old she was playing in a garden, and she plucked another flower and ran with it to her mother. I suppose she must have looked rather delightful, for Mrs. Darling put her hand to her heart and cried, “Oh, why can’t you remain like this for ever!” This was all that passed between them on the subject, but henceforth Wendy knew that she must grow up. You always know after you are two. Two is the beginning of the end.&lt;/p&gt;</content><author><name>Han Ji Yong</name></author><category term="Post Formats" /><category term="Post Formats" /><category term="readability" /><category term="standard" /><summary type="html">This post has been updated and should show a modified date if used in a layout.</summary></entry></feed>