Update README.md + start page change

yjjng11 · Sep 28, 2017 · 14f20be · 14f20be
1 parent e300bab
commit 14f20be
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -1,27 +1,39 @@
 # Neural-fonts-webapp
 
-
 ### Introduction
 ---
 Neural fonts web app 은 한글 폰트 제작의 어려움을 덜기 위해, 사용자가 대표 글자 양식을 업로드 하면 그 글자의 디자인을 학습하여 다른 글자들의 이미지를 생성해주는 소프트웨어 입니다.
 
 <p align="center">
-  <img src="public/images/intro.png" style="width: 350px;"/>
+  <img src="public/images/intro.png" width="600"/>
 </p>
 
 ### Motivation
 -----
 <p align="center">
-  <img src="public/images/motivation.png" style="width: 300px;"/>
+  <img src="public/images/motivation.png" width="500"/>
 </p>
-한글 폰트 제작 시 필요한 막대한 시간을 단축시키기 위해 Neural fonts web app 은 딥러닝 기술을 이용해 대표 글자 디자인으로부터 한글 디자인을 생성해냄.
+
+한글은 유네스코 세계기록유산에 등재될 정도로 우수한 문자이지만, 한글 문자(폰트) 산업은 해외(예: 미국)에 비해 훨씬 작은 규모를 가지고 있습니다. 그 이유는 한글 폰트 제작에 많은 비용이 들기 때문입니다.
+
+90여개의 글자를 디자인 하는 것 만으로 폰트를 만들 수 있는 로마자와 달리, 한글 폰트를 제작하기 위해서는 초성/중성/종성 으로 이루어진 11,172 개의 글자를 디자인해야 합니다.
+
+이를 위해서는 다수의 디자이너가 장기간 투입되어야 하기 때문에 폰트의 가격이 올라가게 되며, 개인 디자이너들이 자신만의 폰트를 만드는 것이 거의 불가능합니다.
+
+저희는 이러한 문제를 해결하고 누구나 쉽게 한글 폰트를 제작할 수 있도록, 1만자 가량의 글자를 디자인하는 지루하고 반복적인 작업을 자동으로 해내는 소프트웨어를 개발하는 것을 목표로 하였습니다.
 
 ### Technology stack
 -----
 <p align="center">
-  <img src="public/images/architecture.png" style="width: 350px;"/>
+  <img src="public/images/architecture.png" width="700"/>
 </p>
 
+클라이언트의 GUI는 jQuery, Bootstrap 기술을 이용하여 구현하였습니다.
+
+서버는 Node.js 와 Express 를 이용하여 구현하였고, 딥러닝 기술은 tensorflow가 설치된 docker에서 수행하도록 구현하였습니다 (Node 서버는 딥러닝 연산을 할 때마다 docker에서 수행합니다).
+
+그리고 폰트 파일 생성을 위해  vectorization, svg, ttf 파일 관련 라이브러리들을 이용하였습니다.
+
 ### How to Use
 ----------
 Neural fonts web app 을 수행하기 위해서는 먼저 tensorflow가 설치된 docker를 background에서 동작시키고, 그 다음에 Node.js 로 구현된 웹서버를 동작시켜야 합니다.
@@ -34,28 +46,36 @@ Neural fonts web app 을 수행하기 위해서는 먼저 tensorflow가 설치
 1. Install Node.js
 2. Install NPM, if necessary
 3. Install NPM packages
-	> $ npm install
+
+```bash
+$ npm install
+```
+
 4. Install docker ce (reference : https://docs.docker.com/engine/installation/linux/docker-ce/ubuntu/)
 5. Install nvidia-docker and nvidia-docker plugin (reference : https://github.com/NVIDIA/nvidia-docker/wiki)
 
 ### Execution
 -----
 1. Run tensorflow docker and install some necessary libraries on the docker container
-	> $ nvidia-docker run -v /path/to/neural-fonts:/home/neural-fonts -w /home/neural-fonts --name neural_font -dit gcr.io/tensorflow/tensorflow:latest-gpu bash
-	> $ docker exec -it neural_font pip install imageio
-	> $ docker exec -it neural_font pip install scikit-image
+```bash
+$ nvidia-docker run -v /path/to/neural-fonts:/home/neural-fonts -w /home/neural-fonts --name neural_font -dit gcr.io/tensorflow/tensorflow:latest-gpu bash
+$ docker exec -it neural_font pip install imageio
+$ docker exec -it neural_font pip install scikit-image
+```
 
 2. Run Neural fonts web app
-	> $ node app.js
-
-	Then Neural fonts web app will be available at: localhost:3000 (or your.server.ip:3000)
+```bash
+$ node app.js
+```
+Then Neural fonts web app will be available at: localhost:3000 (or your.server.ip:3000)
 
 ### In web page
 -----
 1. 399자의 글자를 적을 수 있는 대표 글자 템플릿을 다운받은 후 양식에 맞춰 손글씨를 적어 스캔하거나, illustrator 등의 도구를 이용해 한글 디자인을 제작합니다.
 
 2. 시작하기 버튼을 클릭하고 준비한 파일을 업로드 합니다.
-
+	>- 대표 글자 템플릿은 3장으로 되어 있습니다. 첫째 장은 1-uniform.png, 둘째 장은 2-uniform.png, 셋째 장은 3-uniform.png 로 이름을 저장해서 업로드 해야 합니다.
+
 3. Neural fonts 는 업로드된 한글 디자인을 학습합니다. 이 과정은 한글 디자인을 흉내내는 인공신경망이 학습되는 과정으로, Titan X GPU 를 가진 서버에서 대략 30분 가량 소모됩니다.
 
 4. 학습이 끝나면 생성된 글자 디자인의 샘플이 보여집니다.
@@ -69,14 +89,14 @@ Neural fonts web app 을 수행하기 위해서는 먼저 tensorflow가 설치
 ### Examples
 -----
 <p align="center">
-  <img src="public/images/architecture.png" style="width: 350px;"/>
+  <img src="public/images/compare.png" width="700"/>
 </p>
 
 ## Acknowledgements
 We used GAN architecture from zi2zi, an open source project which aims at learning Chinese character style with conditional GAN.
 We changed zi2zi to support Korean character sets and generate font file (ttf). Also, we changed some designs to reduce training time.
-See our release notes to take a closer look on the differences between zi2zi and Neural fonts web app.
-* [zi2zi](https://github.com/kaonashi-tyc/zi2zi) by [yenchenlin](https://github.com/yenchenlin)
+See release notes in our submodule ([neural-fonts](https://github.com/periannath/neural-fonts/releases)) to take a closer look on the differences between zi2zi and Neural fonts web app.
+* [zi2zi](https://github.com/kaonashi-tyc/zi2zi) by [kaonashi-tyc](https://github.com/kaonashi-tyc)
 
 License
 -----

diff --git a/_config.yml b/_config.yml
@@ -0,0 +1 @@
+theme: jekyll-theme-cayman
diff --git a/views/index.ejs b/views/index.ejs
@@ -17,15 +17,15 @@
       <div class="row">
         <div class="col-lg-12" style="margin: auto;">
           <h2 style="margin-bottom: 20px">사용법</h2>
-          <p class="lead"><vsmall>1. 디자이너는 대표 글씨 템플릿에 글씨를 적어 스캔하거나 illustrator 등의 도구를 이용해 대표 글씨 디자인을 제작한 후 업로드 합니다.</vsmall></p>
+          <p class="lead"><vsmall>1. 디자이너는 대표 글자 템플릿에 글씨를 적어 스캔하거나 illustrator 등의 도구를 이용해 대표 글자 디자인을 제작한 후 업로드 합니다.</vsmall></p>
           <p class="lead"><vsmall>2. Neural fonts 는 디자이너가 업로드한 한글 디자인을 학습합니다. 이 과정은 한글 디자인을 흉내내는 인공신경망이 학습되는 과정으로, Titan X GPU 를 가진 서버에서 대략 30분  가량이 걸립니다.</vsmall></p>
-          <p class="lead"><vsmall>3. 학습이 끝나면 디자이너는 인공신경망이 생성한 글자 디자인의 샘플을 받아볼 수 있습니다. 만약 샘플이 마음에 든다면 전체 글자의 디자인을 다운로드할 수 있으며, 마음에 들지 않는다면 생성된 글자들 중 마음에 드는 글자들만 골라서 인공신경망을 다시 학습시킬 수 있습니다 (재학습을 하게 되면 인공신경망은 더 많은 글자들의 디자인을 학습하게 되므로 더 나은 글자를 생성할 수 있을 것입니다).</vsmall></p>
-          <p class="lead"><vsmall>4. 이외에 illustrator와 같이 전문적인 이미지 편집 툴을 가지고 계시지 않은 분들을 위해, 인공신경망이 생성한 글자 디자인을 직접 수정할 수 있는 간단한 이미지 편집 기능이 포함되어 있습니다.</vsmall></p>
+          <p class="lead"><vsmall>3. 학습이 끝나면 디자이너는 인공신경망이 생성한 글자 디자인의 샘플을 볼 수 있으며, 벡터화 알고리즘의 파라미터를 조정하면서 최종적으로 생성될 폰트 이미지를 볼 수 있습니다.</vsmall></p>
+          <p class="lead"><vsmall>4. 마지막으로, 생성된 글자 디자인을 폰트 파일(ttf)  현태로 다운로드 할 수 있습니다.</vsmall></p>
         </div>
       </div>
       <div class="row">
         <div class="col-lg-12">
-          <p class="lead"><small>대표 글씨를 스캔하실 분은 아래에서 양식을 다운받으세요. 업로드할 한글 디자인이 준비됐으면 '시작하기' 버튼을 눌러서 한글 디자인을 업로드하세요. </small></p>
+          <p class="lead"><small>대표 글씨 템플릿이 필요하신 분은 아래에서 다운로드 받으세요. 업로드할 한글 디자인 (png 파일) 이 준비됐으면 '시작하기' 버튼을 눌러서 한글 디자인을 업로드하세요. </small></p>
         </div>
         <div class="col-lg-12 text-center" style="margin-top: 30px; margin-bottom: 30px">
           <a href='/download_template' class="btn btn-primary btn-lg">대표 글씨 템플릿 다운받기</a>