<div
class="flex">
<!-- Presentation main body-->
<div
id="presentation--main-body" class="w-full xl:w-3/4">
<!-- Presentation header -->
<div
id="presentation--header" class="flex flex-wrap">
<!-- Presentation header media -->
<div id="presentation--header--media" class="w-full presentation--header--media xl:w-2/3 bg-primary-900">
<div class="embed-container">
<iframe src="https://player.vimeo.com/video/416060939" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
<!-- Presentation action links -->
<div
class="flex items-center justify-end px-6 py-3">
<!-- Theater mode toggle -->
<button id="button--theater-toggle" class="mr-1 text-gray-500 fa-stack fa-lg hover:text-white">
<i class="text-gray-800 fas fa-circle fa-stack-2x"></i>
<i class="fas fa-arrows-alt-h fa-stack-1x "></i>
</button>
<!-- Share presentation button -->
<button id="button--share-presentation" class="mr-1 text-gray-500 fa-stack fa-lg hover:text-white">
<i class="text-gray-800 fas fa-circle fa-stack-2x"></i>
<i class="fas fa-share fa-stack-1x"></i>
</button>
<!-- Add to list button -->
<button id="button--add-to-list" class="mr-1 text-gray-500 fa-stack fa-lg hover:text-white">
<i class="text-gray-800 fas fa-circle fa-stack-2x"></i>
<i class="fas fa-plus-circle fa-stack-1x"></i>
</button>
<!-- Favorite presentation button -->
<button id="button--favorite" class="text-gray-500 fa-stack fa-lg hover:text-white">
<i class="text-gray-800 fas fa-circle fa-stack-2x"></i>
<i class="fas fa-heart fa-stack-1x"></i>
</button>
</div>
</div>
<!-- Presentation title -->
<div
id="presentation--header--title" class="flex flex-col flex-grow xl:w-1/3">
<!-- Presentation track -->
<div class="flex items-center flex-grow-0 px-5 py-3 bg-orange-600">
<!-- Presentation track icon -->
{# <span class="mr-6 fa-stack fa-lg">
<i class="text-white fas fa-circle fa-stack-2x"></i>
<i class="text-orange-600 fas fa-road fa-stack-1x fa-inverse"></i>
</span> #}
<!-- Presentation track title --><span class="font-bold leading-tight tracking-wide text-white uppercase"> Collaborative Sessions In Data Science</span>
</div>
<div class="flex flex-col flex-grow bg-white">
<div
class="flex items-center p-6 py-3 border-b">
<!-- Presentation type -->
<span class="px-3 py-1 mr-6 text-xs font-bold tracking-wide uppercase bg-gray-200 rounded-full">{{ content.field_cc_type_ref.0 }}</span>
<!-- Presentation code -->
<button class="text-2xl font-bold tracking-wide uppercase">MB-1203</button>
</div>
<div
class="p-6">
<!-- Presentation session -->
<span class="block mb-3 font-bold leading-tight tracking-wide text-gray-600 uppercase xl:hidden">Sessions 3R: Robustness Reproducibility Replicability</span>
<!-- Presentation title -->
{{ title_prefix }}
<h1 class="mb-3 text-2xl leading-tight xl:mt-0">{{ label }}</h1>
{{ title_suffix }}
<!-- Presentation authors -->
<span>John Smith, John Smith, John Smith<span></div>
</div>
</div>
</div>
<!-- End presentation header -->
<!-- Tablist -->
<div id="tabList" x-data="{ openTab: 1 }">
<ul
class="flex flex-col md:flex-row bg-primary-500">
<!-- Details tab -->
<li :class="openTab === 1 ? 'border-tertiary-500 active active:opacity-100' : 'opacity-75'" @click="openTab = 1" class="p-3 tracking-wide text-white border-l-8 border-transparent cursor-pointer md:border-b-4 md:border-l-0 hover:border-tertiary-500 md:px-6 md:py-3 nextup-nav-item hover:opacity-100" data-toggle="tab" href="#home" role="tab" aria-controls="details" aria-selected="true">
<span class="block mb-0 font-bold uppercase md:mb-1">
<i class="mr-2 fas fa-info-circle fa-fw md:hidden"></i>Details</span>
<span class="hidden mb-0 text-sm leading-tight xl:text-base md:block">About the presentation</span>
</li>
<!-- Conversation tab -->
<li :class="openTab === 2 ? 'border-tertiary-500 active active:opacity-100' : 'opacity-75'" @click="openTab = 2" class="p-3 tracking-wide text-white border-l-8 border-transparent cursor-pointer md:border-b-4 md:border-l-0 hover:border-tertiary-500 md:px-6 md:py-3 nextup-nav-item hover:opacity-100" data-toggle="tab" href="#conversation" role="tab" aria-controls="conversation" aria-selected="false">
<span class="block mb-0 font-bold uppercase md:mb-1">
<i class="mr-2 fas fa-comments-alt fa-fw md:hidden"></i>Conversation
</span>
<span class="hidden mb-0 text-sm leading-tight xl:text-base md:block">Join the conversation</span>
</li>
<!-- Next up tab -->
<li :class="openTab === 5 ? 'border-tertiary-500 active active:opacity-100' : 'opacity-75'" @click="openTab = 5" class="p-3 tracking-wide text-white border-l-8 border-transparent cursor-pointer md:border-b-4 md:border-l-0 xl:hidden hover:border-tertiary-500 md:px-6 md:py-3 nextup-nav-item hover:opacity-100" data-toggle="tab" href="#conversation" role="tab" aria-controls="conversation" aria-selected="false">
<span class="block mb-0 font-bold uppercase md:mb-1">
<i class="mr-2 fas fa-comments-alt fa-fw md:hidden"></i>Next Up
</span>
<span class="hidden mb-0 text-sm leading-tight xl:text-base md:block">View what's next</span>
</li>
<li :class="openTab === 3 ? 'border-tertiary-500 active active:opacity-100' : 'opacity-75'" @click="openTab = 3" class="p-3 tracking-wide text-white border-l-8 border-transparent cursor-pointer md:border-b-4 md:border-l-0 hover:border-tertiary-500 md:px-6 md:py-3 nextup-nav-item hover:opacity-100" data-toggle="tab" href="#conversation" role="tab" aria-controls="chairs" aria-selected="false">
<span class="block mb-0 font-bold uppercase md:mb-1">
<i class="mr-2 fas fa-comments-alt fa-fw md:hidden"></i>
Chairs
</span>
<span class="hidden mb-0 text-sm leading-tight xl:text-base md:block">View the organizers</span>
</li>
<li :class="openTab === 4 ? 'border-tertiary-500 active active:opacity-100' : 'opacity-75'" @click="openTab = 4" class="p-3 tracking-wide text-white border-l-8 border-transparent cursor-pointer md:border-b-4 md:border-l-0 hover:border-tertiary-500 md:px-6 md:py-3 nextup-nav-item hover:opacity-100" data-toggle="tab" href="#conversation" role="tab" aria-controls="media" aria-selected="false">
<span class="block mb-0 font-bold uppercase md:mb-1">
<i class="mr-2 fas fa-comments-alt fa-fw md:hidden"></i>Media
</span>
<span class="hidden mb-0 text-sm leading-tight xl:text-base md:block">View presentation media</span>
</li>
</ul>
<!-- Tab content -->
<div
class="tab-content">
<!-- Details tab content -->
<div id="tab--content--details" x-show="openTab === 1">
<div
class="flex flex-col-reverse md:flex-row">
<!-- Details body -->
<div
id="details--body" class="p-6 md:w-2/3">
<!-- Presentation abstract -->
<h2 class="mb-3 text-base font-bold tracking-wide uppercase">Abstract</h2>
<p class="mb-6 leading-relaxed">Identifying singers is an important task with many applications. However, the task remains challenging due to many issues. One major issue is related to the confounding factors from the background instrumental music that is mixed with the vocals in music production. A singer identification model may learn to extract non-vocal related features from the instrumental part of the songs, if a singer only sings in certain musical contexts (e.g., genres). The model cannot therefore generalize well when the singer sings in unseen contexts. In this paper, we attempt to address this issue. Specifically, we employ open-unmix, an open source tool with state-of-the-art performance in source separation, to separate the vocal and instrumental tracks of music. We then investigate two means to train a singer identification model: by learning from the separated vocal only, or from an augmented set of data where we “shuffle-and-remix” the separated vocal tracks and instrumental tracks of different songs to artificially make the singers sing in different contexts. We also incorporate melodic features learned from the vocal melody contour for better performance. Evaluation results on a benchmark dataset called the artist20 shows that this data augmentation method greatly improves the accuracy of singer identification.</p>
<!-- Presentation speakers -->
<div class="pt-2 border-t">
<h2 class="mb-5 text-base font-bold tracking-wide uppercase">About the Speakers</h2>
<!-- Presentation speaker -->
<div class="flex flex-col mb-6">
<div
class="flex items-center">
<!-- Presentation speaker photo-->
<div>
<div class="w-24 h-24 mr-3 overflow-hidden border-4 border-gray-400 rounded-full hover:border-gray-300 focus:border-gray-300 focus:outline-none">
<img src="http://conferencecatalysts.com/sites/conferencecatalysts.com/files/team/steven-williams-headshot_0.jpg">
</div>
</div>
<div
class="flex flex-col details--speaker">
<!-- Presentation speaker name and affiliate-->
<span class="block mb-0 text-lg font-bold">John Smith</span>
<span class="block mb-2 text-gray-600">Conference Catalysts, LLC.</span>
<!-- Presentation speaker bio-->
<p class="leading-tight">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae cum essent dicta, discessimus.</p>
</div>
</div>
</div>
<!-- Presentation Speaker -->
<div class="flex flex-col">
<div
class="flex items-center">
<!-- Presentation speaker photo-->
<div>
<div class="w-24 h-24 mr-3 overflow-hidden border-4 border-gray-400 rounded-full hover:border-gray-300 focus:border-gray-300 focus:outline-none">
<img src="http://conferencecatalysts.com/sites/conferencecatalysts.com/files/team/steven-williams-headshot_0.jpg">
</div>
</div>
<div
class="flex flex-col details--speaker">
<!-- Presentation speaker name and affiliate-->
<span class="block mb-0 text-lg font-bold">John Smith</span>
<span class="block mb-2 text-gray-600">Conference Catalysts, LLC.</span>
<!-- Presentation speaker bio-->
<p class="leading-tight">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae cum essent dicta, discessimus.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Details sidebar -->
<div
id="details--sidebar" class="flex flex-row border-b md:border-b-0 md:border-l md:w-1/3 md:flex-col tab--details--sidebar">
<!-- Presentation date and time -->
<div id="details--pres-date" class="w-1/2 p-6 md:w-full md:border-b">
<h3 class="mb-3 text-base font-bold tracking-wide uppercase">Date & Time</h3>
<span class="block mb-1">Thursday, May 7, 2020</span>
<span class="block mb-0">5:30 PM - 7:30 PM</span>
</div>
<!-- Presentation location -->
<div id="details--pres-location" class="w-1/2 p-6 md:w-full md:border-b">
<h3 class="mb-3 text-base font-bold tracking-wide uppercase">Location</h3>
<span class="block mb-0">Room 602</span>
</div>
<!-- Related tags -->
<div id="details--releated-tags" class="hidden p-6 md:block">
<h3 class="mb-3 text-base font-bold tracking-wide uppercase">Related Tags</h3>
<div>
<span class="inline-block px-2 py-1 mb-2 mr-1 text-xs font-bold tracking-wide uppercase bg-gray-200 rounded-full">Tag Name</span>
<span class="inline-block px-2 py-1 mb-2 mr-1 text-xs font-bold tracking-wide uppercase bg-gray-200 rounded-full">Tag Name</span>
<span class="inline-block px-2 py-1 mb-2 mr-1 text-xs font-bold tracking-wide uppercase bg-gray-200 rounded-full">Tag Name</span>
<span class="inline-block px-2 py-1 mb-2 mr-1 text-xs font-bold tracking-wide uppercase bg-gray-200 rounded-full">Tag Name</span>
<span class="inline-block px-2 py-1 mb-2 mr-1 text-xs font-bold tracking-wide uppercase bg-gray-200 rounded-full">Tag Name</span>
</div>
</div>
</div>
</div>
</div>
<!-- Converstation tab content -->
<div id="tab--content--conversation" x-show="openTab === 2">
<div
id="tab--conversation--main" class="p-6">
<!-- Private conversation -->
<h2 class="mb-3 text-base font-bold tracking-wide uppercase">Private Conversation</h2>
<p class="mb-6 leading-relaxed">test</p>
<p>
<!-- Private conversation -->
<h2 class="mb-3 text-base font-bold tracking-wide uppercase">Public Conversation</h2>
</p>
<p class="mb-6 leading-relaxed">test</p>
<p></p>
</div>
</div>
<div id="tab--content--nextup" class="xl:hidden" x-show="openTab === 5">
<div
id="tab--nextup--main" class="p-6">
<!-- Next up -->
<h2 class="mb-3 text-base font-bold tracking-wide uppercase">Next up</h2>
<p class="mb-6 leading-relaxed">test</p>
<p></p>
</div>
</div>
<div id="tab--content--organizers" x-show="openTab === 3">
<div
id="tab--organizers--main" class="p-6">
<!-- Session organizers -->
<h2 class="mb-3 text-base font-bold tracking-wide uppercase">Session organizers</h2>
<!-- Presentation speaker -->
<div class="flex flex-col mb-6">
<div
class="flex items-center">
<!-- Presentation speaker photo-->
<div>
<div class="w-24 h-24 mr-3 overflow-hidden border-4 border-gray-400 rounded-full hover:border-gray-300 focus:border-gray-300 focus:outline-none">
<img src="http://conferencecatalysts.com/sites/conferencecatalysts.com/files/team/steven-williams-headshot_0.jpg">
</div>
</div>
<div
class="flex flex-col details--speaker">
<!-- Presentation speaker name and affiliate-->
<span class="block mb-0 text-lg font-bold">John Smith</span>
<span class="block mb-2 text-gray-600">Conference Catalysts, LLC.</span>
<!-- Presentation speaker bio-->
<p class="leading-tight">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae cum essent dicta, discessimus.</p>
</div>
</div>
</div>
<!-- Presentaion organizers -->
<h2 class="mb-3 text-base font-bold tracking-wide uppercase">Presentation organizers</h2>
<!-- Presentation speaker -->
<div class="flex flex-col mb-6">
<div
class="flex items-center">
<!-- Presentation speaker photo-->
<div>
<div class="w-24 h-24 mr-3 overflow-hidden border-4 border-gray-400 rounded-full hover:border-gray-300 focus:border-gray-300 focus:outline-none">
<img src="http://conferencecatalysts.com/sites/conferencecatalysts.com/files/team/steven-williams-headshot_0.jpg">
</div>
</div>
<div
class="flex flex-col details--speaker">
<!-- Presentation speaker name and affiliate-->
<span class="block mb-0 text-lg font-bold">John Smith</span>
<span class="block mb-2 text-gray-600">Conference Catalysts, LLC.</span>
<!-- Presentation speaker bio-->
<p class="leading-tight">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae cum essent dicta, discessimus.</p>
</div>
</div>
</div>
</div>
</div>
<div id="tab--content--media" x-show="openTab === 4">
<div
id="tab--media--main" class="p-6">
<!-- Presentation media -->
<h2 class="mb-3 text-base font-bold tracking-wide uppercase">Presentation media</h2>
<p class="mb-6 leading-relaxed">test</p>
<p></p>
</div>
</div>
</div>
</div>
</div>
<!-- End presentation header -->
<!-- Next-up sidebar -->
<div
id="next-up" x-data="{ openTab: 1 }" class="hidden bg-gray-100 xl:w-1/4 xl:block">
<!-- Next-up tablist -->
<div class="bg-primary-500">
<ul class="flex" role="tablist">
<li :class="openTab === 1 ? 'border-tertiary-500 active active:opacity-100' : 'opacity-75'" @click="openTab = 1" class="px-6 py-3 font-bold tracking-wide text-white uppercase border-b-4 border-transparent border-opacity-100 cursor-pointer hover:opacity-100 hover:border-tertiary-500 nextup-nav-item">Live Chat</li>
<!-- Up next tab -->
<li :class="openTab === 2 ? 'border-tertiary-500 active active:opacity-100' : 'opacity-75'" @click="openTab = 2" class="px-6 py-3 font-bold tracking-wide text-white uppercase border-b-4 border-transparent border-opacity-100 cursor-pointer hover:opacity-100 hover:border-tertiary-500 nextup-nav-item">Next Up</li>
<!-- Your list tab -->
<li :class="openTab === 3 ? 'border-tertiary-500 active active:opacity-100' : 'opacity-75'" @click="openTab = 3" class="px-6 py-3 font-bold tracking-wide text-white uppercase border-b-4 border-transparent border-opacity-100 cursor-pointer hover:opacity-100 hover:border-tertiary-500 nextup-nav-item">Your List</li>
</ul>
</div>
<div class="h-full" x-show="openTab === 1">
<iframe width='100%;' height='100%' src="https://rocketchat.confcats.io/channel/general?layout=embedded" frameborder="0"></iframe>
</div>
<!-- Next-up tablist content -->
<div
x-show="openTab === 2">
<!-- Session presenations list -->
<ul>
<li class="flex flex-col p-6 text-left cursor-pointer bg-primary-700">
<span class="mb-3 font-bold tracking-wide text-gray-400 uppercase">Session</span>
<span class="text-lg font-bold leading-tight text-white">Sessions 3R: Robustness Reproducibility Replicability</span>
</li>
<li class="flex flex-col p-6 text-left border-b opacity-75 cursor-pointer hover:bg-white hover:opacity-100">
<span class="mb-3 font-bold tracking-wide text-gray-700 uppercase">9:00 AM - 9:15 AM</span>
<span class="leading-tight">On Network Science And Mutal Information For Explaining Deep Neural Networks</span>
</li>
<li class="flex flex-col p-6 text-left border-b opacity-75 cursor-pointer hover:bg-white hover:opacity-100">
<span class="mb-3 font-bold tracking-wide text-gray-700 uppercase">9:00 AM - 9:15 AM</span>
<span class="leading-tight">On Network Science And Mutal Information For Explaining Deep Neural Networks</span>
</li>
<li class="flex flex-col p-6 text-left border-b opacity-75 cursor-pointer hover:bg-white hover:opacity-100">
<span class="mb-3 font-bold tracking-wide text-gray-700 uppercase">9:00 AM - 9:15 AM</span>
<span class="leading-tight">On Network Science And Mutal Information For Explaining Deep Neural Networks</span>
</li>
<li class="flex flex-col p-6 text-left border-b opacity-75 cursor-pointer hover:bg-white hover:opacity-100">
<span class="mb-3 font-bold tracking-wide text-gray-700 uppercase">9:00 AM - 9:15 AM</span>
<span class="leading-tight">On Network Science And Mutal Information For Explaining Deep Neural Networks</span>
</li>
<li class="flex flex-col p-6 text-left border-b opacity-75 cursor-pointer hover:bg-white hover:opacity-100">
<span class="mb-3 font-bold tracking-wide text-gray-700 uppercase">9:00 AM - 9:15 AM</span>
<span class="leading-tight">On Network Science And Mutal Information For Explaining Deep Neural Networks</span>
</li>
<li class="flex flex-col p-6 text-left border-b opacity-75 cursor-pointer hover:bg-white hover:opacity-100">
<span class="mb-3 font-bold tracking-wide text-gray-700 uppercase">9:00 AM - 9:15 AM</span>
<span class="leading-tight">On Network Science And Mutal Information For Explaining Deep Neural Networks</span>
</li>
<li class="flex flex-col p-6 text-left border-b opacity-75 cursor-pointer hover:bg-white hover:opacity-100">
<span class="mb-3 font-bold tracking-wide text-gray-700 uppercase">9:00 AM - 9:15 AM</span>
<span class="leading-tight">On Network Science And Mutal Information For Explaining Deep Neural Networks</span>
</li>
<li class="flex flex-col p-6 text-left border-b opacity-75 cursor-pointer hover:bg-white hover:opacity-100">
<span class="mb-3 font-bold tracking-wide text-gray-700 uppercase">9:00 AM - 9:15 AM</span>
<span class="leading-tight">On Network Science And Mutal Information For Explaining Deep Neural Networks</span>
</li>
</ul>
</div>
<!-- Your list tab content -->
<div
id="your-list" class="" x-show="openTab === 3">
<!-- Favorited or queued presenations list -->
<ul>
<li class="flex flex-col p-6 text-left border-b opacity-75 cursor-pointer hover:bg-white hover:opacity-100">
<span class="mb-3 font-bold tracking-wide text-gray-700 uppercase">9:00 AM - 9:15 AM</span>
<span class="leading-tight">On Network Science And Mutal Information For Explaining Deep Neural Networks</span>
</li>
</ul>
</div>
</div>
</div>
Last active
August 3, 2020 23:42
-
-
Save StevenGFX/1278127e82f43f15a79450bd3f6e25dd to your computer and use it in GitHub Desktop.
ConfCats - Template - Presentation
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment