Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update SingVisio Code #264

Merged
merged 2 commits into from
Aug 21, 2024
+1,400 βˆ’418
Merged

Update SingVisio Code #264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8021f15
Update SingVisio Code
yuantuo666 Aug 21, 2024
729d73a
fix: black format
yuantuo666 Aug 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions visualization/SingVisio/webpage/Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,17 @@ FROM python:3.10

WORKDIR /app

COPY . .
COPY resources ./resources
COPY img ./img
COPY index.html ./index.html
COPY server.py ./server.py
COPY config ./config

RUN pip install numpy scikit-learn flask flask_cors gunicorn -i https://pypi.tuna.tsinghua.edu.cn/simple

EXPOSE 8000

ENTRYPOINT [ "python -m http.server 8000" ]
ENTRYPOINT ["gunicorn", "-w", "8", "-b", "0.0.0.0:8000", "server:app"]

# docker build -t diffsvc .
# docker run -v $(pwd)/data:/app/data -p 8000:8000 diffsvc
# docker build -t singvisio .
# docker run -v $(pwd)/data:/app/data -p 8000:8000 singvisio
185 changes: 103 additions & 82 deletions visualization/SingVisio/webpage/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,105 +1,126 @@
## SingVisio Webpage

This is the source code of the SingVisio Webpage. This README file will introduce the project and provide an installation guide.
This is the source code for the SingVisio Webpage. This README file will introduce the project and provide an installation guide.

### Tech stack
### Tech Stack

- [Tailwind CSS](https://tailwindcss.com/)
- [Flowbite](https://flowbite.com/)
- [D3.js](https://d3js.org/)
- [Driver.js](https://driverjs.com/)


### Structure

- `index.html`: entry point file
- `config`: JSON file loaded in `index.html`
- `img`: image files
- `resources`: CSS style and JavaScript files
- `init.js`: load config and initialize variables
- `function.js`: functions used in this project
- `event.js`: bind webpage mouse and keyboard events to function

- `index.html`: The entry point file.
- `config`: Contains JSON configuration files loaded by `index.html`.
- `img`: Image files.
- `resources`: Contains CSS styles and JavaScript files.
- `init.js`: Loads the configuration and initializes variables.
- `function.js`: Houses the functions used in this project.
- `event.js`: Binds webpage mouse and keyboard events to functions.
- `Dockerfile`: For building a Docker image if deployment is needed.

### Configuration

Before installation, the data path must be configured in the file `config/default.json`.

```json
{
"pathData": {
"<mode_name>": { // support multiple modes
"multi": ["<id>"], // song_id, sourcesinger_id, or target_id. Set false to disable. Enable multiple choice for the configed checkbox.
"curve": true, // set true if need the metric curve
"referenceMap": { // config reference path when enable multiple choice.
"<sourcesinger_id>": [ // e.g. m4singer_Tenor-6
"<path_to_wav>", // e.g. Tenor-6_ε―‚ε―žζ²™ζ΄²ε†·_0002
]
},
"data": [
{ // support multiple datasets
"dataset": "<dataset_name>",
"basePath": "<path_to_the_processed_data>",
"pathMap": {
"<sourcesinger_id>": {
"songs": [
"<song_id>" // set song id, support multiple ids
],
"targets": [
"<target_id>" // set target singer id, support multiple ids
]
Before installation, you need to configure the data path in the `config/default.json` file.

To better understand our project, please note that this configuration pertains to our pre-processed data. If you want to visualize your own data, you can follow the guide below to properly set up the system.

1. **Update the Data Configuration** in the `config/default.json` file.

SingVisio will read the configuration from this JSON file and render the webpage. Be aware that any errors in the JSON file may cause the system to shut down.

```json
{
"pathData": {
"<mode_name>": { // supports multiple modes
"users": ["basic", "advanced"], // mode choice: "basic" or "advanced"
"multi": ["<id>"], // song_id, sourcesinger_id, or target_id. Set to false to disable. Enables multiple choices for the configured checkbox.
"curve": true, // set to true if the metric curve is needed
"referenceMap": { // configures reference paths when multiple choices are enabled.
"<sourcesinger_id>": [ // e.g., m4singer_Tenor-6
"<path_to_wav>", // e.g., Tenor-6_ε―‚ε―žζ²™ζ΄²ε†·_0002
]
},
"data": [
{ // supports multiple datasets
"dataset": "<dataset_name>",
"basePath": "<path_to_the_processed_data>",
"pathMap": {
"<sourcesinger_id>": {
"songs": [
"<song_id>" // set song ID; supports multiple IDs
],
"targets": [
"<target_id>" // set target singer ID; supports multiple IDs
]
}
}
}
}
}
]
}
},
"mapToName": {
"<map_from>": "<map_to>"
},
"mapToSong": {
"<map_from>": "<map_to>"
},
"mapToSpace": {
"<map_from>": "<map_to>"
},
"picTypes": [
"<pic_type>" // support multiple types
],
"evaluation_data": [
{ // support multiple data
"target": "<target_id>",
"sourcesinger": "<sourcesinger_id>",
"song": "<song_id>",
"best": [
"<best_metric>" // activate this when click which metric
]
]
}
},
],
"colorList": [
"<color_hex_code>"// support multiple colors
],
"histogramData": [
{ // displayed at top left graph
"type": "high", // high or low. high: the higher, the better.
"name": "<mertic_name>",
"value": <metric_value>
}
]
}
```

"mapToName": {
"<map_from>": "<map_to>"
},
"mapToSong": {
"<map_from>": "<map_to>"
},
"mapToSpace": {
"<map_from>": "<map_to>"
},
"picTypes": [
"<pic_type>" // supports multiple types
],
"evaluation_data": [
{ // supports multiple data sets
"target": "<target_id>",
"sourcesinger": "<sourcesinger_id>",
"song": "<song_id>",
"best": [
"<best_metric>" // activated when clicking the respective metric
]
},
],
"colorList": [
"<color_hex_code>" // supports multiple colors
],
"histogramData": [
{ // displayed in the top left graph
"type": "high", // "high" or "low"; "high" means the higher, the better
"name": "<metric_name>",
"value": <metric_value>
}
]
}
```

2. **Change the Data Source Path**

The total size of our pre-processed data is approximately 60-70 GB. We provide an online host server, and the server path (`baseLink`) can be modified in the `index.html` file on line 15.

If you prefer to host the data on your local computer, you can set the `baseLink` value to an empty string as shown below. This will direct the server to read data from your local `data` folder.

```html
<script>
const baseLink = ''; // do not end with '/'
</script>
```

### Installation

This project does not need to be built. There are multiple ways to run this project. Here, we will introduce the simplest way:
This project does not require a build process. There are multiple ways to run it, but here we introduce the simplest method:

1. Install Python and run the following code to start the HTTP server:
1. Install Python 3.10 and required packages.
```bash
pip install numpy scikit-learn flask flask_cors gunicorn
```

```bash
cd webpage
python -m http.server 8080
```
2. Run the following command to start the HTTP server:

2. After starting the web server, enter the link in the browser: [http://localhost:8080/](http://localhost:8080/)
```bash
cd webpage
gunicorn -w 8 -b 0.0.0.0:8080 server:app
```

3. After starting the HTTP web server, open the following link in your browser: [http://localhost:8080/](http://localhost:8080/)
73 changes: 39 additions & 34 deletions visualization/SingVisio/webpage/config/default.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"pathData": {
"Step Comparison": {
"users": ["basic", "advanced"],
"multi": false,
"data": [
{
Expand Down Expand Up @@ -75,7 +76,42 @@
}
]
},
"Metric Comparison": {
"users": ["basic", "advanced"],
"multi": false,
"curve": true,
"data": [
{
"dataset": "SVCC",
"basePath": "data/ev_best",
"pathMap": {
"SM1": {
"songs": [
"30009"
],
"targets": [
"svcc_IDM1"
]
},
"SF1": {
"songs": [
"30005",
"30006",
"30009",
"30016",
"30022",
"30019"
],
"targets": [
"svcc_IDF1"
]
}
}
}
]
},
"Source Singer Comparison": {
"users": ["advanced"],
"multi": [
"sourcesinger_id"
],
Expand Down Expand Up @@ -149,7 +185,8 @@
}
]
},
"Song comparison": {
"Song Comparison": {
"users": ["advanced"],
"multi": [
"song_id"
],
Expand Down Expand Up @@ -183,6 +220,7 @@
]
},
"Target Singer Comparison": {
"users": ["advanced"],
"multi": [
"song_id",
"target_id"
Expand Down Expand Up @@ -225,39 +263,6 @@
}
}
]
},
"Metric Comparison": {
"multi": false,
"curve": true,
"data": [
{
"dataset": "SVCC",
"basePath": "data/ev_best",
"pathMap": {
"SM1": {
"songs": [
"30009"
],
"targets": [
"svcc_IDM1"
]
},
"SF1": {
"songs": [
"30005",
"30006",
"30009",
"30016",
"30022",
"30019"
],
"targets": [
"svcc_IDF1"
]
}
}
}
]
}
},
"mapToName": {
Expand Down
Loading
Loading