Generate Front End for the Recommender

Last step in creating a talk recommender for Pycon.
The rest of the project can be found on github: https://github.com/mikecunha/pycon_reco

Javascript



In [1]:

    
%%writefile app/scripts/pytalk.js
function update_related(r) {
    
    $("a.favButton").removeClass("recd");

    for(var i=0; i<r.talks.length; i++) {
        var obj = r.talks[i];
        $("#" + obj ).addClass("recd");
    } 

    //update nav buttons
    var rec_count = r.talks.length;
    $("#recs").text("Recommended (" + rec_count +")");

    return false;
}

$('div').live('pageinit', function(){

    $("a.favButton").click(function(){

        $(this).toggleClass('favd');
        $(this).toggleClass('ui-alt-icon');

        var sel_talks="";
        var fav_count=0;
              $('.favd').each(function() {
                    sel_talks += "," + this.id;
        fav_count += 1;
              });

        //update nav buttons
        $("#favs").text("Favs (" + fav_count +")");

        $.ajax({type: "POST",
                url: "http://localhost:8181/rec",
                data: { t: sel_talks},
                cache: false,
                success: function(resp){
                    update_related(resp);
                }
        });
    });

    $("li a").click(function(){
        $(this).find("p.talk-time").toggle();
        $(this).find("p.li-details").toggleClass('expanded');
    });

    $("#recs").click(function(){
        $("a.favButton:not(.recd)").parent().hide();
        $(".recd").parent().show();
    });

    $("#favs").click(function(){
        $("a.favButton:not(.favd)").parent().hide();
        $(".favd").parent().show();
    });

    $("#allT").click(function(){
        $("li").show();
    });

});









    



Overwriting app/scripts/pytalk.js

CSS

TOC



In [2]:

    
%%writefile app/css/pytalk.css
<style>
    .ui-btn-no-text_wider {
        width: 60px !important;
    }

    .favd:after {
        background-color:yellow !important;
    }
            
    /*
    ul li .ui-btn:after {
        background-color: #4da6ff;
    }
    */

    ul li h2 {
        padding-right: 4em !important;
    }

    ul li h2, .li-details.expanded {
        white-space: pre !important;           /* CSS 2.0 */
        white-space: pre-wrap !important;      /* CSS 2.1 */
        white-space: pre-line !important;      /* CSS 3.0 */
        white-space: -pre-wrap !important;     /* Opera 4-6 */
        white-space: -o-pre-wrap !important;   /* Opera 7 */
        white-space: -moz-pre-wrap !important; /* Mozilla */
        white-space: -hp-pre-wrap !important;  /* HP Printers */
        word-wrap: break-word;      /* IE 5+ */
    }
</style>









    



Overwriting app/css/pytalk.css

HTML

TOC



In [3]:

    
%%writefile app/pytalk.html
<!doctype html>
<html>
<head>
    <title>Pycon Talk Reco</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" type="text/css" href="css/pytalk.css">
    <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="scripts/pytalk.js"></script>
</head>
<body>
    <div data-role="page" id="home">

    <!-- default panel  -->
    <div data-role="panel" id="defaultpanel" data-position-fixed="true">
        <h3>Default panel options</h3>
        <p>To close, click off the panel, swipe left or right, hit the Esc keyuse the button below:</p>
    </div><!-- /default panel -->

        <div data-role="header" data-position="fixed">
            <h1>Pycon 2015 Talks</h1>

            <div data-role="navbar" data-iconpos="top">
            <ul>
            <li><a id="allT" data-icon="grid" class="ui-btn-active">All Talks</a></li>
            <li><a id="favs" data-icon="star">Favs</a></li>
            <li><a id="recs" data-icon="gear">Recommended</a></li>
                </ul>
            </div><!-- /navbar -->
    
        </div><!-- /header -->

    <div data-role="content">
            <ul data-role="listview" data-filter="true" class="">
                $item_list
            </ul>
        </div><!-- /content -->
 
        <div data-role="footer">
            <h4>My Footer</h4>
        </div><!-- /footer -->
 
    </div><!-- /page -->
</body>
</html>









    



Writing app/pytalk.html

Generate List Items

TOC



In [4]:

    
import fileinput
import pandas as pd
import html

cur_talks = pd.read_csv( 'data/pycon_talks_2015.csv', sep="\t" )

def uni_to_HTML_ent(text):
    """Converts unicode to HTML entities.  For example '&' becomes '&amp;'."""
    return html.escape(text).encode('ascii', 'xmlcharrefreplace').decode()

item_list = ''
for ind, t in cur_talks.iterrows():
    
    item_list += """<li><a href="">
                 <h2>""" + uni_to_HTML_ent( t.title ) + """</h2>
                 <p><strong>""" + uni_to_HTML_ent( t.author ) + """</strong></p>
                 <p class="li-details">""" + uni_to_HTML_ent( t.desc ) + """</p>
                 <p class="ui-li-aside talk-time" style="display: none"><strong>""" + t.weekday + """</strong></p>
                 </a>
                 <a id=""" +'"'+ str(ind) +'"'+ """ class="ui-btn ui-btn-no-text_wider favButton" data-icon="star"></a></li>
                 """    
item_list = item_list.strip()

for line in fileinput.input('app/pytalk.html', inplace=True):
    print(line.replace('$item_list', item_list), end='')

Preview

TOC

cd into the app directory and start the webservice:
python3 python_service.py

Note if you're viewing this on nbviewer.ipython.org no recommendations will be made without the web-service running



In [6]:

    
%%HTML
<iframe src="app/pytalk.html" width=500 height=600></iframe>



In [ ]: