-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
220 lines (194 loc) · 12.6 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/html5reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="images/alphago_icon.png"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora"/>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-6L77FSR216"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-6L77FSR216');
</script>
<title>AlphaGo: New Era</title>
</head>
<body>
<div class="skip"><a href="#main">Skip to Main Content</a></div>
<div class="top"><a href="#header">Back To Top</a></div>
<header id="header">
<nav>
<img src="images/alphago_logo.png", alt="AlphaGo Logo" class="alphago-logo"/>
<ul class="nav_links">
<li><a href="index.html" class="current-page">Home</a></li>
<li><a href="go.html">Go</a></li>
<li><a href="alphago.html">Approach</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="papers.html">Papers</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<h1>AlphaGo</h1>
<p>AlphaGo is the first computer program to defeat a professional human Go player, the first to defeat a Go world champion, and is arguably the strongest Go player in history.</p>
</header>
<main id="main">
<div class="main-container">
<div class="section-container">
<h2>Overview</h2>
<div>
<p>Go is known as the most challenging classical game for artificial intelligence because of its complexity. Despite decades of work, the strongest Go computer programs could only play at the level of human amateurs. Standard AI methods, which test all possible moves and positions using a search tree, can’t handle the sheer number of possible Go moves or evaluate the strength of each possible board position.</p>
</div>
</div>
<div class="shallow-green section-container">
<h2>What is Go?</h2>
<div>
<p>Go originated in China over 3,000 years ago. Winning this board game requires multiple layers of strategic thinking.</p>
<p>Two players, using either white or black stones, take turns placing their stones on a board. The goal is to surround and capture their opponent's stones or strategically create spaces of territory. Once all possible moves have been played, both the stones on the board and the empty points are tallied. The highest number wins.</p>
<p>As simple as the rules may seem, Go is profoundly complex. There are an astonishing 10 to the power of 170 possible board configurations - more than the number of atoms in the known universe. This makes the game of Go a googol times more complex than chess.</p>
<img src="images/go.png" alt="two children playing go">
<p class = 'section-link'><a href="go.html">What is Go?</a></p>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<a href="#">
<div class="flip-card-front">
<div class="quote">
<div class="quote-mark">“</div>
<p class="quote-words">
The Game of Go is the holy grail of artificial intelligence. Everything we've ever tried in AI failed when you try the game of Go.
</p>
<p class="quote-author">Dave Silver<br><br>
Lead Researcher for AlphaGo
</p>
</div>
</div>
</a>
<div class="flip-card-back">
<div class="quote">
<div class="quote-mark">“</div>
<p class="quote-words">
I thought AlphaGo was merely a machine. But when I saw this move, I changed my mind. Surely, AlphaGo is creative.
</p>
<p class="quote-author">Lee Sedol<br><br>
Winner of 18 World Go Title
</p>
</div>
</div>
</div>
</div>
<div class="section-container">
<h2>AlphaGo Approach</h2>
<div>
<p>Google Deepmind created AlphaGo, a computer program that combines advanced search tree with deep neural networks. These neural networks take a description of the Go board as an input and process it through a number of different network layers containing millions of neuron-like connections. </p>
<p>One neural network, the “policy network”, selects the next move to play. The other neural network, the “value network”, predicts the winner of the game. We introduced AlphaGo to numerous amateur games to help it develop an understanding of reasonable human play. Then we had it play against different versions of itself thousands of times, each time learning from its mistakes. </p>
<p>Over time, AlphaGo improved and became increasingly stronger and better at learning and decision-making. This process is known as reinforcement learning. AlphaGo went on to defeat Go world champions in different global arenas and arguably became the greatest Go player of all time.</p>
<p class = 'section-link'><a href="alphago.html">How AlphaGo works?</a></p>
<img src="images/approach.png" alt="Policy Network and Value Network For AlphaGo">
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<a href="#">
<div class="flip-card-front">
<div class="quote">
<div class="quote-mark">“</div>
<p class="quote-words">
The typical, traditional, classical beliefs of how to play — I’ve come to question them a bit.
</p>
<p class="quote-author">Lee Sedol<br><br>
Winner of 18 World Go Title
</p>
</div>
</div>
</a>
<div class="flip-card-back">
<div class="quote">
<div class="quote-mark">“</div>
<p class="quote-words">
It's perfect, it's just flawless, merciless. ... I don't think I could catch up with it in my lifetime.
</p>
<p class="quote-author">Ke Jie<br><br>
First Ranking Go Player
</p>
</div>
</div>
</div>
</div>
<div class="shallow-green section-container special-container">
<div>
<h2>Matches & Events</h2>
<div class="timeline">
<div class="container left">
<div class="content">
<h2>October 2015</h2>
<p>AlphaGo defeated European champion Fan Hui with 5-0.</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>March 2016</h2>
<p>AlphaGo defeated 18-times world champion Lee Sedol with 4-1.</p>
</div>
</div>
<div class="container left">
<div class="content">
<h2>May 2017</h2>
<p>AlphaGo defeated world's first Go player Ke Jie with 3-0.</p>
</div>
</div>
</div>
</div>
<div>
<p>In October 2015, AlphaGo played its first match against the reigning three-time European Champion, Mr Fan Hui. AlphaGo won the first ever game against a Go professional with a score of 5-0.</p>
<p>AlphaGo then competed against legendary Go player Mr Lee Sedol, the winner of 18 world titles, who is widely considered the greatest player of the past decade. AlphaGo won a 4-1 victory in Seoul, South Korea, on March 2016. </p>
<div>
<img src="images/lee_match.png" alt="leesedol match" class="mySlides">
<img src="images/leesedol.png" alt="leesedol 1" class="mySlides">
<img src="images/leesedol2.jpg" alt="leesedol 3" class="mySlides">
<img src="images/kejie_match.png" alt="kejie match" class="mySlides">
<img src="images/kejie.jpg" alt="kejie 1" class="mySlides">
<img src="images/kejie2.jpg" alt="kejie 3" class="mySlides">
</div>
<p>In January 2017, Deepmind revealed an improved, online version of AlphaGo called Master. This online player achieved 60 straight wins in time-control games against top international players. </p>
<p>Four months later, AlphaGo took part in the Future of Go Summit in China and defeated Ke Jie, the world's first Go player at that time, 3-0. </p>
<p class = 'section-link'><a href="events.html">More landmark events</a></p>
</div>
</div>
<div class="section-container">
<h2>Documentary Film</h2>
<div>
<p>Directed by Greg Kohs with an original score by Academy Award nominee, Hauschka, AlphaGo chronicles a journey from the halls of Cambridge, through the backstreets of Bordeaux, past the coding terminals of DeepMind in London, and, ultimately, to the seven-day tournament in Seoul.</p>
</div>
</div>
</div>
<div class="wrap-element">
<iframe src="https://www.youtube.com/embed/WXuK6gekU1Y" class="wrapped-iframe" title="AlphaGo Documentary">Documentary: AlphaGo</iframe>
</div>
</main>
<footer>
<p>University of Michigan School of Information <br/>
© Rui Ding - Web Design Project Winter 2021</p>
</footer>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000); // Change image every 3 seconds
}
</script>
</body>
</html>