-
-
Notifications
You must be signed in to change notification settings - Fork 42
/
index.html
178 lines (168 loc) · 8.1 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
<!DOCTYPE html>
<html>
<head>
<title>Interactive Machine Learning List</title>
<meta name="description" content="A collaborative list of interactive Machine Learning, Deep Learning and Statistics websites.">
<meta name="keywords" content="museum, scavenger hunt, object detection, ai">
<meta name="author" content="Piotr Migdał, Jakub Fogel, contributors">
<meta property="og:image" content="https://p.migdal.pl/interactive-machine-learning-list/screenshot.png" >
<meta charset="utf-8">
<script src="https://www.unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.12.0/js-yaml.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-pink.min.css"/>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="src/style.css">
<script src="src/particles.js"></script>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div id="app">
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Interactive Machine Learning, Deep Learning and Statistics websites</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="https://github.com/stared/interactive-machine-learning-list/">GitHub repo</a>
</nav>
</div>
</header>
<main class="mdl-layout__content" id="particles-js">
<div class="page-content"><!-- Your content goes here -->
<div class="mdl-grid">
<div class="mdl-cell--5-col mdl-cell" style="text-align: right">
<div class="illustration"></div>
</div>
<div class="mdl-cell--6-col mdl-cel" style="padding: 0 2rem">
<h4>Open source: see its <a href="https://github.com/stared/interactive-machine-learning-list/">GitHub repository</a></h4>
<h4>It's collaborative: add visualizations via <a href="https://github.com/stared/interactive-machine-learning-list/pulls">pull requests</a></h3>
<h4>If you like it,
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=A%20collaborative%20list%20of%20interactive%20Machine%20Learning,%20Deep%20Learning%20and%20Statistics%20websites%20@InBrowserAI" data-size="large">share it on Twitter</a>, if you want to create such visualizations, sign up for <a href="https://inbrowser.ai/">In Browser AI</a>!</h4>
<template id="tag-selector">
<div class="tags-wrapper">
<a v-for="tag in allTags"
class="tag"
@click="addRemoveToFilters(tag)"
v-bind:class="{ active: checkActive(tag) }"
v-if="getTagCount(tag) > 0"
>
{{tag}}
<small class="tag-count">{{getTagCount(tag)}}</small>
</a>
<p v-if="filters.length">
Selected {{filters.length}} filters
<a class="tag"
v-if="filters.length"
style="background: rgb(255,64,129); color: white"
@click="clearAllFilters"
>
<i class="material-icons delete">delete</i>
Clear
</a>
</p>
</div>
</template>
</div>
</div>
<ul class="mdl-grid" style="background: rgba(254,254,254, 1);">
<li class="mdl-cell mdl-cell--4-col"
v-for="(website, id) in filteredWebsites"
>
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="background" :style="{backgroundImage: 'url(' + website.img + ')'}">
<div class="mdl-card__title">
<h3 class="mdl-card__title-text">
<a :href="website.url" style="color: white">{{ website.name }}</a>
</h3>
</div>
<div class="mdl-card__supporting-text">
<span class="authors">
by {{ etAl(website.authors) }}
</span>
<div class="mdl-grid" v-if="website.tags && website.uses">
<div>
<i class="material-icons" :id="id + 'tagIcon'">label</i>
<div class="mdl-tooltip" :data-mdl-for="id + 'tagIcon'">
Tags
</div>
<span v-for="tag in website.tags">
<a class="tag" @click="addRemoveToFilters(tag)" v-bind:class="{ active: checkActive(tag) }">{{ tag }}</a>
</span>
</div>
<div>
<i class="material-icons" :id="id + 'tagUses'">timeline</i>
<div class="mdl-tooltip" :data-mdl-for="id + 'tagUses'">
Uses
</div>
<span v-for="use in website.uses">
<a class="tag" @click="addRemoveToFilters(use)" v-bind:class="{ active: checkActive(use) }">{{ use }}</a>
</span>
</div>
<div>
<i class="material-icons" :id="id + 'tagLicense'">copyright</i>
<div class="mdl-tooltip" :data-mdl-for="id + 'tagLicense'">
License
</div>
<span v-if="website.license">
<a class="tag" @click="addRemoveToFilters(website.license)" v-bind:class="{ active: checkActive(website.license) }">{{ website.license }}</a>
</span>
</div>
</div>
</div>
<div class="mdl-card__menu">
<a :href="website.repo" :id="id + 'repo'" v-if="website.repo">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">code</i>
</button>
</a>
<div class="mdl-tooltip" :data-mdl-for="id + 'repo'">
Repository
</div>
<a :href="website.url" :id="id + 'www'" v-if="website.url">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">language</i>
</button>
</a>
<div class="mdl-tooltip" :data-mdl-for="id + 'www'">
Website
</div>
</div>
</div>
<div class="mdl-card__actions mdl-card--border mdl-card--bottom"
v-if="website.writeup || website.desc">
<span v-if="website.desc"> {{ website.desc }}</span><br>
<a :href="website.writeup"
v-if="website.writeup">
see also this article
</a>
</div>
</div>
</li>
</ul>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<ul class="mdl-mini-footer__link-list">
<li><a href="https://github.com/stared/interactive-machine-learning-list">open source (contribute!)</a></li>
<li>idea by <a href="https://p.migdal.pl">Piotr Migdał</a></li>
<li>front-end by <a href="https://github.com/fogelkuba">Jakub Fogel</a></li>
<li>brain graphics by <a href='https://pl.freepik.com/darmowe-wektory/mozg-mechaniczna_769574.htm'>Freepik
</a></li>
<li>contributions by <a href="https://github.com/stared/interactive-machine-learning-list/graphs/contributors">many</a></li>
</ul>
<p>...aaand if you want to create such visualizations by yourself, see <a href="https://inbrowser.ai/">In Browser AI</a></p>
</div>
</footer>
</div>
</main>
</div>
<!--app end-->
</div>
<script src="src/main.js"></script>
</body>
</html>