|
|
|
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=1200px, initial-scale=1.0">
|
|
<title>SingVisio: Visual Analytics of Diffusion Model for Singing Voice Conversion</title>
|
|
<script>
|
|
const baseLink = 'https://dsvc.openmmlab.org.cn';
|
|
</script>
|
|
|
|
<script src="./resources/tailwind.js"></script>
|
|
<script src="./resources/d3.v4.min.js"></script>
|
|
<script src="./resources/htl.min.js"></script>
|
|
<script src="./resources/d3-scale-chromatic.v1.min.js"></script>
|
|
<script src="./resources/d3-contour.v1.min.js"></script>
|
|
|
|
<script src="./resources/driver.js.iife.min.js"></script>
|
|
<link rel="stylesheet" href="./resources/driver.min.css">
|
|
|
|
<script type="module">
|
|
import cfg from "./tailwind.config.js";
|
|
tailwind.config = cfg;
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer components {
|
|
.btn-small {
|
|
@apply px-3 py-2 text-xs font-medium text-center text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700
|
|
}
|
|
.btn {
|
|
@apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800;
|
|
}
|
|
.btn-sec {
|
|
@apply py-2.5 px-5 mr-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700
|
|
}
|
|
.select-select {
|
|
@apply my-0 py-2 px-1 bg-gray-50 border border-gray-300 text-gray-900 text-xs rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500
|
|
}
|
|
.select-label {
|
|
@apply block text-sm font-medium text-gray-900 dark:text-white;
|
|
}
|
|
.card {
|
|
@apply p-6 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700
|
|
}
|
|
.card-title {
|
|
@apply mb-2 text-base font-bold tracking-tight text-gray-900 dark:text-white
|
|
}
|
|
.timeline-point {
|
|
@apply absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700
|
|
}
|
|
.timeline-title {
|
|
@apply text-lg font-semibold text-gray-900 dark:text-white
|
|
}
|
|
.timeline-subtitle {
|
|
@apply text-base font-normal text-gray-500 dark:text-gray-400
|
|
}
|
|
.small-input {
|
|
@apply block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;
|
|
}
|
|
.checkbox {
|
|
@apply w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600
|
|
}
|
|
.dropdown_button_text {
|
|
@apply w-full text-xs font-normal text-gray-900 dark:text-white text-left
|
|
}
|
|
.dropdown_button {
|
|
@apply btn-sec text-xs flex items-center w-full px-2 py-2 my-0 disabled:cursor-not-allowed disabled:opacity-50
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
input.step-axis {
|
|
outline: none;
|
|
-webkit-appearance: none;
|
|
background: #0000002b;
|
|
height: 8px;
|
|
}
|
|
|
|
input.step-axis::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
position: relative;
|
|
width: 18px;
|
|
height: 18px;
|
|
background: url("./img/syllable.png") no-repeat;
|
|
background-size: 18px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
audio {
|
|
outline: none;
|
|
height: 34px;
|
|
}
|
|
|
|
|
|
.inputs {
|
|
display: block;
|
|
width: 100%;
|
|
height: 10px;
|
|
|
|
}
|
|
|
|
.inputs input {
|
|
position: absolute;
|
|
}
|
|
|
|
.inputs input::-webkit-slider-thumb {
|
|
pointer-events: all;
|
|
z-index: 2;
|
|
}
|
|
|
|
.inputs input::-webkit-slider-runnable-track {
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-gray-100 dark:bg-gray-900">
|
|
<div id="alert"
|
|
class="hidden fixed top-0 right-0 left-0 z-50 w-full h-[100vh] bg-black bg-opacity-50 justify-center items-center overflow-y-hidden">
|
|
<div class="card flex flex-col min-w-[400px] max-w-2xl max-h-[80vh] p-0 overflow-hidden">
|
|
|
|
<div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
|
|
<h3 id="alert_title" class="text-xl font-semibold text-gray-900 dark:text-white">
|
|
Title
|
|
</h3>
|
|
<button id="close_alert" type="button"
|
|
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white">
|
|
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
|
|
viewBox="0 0 14 14">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
|
|
</svg>
|
|
<span class="sr-only">Close modal</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="alert_text"
|
|
class="p-4 md:p-5 space-y-4 text-base leading-relaxed text-gray-700 dark:text-gray-200 overflow-y-auto">
|
|
Text
|
|
</div>
|
|
|
|
<div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
|
|
<button id="finish_alert" type="button"
|
|
class="ml-auto text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white dark:bg-gray-800 w-full py-4 px-6 border border-b border-gray-200 dark:border-gray-600">
|
|
<div class="mx-auto max-w-[1490px] grid grid-cols-6 align-center items-center">
|
|
|
|
|
|
<span class="col-span-1"></span>
|
|
<span id="title" class="col-span-4 mx-auto font-[800] text-[20px] dark:text-white">SingVisio: Visual
|
|
Analytics of Diffusion Model for Singing Voice Conversion</span>
|
|
|
|
|
|
<div class="flex">
|
|
<button class="btn-small ml-auto" id="mode_change">Switch to _</button>
|
|
<button class="btn-small ml-2" id="help">Help?</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="max-w-[1500px] m-auto">
|
|
<div class="flex flex-row items-start gap-0.5 py-3 p-1">
|
|
<div class="w-[300px] flex flex-col flex-none">
|
|
<div id="performance" class="card p-2 mb-2 flex flex-col flex-none relative">
|
|
<button class="absolute right-1 top-1 btn-small px-1.5 py-0.5 ml-auto rounded-full"
|
|
id="metrics_help">?</button>
|
|
<div class="flex flex-row">
|
|
<div id="histogram" class="flex-none"></div>
|
|
<div id="histogram2" class="flex-none"></div>
|
|
</div>
|
|
<span class="text-[12px] mx-auto dark:text-white">Metrics</span>
|
|
</div>
|
|
|
|
<div id="touch_map" class="card p-2 relative">
|
|
<button class="absolute right-1 top-1 btn-small px-1.5 py-0.5 ml-auto rounded-full"
|
|
id="projection_help">?</button>
|
|
<div class="flex mb-1 align-center items-center space-between dark:text-white">
|
|
<div class="ml-1 text-sm">Step: <span id="current_step_display_number"></span></div>
|
|
<div class="ml-auto flex mr-2">
|
|
<button class="btn-sec h-9 w-9 p-2.5 mb-0" id="reset_map">
|
|
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
|
|
fill="none" viewBox="0 0 18 20">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="dataviz_axisZoom" class="flex flex-wrap border bg-white dark:bg-gray-800 relative"></div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full">
|
|
<div id="step_preview" class="flex min-w-[500px] w-full bg-white dark:bg-gray-800 p-2 card mb-2">
|
|
<div class="mx-auto" id="preview_container">
|
|
</div>
|
|
<div class="mx-auto" id="preview_container2">
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<button class="btn-sec" id="refreshpreview">
|
|
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
|
|
viewBox="0 0 18 20">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="mel_card_container" class="grid grid-cols-3 min-w-[915px] w-full gap-1 justify-items-center">
|
|
</div>
|
|
<div id="tips">
|
|
</div>
|
|
<div id="tooltip" role="tooltip"
|
|
class="invisible absolute z-10 inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-[0.9] dark:bg-gray-700">
|
|
Tooltip content
|
|
</div>
|
|
</div>
|
|
<div class="shrink-0 w-[180px]">
|
|
|
|
<div class="card py-2 px-3 relative">
|
|
<button class="absolute right-1 top-1 btn-small px-1.5 py-0.5 ml-auto rounded-full"
|
|
id="control_help">?</button>
|
|
<div class="flex items-center">
|
|
<h5 class="card-title my-1 text-lg">Control Panel</h5>
|
|
</div>
|
|
<div class="flex flex-col w-full rounded-lg gap-0.5" id="control_panel">
|
|
<div>
|
|
<label for="mode_id" class="select-label">Display Mode</label>
|
|
<select id="mode_id" class="select-select"></select>
|
|
</div>
|
|
<div>
|
|
<label for="sourcesinger_id" class="select-label">Source Singer</label>
|
|
<button id="sourcesinger_id" class="dropdown_button" type="button">
|
|
<span class="dropdown_button_text" id="sourcesinger_id_text">Choose Singer</span> <svg
|
|
class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
|
|
fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2" d="m1 1 4 4 4-4" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div id="sourcesinger_id_dropdown"
|
|
class="absolute z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="song_id" class="select-label">Song</label>
|
|
<button id="song_id" class="dropdown_button" type="button">
|
|
<span class="dropdown_button_text" id="song_id_text">Choose Song</span> <svg
|
|
class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
|
|
fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2" d="m1 1 4 4 4-4" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div id="song_id_dropdown"
|
|
class="absolute z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="target_id" class="select-label">Target Singer</label>
|
|
<button id="target_id" class="dropdown_button" type="button">
|
|
<span class="dropdown_button_text" id="target_id_text">Target Singer</span> <svg
|
|
class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
|
|
fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2" d="m1 1 4 4 4-4" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div id="target_id_dropdown"
|
|
class="absolute z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="relative">
|
|
<label for="pic_id" class="select-label">Projection Embedding</label>
|
|
<select id="pic_id" class="select-select"></select>
|
|
</div>
|
|
<div class="relative" id="components">
|
|
<label for="components" class="select-label">Components</label>
|
|
<div class="flex flex-col gap-0.5">
|
|
<div class="flex items-center">
|
|
<input id="components_pitch" type="checkbox" checked class="checkbox">
|
|
<label for="components_pitch"
|
|
class="ml-1 text-[0.775rem] font-normal text-gray-900 dark:text-gray-300">F0
|
|
contour</label>
|
|
</div>
|
|
<div class="flex items-start">
|
|
<input id="components_frequncy" type="checkbox" checked class="checkbox">
|
|
<div class="flex flex-col gap-0.5 grow">
|
|
<label for="components_frequncy"
|
|
class="ml-1 mb-1 text-[0.775rem] font-normal text-gray-900 dark:text-gray-300">Frequency</label>
|
|
<div class="flex inputs w-full">
|
|
<input id="inputs_min" type="range"
|
|
class="h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
|
|
value="0" min="0">
|
|
<input id="inputs_max" type="range"
|
|
class="h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
|
|
value="100" max="100">
|
|
</div>
|
|
<div class="flex w-full">
|
|
<span id="inputs_left" class="ml-1 mr-auto text-[0.7rem] font-normal text-gray-900 dark:text-white">0</span>
|
|
<span id="inputs_right" class="mr-2 ml-auto text-[0.7rem] font-normal text-gray-900 dark:text-white">100</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start">
|
|
<input id="sampling_steps" type="checkbox" class="checkbox">
|
|
<div class="flex flex-col grow">
|
|
<label for="sampling_steps"
|
|
class="ml-1 text-[0.775rem] font-normal text-gray-900 dark:text-gray-300">Sampling
|
|
steps</label>
|
|
<div class="flex flex-row h-[32px]">
|
|
<span class="my-auto mx-1 text-[0.775rem] font-normal text-gray-900 dark:text-white">Step count:</span>
|
|
<input type="text"
|
|
class="small-input flex-none w-[50px] text-center bg-white dark:bg-gray-800"
|
|
id="sampling_num" value="100">
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="step_axis">
|
|
<label for="range" class="select-label">Step Axis</label>
|
|
|
|
<div
|
|
class="items-center w-full rounded-lg bg-gray-50 flex flex-row gap-2 px-2 py-0.5 border border-gray-300 dark:border-gray-600 dark:text-white dark:bg-gray-700">
|
|
|
|
<input class="step-axis my-2 w-full" id="range" type="range" min="0" max="999" value="0"
|
|
step="1">
|
|
<button class="btn-small" id="controls">
|
|
<svg id="icon_play" style="display: none" class="w-3 h-3" aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 14 16">
|
|
<path
|
|
d="M0 .984v14.032a1 1 0 0 0 1.506.845l12.006-7.016a.974.974 0 0 0 0-1.69L1.506.139A1 1 0 0 0 0 .984Z" />
|
|
</svg>
|
|
<svg id="icon_stop" class="w-3 h-3" aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 12 16">
|
|
<path
|
|
d="M3 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm7 0H9a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Z" />
|
|
</svg>
|
|
</button>
|
|
|
|
</div>
|
|
<div class="flex gap-1 mt-2">
|
|
<span class="my-auto mr-1 text-sm font-medium text-gray-900 dark:text-white">Step:</span>
|
|
<input type="text"
|
|
class="small-input flex-none w-[60px] text-center bg-white dark:bg-gray-800" id="value">
|
|
<button class="btn-small" id="add_preview">
|
|
Pin
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="./resources/init.js"></script>
|
|
<script src="./resources/function.js"></script>
|
|
<script src="./resources/event.js"></script>
|
|
<script>
|
|
initConfig('./config/default.json')
|
|
</script>
|
|
</body> |
