links.html

---
layout: page
permalink: /introduction/
---

<section class="content style1">
	<div class="container row">
		<div class="col">
			<header class="major">
				<h2>What is ELEKTRONN?</h2>
			</header>

			<p>ELEKTRONN is a toolkit that lifts the predictive power of neural networks on a level accessible to scientists outside the machine learning community.</p>
		</div>

		<div class="col">
			<img src="{{ "images/-Logo+1.svg" | prepend: site.baseurl }}" alt="ELEKTRONN Logo">
		</div>
	</div>
</section>

<section class="content style2 -diagonal-border">
	<div class="container">
		<div class="row">
			<div class="col">
				<header class="major">
					<h3>Powerful & Flexible Training</h2>
				</header>

				<p><strong>ELEKTRONN</strong> puts emphasis on the analysis of image
				data using <strong>convolutional neural networks</strong>
				<em>(CNN).</em> For this task, we provide a <strong>ready-made,
					flexible training pipeline</strong> with helpful utility functions
				and a comprehensive documentation (+link).</p>
			</div>

			<div class="col">
				<img src="{{ "images/-Logo+1.svg" | prepend: site.baseurl }}" alt="ELEKTRONN Logo">
			</div>
		</div> <!-- row -->

		<div class="row">
			<div class="col">
				<header class="major">
					<h3>Simple Setup & Optimization</h2>
				</header>

				<p><strong>ELEKTRONN</strong> is written in <strong>Python</strong>, based on the <strong>Theano</strong> framework and can be accelarated on nVidia GPUs.</p>
			</div>

			<div class="col">
				<img src="{{ "images/-Logo+1.svg" | prepend: site.baseurl }}" alt="ELEKTRONN Logo">
			</div>
		</div> <!-- row -->
	</div>
</section>

<section class="content style1 -diagonal-border">
	<div class="container">
		<div class="row">
			<div class="col">
				<header class="major">
					<h4>About Machine Learning</h2>
				</header>

				<p>Many data analysis and classification tasks can be formulated as a
				<em>machine learning problem:</em> Without any explicit expert knowlege
				or manaul guidance, a powerful generic method—such as a <strong>neural
					network</strong>—learns to map certain inputs <em>(raw images)</em>
				to certain outputs <em>(probability maps for classes)</em>. The
				learning is solely driven by a set of exemplary input-output pairs that
				must be provided to the method.</p>
			</div>
		</div> <!-- row -->

		<div class="row">
	<figure class="cd-image-container">
		<img src="{{ "images/raw.png" | prepend: site.baseurl }}" alt="Original Image">
		<span class="cd-image-label" data-type="original">Original</span>

		<div class="cd-resize-img"> <!-- the resizable image on top -->
			<img src="{{ "images/membrane_marius.png" | prepend: site.baseurl }}" alt="Modified Image">
			<span class="cd-image-label" data-type="modified">Modified</span>
		</div>

		<span class="cd-handle"></span>
	</figure> <!-- cd-image-container -->

		</div>
	</div>
</section>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
jQuery(document).ready(function($){
    //check if the .cd-image-container is in the viewport 
    //if yes, animate it
    checkPosition($('.cd-image-container'));
    $(window).on('scroll', function(){
        checkPosition($('.cd-image-container'));
    });
    
    //make the .cd-handle element draggable and modify .cd-resize-img width according to its position
    $('.cd-image-container').each(function(){
        var actual = $(this);
        drags(actual.find('.cd-handle'), actual.find('.cd-resize-img'), actual, actual.find('.cd-image-label[data-type="original"]'), actual.find('.cd-image-label[data-type="modified"]'));
    });

    //upadate images label visibility
    $(window).on('resize', function(){
        $('.cd-image-container').each(function(){
            var actual = $(this);
            updateLabel(actual.find('.cd-image-label[data-type="modified"]'), actual.find('.cd-resize-img'), 'left');
            updateLabel(actual.find('.cd-image-label[data-type="original"]'), actual.find('.cd-resize-img'), 'right');
        });
    });
});

function checkPosition(container) {
    container.each(function(){
        var actualContainer = $(this);
        if( $(window).scrollTop() + $(window).height()*0.5 > actualContainer.offset().top) {
            actualContainer.addClass('is-visible');
        }
    });
}

//draggable funtionality - credits to http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/
function drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) {
    dragElement.on("mousedown vmousedown", function(e) {
        dragElement.addClass('draggable');
        resizeElement.addClass('resizable');

        var dragWidth = dragElement.outerWidth(),
            xPosition = dragElement.offset().left + dragWidth - e.pageX,
            containerOffset = container.offset().left,
            containerWidth = container.outerWidth(),
            minLeft = containerOffset + 10,
            maxLeft = containerOffset + containerWidth - dragWidth - 10;
        
        dragElement.parents().on("mousemove vmousemove", function(e) {
            leftValue = e.pageX + xPosition - dragWidth;
            
            //constrain the draggable element to move inside his container
            if(leftValue < minLeft ) {
                leftValue = minLeft;
            } else if ( leftValue > maxLeft) {
                leftValue = maxLeft;
            }

            widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%';
            
            $('.draggable').css('left', widthValue).on("mouseup vmouseup", function() {
                $(this).removeClass('draggable');
                resizeElement.removeClass('resizable');
            });

            $('.resizable').css('width', widthValue); 

            updateLabel(labelResizeElement, resizeElement, 'left');
            updateLabel(labelContainer, resizeElement, 'right');
            
        }).on("mouseup vmouseup", function(e){
            dragElement.removeClass('draggable');
            resizeElement.removeClass('resizable');
        });
        e.preventDefault();
    }).on("mouseup vmouseup", function(e) {
        dragElement.removeClass('draggable');
        resizeElement.removeClass('resizable');
    });
}

function updateLabel(label, resizeElement, position) {
    if(position == 'left') {
        ( label.offset().left + label.outerWidth() < resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;
    } else {
        ( label.offset().left > resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;
    }
}

</script>