forked from prabod/GeneLisa
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
63 lines (61 loc) · 3.76 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="GeneLisa.js"></script>
<meta charset="UTF-8">
<title>GeneLisa</title>
</head>
<body>
<h1> GeneLisa 基因麗莎</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
<canvas id="goal" width="350" height="350" style="margin-right: 4px;"></canvas>
</div>
<div class="col-md-4">
<canvas id="myCanvas" width="350" height="350" style="margin-left: 4px;"></canvas>
</div>
<div class="col-md-4">
<canvas id="workingCanvas"
width="75" height="75"
style="display: inline;"></canvas>
</div>
</div>
<div class="row">
<div class="col-md-4">自肥用參考照片（不想看我的臉請點<a href="https://prabod.github.io/GeneLisa/"> DEMO</a>）</div>
<div class="col-md-4">基因後代目前最佳匹配結果</div>
<div class="col-md-4">基因後代訓練過程</div>
</div>
<div class="row">
<div class="col-md-8-offset-4">
<button onclick="setInterval(breed, 0);">開始</button>
</div>
</div>
<div class="row">
<div class="col-md-6"><p id="gen"></p></div>
<div class="col-md-6"><p id="fit"></p></div>
</div>
<h3 style="line-height: 200%">請留意，網頁中的基因演算法相關運算都會在您的電腦中運行。</h3>
</div>
<hr/><br/><br/>
<div class="container">
<h3 style="line-height: 200%">本項目的作者為 <a href="https://github.com/prabod/GeneLisa">prabod</a>，起源於 prabod 在網路上瀏覽到 <a href="https://rogerjohansson.blog/2008/12/07/genetic-programming-evolution-of-mona-lisa/">Roger Johansson 部落格</a>的時候，發現 Roger 利用<a href="https://zh.wikipedia.org/wiki/%E9%81%97%E4%BC%A0%E7%AE%97%E6%B3%95">基因演算法</a>做了許多很厲害的事，他使用了 50 個多邊形來拚出了一幅<a href="https://zh.wikipedia.org/wiki/%E8%92%99%E5%A8%9C%E4%B8%BD%E8%8E%8E">蒙娜麗莎</a>畫作。</h3>
<img src="genetic-programming-evolution-of-mona-lisa.png" width="100%">
<h3 style="line-height: 200%">因此 prabod 想嘗試看看用基因演算法來完成這件事，並使用了 Javascript 來實現這個想法，也就是本項目 GeneLisa (基因麗莎)，這個項目有完整的<a href="https://github.com/prabod/GeneLisa/blob/master/GeneLisa.js"> Javascript 開放程式碼</a>，而且程式碼也很簡單並且有粗淺的介紹，大家可以去 clone 項目來自己試試看，你只需要把 GeneLisa.js 中的照片 mona.png 改成你的照片即可，對應像素大小也可在 GeneLisa.js 中修改，只需要基本 Javascript 的知識（甚至可以不用）。</h3>
<hr/>
<h3 style="line-height: 200%">我的照片在經過一段時間後，訓練結果如下圖：</h3>
<img src="geneLisa-Demo-using-fatfingererr.png" width="100%">
<h3 style="line-height: 200%">此外也可以按上方「開始」和最初結果做比較，就能感受到基因演算法的優化能力。</h3>
<hr/>
翻譯／<a href="https://github.com/fatfingererr/GeneLisa">fatfingererr</a>
</div>
<script>init();
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>