{
    "pageid": "upload",
    "cn": "<form method='post' enctype='multipart/form-data'>\n<table width=100% style=\"background:#fff;border-radius:10px;\">\n<tr>\n    <td  colspan=2 style=\"padding-top:20px;padding-left:20px;\">\n        \n        <span style=\"font-size:20px;font-weight:bold;\">Upload your csv or tsv file</span>\n        <span style=\"font-size:12px;font-style:italic;\">\n            (<a href=\"/content/upload_tutorial.pdf\" download>Tutorial PDF</a>, <a href=\"/ln2uploads/examples/glygen_upload_example_file.csv\" download>example CSV file</a>, <a href=\"/ln2uploads/examples/glygen_upload_example_file.txt\" download>example TSV file</a>, <a href=\"/ln2uploads/examples/glycan.png\" download>example glycan PNG file</a>)\n        </span>\n\n        </td>\n    </tr>\n\n\n<tr>\n    <td style=\"padding-top:20px;padding-left:40px;font-style:italic;width:350px;\">\n        Select format<br>\n        <select id=fileformat name=fileformat style=\"width:100%;height:35px;\">\n            <option value=\"csv\">Comma Separated Values (CSV)</option>\n            <option value=\"tsv\">Tab Separated Values (TSV)</option>\n            <option value=\"glycanimage\">Glycan JPEG or PNG</option>\n        </select>\n    </td>\n    <td style=\"padding-top:20px;padding-left:20px;font-style:italic;\">\n        Select file<br>\n        <input id=userfile type='file' name='userfile'>\n    </td>\n</tr>\n\n<tr><td colspan=2>&nbsp;</td></tr>\n\n</table>\n\n<div  style=\"display:block;float:left;width:100%;padding:10px 10px 20px 40px;text-align:left;margin-top:-10px;background:#fff;border-radius:10px;\">\n    <input id=submitfile type='submit' value='Submit File'/>\n</div>\n\n<div id=progresscn style=\"display:block;float:left;width:100%;border:0px dashed orange;\"></div>\n\n\n<DIV id=allwrappercn style=\"display:block;float:left;width:100%;border:0px dashed orange;\">\n\n\n<div id=savewrappercn style=\"display:none;float:left;width:100%;margin-top:10px;padding:10px 10px 5px 10px;border-bottom:1px solid #ccc;\">\n<div class=titlecn  id=savetitlecn style=\"margin-top:10px;text-align:right;font-weight:bold;cursor:hand;color:#3279b5;\">Save File</div>\n<div id=savecn style=\"display:none;padding:10px;text-align:left;margin-top:0px;\">\n    <input type=text placeholder=\"First name\" class=savefilefield id=fname name=fname style=\"width:40%;height:30px;padding:5px;border-radius:5px;margin-bottom:10px;border:0px dashed #fff;\"><br>\n    <input type=text placeholder=\"Last name\" class=savefilefield id=lname name=lname style=\"width:40%;height:30px;padding:5px;border-radius:5px;margin-bottom:10px;border:0px dashed #fff;\"> <br>\n    <input type=text placeholder=\"Email Address\" class=savefilefield id=email name=email style=\"width:40%;height:30px;padding:5px;border-radius:5px;margin-bottom:10px;border:0px dashed #fff;\"> <br>\n    <input type=text placeholder=\"Institute\" class=savefilefield id=institute name=institute style=\"width:40%;height:30px;padding:5px;border-radius:5px;margin-bottom:10px;border:0px dashed #fff;\"> <br>\n    <input id=savefile type=submit  name=btn value=\"Save\">\n</div>\n</div>\n\n\n\n\n<div id=qcreportwrappercn style=\"display:none;float:left;width:100%;margin-top:10px;padding:10px 10px 15px 10px;border:1px solid #ccc;border-radius:10px;\">\n            <div class=titlecn id=qcreporttitlecn style=\"margin-top:10px;text-align:left;font-weight:bold;cursor:hand;color:#3279b5;\">Basic Sanity Check</div>\n                        <div id=qcreportcn style=\"padding:10px;margin-top:0px;border:0px dashed orange;\"></div>\n</div>\n\n\n\n\n\n<div id=idmappingwrappercn style=\"display:none;float:left;width:100%;margin-top:10px;padding:10px 10px 15px 10px;border:1px solid #ccc;border-radius:10px;\">\n    <div class=titlecn  id=idmappingtitlecn style=\"margin-top:10px;text-align:left;font-weight:bold;cursor:hand;color:#3279b5;\">Mapping to GlyGen IDs</div>\n    <div class=idmappingcn id=idmapselectorone style=\"display:none;float:left;text-align:left;padding:10px;margin-top:10px;margin-right:20px;width:30%;background:#f1f1f1;border-radius:10px;\">\n    </div>\n    <div class=idmappingcn id=idmapselectortwo style=\"display:none;float:left;text-align:left;padding:10px;margin-top:10px;width:30%;background:#f1f1f1;border-radius:10px;\">\n    </div>\n    <div class=idmappingcn id=idmapselectordesc style=\"display:none;float:left;text-align:left;padding:10px;margin-top:10px;width:100%;\">\n    Note: Given a user-provided image of a glycan, this application outputs the glycan IDs of the five most similar glycans in the GlyGen database. The classification is based solely on the features that can be extracted from the images of the glycan structures. These features are extracted using the bagOfFeatures command in Matlab's Computer Vision toolbox. The features are used by the Neural Network algorithm from Matlab's Deep Learning Toolbox to identify the potential glycan ID of the image. This algorithm can only match images to glycan IDs that are contained in GlyGen.<br><br>Contributors: Abigail Basener, Sarah Peterson, Tiyani Wang, Jonathon Keeney, Robel Kahsay,  Raja Mazumder\n\n    </div>\n    <div class=idmappingcn id=idmapqueryimagecn style=\"display:none;float:left;text-align:left;padding:10px;margin-top:10px;width:100%;font-weight:bold;\">\n        \n    </div>\n    <div class=idmappingcn id=idmappingresultcn style=\"display:none;float:left;text-align:left;padding:10px;margin-top:0px;width:100%;background:#fff;\">\n    </div>\n</div>\n\n\n\n\n\n<div id=sitemappingwrappercn style=\"display:none;float:left;width:100%;margin-top:10px;padding:10px 10px 15px 10px;border:1px solid #ccc;border-radius:10px;\">\n    <div class=titlecn  id=sitemappingtitlecn style=\"margin-top:10px;text-align:left;font-weight:bold;cursor:hand;color:#3279b5;\">Protein Site Check</div>\n    <div class=sitemappingcn id=sitemapselectorone style=\"display:none;float:left;text-align:left;padding:10px;margin-top:10px;margin-right:20px;width:25%;background:#f1f1f1;border-radius:10px;\">\n    </div>\n    <div class=sitemappingcn id=sitemapselectortwo style=\"display:none;float:left;text-align:left;padding:10px;margin-top:10px;width:25%;background:#f1f1f1;border-radius:10px;\">\n    </div>\n\n    <div class=sitemappingcn id=sitemapselectorthree style=\"display:none;float:left;text-align:left;padding:10px;margin-top:10px;width:30%;background:#f1f1f1;border-radius:10px;\">\n    </div>\n\n    <div class=sitemappingcn id=sitemappingresultcn style=\"display:none;float:left;text-align:left;padding:10px;margin-top:10px;width:100%;background:#fff;\">\n    </div>\n</div>\n\n\n\n<div id=previewwrappercn style=\"display:none;float:left;width:100%;margin-top:10px;padding:10px 10px 15px 10px;border:1px solid #ccc;border-radius:10px;\">\n<div class=titlecn  id=previewtitlecn style=\"margin-top:10px;text-align:left;font-weight:bold;cursor:hand;color:#3279b5;\">Records Preview\n    </div>\n    \n<div id=previewdownloadcn style=\"display:none;float:right;margin:10px;text-align:right;cursor:hand;\"></div>\n<div id=previewcn style=\"display:none;padding:10px;margin-top:0px;border:0px dashed orange;\"></div>\n</div>\n\n\n<div id=sanitywrappercn style=\"display:none;float:left;width:100%;margin-top:10px;padding:10px 10px 15px 10px;border:1px solid #ccc;border-radius:10px;\">\n<div class=titlecn  id=sanitytitlecn style=\"margin-top:10px;text-align:left;font-weight:bold;cursor:hand;color:#3279b5;\">Failed Records</div>\n<div id=sanitycn style=\"padding:10px;margin-top:0px;border:0px dashed orange;\"></div>\n</div>\n\n\n\n</DIV>\n\n</form>\n\n\n"
}
