| |
| |
| |
| |
|
|
|
|
| <!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> |
