├── .gitignore
├── img
├── bsky.png
├── github.png
├── beta_app.PNG
├── bgnoise.png
├── favicon.ico
├── gscholar.png
├── linkedin.png
├── twitter.png
├── youtube.png
├── VAEteaser.png
├── anam_course.png
├── cv_course.png
├── dl_course.png
├── ml_course.png
├── twitter_old.png
├── im2pencil_dp.jpg
├── nd_paper_icon.png
├── pw_paper_icon.png
├── sv_paper_icon.png
├── ddlp_paper_icon.png
├── dlp_paper_icon.png
├── ecrl_paper_icon.png
├── ecdiff_paper_icon.png
├── plane_to_car_slow.gif
├── taldaniel_cropped.png
└── taldaniel_cropped_old.png
├── combo.css
├── README.md
├── _includes
├── footer.md
├── analytics.html
└── css
│ ├── skeleton.css
│ ├── main.css
│ └── base.css
├── _config.yml
├── _posts
├── 2014-01-05-contact.md
├── 2014-01-01-intro.md
├── 2014-01-04-projects.md
├── 2014-01-03-teaching.md
└── 2014-01-02-publications.md
├── index.html
├── site.js
└── beta_dist_app.html
/.gitignore:
--------------------------------------------------------------------------------
1 | _site/
2 | .DS_Store
--------------------------------------------------------------------------------
/img/bsky.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/bsky.png
--------------------------------------------------------------------------------
/img/github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/github.png
--------------------------------------------------------------------------------
/img/beta_app.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/beta_app.PNG
--------------------------------------------------------------------------------
/img/bgnoise.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/bgnoise.png
--------------------------------------------------------------------------------
/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/favicon.ico
--------------------------------------------------------------------------------
/img/gscholar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/gscholar.png
--------------------------------------------------------------------------------
/img/linkedin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/linkedin.png
--------------------------------------------------------------------------------
/img/twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/twitter.png
--------------------------------------------------------------------------------
/img/youtube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/youtube.png
--------------------------------------------------------------------------------
/img/VAEteaser.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/VAEteaser.png
--------------------------------------------------------------------------------
/img/anam_course.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/anam_course.png
--------------------------------------------------------------------------------
/img/cv_course.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/cv_course.png
--------------------------------------------------------------------------------
/img/dl_course.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/dl_course.png
--------------------------------------------------------------------------------
/img/ml_course.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/ml_course.png
--------------------------------------------------------------------------------
/img/twitter_old.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/twitter_old.png
--------------------------------------------------------------------------------
/img/im2pencil_dp.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/im2pencil_dp.jpg
--------------------------------------------------------------------------------
/img/nd_paper_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/nd_paper_icon.png
--------------------------------------------------------------------------------
/img/pw_paper_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/pw_paper_icon.png
--------------------------------------------------------------------------------
/img/sv_paper_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/sv_paper_icon.png
--------------------------------------------------------------------------------
/img/ddlp_paper_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/ddlp_paper_icon.png
--------------------------------------------------------------------------------
/img/dlp_paper_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/dlp_paper_icon.png
--------------------------------------------------------------------------------
/img/ecrl_paper_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/ecrl_paper_icon.png
--------------------------------------------------------------------------------
/img/ecdiff_paper_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/ecdiff_paper_icon.png
--------------------------------------------------------------------------------
/img/plane_to_car_slow.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/plane_to_car_slow.gif
--------------------------------------------------------------------------------
/img/taldaniel_cropped.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/taldaniel_cropped.png
--------------------------------------------------------------------------------
/combo.css:
--------------------------------------------------------------------------------
1 | ---
2 | ---
3 | {% include css/base.css %}
4 | {% include css/skeleton.css %}
5 | {% include css/main.css %}
6 |
--------------------------------------------------------------------------------
/img/taldaniel_cropped_old.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taldatech/taldatech.github.io/main/img/taldaniel_cropped_old.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | This is a compressed-commit version of
3 | [github.com/t413/SinglePaged](https://github.com/t413/SinglePaged)
4 |
--------------------------------------------------------------------------------
/_includes/footer.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | Design by Tim O'Brien [t413.com](http://t413.com/)
4 | —
5 | [SinglePaged theme](https://github.com/t413/SinglePaged)
6 | —
7 | this site is [open source]({{ site.source_link }})
8 |
9 |
--------------------------------------------------------------------------------
/_includes/analytics.html:
--------------------------------------------------------------------------------
1 | {% if site.google_analytics_key %}
2 |
15 | {% endif %}
--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | ---
2 |
3 | port: 4000
4 | host: 0.0.0.0
5 | safe: false
6 |
7 |
8 | ### site serving configuration ###
9 | exclude: [CNAME, README.md, .gitignore]
10 | permalink: /:title ## disables post output
11 | timezone: null
12 | lsi: false
13 | markdown: kramdown
14 |
15 |
16 | ### content configuration ###
17 | title: "Tal Daniel"
18 | keywords: "Tal Daniel, PhD, Technion, github, blog, Machine Learning"
19 | description: "Tal Daniel"
20 | source_link: "https://github.com/t413/SinglePaged"
21 | favicon: "img/favicon.ico" #put a path like: "img/favicon.ico"
22 | touch_icon: #put a path like: "img/apple-touch-icon.png"
23 | google_analytics_key: "G-ZG73KLFZXG" ## put YOUR key here to enable tracking! (blank to disable)
24 |
25 |
26 | ### template colors, used site-wide via css ###
27 | colors:
28 | black: '#111111'
29 | white: '#f8f8f8'
30 | blue: '#49a7e9'
31 | green: '#9bcf2f'
32 | purple: '#c869bf'
33 | orange: '#fab125'
34 | turquoise: '#0fbfcf'
35 |
36 | kramdown:
37 | auto_ids: false
38 |
39 |
--------------------------------------------------------------------------------
/_posts/2014-01-05-contact.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Contact"
3 | bg: purple #defined in _config.yml, can use html color like '#0fbfcf'
4 | color: white #text color
5 | fa-icon: envelope
6 | ---
7 |
8 | ### Contact
9 |
10 |
11 |
*/
66 | .clearfix:before,
67 | .clearfix:after,
68 | .row:before,
69 | .row:after {
70 | content: '\0020';
71 | display: block;
72 | overflow: hidden;
73 | visibility: hidden;
74 | width: 0;
75 | height: 0; }
76 | .row:after,
77 | .clearfix:after {
78 | clear: both; }
79 | .row,
80 | .clearfix {
81 | zoom: 1; }
82 |
83 | /* You can also use a
to clear columns */
84 | .clear {
85 | clear: both;
86 | display: block;
87 | overflow: hidden;
88 | visibility: hidden;
89 | width: 0;
90 | height: 0;
91 | }
92 |
--------------------------------------------------------------------------------
/_posts/2014-01-01-intro.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Home"
3 | bg: white #defined in _config.yml, can use html color like '#010101'
4 | color: black #text color
5 | style: center
6 | ---
7 |
8 |
9 |
10 |
11 |
12 | # Hi, I'm Tal!
13 | I'm a Postdoctoral Fellow at the
Carnegie Mellon University (CMU) Robotics Institute , working with
Prof. Deepak Pathak and
Prof. David Held .
14 |
15 | My research interests include (Deep) Unsupervised/Self-supervised Representation Learning, Generative Modeling, Reinforcment Learning and Robotics.
16 |
17 | I have received my Ph.D. from the
Technion, Israel Institute of Technology Electrical and Computer Engineering (ECE) Department , where I was fortunate to be supervised by
Prof. Aviv Tamar .
18 | I received my B.Sc. (Cum Laude) and M.Sc. (Summa Cum Laude) both in Electrical and Computer Engineering from the Technion.
19 | I'm a former member of the RL^2 lab and the Control, Robotics and Machine Learning (CRML) lab.
20 | During my time at the Technion, I was a teaching assistant in various Machine Learning courses, for which I have written theory-based and hands-on tutorials that can be accessed under the "Teaching" section.
21 |
22 | I'm grateful and honored to have been supported by
23 |
*The Irwin and Joan Jacobs 2024 Ph.D. Excellence Fellowship*
24 |
*The Miriam and Aaron Gutwirth Memorial 2023 Ph.D. Excellence Fellowship*
25 |
26 | You can contact me at `tdaniel at andrew dot cmu dot edu`.
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/_posts/2014-01-04-projects.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Projects"
3 | bg: orange #defined in _config.yml, can use html color like '#0fbfcf'
4 | color: black #text color
5 | fa-icon: fire
6 | ---
7 |
8 | ### Other Projects and Cool Stuff
9 |
10 |
11 | Interactive Beta Distribution Applet
12 |
13 |
14 |
15 | [Link to Applet ]
16 |
17 |
18 |
19 |
20 |
21 | Interactive GUI for Deep (Dynamic) Latent Particels (D(D)LP)
22 |
23 |
24 |
25 | [Project Site ]
26 |
27 |
28 |
29 |
30 |
31 | Interpolation between airplane and car in the latent space of 3D Soft-IntroVAE
32 |
33 |
34 |
35 | [Project Site ]
36 |
37 |
38 |
39 |
40 |
41 | Python Implementation of Pencil Drawing by Sketch and Tone (Lu et al., NPAR 2012)
42 |
43 |
44 |
45 | [GitHub ]
46 |
47 |
48 |
49 |
50 |
51 | PyTorch implementation of Least-Squares DQN (Levine, Zahavy et al, NeurIPS 2017) with extras (DuelingDQN, Boosted FQI)
52 |
53 | VIDEO
54 |
55 | [GitHub ]
56 |
57 |
58 |
59 |
60 |
61 | Bayesian Gradient Descent Algorithm (Zeno et al, 2019) Model for TensorFlow
62 |
63 | VIDEO
64 |
65 | [GitHub ]
66 |
67 |
68 |
69 |
70 |
71 | Android application for mining Scrypt coins (Litecoin) with custom options.
72 |
73 |
74 |
75 | With Eyal Ben-David
76 |
77 | [GitHub ][Simple Stratum Miner ]
78 |
79 |
80 |
81 |
82 |
83 |
84 |
--------------------------------------------------------------------------------
/site.js:
--------------------------------------------------------------------------------
1 |
2 | $.extend($.easing,
3 | {
4 | def: 'easeOutQuad',
5 | easeInOutExpo: function (x, t, b, c, d) {
6 | if (t==0) return b;
7 | if (t==d) return b+c;
8 | if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
9 | return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
10 | }
11 | });
12 |
13 | (function( $ ) {
14 |
15 | var settings;
16 | var disableScrollFn = false;
17 | var navItems;
18 | var navs = {}, sections = {};
19 |
20 | $.fn.navScroller = function(options) {
21 | settings = $.extend({
22 | scrollToOffset: 170,
23 | scrollSpeed: 800,
24 | activateParentNode: true,
25 | }, options );
26 | navItems = this;
27 |
28 | //attatch click listeners
29 | navItems.on('click', function(event){
30 | event.preventDefault();
31 | var navID = $(this).attr("href").substring(1);
32 | disableScrollFn = true;
33 | activateNav(navID);
34 | populateDestinations(); //recalculate these!
35 | $('html,body').animate({scrollTop: sections[navID] - settings.scrollToOffset},
36 | settings.scrollSpeed, "easeInOutExpo", function(){
37 | disableScrollFn = false;
38 | }
39 | );
40 | });
41 |
42 | //populate lookup of clicable elements and destination sections
43 | populateDestinations(); //should also be run on browser resize, btw
44 |
45 | // setup scroll listener
46 | $(document).scroll(function(){
47 | if (disableScrollFn) { return; }
48 | var page_height = $(window).height();
49 | var pos = $(this).scrollTop();
50 | for (i in sections) {
51 | if ((pos + settings.scrollToOffset >= sections[i]) && sections[i] < pos + page_height){
52 | activateNav(i);
53 | }
54 | }
55 | });
56 | };
57 |
58 | function populateDestinations() {
59 | navItems.each(function(){
60 | var scrollID = $(this).attr('href').substring(1);
61 | navs[scrollID] = (settings.activateParentNode)? this.parentNode : this;
62 | sections[scrollID] = $(document.getElementById(scrollID)).offset().top;
63 | });
64 | }
65 |
66 | function activateNav(navID) {
67 | for (nav in navs) { $(navs[nav]).removeClass('active'); }
68 | $(navs[navID]).addClass('active');
69 | }
70 | })( jQuery );
71 |
72 |
73 | $(document).ready(function (){
74 |
75 | $('nav li a').navScroller();
76 |
77 | //section divider icon click gently scrolls to reveal the section
78 | $(".sectiondivider").on('click', function(event) {
79 | $('html,body').animate({scrollTop: $(event.target.parentNode).offset().top - 50}, 400, "linear");
80 | });
81 |
82 | //links going to other sections nicely scroll
83 | $(".container a").each(function(){
84 | if ($(this).attr("href").charAt(0) == '#'){
85 | $(this).on('click', function(event) {
86 | event.preventDefault();
87 | var target = $(event.target).closest("a");
88 | var targetHight = $(target.attr("href")).offset().top
89 | $('html,body').animate({scrollTop: targetHight - 170}, 800, "easeInOutExpo");
90 | });
91 | }
92 | });
93 |
94 | });
95 |
96 |
--------------------------------------------------------------------------------
/_posts/2014-01-03-teaching.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Teaching"
3 | bg: green #defined in _config.yml, can use html color like '#010101'
4 | color: black #text color
5 | style: center
6 | fa-icon: code
7 | ---
8 |
9 | ### Teaching
10 |
11 |
14 |
15 | I teach several courses at the Technion, and the materials are available on GitHub to everyone.
16 | All the tutorials are in a Jupyter Notebook format and include theory and code in Python and PyTorch. PDF version is also available.
17 |
18 |
19 |
20 | ECE - 046211 - Deep Learning
21 |
22 | Topics: Single Neuron, PyTorch Basics, Optimization and Gradient Descent-based Algorithms, Automatic Differentiation (AutoDiff) and PyTorch's AutoGrad, Multilayer Neural Networks, Convolutional Neural Networks (CNNs), Sequential Tasks, Recureent Neural Networks (RNNs), Attention, Transformer, Training Methods, Bayesian Hyper-parameter Tuning with Optuna, Transfer Learning, Reperesentation and Self-Supervised Learning
23 |
24 | 2021-2024
25 |
26 | [GitHub ] [Students' Projects Website ] [Video Tutorials ]
27 |
28 |
29 |
30 |
31 |
32 |
33 | ECE - 046746 - Computer Vision
34 |
35 | Topics: Image Processing Basics, PyTorch Basics, 2D Convolution, Convolutional Neural Networks, (Deep) Semantic Segmentation, (Deep) Object Detection, (Deep) Object Tracking, Generative Adversarial Network (GAN), 3D Deep Learning Basics
36 |
37 | Spring 2020 (with Dahila Urbach ), Spring 2021 (with Elias Nehme )
38 |
39 | [GitHub ]
40 |
41 |
42 |
43 |
44 |
45 |
46 | ECE - 046202 - Unsupervised Learning and Data Analysis
47 |
48 | Topics: Statistics (estimators, confidence intervals, hypothesis testing), Dimensionality Reduction (PCA, KPCA, t-SNE), Deep Generative Models (VAE, GAN), Clustering (K-Means, EM algorithm, Spectral Clustering)
49 |
50 | Winter 2020, Winter 2021
51 |
52 | [GitHub ]
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | CS - 236756 - Introduction to Machine Learning
61 |
62 | Topics: Probability and Linear Algebra Basics, PCA, Feature Selection, Evaluation and Validation methods, Optimization, Decision Trees, Linear Regression, Linear Classifiers, EM algorithm, Boosting and Bagging, SVM, Deep Learning introduction, PAC Learning
63 |
64 | Spring 2019, Spring 2020
65 |
66 | [GitHub ]
67 |
68 |
69 |
70 |
--------------------------------------------------------------------------------
/_posts/2014-01-02-publications.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Publications"
3 | bg: turquoise #defined in _config.yml, can use html color like '#0fbfcf'
4 | color: white #text color
5 | fa-icon: book
6 | ---
7 |
8 | ### Publications and Pre-Prints
9 |
10 |
11 |
12 | EC-Diffuser: Multi-Object Manipulation via Entity-Centric Behavior Generation
13 |
14 | Carl Qi, Dan Haramati, Tal Daniel , Aviv Tamar and Amy Zhang
15 |
16 | International Conference on Learning Representations (ICLR) 2025
17 |
18 | [Paper ][Website ][Code ]
19 |
20 | TL;DR - We learn multi-object control policies for robotics from pixels with deep latent particles (DLP) and diffusion models.
21 |
22 |
23 |
24 |
25 | DDLP: Unsupervised Object-centric Video Prediction with Deep Dynamic Latent Particles
26 |
27 | Tal Daniel and Aviv Tamar
28 |
29 | Transactions on Machine Learning Research (TMLR) 2024
30 |
31 | [Paper ][Website ][Code ][Video ]
32 |
33 | TL;DR - A new object-centric video prediction, generation and modification algorithm based on the deep latent particle (DLP) representation.
34 |
35 |
36 |
37 |
38 | Entity-Centric Reinforcement Learning for Object Manipulation from Pixels
39 |
40 | Dan Haramati, Tal Daniel and Aviv Tamar
41 |
42 | International Conference on Learning Representations (ICLR) 2024 Spotlight
43 |
44 | [Paper ][Website ][Code ][Video ]
45 |
46 | TL;DR - We use deep latent particles (DLP) as input instead of pixels and unlock compositional capabilities in reinforcement learning.
47 |
48 |
49 |
50 |
51 | Unsupervised Image Representation Learning with Deep Latent Particles
52 |
53 | Tal Daniel and Aviv Tamar
54 |
55 | International Conference on Machine Learning (ICML) 2022
56 |
57 | [Paper ][Website ][Code ][Video ]
58 |
59 | TL;DR - Represent images as latent particles, unsupervised detection and segmentation of objects, particles can be controlled and used for image manipulation and video prediction.
60 |
61 |
62 |
63 |
64 | Soft-IntroVAE: Analyzing and Improving the Introspective Variational Autoencoder
65 |
66 | Tal Daniel and Aviv Tamar
67 |
68 | IEEE / CVF Computer Vision and Pattern Recognition Conference (CVPR) 2021 Oral
69 |
70 | MLIS-TCE Conference 2022 - Best Paper Award
71 |
72 | [Paper ][Website ][Code ][Video ]
73 |
74 | TL;DR - Stable adversarial training of VAEs without a discriminator, applicable for density estimation, image generation, image translation, Out-of-Distribution detection and many more.
75 |
76 |
77 |
78 |
79 |
80 | Deep Variational Semi-Supervised Novelty Detection
81 |
82 | Tal Daniel , Thanard Kurutach and Aviv Tamar
83 |
84 | NeurIPS 2021 Workshop on Deep Generative Models and Downstream Applications
85 |
86 | [Paper ]
87 |
88 | TL;DR - Principled incorporation of negative samples in the VAE framework for meaningful representations.
89 |
90 |
91 |
92 |
93 |
94 | Beyond Credential Stuffing: Password Similarity Models Using Neural Networks
95 |
96 | Bijeeta Pal, Tal Daniel , Rahul Chatterjee and Thomas Ristenpart
97 |
98 | 2019 IEEE Symposium on Security and Privacy (SP)
99 |
100 | [Paper ]
101 |
102 | TL;DR - Cracking passwords with neural networks, but also defend against such attacks.
103 |
--------------------------------------------------------------------------------
/_includes/css/main.css:
--------------------------------------------------------------------------------
1 | html { box-sizing: border-box; }
2 | *, *:before, *:after { box-sizing: inherit; }
3 |
4 | /* ---------------------------*/
5 | /* ----- Special Styles ----- */
6 | /* ---------------------------*/
7 |
8 | /* ----- colors (autogenerated from _config.yml)----- */
9 |
10 | {% for c in site.colors %}
11 | .border-{{c[0]}} { border-color: {{ c[1] }} !important; }
12 | .text-{{c[0]}} { color: {{ c[1] }}; }
13 | .text-{{c[0]}} a { color: {{ c[1] }}; }
14 | .bg-{{c[0]}} { background-color: {{ c[1] }} !important; }
15 | {% endfor %}
16 |
17 | /* ----- per-post colors! ----- */
18 | {% for node in site.posts %}
19 | {% capture id %}{{ node.id | remove:'/' | downcase }}{% endcapture %}
20 | {% capture bg %}{% if site.colors[node.bg] %}{{ site.colors[node.bg] }}{% else %}{{ node.bg }}{% endif %}{% endcapture %}
21 | {% capture fg %}{% if site.colors[node.color] %}{{ site.colors[node.color] }}{% else %}{{ node.color }}{% endif %}{% endcapture %}
22 | nav .p-{{id}} { border-color: {{ bg }}; }
23 | #{{id}} { background-color: {{ bg }} !important; color: {{ fg }}; }
24 | #{{id}} a { color: {{ fg }}; }
25 | #{{id}} .sectiondivider { color: {{ bg }}; }
26 | {% endfor %}
27 |
28 |
29 | /* ----- code, syntax highlighting, etc ----- */
30 |
31 | code, pre { font-family: Monaco, Menlo, Consolas, "Courier New", monospace; }
32 |
33 | /* spesifically inline code */
34 | code, pre {
35 | background: rgba(255,255,255,0.2);
36 | display: inline;
37 | word-wrap: break-word;
38 | }
39 |
40 | /* block code */
41 | pre code { background: none; display: block; }
42 | pre {
43 | display: block;
44 | margin: 20px 5%;
45 | padding: 4px 8px;
46 | background: rgba(255,255,255,0.1);
47 | word-wrap: break-word;
48 | }
49 |
50 | .highlight { margin:20px 5%; }
51 |
52 |
53 | /* ----- base elements ----- */
54 |
55 | img {
56 | max-width:100%!important;
57 | height:auto;
58 | vertical-align:middle;
59 | }
60 |
61 | hr {
62 | margin:60px auto;
63 | width:50%;
64 | border-color: {{ site.colors.black }};
65 | }
66 |
67 | .container { word-wrap: break-word; }
68 | .center { text-align: center; }
69 | .left, .container .left { text-align: left; }
70 |
71 | .container h1, .container h2, .container h3, .container h4 {
72 | margin-bottom: 20px;
73 | text-align: center;
74 | padding: 0 4%;
75 | }
76 | .container p, .container ol, .container ul {
77 | font-size: 17px;
78 | padding: 0 5%;
79 | }
80 | .container ol, .container ul { padding: 0 8%; }
81 | .container p:first-of-type {
82 | margin-top: 40px;
83 | }
84 |
85 | /* keep embedded videos fluid! */
86 | .icontain {
87 | position: relative;
88 | height: 0;
89 | overflow: hidden;
90 | padding-bottom: 56.25%; /* keep 16x9 Aspect Ratio */
91 | }
92 | .i4x3 { padding-bottom: 75.00%; } /* keep 4x3 Aspect Ratio */
93 | .icontain iframe {
94 | position: absolute;
95 | top:0;
96 | left: 0;
97 | width: 100%;
98 | height: 100%;
99 | }
100 |
101 | .inlineblock {
102 | display:-moz-inline-stack;
103 | display:inline-block;
104 | zoom:1;
105 | *display:inline;
106 | }
107 |
108 | /* ---------------------------*/
109 | /* ----- Main Structure ----- */
110 | /* ---------------------------*/
111 |
112 | /* ----- top menu ----- */
113 |
114 | {% assign navborder = 3 %}
115 | {% assign navborder_active = 6 %}
116 |
117 | nav {
118 | font-size:15px;
119 | width:100%;
120 | position:fixed;
121 | z-index:100;
122 | top:0;
123 | left:0;
124 | background:#2e2e2e;
125 | }
126 |
127 | nav ul {
128 | list-style:none;
129 | text-align:center;
130 | padding:0;
131 | margin:0;
132 | letter-spacing:-4px;
133 | }
134 |
135 | nav ul li {
136 | display:inline-block;
137 | border-top:{{navborder}}px solid;
138 | padding: {{navborder}}px;
139 | *display:inline;
140 | zoom:1;
141 | line-height:normal;
142 | letter-spacing:normal;
143 | text-transform:uppercase;
144 | min-width:110px;
145 | line-height:60px;
146 | margin:0;
147 | }
148 |
149 | nav ul li a, nav ul li a:visited {
150 | display:block;
151 | color:#fff;
152 | text-decoration:none;
153 | font-weight:600;
154 | opacity:.75;
155 | }
156 |
157 | nav ul li a:hover {
158 | opacity:1
159 | }
160 | nav ul li:hover, nav ul li.active {
161 | border-top-width: {{navborder_active}}px;
162 | padding-top: 0;
163 | }
164 |
165 |
166 | /* ----- sections/articles ----- */
167 |
168 | .section {
169 | position:relative;
170 | display:block;
171 | width:100%;
172 | min-height:300px;
173 | padding:210px 0;
174 | background:url(img/bgnoise.png);
175 | /* generated noise from noisetexturegenerator.com */
176 | }
177 |
178 | .section:first-of-type {
179 | padding-top: 140px;
180 | }
181 |
182 |
183 | #footer {
184 | padding: 8px 0;
185 | min-height:0;
186 | text-align:center;
187 | background-color:#2e2e2e;
188 | background-image:none;
189 | }
190 | #footer .container p { font-size:13px; margin:0; }
191 |
192 | .subtlecircle {
193 | text-align:center;
194 | z-index:3;
195 | border-radius:50%;
196 | -moz-border-radius:50%;
197 | -webkit-border-radius:50%;
198 | box-shadow: 0px 1px 15px rgba(0,0,0,0.05);
199 | background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAF0lEQVQIHWP8//+/MQMaYELjg7kUCgIASm8DOqGzfp8AAAAASUVORK5CYII=);
200 | }
201 |
202 | .sectiondivider {
203 | width:270px;
204 | height:270px;
205 | padding:15px;
206 | position:absolute;
207 | top:-135px;
208 | left:50%;
209 | margin-left:-135px;
210 | }
211 |
212 | .sectiondivider img {
213 | width:200px;
214 | height:240px;
215 | position: static;
216 | margin-top: -20px;
217 | }
218 |
219 | .sectiondivider .fa-stack {
220 | font-size: 130px;
221 | position: static;
222 | margin-top: -8px;
223 | }
224 | .sectiondivider .fa-circle { color: #fff; }
225 |
226 | .sectiondivider h5 {
227 | font-size:15px;
228 | font-weight:700;
229 | text-transform:uppercase;
230 | position:absolute;
231 | bottom:50px;
232 | left:auto;
233 | text-align:center;
234 | display:block;
235 | z-index:6;
236 | width:240px;
237 | }
238 |
239 | .sectiondivider.imaged {
240 | text-shadow: 1px 1px 3px #333;
241 | }
242 |
243 |
244 | .columned {
245 | -webkit-column-count: 3;
246 | -moz-column-count: 3;
247 | column-count: 3;
248 |
249 | -webkit-column-gap: 40px;
250 | -moz-column-gap: 40px;
251 | column-gap: 40px;
252 |
253 | -webkit-column-rule: 1px outset rgba(255,255,255,0.5);
254 | -moz-column-rule: 1px outset rgba(255,255,255,0.5);
255 | column-rule: 1px outset rgba(255,255,255,0.5);
256 | }
257 | .longlist { font-size: 14px !important; }
258 | .longlist li { margin-bottom: 3px; }
259 |
260 |
261 |
262 | /* ----- fork on github banner ----- */
263 | #forkongithub a {
264 | color:#fff;
265 | text-decoration:none;
266 | font-family:arial,sans-serif;
267 | text-align:center;
268 | font-weight:700;
269 | font-size:1rem;
270 | line-height:2rem;
271 | position:relative;
272 | transition:.5s;
273 | padding:5px 40px;
274 | }
275 | #forkongithub a::before, #forkongithub a::after {
276 | content:""; width:100%; display:block; position:absolute;
277 | top:1px; left:0; height:1px; background:#fff;
278 | }
279 | #forkongithub a::after { bottom:1px; top:auto; }
280 | @media screen and (min-width:800px) {
281 | #forkongithub {
282 | position:fixed;
283 | display:block;
284 | top:0;
285 | right:0;
286 | width:200px;
287 | overflow:hidden;
288 | height:200px;
289 | z-index:9999;
290 | }
291 | #forkongithub a {
292 | width:200px;
293 | position:absolute;
294 | top:60px;
295 | right:-60px;
296 | transform:rotate(45deg);
297 | -webkit-transform:rotate(45deg);
298 | -ms-transform:rotate(45deg);
299 | -moz-transform:rotate(45deg);
300 | -o-transform:rotate(45deg);
301 | box-shadow:4px 4px 10px rgba(0,0,0,0.8);
302 | box-sizing: content-box;
303 | }
304 | }
305 |
306 |
307 |
308 | /* mid size (tablets, landscapes) */
309 | @media only screen and (max-width: 679px) {
310 | nav { font-size:11px; }
311 | nav ul li {
312 | min-width:60px;
313 | line-height:40px;
314 | }
315 | }
316 |
317 | /* tiny size (phones) */
318 | @media only screen and (max-width: 380px) {
319 | nav ul li { min-width:90px; line-height:20px; }
320 | }
321 |
322 | /* anything not desktop */
323 | @media only screen and (max-width: 767px) {
324 | .container h1 { font-size: 30px; }
325 | .container h2 { font-size: 24px; }
326 | .container h3 { font-size: 20px; }
327 | .container h4 { font-size: 18px; }
328 |
329 |
330 | .section { padding:130px 0; }
331 | .sectiondivider {
332 | width:200px;
333 | height:200px;
334 | padding:15px;
335 | top:-100px;
336 | margin-left:-100px;
337 | }
338 | .sectiondivider img {
339 | width:150px;
340 | height:180px;
341 | }
342 | .sectiondivider .fa-stack {
343 | font-size: 100px;
344 | margin-top: -14px;
345 | }
346 | .sectiondivider h5 {
347 | font-size:15px;
348 | bottom:30px;
349 | width:170px
350 | }
351 |
352 | .columned {
353 | -webkit-column-count: 2;
354 | -moz-column-count: 2;
355 | column-count: 2;
356 | }
357 | }
358 |
--------------------------------------------------------------------------------
/_includes/css/base.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Skeleton V1.2
3 | * Copyright 2011, Dave Gamache
4 | * www.getskeleton.com
5 | * Free to use under the MIT license.
6 | * http://www.opensource.org/licenses/mit-license.php
7 | * 6/20/2012
8 | */
9 |
10 |
11 | /* Table of Content
12 | ==================================================
13 | #Reset & Basics
14 | #Basic Styles
15 | #Site Styles
16 | #Typography
17 | #Links
18 | #Lists
19 | #Images
20 | #Buttons
21 | #Forms
22 | #Misc */
23 |
24 |
25 | /* #Reset & Basics (Inspired by E. Meyers)
26 | ================================================== */
27 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
28 | margin: 0;
29 | padding: 0;
30 | border: 0;
31 | font-size: 100%;
32 | font: inherit;
33 | vertical-align: baseline; }
34 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
35 | display: block; }
36 | body {
37 | line-height: 1; }
38 | ol, ul {
39 | list-style: none; }
40 | blockquote, q {
41 | quotes: none; }
42 | blockquote:before, blockquote:after,
43 | q:before, q:after {
44 | content: '';
45 | content: none; }
46 | table {
47 | border-collapse: collapse;
48 | border-spacing: 0; }
49 |
50 |
51 | /* #Basic Styles
52 | ================================================== */
53 | body {
54 | background: #fff;
55 | font: 14px/21px "Raleway", "HelveticaNeue-Light", Arial, sans-serif;
56 | color: #444;
57 | -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
58 | -webkit-text-size-adjust: 100%;
59 | }
60 |
61 |
62 | /* #Typography
63 | ================================================== */
64 | h1, h2, h3, h4, h5, h6 {
65 | font-weight: 300; }
66 | h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
67 | h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
68 | h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
69 | h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
70 | h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
71 | h5 { font-size: 17px; line-height: 24px; }
72 | h6 { font-size: 14px; line-height: 21px; }
73 | .subheader { color: #777; }
74 |
75 | p { margin: 0 0 20px 0; }
76 | p img { margin: 0; }
77 | p.lead { font-size: 21px; line-height: 27px; color: #777; }
78 |
79 | em { font-style: italic; }
80 | strong { font-weight: bold; }
81 | small { font-size: 80%; }
82 |
83 | /* Blockquotes */
84 | blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
85 | blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
86 | blockquote cite { display: block; font-size: 12px; color: #555; }
87 | blockquote cite:before { content: "\2014 \0020"; }
88 | blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
89 |
90 | hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
91 |
92 |
93 | /* #Links
94 | ================================================== */
95 | a, a:visited { text-decoration: underline; outline: 0; }
96 | a:hover, a:focus { }
97 | p a, p a:visited { line-height: inherit; }
98 |
99 |
100 | /* #Lists
101 | ================================================== */
102 | ul, ol { margin-bottom: 20px; }
103 | ul { list-style: none outside; }
104 | ol { list-style: decimal; }
105 | ul, ul.square { list-style: square outside; }
106 | ul ul, ul.circle { list-style: circle outside; }
107 | ul ul ul, ul.disc { list-style: disc outside; }
108 | ul ul li, ul ol li,
109 | ol ol li, ol ul li { margin-bottom: 6px; }
110 | li { line-height: 18px; margin-bottom: 12px; }
111 | ul.large li { line-height: 21px; }
112 | li p { line-height: 21px; }
113 |
114 | /* #Images
115 | ================================================== */
116 |
117 | img.scale-with-grid {
118 | max-width: 100%;
119 | height: auto; }
120 |
121 |
122 | /* #Buttons
123 | ================================================== */
124 |
125 | .button,
126 | button,
127 | input[type="submit"],
128 | input[type="reset"],
129 | input[type="button"] {
130 | background: #eee; /* Old browsers */
131 | background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
132 | background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
133 | background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
134 | background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
135 | background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
136 | background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
137 | border: 1px solid #aaa;
138 | border-top: 1px solid #ccc;
139 | border-left: 1px solid #ccc;
140 | -moz-border-radius: 3px;
141 | -webkit-border-radius: 3px;
142 | border-radius: 3px;
143 | color: #444;
144 | display: inline-block;
145 | font-size: 11px;
146 | font-weight: bold;
147 | text-decoration: none;
148 | text-shadow: 0 1px rgba(255, 255, 255, .75);
149 | cursor: pointer;
150 | margin-bottom: 20px;
151 | line-height: normal;
152 | padding: 8px 10px;
153 | font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
154 |
155 | .button:hover,
156 | button:hover,
157 | input[type="submit"]:hover,
158 | input[type="reset"]:hover,
159 | input[type="button"]:hover {
160 | color: #222;
161 | background: #ddd; /* Old browsers */
162 | background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
163 | background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
164 | background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
165 | background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
166 | background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
167 | background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
168 | border: 1px solid #888;
169 | border-top: 1px solid #aaa;
170 | border-left: 1px solid #aaa; }
171 |
172 | .button:active,
173 | button:active,
174 | input[type="submit"]:active,
175 | input[type="reset"]:active,
176 | input[type="button"]:active {
177 | border: 1px solid #666;
178 | background: #ccc; /* Old browsers */
179 | background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */
180 | background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */
181 | background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */
182 | background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */
183 | background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */
184 | background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }
185 |
186 | .button.full-width,
187 | button.full-width,
188 | input[type="submit"].full-width,
189 | input[type="reset"].full-width,
190 | input[type="button"].full-width {
191 | width: 100%;
192 | padding-left: 0 !important;
193 | padding-right: 0 !important;
194 | text-align: center; }
195 |
196 | /* Fix for odd Mozilla border & padding issues */
197 | button::-moz-focus-inner,
198 | input::-moz-focus-inner {
199 | border: 0;
200 | padding: 0;
201 | }
202 |
203 |
204 | /* #Forms
205 | ================================================== */
206 |
207 | form {
208 | margin-bottom: 20px; }
209 | fieldset {
210 | margin-bottom: 20px; }
211 | input[type="text"],
212 | input[type="password"],
213 | input[type="email"],
214 | textarea,
215 | select {
216 | border: 1px solid #ccc;
217 | padding: 6px 4px;
218 | outline: none;
219 | -moz-border-radius: 2px;
220 | -webkit-border-radius: 2px;
221 | border-radius: 2px;
222 | font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
223 | color: #777;
224 | margin: 0;
225 | width: 210px;
226 | max-width: 100%;
227 | display: block;
228 | margin-bottom: 20px;
229 | background: #fff; }
230 | select {
231 | padding: 0; }
232 | input[type="text"]:focus,
233 | input[type="password"]:focus,
234 | input[type="email"]:focus,
235 | textarea:focus {
236 | border: 1px solid #aaa;
237 | color: #444;
238 | -moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
239 | -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
240 | box-shadow: 0 0 3px rgba(0,0,0,.2); }
241 | textarea {
242 | min-height: 60px; }
243 | label,
244 | legend {
245 | display: block;
246 | font-weight: bold;
247 | font-size: 13px; }
248 | select {
249 | width: 220px; }
250 | input[type="checkbox"] {
251 | display: inline; }
252 | label span,
253 | legend span {
254 | font-weight: normal;
255 | font-size: 13px;
256 | color: #444; }
257 |
258 | /* #Misc
259 | ================================================== */
260 | .remove-bottom { margin-bottom: 0 !important; }
261 | .half-bottom { margin-bottom: 10px !important; }
262 | .add-bottom { margin-bottom: 20px !important; }
263 |
264 |
265 |
266 | /* #Syntax highlighting
267 | ================================================== */
268 |
269 |
270 | .highlight {
271 | color: #f8f8f2;
272 | table-layout: fixed;
273 | white-space: nowrap;
274 | width:90%;
275 | }
276 |
277 | .highlight pre, .highlight code { display:block; margin:0; padding:0; background: none; overflow:auto; word-wrap: normal; }
278 |
279 | .highlight, .linenodiv {
280 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIHWPQ1dU1BgABzQC7XXMTYQAAAABJRU5ErkJggg==);
281 | display:block;
282 | padding: 10px;
283 | margin-bottom:20px;
284 | }
285 | .gutter, .lineno { color: #ccc; }
286 |
287 | td.gl { width: 40px; }
288 |
289 | .gutter {
290 | border-right: none;
291 | padding: 10px;
292 | text-align: right;
293 | }
294 | span.lineno {
295 | display: block;
296 | float: left;
297 | width: 40px;
298 | padding-right: 8px;
299 | text-align: right;
300 | }
301 |
302 |
303 | .hll { background-color: #49483e }
304 | .c { color: #75715e } /* Comment */
305 | .err { color: #960050; background-color: #1e0010 } /* Error */
306 | .k { color: #66d9ef } /* Keyword */
307 | .l { color: #ae81ff } /* Literal */
308 | .n { color: #f8f8f2 } /* Name */
309 | .o { color: #f92672 } /* Operator */
310 | .p { color: #f8f8f2 } /* Punctuation */
311 | .cm { color: #75715e } /* Comment.Multiline */
312 | .cp { color: #75715e } /* Comment.Preproc */
313 | .c1 { color: #75715e } /* Comment.Single */
314 | .cs { color: #75715e } /* Comment.Special */
315 | .ge { font-style: italic } /* Generic.Emph */
316 | .gs { font-weight: bold } /* Generic.Strong */
317 | .kc { color: #66d9ef } /* Keyword.Constant */
318 | .kd { color: #66d9ef } /* Keyword.Declaration */
319 | .kn { color: #f92672 } /* Keyword.Namespace */
320 | .kp { color: #66d9ef } /* Keyword.Pseudo */
321 | .kr { color: #66d9ef } /* Keyword.Reserved */
322 | .kt { color: #66d9ef } /* Keyword.Type */
323 | .ld { color: #e6db74 } /* Literal.Date */
324 | .m { color: #ae81ff } /* Literal.Number */
325 | .s { color: #e6db74 } /* Literal.String */
326 | .na { color: #a6e22e } /* Name.Attribute */
327 | .nb { color: #f8f8f2 } /* Name.Builtin */
328 | .nc { color: #a6e22e } /* Name.Class */
329 | .no { color: #66d9ef } /* Name.Constant */
330 | .nd { color: #a6e22e } /* Name.Decorator */
331 | .ni { color: #f8f8f2 } /* Name.Entity */
332 | .ne { color: #a6e22e } /* Name.Exception */
333 | .nf { color: #a6e22e } /* Name.Function */
334 | .nl { color: #f8f8f2 } /* Name.Label */
335 | .nn { color: #f8f8f2 } /* Name.Namespace */
336 | .nx { color: #a6e22e } /* Name.Other */
337 | .py { color: #f8f8f2 } /* Name.Property */
338 | .nt { color: #f92672 } /* Name.Tag */
339 | .nv { color: #f8f8f2 } /* Name.Variable */
340 | .ow { color: #f92672 } /* Operator.Word */
341 | .w { color: #f8f8f2 } /* Text.Whitespace */
342 | .mf { color: #ae81ff } /* Literal.Number.Float */
343 | .mh { color: #ae81ff } /* Literal.Number.Hex */
344 | .mi { color: #ae81ff } /* Literal.Number.Integer */
345 | .mo { color: #ae81ff } /* Literal.Number.Oct */
346 | .sb { color: #e6db74 } /* Literal.String.Backtick */
347 | .sc { color: #e6db74 } /* Literal.String.Char */
348 | .sd { color: #e6db74 } /* Literal.String.Doc */
349 | .s2 { color: #e6db74 } /* Literal.String.Double */
350 | .se { color: #ae81ff } /* Literal.String.Escape */
351 | .sh { color: #e6db74 } /* Literal.String.Heredoc */
352 | .si { color: #e6db74 } /* Literal.String.Interpol */
353 | .sx { color: #e6db74 } /* Literal.String.Other */
354 | .sr { color: #e6db74 } /* Literal.String.Regex */
355 | .s1 { color: #e6db74 } /* Literal.String.Single */
356 | .ss { color: #e6db74 } /* Literal.String.Symbol */
357 | .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
358 | .vc { color: #f8f8f2 } /* Name.Variable.Class */
359 | .vg { color: #f8f8f2 } /* Name.Variable.Global */
360 | .vi { color: #f8f8f2 } /* Name.Variable.Instance */
361 | .il { color: #ae81ff } /* Literal.Number.Integer.Long */
362 |
363 | .gh { } /* Generic Heading & Diff Header */
364 | .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
365 | .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
366 | .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
367 |
--------------------------------------------------------------------------------
/beta_dist_app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Beta Distribution Applet - Interactive Beta Distribution Plot
7 |
8 |
9 |
10 |
11 |
83 |
84 |
85 |
86 |
87 |
Beta Distribution Applet - Interactive Beta Distribution Plot
88 |
89 |
90 |
91 |
92 |
a1:
93 |
94 |
95 |
96 |
97 |
98 |
b1:
99 |
100 |
101 |
102 |
103 |
104 |
105 | Beta(α1, β1): P(X ≥ x)
106 |
107 |
108 |
109 |
110 | Beta(α1, β1): P(X ≤ x):
111 |
112 |
113 |
114 |
115 |
116 |
117 |
a2:
118 |
119 |
120 |
121 |
122 |
123 |
b2:
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 | Beta(α2, β2): P(X ≥ x)
133 |
134 |
135 |
136 |
137 | Beta(α2, β2): P(X ≤ x):
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
If you'd like to reproduce this interactive plot in Python with PyTorch, here is the code:
150 |
151 | import numpy as np
152 | import matplotlib.pyplot as plt
153 | import torch
154 | from torch.distributions import Beta
155 | from torch.distributions.kl import kl_divergence
156 | from ipywidgets import interactive, FloatSlider, Layout
157 | from IPython.display import display
158 |
159 | def plot_beta_interactive(a=1.0, b=1.0, a2=2.0, b2=2.0):
160 | # Create Beta distributions
161 | distribution1 = Beta(torch.tensor(a), torch.tensor(b))
162 | distribution2 = Beta(torch.tensor(a2), torch.tensor(b2))
163 |
164 | # Create x values
165 | x = torch.linspace(0, 1, 1000)
166 |
167 | # Calculate PDFs
168 | pdf1 = torch.exp(distribution1.log_prob(x))
169 | pdf2 = torch.exp(distribution2.log_prob(x))
170 |
171 | # Convert to numpy
172 | x_np = x.numpy()
173 | pdf1_np = pdf1.numpy()
174 | pdf2_np = pdf2.numpy()
175 |
176 | # Calculate KL divergence
177 | kl = kl_divergence(distribution1, distribution2).item()
178 |
179 | # Create the plot
180 | plt.figure(figsize=(10, 6))
181 | plt.plot(x_np, pdf1_np, label=f'Beta(α={{a:.2f}}, β={{b:.2f}})')
182 | plt.fill_between(x_np, pdf1_np, alpha=0.3)
183 | plt.plot(x_np, pdf2_np, label=f'Beta(α={{a2:.2f}}, β={{b2:.2f}})')
184 | plt.fill_between(x_np, pdf2_np, alpha=0.3)
185 |
186 | # Add KL divergence to the plot
187 | plt.text(0.4, 0.85, f'KL(P||Q) = {{kl:.4f}}', transform=plt.gca().transAxes,
188 | verticalalignment='top', bbox=dict(boxstyle='round', facecolor='white', alpha=0.8))
189 |
190 | plt.xlabel('x')
191 | plt.ylabel('Probability Density')
192 | plt.title(f'Beta Distributions: (α={{a:.2f}}, β={{b:.2f}}) and (α={{a2:.2f}}, β={{b2:.2f}})')
193 | plt.legend()
194 | plt.grid(True, alpha=0.3)
195 | plt.show()
196 |
197 | # Create interactive plot
198 | def create_interactive_beta_plot():
199 | slider_layout = Layout(width='500px')
200 |
201 | interactive_plot = interactive(
202 | plot_beta_interactive,
203 | a=FloatSlider(min=0.001, max=100, step=0.001, value=1, description='a:', layout=slider_layout),
204 | b=FloatSlider(min=0.001, max=100, step=0.001, value=1, description='b:', layout=slider_layout),
205 | a2=FloatSlider(min=0.001, max=100, step=0.001, value=2, description='a2:', layout=slider_layout),
206 | b2=FloatSlider(min=0.001, max=100, step=0.001, value=2, description='b2:', layout=slider_layout)
207 | )
208 |
209 | display(interactive_plot)
210 |
211 | # Finally, run:
212 | create_interactive_beta_plot()
213 |
214 |
215 |
216 |
219 |
220 |
221 |
441 |
442 |
443 |
--------------------------------------------------------------------------------